标签：val 相关 区别 比例 单选框 答案 网站 打开 字母
HTML (超文本标记语言) 是 HyperText Mark-up Language 的首字母简写。
是一种用于创建网页的标准标记语言。 HTML 不需要编译，可以直接由浏览器执行，它的解析依赖于浏览器的内核。 它不是一种编程语言，而是一种标记语言。
超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
一个html的基本结构如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
网页显示内容
</body>
</html>
<!DOCTYPE html> 是我们的文档声明头。他告诉了浏览器，本文档处理的是 HTML 文档。
html 标签即根元素，此处表示文档的开始。”标签和最后一行“”定义html文档的整体
“”标签中的‘lang=“en”’定义网页的语言为英文，定义成中文是‘lang="zh-CN"‘,不定义也没什么影响，它一般作为分析统计用。
head 标签是网页的头部，设置网页的相关信息。
title 标签设置网页标题。
body 标签定义文档的主体，也就是我们的主要内容。
在 HTML 中满足以下格式的内容即为注释，被注释的内容将不会被渲染和显示。
<!-- 在此处写注释 -->
注：在开始标签中有一个惊叹号，但是结束标签中没有。浏览器不会显示注释，但是能够帮助记录。
<!DOCTYPE html>
<html>
<body>
<!--这是一段注释。注释不会在浏览器中显示。-->
<p>这是一段普通的段落。</p>
</body>
</html>
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
例子：
<p>I Love You</p>
注：这个元素定义了 HTML 文档中的一个段落。这个元素拥有一个开始标签 <p>，以及一个结束标签 </p>。元素内容是：I Love You。
超文本标记语言（英语简称：HTML ）标记标签通常被称为 HTML 标签，HTML 标签是 HTML 语言中最基本的单位，HTML 标签是 HTML（标准通用标记语言下的一个应用）最重要的组成部分。HTML 标签的大小写无关的，例如
<body>和<BODY>表示的意思是一样的，都代表“主体”，推荐使用小写。
双标记也称体标记，是指由开始和结束两个标记符组成的标记。其基本语法格式如下：
<标记名></标记名>
常见的双标签有：
<html></html>
<head></head>
<title></title>
<body></body>
<h1></h1>
<p></p>
<div></div>
<span></span>
<a></a>
<ul></ul>
例子 <a></a>：
<a href="https://www.shiyanlou.com">实验楼</a>
单标记也称空标记，是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下：
<标记名/>
常见的单标签有：
<br />
<!--换行-->
<hr />
<!--水平分隔线-->
<meta />
<img />
<head>
<title> </title>
</head>
<head></head>
<body></body>
h 标签有六种 h1，h2，h3，h4，h5，h6，它代表着我们的标题。
<!DOCTYPE html>
<html>
<head>
<title>HTML 简介</title>
<meta charset="utf-8" />
</head>
<body>
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
</body>
</html>
p 标签是我们的文本标签。定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>段落</title>
</head>
<body>
<p>HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超
文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的
标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。
</p>
<p>一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方
式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网
页可以从一个网页链接跳转到另外一个网页。</p>
</body>
</html>
?标签是超链接标签，可以在网页上定义一个链接地址，它的常用属性有：
<a href="#"></a> <!-- # 表示链接到页面顶部 -->
<a href="http://www.itcast.cn/" title="跳转的传智播客网站">传智播客</a>
<a href="2.html" target="_blank">测试页面2</a>
代码中成段的文字，直接在代码中回车换行，在渲染成网页时候不认这种换行，如果真想换行，可以在代码的段落中插入
来强制换行，代码如下：
<p>
一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br />
文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br />
渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
</p>
代码中成段的文字，如果文字间想空多个空格，在代码中空多个空格，在渲染成网页时只会显示一个空格，如果想显示多个空格，可以使用空格的字符实体,代码如下：
<!-- 在段落前想缩进两个文字的空格，使用空格的字符实体： -->
<p>
一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br />
文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br />
渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。</p>
在网页上显示 “<” 和 “>” 会误认为是标签，想在网页上显示“<”和“>”可以使用它们的字符实体，比如：
<!-- “<” 和 “>” 的字符实体为 < 和 > -->
<p>
3 < 5 <br>
10 > 5
</p>
<hr/> 标签用于在 HTML 页面中创建一条水平线。
<body>
<hr/>
<hr/>
<hr/>
</body>
1、
标签 <div> 可将网页页面分割成不同的独立部分，通常用于定义文档中的区域或节。该标签是一个块级元素，浏览器会自动在 <div> 和 </div> 所标记的区域前后自动放置一个换行符。
2、 标签 行内元素，表示一行中的一小段内容，没有具体的语义。
标签 <span> 通常作为文本的容器，它没有特定的含义和样式，只有与 CSS 同时使用才可以为指定文本设置样式属性。该标签是一个内联元素，他与块级元素相反，内联元素不会自动在前后自动放置换行符，因此内联元素会默认显示在同一行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
#box {
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div id="box">这是div标签，自动换行</div>
<input type="text" /><span>这是span标签，不自动换行</span>
</body>
</html>
HTML 的图像是通过标签 <img> 来定义的。
标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有：
<p>实验楼图片：</p>
<img src="https://static.shiyanlou.com/frontend/dist/img/9f43b00.svg" alt="产品图片" />
<img src="images/pic.jpg" alt="产品图片" />
绝对路径和相对路径
像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascript等等，引用地址分为绝对地址和相对地址。
绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对路径就没有这个问题。相对路径的定义技巧：
列表作为网页设计的重要内容之一，能够用来制作导航栏和新闻列表等。
HTML 列表分为：有序列表（ol），无序列表（ul）以及自定义列表（dl）。
无序列表是一个项目的列表，此列项目使用实心圆、空心圆、方块进行标记，无序列表使用
<ul>标签。每个列表项始于<li>标签。
在网页上定义一个无编号的内容列表可以用
<p>无序列表</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
无序列表的 type 属性：
type 属性定义了列表项前项目符号的类型。
<ul> 标签的 type 属性：
| 值 | 备注 |
|---|---|
| disc（默认） | 实心圆 |
| circle | 空心圆 |
| square | 小方块 |
我们来看其中一两个 type 属性：
<p>无序列表</p>
<ul type="circle">
<li>空心圆列表项1</li>
<li>空心圆列表项2</li>
</ul>
有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于
<ol>标签。每个列表项始于<li>标签。
在网页上定义一个有编号的内容列表可以用
<p>有序列表</p>
<ol>
<li>列表项1</li>
<li>列表项2</li>
</ol>
有序列表的 type 属性：
type 属性定义了列表项前项目符号的类型。
<ol> 标签的 type 属性：
| 值 | 备注 |
|---|---|
| 1（默认） | 数字表示（1，2，3...) |
| A | 大写字母表示（A,B,C...) |
| a | 小写字母表示（a,b,c...) |
| I | 大写罗马数字表示(I,II,III…) |
| i | 小写罗马数字表示(i,ii,iii…) |
我们来看其中一两个 type 属性：
<p>有序列表</p>
<ol type="A">
<li>列表项1</li>
<li>列表项2</li>
</ol>
自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以
<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始。自定义列表的列表项前没有任何项目符号。
<dl>标签表示列表的整体。
<dt>标签定义术语的题目。
<dd>标签是术语的解释。
一个
<h2>自定义列表</h2>
<dl>
<dt>春天</dt>
<dd>是万物复苏，百花争艳的季节</dd>
<dt>夏天</dt>
<dd>是夏日绵绵，烈日炎炎的季节</dd>
</dl>
为HTML 标签定义 style 属性，通过 style 属性来改变 HTML 元素的样式。
<html>
<body>
<p style="background-color:red">实验楼</p>
</body>
</html>
注：通过 "background-color" 属性值的设置来给背景设置颜色。
<html>
<body>
<p style="font-family:arial;color:green;font-size:50px;">实验楼</p>
</body>
</html>
注：通过对 font-family 属性值的设置来设置字体，通过对 color 属性值的设置来设置颜色，通过对 font-size 属性值的设计来设计字体大小。
<html>
<body>
<h1 style="text-align:center">实验楼</h1>
</body>
</html>
注：上面的标题“实验楼”相对于页面居中对齐。
用 HTML 完成下图：
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<div style="width:500px;height:300px;background-color:pink">
<h1 style="text-align:center">html学习</h1>
<p style="text-align:center">
学习就上<a href="https://www.icourse163.org/">慕课</a>
</p>
<hr />
<p>在慕课你可以学习的课程有：</p>
<ul>
<li>HTML 基础课程</li>
<li>CSS 基础课程</li>
<li>js 基础课程</li>
<li>...</li>
</ul>
</div>
</body>
</html>
表格由 <table> 标签来定义。
每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。
字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
它的常用属性如下：
border属性 定义表格的边框，设置值是数值
cellpadding属性 定义单元格内容与边框的距离，设置值是数值
cellspacing属性 定义单元格与单元格之间的距离，设置值是数值
align属性 设置整体表格相对于浏览器窗口的水平对齐方式,设置值有：left | center | right
我们先来创建一个简单的表格：
<table>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
上述代码表格没有边框，接下来让我们为它添加一个 border 属性再来看看效果。
<table border="1">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
表格一般都有标题，在 HTML 中表格标题通过 <caption> 定义。
<table border="1" width="300px" height="150px">
<caption>
表格标题
</caption>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
表格的表头使用 <th> 标签进行定义，表头通常用于列名字。
<table border="1" width="300px" height="150px">
<caption>
支出表
</caption>
<tr>
<th>支出</th>
<th>备注</th>
</tr>
<tr>
<td>32</td>
<td>买苹果</td>
</tr>
<tr>
<td>24</td>
<td>买饮料</td>
</tr>
</table>
表格的常用属性
| 属性名 | 含义 | 属性值 |
|---|---|---|
| border | 定义表格的边框 | |
| cellpadding | 定义单元格内容与边框的距离 | 默认为 1px |
| cellspacing | 定义单元格与单元格之间的距离 | 默认为 2px |
| align | 设置整体表格相对于浏览器窗口的水平对齐方式 | left|center|right |
| width | 设置表格的宽度 | 单位为 px |
| height | 设置表格的高度 | 单位为 px |
| bgcolor | 设置背景颜色 | red,green等 |
注意：其余属性的使用和 border 类似，只需要在 table 标签中添加属性即可
绘制表格的时候，我们常常需要合并单元格，而在 HTML 中提供了 colspan（合并行）和 rowspan（合并列）属性来帮助我们实现这一效果。
colspan 又称跨列，rowspan 又称跨行。
<table border="1" width="300px" height="150px">
<h3>单元跨两行</h3>
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>张三</td>
<td>344 22 112</td>
<td>211 32 123</td>
</tr>
<tr>
<td>李四</td>
<td>433 31 212</td>
<td>234 21 654</td>
</tr>
</table>
<table border="1" cellspacing="0">
<h3>单元跨两列</h3>
<tr>
<th>姓名</th>
<td>张三</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>344 22 112</td>
</tr>
<tr>
<td>234 21 654</td>
</tr>
</table>
注：设置 rowspan="2" 表示合并该列上的两个单元格，同样的我们可以通过设置 colspan 来合并行。合并之前，我们可以如例子般，先把所有的单元格都写出来，然后找出哪些单元格需要合并的，在第一个单元格内设置 rowspan 或者 colspan，并将其他多余的单元格代码删除。
在网页中可以使用很多个 div，在网页制作中，使用 div 可以将网页中的任何元素布局到网页中的任何位置。
语法：
<div style="样式设置"><div></div></div>
div 布局：
<div style="width:100%;border:1px solid #d4d4d4">
<div style="background-color:pink">实验楼</div>
<div style="background-color:skyblue">实验楼</div>
</div>
table 布局：
<table style="width:100%;border:1px solid #d4d4d4">
<tr>
<td style="background-color:pink">
实验楼
</td>
</tr>
<tr>
<td style="background-color:skyblue">
实验楼
</td>
</tr>
</table>
同样的效果，使用 div 布局能比表格更加灵活，但是我们需要根据不同的场景使用不同的布局方式，现在我们来看看两种布局的优缺点。
table 元素布局：
div 元素布局：
源码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>课程表</title>
</head>
<body>
<table border="1" width="60%" bgcolor="pink" cellpadding="2">
<caption>
课程表
</caption>
<tr align="center">
<td colspan="2">时间\日期</td>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
</tr>
<tr align="center">
<td rowspan="2">上午</td>
<td>9:30-10:15</td>
<td>语文</td>
<td>数学</td>
<td>外语</td>
<td>音乐</td>
<td>体育</td>
</tr>
<tr align="center">
<td>10:25-11:10</td>
<td>数学</td>
<td>数学</td>
<td>物理</td>
<td>化学</td>
<td>生物</td>
</tr>
<tr>
<td colspan="7"> </td>
</tr>
<tr align="center">
<td rowspan="2">下午</td>
<td>14:30-15:15</td>
<td>体育</td>
<td>语文</td>
<td>历史</td>
<td>政治</td>
<td>化学</td>
</tr>
<tr align="center">
<td>15:25-16:10</td>
<td>音乐</td>
<td>语文</td>
<td>数学</td>
<td>美术</td>
<td>语文</td>
</tr>
</table>
</body>
</html>
HTML 表单是一个包含表单元素的区域，用于搜集不同类型的用户输入。
表单是网页中提供的一种交互式手段操作，生活中我们很容易接触到表单，比如网上注册一个账号
表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下：
1、
