当前位置：网站首页>First acquaintance with the web

First acquaintance with the web

2022-07-30 02:51:00 【Only envious of mandarin ducks, not immortals】

一、webSimple cognition of application

1、web应用

represented by the website,包含手机app等,The current common application system

完成web应用开发=After developing a lot of things, they are logically related to each otherweb资源

web资源=唯一标识符（URL/网址）、不同的内容类型（文本,图片,视频...）、different generation methods（动态vs静态） That is to say, it is stored on other hosts in the network(Include own host)上的一些文件

2、webmore important resources3个类型

Expresses the structure of the document HTML

Express what the document looks like CSS

Make the front end logical JavaScript

3、利用SpringBoot搭建开发环境 +使用chorme开发工具

The server starts on your own computer,所以ip地址就是环回地址(一般就是127.0.0.1)或者使用域名(localhost->127.0.0.1)

TomcatUsually starts at 8080端口上(May be if the startup fails8080端口被占用了)

在浏览器输入127.0.0.1:8080即可访问

启动之后,使用浏览器访问

4、解决idea在创建spring initializerinaccessible workaround

可以使用http://start.springboot.io/替代

也可以使用 https://start.aliyun.com/替代

二、HTML、CSS、JS

1、HTML

（Hyper Text Markup Language 超文本标记语言）

逻辑上对文本进行标记,Turn ordinary text into hypertext

Tagged with tags <标签名称> The marked text content </标签名称>

例如：

<h1>你好</h1> h1:是一级标题

<p>世界</p> p：是段落标签

<标签名称属性名称1="属性的值" 属性名称2="属性的值">内容</标签名称>

<h1 id="hello"> 你好 </h1> <p class="first" id="world" data-name="nothing"> 世界 </p>

Some tags only have start tags,没有结束标签.Such tags express their function through attributes

<标签名称属性1="..." 属性2="...">

这里推荐一个网站 MDN Web Docs 对于HTML的介绍比较详细

2、简单的HTML页面

HTML页面的基本结构,It can be understood in terms of tree structure

<html> 整个HTML文档的根元素

<head> Some meta information about the document(描述文档,But generally not visible）

<meta charset="utf-8"> Describes the character set encoding used by this document

<title>Title</title> Describes the title of the document,显示在浏览器的标签页上

<body> About the main body of this document(It is the page information that can be seen in the browser)

chrome The developer tools of the browser's web page are often used(ctrl+shift+l)

3、标签的介绍

标题标签 h1—h6

段落标签: p

在HTML文档中,默认模式下,空格(and the tab key\rt,回车),No matter how many are counted as one

Therefore, we need to use it according to the design requirementspTags divide paragraphs

换行标签: br

br是break的缩写.表示换行.
●br是一个单标签(不需要结束标签)
●br标签不像p标签那样带有一个很大的空隙

●<br/>是规范写法.不建议写成<br>

格式化标签

加粗: strong 标签和 b 标签

倾斜: em 标签和 i 标签

删除线: del 标签和 s 标签

下划线: ins 标签和 u 标签

注意：在HTML默认情况下,Some labels are self-contained(It is an independent piece in itself,behave as a newline)

比如说：h标签,p标签 Such elements are called block-level elements

And some tags are part of this line,典型的strong,em,del,ins Such elements are called inline elements

多媒体标签

<img> 图片 <audio> 音频 <video> 视频

<img src="图片资源的路径" alt="图片的描述信息">

超链接

<a> anchor

<a href="资源路径">显示内容</a>

表 <table>

Simple use of table structures

列表标签

有序列表 <ol> 无序列表 <ul> 列表元素 <li>

自定义列表

HTML小结

小操作

练习代码
web1: webSimple use and practice of the app - Gitee.comhttps://gitee.com/ren-xiaoxiong/web1/tree/master/src/main/resources/static

版权声明
本文为[Only envious of mandarin ducks, not immortals]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/211/202207300246234077.html

边栏推荐

猜你喜欢

随机推荐