》【编辑器的准备】

常用开发工具：Sublime Text、webstorm、HBuilderX、VScode

VScode插件分享：

  1. 适用于 VS Code 的中文（简体）语言包：
    Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
  2. 自动重命名标签：自动重命名配对的 HTML/XML 标记，与 Visual Studio IDE 相同。
    Auto Rename Tag
  3. 用于在浏览器中查看 html 文件，右击即可使用。
    View In Browser
  4. 实时服务器：启动具有静态和动态页面实时重新加载功能的开发本地服务器。
    Live Server

》【文档声明与字符编码】

创建一个HTML文件，输入英文感叹号!后回车可自动生成模板：

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
  • <!DOCTYPE ***>：文档声明标签，用来指定HTML的标准，默认是最新的HTML5。
  • <html lang="***">：表明HTML包含的语言，用于告诉浏览器。

    en代表英文，zh-CN代表中文，ja-jp代表日文。

  • <meta charset="***">：表明HTML的字符集，可以理解为编码方式。

    ASCII美国信息交换标准代码，ISO-8859-1拉丁字母表的字符编码，GB2312汉字编码字符集，UTF-8Unicode万国码字符编码（基本包含地球所有国家的语言）。

  • <meta name="viewport" content="***">：写移动端页面的时候会用到。

    viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。

    1
    <meta name="viewport"   content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    viewport 标记，用于指定用户是否可以缩放Web页面，并对相关的选项进行设定。
    width 和 height 指令分别指定视区的逻辑宽度和高度。它们的值可以是以像素为单位的数字，也可以是一个特殊的标记符号。如上文代码中device-width即表示，视区宽度应为设备的屏幕宽度。类似的，device-height即表示设备的屏幕高度。
    initial-scale 用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异，通常情况下，设备会在浏览器中呈现出整个Web页面。设为1.0则显示未经缩放的Web页面。
    maximum-scale 和 minimum-scale 用于设置用户对于Web页面缩放比例的限制。值的范围为0.25~10.0之间
    user-scalable 指定用户是否可以缩放视区，即缩放Web页面的视图。值为yes时允许用户进行缩放，值为no时不允许缩放。

》【HTML常用标签】

Web语义化

  1. 代码结构清晰,易于阅读,利于开发和维护
  2. 提高用户体验,在样式加载失败时,页面结构清晰
  3. 方便其他设备解析(如屏幕阅读器)根据语义渲染网页。
  4. 有利于搜索引擎优化(SEO),搜索引擎爬虫会根据不同的标签来赋予不同的权重

文本标题（h1~h6）

自带加粗，有自己的文本大小，独占一行，有默认间距。

【点击这里在线演示】

1
2
3
4
5
6
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

段落文本（p）

标识一个段落，段落之间有间距。

换行（br）

空标记，强制换行。

水平线（hr）

空标记。

加粗标记（推荐strong）

1
2
<b>加粗内容</b>
<strong>强调的内容</strong>

倾斜标签（推荐em）

1
2
<i>倾斜文本</i>
<em>强调文本</em>

删除标签（推荐del）

1
2
<s>删除文本</s>
<del>删除文本</del>

下划线和上下标

1
2
3
<u>下划线文本</u>
<sup>上标</sup>
<sub>下标</sub>

》【特殊符号】

  1. 尖角号：&lt;左尖角号，&gt;左尖角号
  2. 空格：&nbsp;占据的宽度受字体影响明显而强烈；&emsp;宽度正好是一个中文宽度，基本不受字体影响。
  3. 版权：&copy;©
  4. 商标：&trade;™（商标申请中），&reg;®（已注册商标）
  5. 表情：&#128512;😀，&#128513;😁，&#128514;😂

》【div和span标签】

div标签没有具体含义，作为容器（盒子），用于划分页面区域，默认独占一行。

span标签没有实际意义，主要应用于对文本独立修饰，宽度随内容变化。

》【列表-有序列表】

有序列表ol有几个属性：

  1. type属性默认是1，还可以是a，A，i，I
  2. start属性只能是一个数字，设置开始的序号

【点击这里在线演示】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<ol>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

》【列表-无序列表】

有序列表ol属性：

  1. type属性默认是disc实心点，还可以是circle空心圆，square实心正方形，none取消显示

【点击这里在线演示】

1
2
3
4
5
6
7
8
9
<ul>
    <li>无序列表</li>
    <li>无序列表</li>
</ul>

<ul type="circle">
    <li>无序列表</li>
    <li>无序列表</li>
</ul>

VScode快捷写法：

输入以下内容并回车
<ul>
    li{11111}
</ul>

输入以下内容并回车
ul>li

输入以下内容并回车
ul>li*3

输入以下内容并回车
ul>li{aaaaa}*3

》【列表-自定义列表】

自定义列表不仅仅是一列项目，而是项目及其注释的组合，多常见于图文混排的情况。

  1. <dl>定义列表
  2. <dt>自定义列表项目
  3. <dd>定义自定列表项的描述
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<dl>
    <dt>可以是文字也可以是图</dt>
    <dd>相关文字</dd>
</dl>

<dl>
    <dt>可以是文字也可以是图</dt>
    <dd>相关文字</dd>
</dl>

<dl>
    <dt>可以是文字也可以是图</dt>
    <dd>相关文字</dd>
    <dt>可以是文字也可以是图</dt>
    <dd>相关文字</dd>
    <dd>相关文字</dd>
    <dd>相关文字</dd>
    <dd>相关文字</dd>
    <dt>可以是文字也可以是图</dt>
    <dd>相关文字</dd>
</dl>

VScode快捷写法：

输入以下内容并回车
dl>dt+dd

输入以下内容并回车
dl>dt{1111}+dd{222}

》【图片标签路径】

绝对路径（硬盘存入路径，很少使用）

1
<img src="E:/test/img/image.jpg">

相对路径（相对于HTML文件的路径）

1
2
3
4
5
6
同一级目录（./）当前路径两种写法
<img src="image.jpg">
<img src="./image.jpg">

上一级目录（../）
<img src="../img/image.jpg">

》【图片标签属性】

  1. src：图片路径
  2. title：鼠标悬停上去之后的提示信息
  3. alt：图片不显示之后（加载失败）的提示信息
  4. width和height：宽度和高度，只设置一个则会等比例缩放

》【超链接标签】

实现不同页面的跳转

1
<a href="路径" title="鼠标悬停上去之后的提示信息" target="">内容</a>

Target属性：规定在何处打开文档：

  1. target="_self"默认值
  2. target="_blank"新窗口打开

》【table表格的基本结构】

<table>表格，<tr>表示行，<td>表示单元格。

【点击这里在线演示】

1
2
3
4
5
6
7
8
9
10
11
<table>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>

        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
</table>

VScode快捷写法：

分别输入以下内容并回车
table>tr>td

table>tr>td*2

table>tr*2>td*2
等同于
table>(tr>td*2)*2

》【table表格的相关属性】

表格table属性：

  1. 宽度width，支持px，也支持百分比（相对于父元素）
  2. 高度height，也支持百分比（父元素需设定好高度）
  3. 边框border
  4. 边框颜色bordercolor
  5. 背景颜色bgcolor
  6. 水平对齐align="left或center或right"，表格的位置，不是单元格里面内容的位置
  7. cellspacing="单元格之间的间距"
  8. cellpadding="单元格与内容的空隙"

行tr属性：

  1. 高度height，没有宽度的设置，宽度无效
  2. 背景颜色bgcolor
  3. 文字水平对齐align="left或center或right"
  4. 文字垂直对齐valign="top或middle或bottom"

单元格td属性

  1. 宽度width，影响整列的宽度
  2. 高度height，影响整行的高度
  3. 背景颜色bgcolor
  4. 文字水平对齐align="left或center或right"
  5. 文字垂直对齐valign="top或middle或bottom"

》【table表格的合并】

表格合并列

给“td单元格”加属性：colspan="合并的列数"，表示列的跨度

表格合并行

给“td单元格”加属性：rowspan="合并的行数"，表示行的跨度

》【表单标签】

作用：手机用户的信息。

1
2
3
<form method="get或post" action="向何处发送表单数据（后端地址）">
    <input />
</form>

输入框input的几个常见类型：

  1. 文本框 type="text"，密码框type="password"
  2. 提交框 type="submit"，和<button>提交按钮<button>一样
  3. 按钮框 type="button"，单纯的按钮，比如后期可以添上JS用来校验用户名和密码符不符合格式。
  4. 重置框 type="reset"，清空的效果

输入框input的几个属性：

  1. placeholder：描述输入字段预期值的简短的提示信息。
  2. name：必须设置，否则在提交表单时，该输入框的数据不会发送给服务器。
  3. value属性规定 <input> 元素的值

value 属性对于不同 input 类型，用法也不同：

  • 对于 “button”、”reset”、”submit” 类型 - 定义按钮上的文本
  • 对于 “text”、”password”、”hidden” 类型 - 定义输入字段的初始（默认）值
  • 对于 “checkbox”、”radio”、”image” 类型 - 定义与 input 元素相关的值，提交表单时会发送到表单的 action URL。

注意：value 属性对于 <input type="checkbox"> 和 <input type="radio"> 是必需的。

注意：value 属性不适用于 <input type="file">。

两种method的区别

Form当中method的post和get的区别？

  1. get是从服务器上获取数据，post是向服务器传送数据。
  2. get是把参数数据队列加到提交表单的action属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到；
    post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML header内一起传送到action属性所指的URL地址，用户看不到这个过程。
  3. 对于get方式，服务器端用Request QueryString获取变量的值，对于post方式，服务器端用Request Form获取提交的数据。
  4. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4（Internet Information Service 互联网信息服务）中最大量为80KB，IIS5中为100KB。
  5. get安全性非常低，post安全性较高。但是get执行效率却比post方法好。

特别感谢：