HTML

1.1 概述

HTML（Hyper Text Markup Language，超文本标记语言）是一种标记语言，用于设计和编辑网页。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的 Internet 资源连接为一个逻辑整体。HTML 文本是由 HTML 命令组成的描述性文本，HTML 命令可以说明文字、图形、动画、声音、表格、链接等。

HTML 文件是一种纯文本文件，可以使用各种文本编辑器打开或创建。每个网页都是一个 HTML 文档，使用浏览器访问一个链接（URL），实际上就是下载、解析和显示 HTML 文档的过程。将众多HTML文档放在一个文件夹中，然后提供对外访问权限，就构成了一个网站。

HTML 不是编程语言，没有逻辑处理能力，没有计算能力，不能动态地生成内容，而只能静态地展示网页信息。HTML 通过不同的标签来标记不同的内容、格式、布局等，例如：<img> 标签表示一张图片；<a> 标签表示一个链接；<table> 标签表示一个表格；<input> 标签表示一个输入框；<p> 标签表示一段文本；<strong> 或<b>标签表示文本加粗效果；<div> 标签表示块级布局。

1.2 发展史

• HTML 1.0 在 1993 年 6 月作为互联网工程工作小组（IETF）工作草案发布（并非标准）
• HTML 2.0 —— 1995 年 11 月作为 RFC 1866 发布，在 RFC 2854 于 2000 年 6 月发布之后被宣布已经过时
• HTML 3.2 —— 1997 年 1 月 14 日，W3C 推荐标准
• HTML 4.0 —— 1997 年 12 月 18 日，W3C 推荐标准
• HTML 4.01（微小改进）—— 1999 年 12 月 24 日，W3C 推荐标准
• HTML 5 —— 2014 年 10 月 29 日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。是目前最为流行的版本，提供了很多标签新特性，现代大多数浏览器已经具备了 HTML 5 的支持。

W3C 是万维网联盟（World Wide Web Consortium，W3C），又称 W3C 理事会。1994 年 10 月在麻省理工学院计算机科学实验室成立。建立者是万维网的发明者蒂姆·伯纳斯-李，负责制定web相关标准的制定。

1.3 开发环境：Visual Studio Code (VS Code)

VS Code

1.4 基本结构

1.5 基本标签

1.5.1 标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

1.5.2 段落标签

<p>abc</p>
<p>xyz</p>

1.5.3 换行标签

<p>abc<br>
xyz</p>

1.5.4 设置边距样式

安装live server插件，右下角点击。

页面右击，选择检查。


在element.style写入

margin 5px #margin表示外边距，px表示像素
border 6px solid #border表示边框，solid表示实线
padding 7px #padding表示内边距

表现结果如下：

margin 5px 
border 6px dashed #dashed表示虚线，coral表示颜色
padding 7px 

表现结果如下：

1.5.5 水平线标签

<hr>

1.5.6 字体样式标签

1.5.7 注释和特殊符号

注释：<!-- -->

特殊符号	语法	示例
空格	 	monkey brother：monkey brother
大于号（>）	>	2 > 1：2 > 1
小于号（<）	&lt;	2 &lt; 3：2 < 3
引号（"）	&quot;	&quot;monkey brother&quot;："monkey brother"
版权符号（©）	&copy;	&copy; xkc： © xkc

nbsp = Non-Breaking Space
gt = Great than
lt = Less than

例：

1.5.8 图像标签

例：

1.5.9 链接标签

注意：添加外链时，务必设置 rel=“noopener noreferrer”

例：

锚链接

<p id="hello">Hello</p>
<a href="#hello">To Hello</a>
<a href="b.html#hello">To Hello</a>

例：

功能性链接

<a href="tel: 13500000000">联系我们</a>
<a href="mailto: xx@hotmail.com">E-Mail</a>

例：

1.5.10 有序列表

有序列表的特性
每个<li>标签独占一行
默认<li>标签项前面有顺序编号
一般用于排序类型的列表，如试卷、问卷选项等

例：

1.5.11 无序列表

无序列表的特性

每个<li>标签独占一行
默认<li>标签项前面有个实心小圆点，没有顺序编号
一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等

例：

1.5.12 定义列表

• 特性
  • 没有顺序，每个 <dt> 标签、<dd> 标签独占一行
  • 默认没有标记
  • 一般用于一个标题下有一个或多个列表项的情况
    

例：

1.5.13 表格

table

<table border="3" cellspacing="10" cellpadding="5">
    <tr>
        <th colspan="4">COLUMNS</th>
    </tr>
    <tr>
        <td rowspan="4">ROWS</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

例：

1.5.14 表单

• 表单标签

标签名	作用	备注
form	表示表单，是用来收集用户输入信息并向 Web 服务器提交的一个容器

举例：

<form >
    //表单元素
</form>

• 表单的属性

属性名	作用	备注
action	处理此表单信息的Web服务器的URL地址
method	提交此表单信息到Web服务器的方式	可能的值有get和post，默认为get
autocomplete	自动补全，指示表单元素是否能够拥有一个默认值，配合input标签使用	HTML5

举例：

<!-- 一个简单的表单，会发送一个 GET 请求 -->
<form action="/web/login" method="get">
</form>

<!-- 一个简单的表单，发送 POST 请求 -->
<form action="/web/reg" method="post">
</form>

GET 与 POST 说明：

post：指的是 HTTP POST 方法；表单数据会包含在表单体内然后发送给服务器。

get：指的是 HTTP GET 方法；表单数据会附加在 action 属性的URI中，并以 ‘?’ 作为分隔符，然后这样得到的 URI 再发送给服务器。

GET方式举例：

GET 与 POST 对比：

	地址栏可见	数据安全	数据大小
GET	可见	不安全	有限制（取决于浏览器）
POST	不可见	相对安全	无限制

• 表单元素入门

表单元素指的是 input 元素、复选框、下拉框、提交按钮等等。

标签名	作用	备注
label	表单元素的说明，配合表单元素使用	for 属性值为相关表单元素的 id 属性值
input	表单中输入控件，多种输入类型，用于接受来自用户数据	type 属性值决定输入类型
button	页面中可点击的按钮，可以配合表单进行提交	type 属性值决定按钮类型

1）简单的文本输入框

• label 标签：表单的说明。

  • for 属性值：匹配 input 标签的 id 属性值

• input 标签：输入控件。

  • type 属性：表示输入类型，text值为普通文本框
  • id 属性：表示标签唯一标识
  • name 属性：表示标签名称
  • value 属性：表示标签数据值

代码实现：

<form action="" method="get">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" value="Tomcat">
</form>

2）提交用户名的表单

• button 标签：表示按钮。
  • type 属性：表示按钮类型，submit 值为提交按钮。

<form action="" method="get">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" value="Tomcat">
  <button type="submit">Login</button>
</form>

• 属性值

1）NAME 和 VALUE 属性

属性名	作用
name	<input>的名字，在提交整个表单数据时，可以用于区分属于不同<input>的值
value	这个<input>元素当前的值，允许用户通过页面输入

使用方式：

以 name 属性值作为键，value 属性值作为值，构成键值对提交到服务器，多个键值对浏览器使用 & 进行分隔。

2）TYPE属性

• input 标签的 type 属性

  • 基本的文本属性

  属性值	作用	备注
  text	单行文本字段
  password	单行文本字段，值被遮盖
  email	用于编辑 e-mail 的字段，可以对e-mail地址进行简单校验	HTML5

  举例：

    <form action="#" method="get">
        <label for="username">Username:</label>
        <input type="text" id="username"  name="username"> <br/>
    
        <label for="password">Password:</label>
        <input type="password" id="password"  name="password"><br/>
    
        <label for="email">Email:&nbsp;</label>
        <input type="email" id="email"  name="email"><br/>
        <button type="submit">Login</button>
    </form>
    
  

例：

• 单选多选属性

属性值	作用
radio	单选按钮。 1. 在同一个”单选按钮组“中，所有单选按钮的 name 属性使用同一个值；一个单选按钮组中同一时间只有一个单选按钮可以被选择。 2. 必须使用 value 属性定义此控件被提交时的值。 3. 使用checked 必须指示控件是否缺省被选择。
checkbox	复选框。 1. 必须使用 value 属性定义此控件被提交时的值。 2. 使用 checked 属性指示控件是否被选择。 3. 选中多个值时，所有的值会构成一个数组而提交到Web服务器

举例：

<form action="#" method="get">
    <label for="gender">性别:</label>
    <input type="radio" id="gender" name="gender" value="boy"/>男
    <input type="radio" name="gender" value="girl" checked="checked"/>女

    <hr/>
    <label for="hobby">爱好: </label>
    <input type="checkbox" id="hobby" name="hobby" value="sport"/> 体育
    <input type="checkbox"  name="hobby" value="tech"/> 科技
    <input type="checkbox" name="hobby" value="fun" /> 娱乐
    <input type="checkbox" name="hobby" value="video" checked="checked"/> 短视频
</form>

例：

• 按钮属性

  属性值	作用
  button	无行为按钮，用于结合JavaScript实现自定义动态效果
  submit	提交按钮，用于提交表单数据。
  reset	重置按钮，用于将表单中内容恢复为默认值。
  image	图片提交按钮。必须使用 src 属性定义图片的来源及使用 alt 定义替代文本。还可以使用 height 和 width 属性以像素为单位定义图片的大小。

• HTML5 新增的 type 值

  属性值	作用	备注
  date	HTML5 用于输入日期的控件	年，月，日，不包括时间
  time	HTML5 用于输入时间的控件	不含时区
  datetime-local	HTML5 用于输入日期时间的控件	不包含时区
  number	HTML5 用于输入浮点数的控件
  range	HTML5 用于输入不精确值控件	max-规定最大值 min-规定最小值 step-规定步进值 value-规定默认值
  search	HTML5 用于输入搜索字符串的单行文本字段	可以点击x清除内容
  tel	HTML5 用于输入电话号码的控件
  url	HTML5 用于编辑URL的字段	可以校验URL地址格式

属性值	作用	备注
file	此控件可以让用户选择文件，用于文件上传。	使用 accept 属性可以定义控件可以选择的文件类型。
hidden	此控件用户在页面上不可见，但它的值会被提交到服务器，用于传递隐藏值

• button标签的type属性

  属性值	作用	备注
  submit	此按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则此值为默认值。	同 <input type="submit"/>
  reset	此按钮重置所有组件为初始值。	同<input type="reset"/>
  button	此按钮没有默认行为。它可以有与元素事件相关的客户端脚本，当事件出现时可触发。	同<input type="button"/>

3）HTML5 新增属性

属性名	作用	备注
placeholder	提示用户输入框的作用。用于提示的占位符文本不能包含回车或换行。	仅适用于当type 属性为text, search, tel, url or email时; 否则会被忽略。
required	这个属性指定用户在提交表单之前必须为该元素填充值	1. 布尔属性，可省略属性值表示true 2. 当type属性是hidden,image或者button类型时不可使用
autocomplete	自动补全，规定表单或输入字段是否应该自动完成。当自动完成开启，浏览器会基于用户之前的输入值自动填写值。	1. 开启为on，关闭为off 2. 可以设置指定的字段为off，关闭自动补全

例：

• 更多表单元素

标签名	作用	备注
select	表单的控件，下拉选项菜单	与option配合实用
optgroup	option的分组标签	与option配合实用
option	select的子标签，表示一个选项
textarea	表示多行纯文本编辑控件	rows表示行高度， cols表示列宽度
fieldset	用来对表单中的控制元素进行分组(也包括 label 元素)
legend	用于表示它的fieldset内容的标题。	fieldset 的子元素

select举例：

<label for="pet-select">Choose a pet:</label>

<select name="pets" id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>

<!--  
  select 的 name 属性值与 option 的 value 属性值,构成键值对,提交到Web服务器
-->

textarea举例：

<textarea name="textarea" rows="10" cols="50">Write something here</textarea>

fieldset举例：

<form action="#" method="post">
  <fieldset>
    	<legend>是否同意</legend>
        <input type="radio" id="radio_y" name="agree" value="y"> 
      	<label for="radio_y">同意</label>
        <input type="radio" id="radio_n" name="agree" value="n"> 
      	<label for="radio_n">不同意</label>
  </fieldset>
</form>

例：

1.5.15 行内元素和块元素

在HTML中有两种重要元素类别，块级元素和内联元素。

• 块级元素：

  独占一行。块级元素（block）在页面中以块的形式展现。相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。比如<p> ，<hr>，<li> ，<div>等。

• 行内元素

  行内显示。行内元素不会导致换行。通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。比如<b>，<a>，<i>，<span> 等。

  注意：一个块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。

1.5.16 div / span

• <div> 是一个通用的内容容器，并没有任何特殊语义。它可以被用来对其它元素进行分组，一般用于样式化相关的需求。它是一个 块级元素。

• <span> 是短语内容的通用行内容器，并没有任何特殊语义。它可以被用来编组元素以达到某种样式。它是一个 行内元素。

  注意：div 和 span 在页面布局中有重要作用。

1.5.17 多媒体元素

音频

视频

1.6 案例

1.6.1 音乐排行榜

显示效果如下：

1.6.2 制作注册页面

显示效果如下：