HTML基础
一、HTML文档结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
代码说明:
<!DOCTYPE html> :文档类型声明，声明当前HTML文档的类型，它指向网络上的一个DTD文件，这个DTD文件会用来验证文档中出现的标签是否合理。
<html>标签:是整个HTML文档的根标签，所有的其它标签都应该包含在这个标签内，作为这个标签的子标签。
<head>标签:HTML文档的头部标签，<head>标签里的子标签可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。常见的子标签有:<title>标签、<meta>标签、<style>标签、<link>标签和<script>标签等。
<body>标签:HTML文档的主体，标签包含界面上的所有显示内容。
二、HTML标签介绍
1. 标签介绍
HTML语言就是使用各种各样具有不同含义的标签对代码里的普通文字进行标注，让普通的文字具有自己特殊的含义。所以，各个标签到底具有哪些功能，就是我们需要学习的重点。
HTML常用标签:
2. 单标签和双标签
一般的，标签都是成对出现，例如h1标签， <h1> 表示的是标签的开始，</h1>表示标签的结束，在开始标签和结束标签中间，编写标签里显示的内容。但是对于单标签，例如<hr>标签、<br>标签、<img>标签等，这类标签里不需要显示文字内容，只需要使用一个单标签就能完成，它们的书写方式是 <标签名 />
3. 标签列表
HTML里的标签非常的多，我们只介绍一些基本的标签及这些标签的常用属性，其他不常用的标签大家可以自行尝试。
三、注释标签
注释是用来给开发人员看的，浏览器在解析时，会忽略注释里的内容。HTML里，使用<!-- 注释内容 -->的格式来表示一个注释。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 我是HTML里的注释，浏览器在看到我的时候不会解析 -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>我是h1标题</h1>
<h2>我是h2标题</h2>
<h3>我是h3标题</h3>
<h4>我是h4标题</h4>
<h5>我是h5标题</h5>
<h6>我是h6标题</h6>
</body>
</html>
四、结构标签
这类标签一般对于文档的结构会有一定的影响，主要包含一下几个标签:
- h系列标签:用来显示一个标题。
- p标签:用来显示一个段落
- hr标签:用来显示一个分割线
- br标签:用来进行换行。
- div标签:无语义，块级元素，自己独占一行，配合CSS来进行界面布局。
- span标签:无语义，行内元素，自己不独占一行，配合CSS对指定的文字设置样式。
1. h系列标签
h系列标签用来显示标题，包含h1~h6系列一共六个标签。被h系列标签修饰的文字，字体会加粗，大小会发生变化。h系列标签具有特殊的语义，搜索引擎在看到这些标签时，会特别留意这些标签，所以，当你只是想把一段普通文字加粗变大，不要轻易使用h标签，使用CSS样式来完成。
2. p标签
p标签全称paragraph,用来表示段落，它是一个行内元素，一个标签独占一行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>9月15日，苹果最新发布的iPhone11系列手机13日正式启动预约。国内预购渠道除了苹果中国官网外，此次iPhone 11 系列预售的平台还有天猫和京东。
<p>据外媒报道，今年iPhone 11系列全球的首批订单量预计在800万台左右，相比去年2018款iPhone至少减少了10%。其中，iPhone 11占订单总数的60%，iPhone 11 Pro占10%，iPhone 11 Pro Max占30%。</p>
<p>尽管国内社交网站上关于新iPhone的“浴霸”摄像头吐槽铺天盖地，不过，从国内各大电商平台发布的预售数据来看，新iPhone依然抢手。其中，此次新增的绿色版最受欢迎。</p>
<p>本次预售的iPhone新机中包含了三个型号，分别是，iPhone 11：白色、黑色、绿色、黄色、紫色和红色可选，国行售价64GB为5499元、128GB为5999元、256GB为6799元；</p>
<p>iPhone 11 Pro有深空灰色、银色、金色和暗夜绿色可选，国行售价64GB为8699元、256GB为9999元、512GB、11799元；</p>
</body>
</html>
3. hr标签
hr标签全称horizontal rule,用来显示一个分割线。这是一个单标签，开始标签和结束标签是同一个标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>我是一个P</p>
<hr>
<p>我也是一个P</p>
</body>
</html>
4. br标签
br标签全称barter rabbet,它是一个标签，用来对文本文字进行换行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
你好, <br>我是文字
</body>
</html>5. div标签
div标签是一个无语义的标签，它独占一行，一般结合CSS进行界面布局，俗称div+CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin:0;
padding:0;
}
div {
width:800px;
margin: 0 auto;
margin-bottom:5px;
}
.one {
height:50px;
background-color:yellow;
}
.two {
height:300px;
background-color:pink;
}
.three {
height:200px;
}
.four {
width:48%;
height:100%;
background-color:skyblue;
float:left;
}
.five {
width:48%;
height:100%;
background-color:springgreen;
float:right;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three">
<div class="four"></div>
<div class="five"></div>
</div>
</body>
</html>6. span标签
span是一个无语义的标签，一般结合CSS来对文字进行样式的设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span {
color:red;
}
</style>
</head>
<body>
<p>我是p里的内容，<span>这段内容的文字需要变成红色</span>，可以使用span标签来修饰那一段内容，然后再使用CSS来设置样式</p>
</body>
</html>五、超链接和图片标签
在网页中经常会显示大量的超链接以及图片元素，我们可以使用 a标签来表示超链接，使用img标签来表示一张图片资源。
1. 超链接
a 标签全称 anchor,我们可以称它为锚点标签，一般用来显示一个超链接。
<a href="http://www.youku.com">优酷</a>
2. a标签用作锚点定位
<!-- href标签指向的地址里的 # 表示界面上的摸一个元素的id -->
<a href="#mubiao">跳转到目标位置</a>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<div id="mubiao">我是div</div>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
3. 不同状态下的显示区别
<a href="http://www.jd.com">未被访问的链接带有下划线而且是蓝色的</a><br>
<a href="http://www.taobao.com">已被访问的链接带有下划线而且是紫色的</a><br>
<a href="http://www.baidu.com">活动链接带有下划线而且是红色的</a>
不同状态下的超链接，显示的效果也是不一样的，超链接的状态分为三种:
- 未访问状态(超链接对应的URL从未访问过)
- 已访问状态(超链接对应的URL地址以前访问过，即历史记录里存在)
- 激活状态(鼠标点击超链接的一瞬间)
这三种状态的显示效果如果下:
未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的
4. 常见属性
| 属性名 | 取值 | 含义 |
|---|---|---|
| href | 任意URL地址 | 指定a标签指向的链接地址 |
| target | _self | 默认值，表示在浏览器的当前选项卡打开超链接 |
| _blank | 在浏览器中开启一个新的选线卡打开超链接 |
5. 图片标签
在HTML里使用img标签用来显示一张图片，通过修改 img 标签的 src 属性加载不同的图片资源。由于img标签也不用显示文字，所以它也是一个单标签。
<img src="test.png" alt="当图片加载失败时会显示这段文字"/>
src 属性用来指定图片的路径，可以使用绝对路径和相对路径，一般情况下我们会选择使用相对路径。
6. 常见属性
| 属性名 | 取值 | 含义 |
|---|---|---|
| src | url | img标签加载的图片URL地址 |
| alt | 文字 | 当图片加载失败时显示的文字 |
| title | 文字 | 全局属性，当鼠标悬停到图片上时显示的文字 |
| width | 数字，单位像素px | 用来指定图片的宽度 |
| height | 数字，单位像素px | 用来指定图片的高度 |
六、列表标签
1. HTML里的列表
列表在HTML里也是比较常见的一种表示方式，常见的列表有三种:
- 有序列表: ol标签，全称Ordered List
- 无序列表: ul标签，全称 Unordered List
- 定义列表: dl标签，全称Definition List
三种列表的使用方式大致相同，但是在细节上稍有区别，接下来我们分别讨论。
2. 有序列表
有序列表使用 ol 标签来表示，里面每一个列表项使用 li标签(全称list item，列表项)来表示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span {
color:red;
}
</style>
</head>
<body>
<ol>
<li>起床</li>
<li>洗漱</li>
<li>吃饭</li>
<li>出门</li>
<li>上班</li>
</ol>
</body>
</html>
3. ol标签属性介绍
type属性，用来指定序号类型，可选值如下:
'a'表示小写字母编号；'A'表示大写字母编号；'i'表示小写罗马数字编号；'I'表示大写罗马数字编号；'1'表示数字编号（默认值）
start属性，这个属性值是一个整数，用来指定序号的开始值。尽管列表条目的序号可能不是数字顺序，但这个开始的顺序总是使用数字表示。比如想要元素序号从字母 “C” 开始，使用 <ol start="3">。
4. 无序列表
无序列表使用ul标签来表示，和有序列表一样，无序列表里的列表项同样使用 li 标签来表示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span {
color:red;
}
</style>
</head>
<body>
<ul>
<li>啤酒</li>
<li>咖啡</li>
<li>橙汁</li>
<li>茶</li>
</ul>
</body>
</html>
5. ul属性的使用
ul同样支持type属性，用来指定无序列表前面的符号，可选值如下:
- circle:显示空心圆。
- disc:显示实心圆(默认值)
- square:显示实心的正方形
一般情况下，我们不会使用ul的type属性来修改无序列表的编号样式，而是选择使用CSS来实现。
6. 定义列表的使用
定义列表使用 dl 标签来表示，用来自定义一个列表。它的使用稍微复杂一点，定义列表里的每一个列表项使用dt表示，同时，每一个dt列表项一般都会再跟一个 dd 标签对dt进行说明。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span {
color:red;
}
</style>
</head>
<body>
<dl>
<dt>CPU</dt>
<dd>中央处理器作为计算机系统的运算和控制核心，是信息处理、程序运行的最终执行单元</dd>
<dt>内存</dt>
<dd>内存是计算机中重要的部件之一，它是与CPU进行沟通的桥梁</dd>
<dt>硬盘</dt>
<dd>电脑硬盘是计算机最主要的存储设备</dd>
</dl>
</body>
</html>
七、表格标签
在HTML里，使用<table>来显示一个表格，其他与表格相关的标签都需要作为table标签的子标签。table标签下的常见子标签如下：
- <caption>标签用来表示表格的标题，一般会配合h标签使用。
- <tr>标签直接放在 table 标签下作为table标签的子标签，表示一行数据。
- <th>标签放在 tr 标签下，作为 tr标签的子标签，表示表头。
- <td>标签放在 tr 标签下，作为tr标签的子标签，表示单元格。
- td 标签可以设置 rowspan和colspan属性，取值是一个整数，用来表示这个单元格占多行或者多列。
注意：表格里设置单元格边框会比较麻烦，一般情况下我们会使用CSS样式来设置表格单元格边框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table {
/* 让表格合并边框 */
border-collapse:collapse;
}
td,th {
/*设置边框的线宽为1px,实线,黑色*/
border:1px solid #000;
text-align:center;
padding:10px;
}
</style>
</head>
<body>
<table align="center">
<caption><h3>春田花花幼稚园中二班成绩表</h3></caption>
<thead>
<tr>
<th>姓名</th>
<th>学号</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
<th>Python</th>
<th>儿歌</th>
<th>体育</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>001</td>
<td>89</td>
<td>90</td>
<td>87</td>
<td>98</td>
<td>49</td>
<td>76</td>
</tr>
<tr>
<td>李四</td>
<td>002</td>
<td>87</td>
<td>54</td>
<td>65</td>
<td>89</td>
<td>98</td>
<td>89</td>
</tr>
<tr>
<td>麦兜</td>
<td>003</td>
<td>45</td>
<td>23</td>
<td>69</td>
<td>78</td>
<td>54</td>
<td>50</td>
</tr>
<tr>
<td>jerry</td>
<td>004</td>
<td>98</td>
<td rowspan="2">99</td>
<td>95</td>
<td>100</td>
<td>45</td>
<td>87</td>
</tr>
<tr>
<td>henry</td>
<td>005</td>
<td>97</td>
<td>90</td>
<td>98</td>
<td>80</td>
<td>89</td>
</tr>
<tr>
<td>merry</td>
<td>006</td>
<td>97</td>
<td colspan="2">89</td>
<td>95</td>
<td>87</td>
<td>89</td>
</tr>
<tr>
<td>tony</td>
<td>007</td>
<td>87</td>
<td>54</td>
<td>65</td>
<td>89</td>
<td>98</td>
<td>89</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">平均分</td>
<td>88</td>
<td>80</td>
<td>89</td>
<td>85</td>
<td>76</td>
<td>79</td>
</tr>
</tfoot>
</table>
</body>
</html>
八、表单相关标签
当需要向服务器提交数据时，我们一般会选择使用form表单来实现数据的提交。
<form>标签用来表示一个需要向服务器提交的数据表单，在这个form表单的子标签里，需要实现让用户 输入、单选、多选(input标签)，下拉选择(select标签)，点击(button标签或者input标签)，输入大段文字(textarea标签)等操作。
1. form标签的使用
form标签用来向服务器提交数据，所有需要被提交给服务器的数据，都可以放在form标签里，当点击form表单里的提交按钮时，会将form表单里用户输入的所有数据都提交给指定的服务器来处理。
<form action="http://www.baidu.com" method="post">
<!-- 在这里放入input/select/textarea等子标签，用来让用户输入内容 -->
</form>2. 常见属性
| 属性名 | 取值 | 含义 |
|---|---|---|
| action | url | 表示当点击提交按钮时，form表单里的数据要提交到的服务器地址 |
| method | get或post | 表示向服务器提交数据时的方式，支持get和post提交，默认提交方式是get |
3. select标签的使用
select标签用来在form表单里显示一个下拉选择框，待选项使用 option 表示。
<!-- 需要给select标签添加 name 属性，当提交给服务器时name属性的值会作为key传递给服务器 -->
<select name="province">
<option value="shanghai">上海</option>
<option value="beijing">北京</option>
<option value="zhejiang">浙江</option>
<!--
option标签作为select标签的子标签，表示每个下拉选项
value 属性的对应的值在提交给服务器时，会作为 value 传递给服务器
selected 属性用来将某个待选项设置为默认选中
-->
<option value="jiangsu" selected="selected">江苏</option>
<option value="anhui">安徽</option>
</select>
4. input标签
input标签是最常用的标签之一，经常出现在form表单里，让用户在页面上输入数据。根据type属性值的不同，input标签在界面上可以显示为一个普通的文本输入框，也可以是一个单选框、复选框等样式。
常见属性
| 属性名 | 取值 | 含义 |
|---|---|---|
| type | text | 默认值，显示一个普通的文本输入框 |
| button | 显示一个普通按钮 | |
| submit | 显示一个提交按钮，点击时，会提交所在form表单里的数据 | |
| image | 根据src属性指定的图片路径，加载显示一张图片，作为提交按钮 | |
| reset | 显示一个重置按钮，点击时，会重置所在form表单里的数据 | |
| radio | 显示一个单选框，多个相关联的单选框name属性值要一样，否则无法实现多选 | |
| checkbox | 显示一个复选框 | |
| file | 显示一个文件按钮，点击时可以选择电脑上的文件 | |
| password | 显示一个密码输入框，当用户输入时，会显示成为密文 | |
| number | 显示一个输入框，用户只能输入数字、正负号和字母e,其他非数字无法输入 | |
| 显示一个文本输入框，用户输入的内容要符合电子邮箱地址，否则点击提交按钮时会出现错误提示，无法提交数据 | ||
| tel | 控制用户输入手机号，当用户使用手机访问网页，点击文本框时，会弹出拨号键盘 | |
| name | 任意文本 | 设置input的名称，当提交给服务器时，会作为key提交 |
| value | 任意文本 | 当提交给服务器时，会作为value提交 当input为文本输入框时，设置文本输入框上的内容；当input为按钮时，用来设置按钮上的显示文字 |
| checked | checkeck或者不设置 | 当type为radio或者checkbox时，用来设置默认选中 |
| autofocus | autofocus或者不设置 | 设置当打开页面时，文本输入框是否自动获取焦点 |
| autocomplete | autocomplete或者不设置 | 设置是否自动补全，注意，只有input标签设置了name属性以后，autocomplete才有效 |
| required | required或不设置 | 表示该输入框必须要填写，否则无法提交 |
| readonly | readonly或不设置 | 表示该输入框里的数据不可修改 |
| disabled | disabled或不设置 | 表示禁用文本输入框，多用于按钮 |
| max/min | 数字 | 当type为number时，用来设置最大值和最小值区间 |
| placeholder | 任意文本 | 当input的类型为输入框时，用来在输入框中显示提示信息 |
综合使用案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="https://www.baidu.com">
<span>我是</span>
<input type="radio" name="gender" id="nan" value="male"> <label for="nan">男</label>
<input type="radio" name="gender" id="nv" value="female" checked> <label for="nv">女</label> <br>
<span>省份</span>
<select name="province" id="">
<option value="shanghai">上海</option>
<option value="beijing">北京</option>
<option value="zhejiang">浙江</option>
<option value="jiangsu" selected="selected">江苏</option>
<option value="anhui">安徽</option>
</select><br>
<span>兴趣爱好</span>
<!-- type="checkbox" 表示的是一个复选框 -->
<input type="checkbox" name="hobbies" value="basketball" id="basketball"> <label for="basketball">篮球</label>
<input type="checkbox" name="hobbies" value="football" id="football"> <label for="football">足球</label>
<input type="checkbox" name="hobbies" value="volleyball" id="volleyball" checked> <label for="volleyball">排球</label>
<input type="checkbox" name="hobbies" value="pingpong" id="pingpong" checked> <label for="pingpong">乒乓球</label>
<br>
<span>年龄:</span>
<input type="number" name="age" max="80" min="18" value="20"><br>
<span>手机号:</span>
<input type="tel" name="phone" autofocus autocomplete="off"><br>
<span>密码</span>
<input type="password" name="pwd" placeholder="请输入密码"><br>
<span>姓名:</span>
<input type="text" name="username" required><br>
<span>自动分配的id</span>
<input type="text" value="user01" name="user_id" readonly><br>
<input type="file"><br>
<input type="hidden"><br>
<span>邮箱</span>
<input type="email"><br>
<input type="color"><br>
<span>出生日期</span>
<input type="date"><br>
<input type="search" placeholder="请输入你要搜索的内容"><br>
<!-- reset用来重置form表单里的内容 -->
<input type="reset" value="重置" disabled><br>
<input type="submit" value="点击注册">
</form>
</body>
</html>
九、HTML属性
不同标签表示不同的含义，各个标签再加上各自对应的属性，可以显示不同的内容，表示不同的含义。例如，修改img标签的src属性可以改变显示的图片，修改a标签的href属性可以改变链接的地址，修改input的type属性可以改变输入框的显示方式等。每个标签支持的属性也不相同，我们只需要记住常用标签的常用属性即可，一些不常用的属性可以通过查看手册来使用。
1. 全局属性
有一部分属性(例如 id,class,style等)，尽管有些标签设置了这些属性以后没有效果，但是理论上所有的HTML标签都支持，这些属性我们称之为全局属性。
HTML常见的部分全局属性如下表:
| 属性 | 取值 | 作用 |
|---|---|---|
| id | 任意文本 | 给标签定义一个独一无二的标识，多用于CSS选择器和DOM操作 |
| class | 任意文本 | 给标签进行归类，多用于CSS选择器和DOM操作 |
| style | CSS键值对 | 用来给元素设置行内样式 |
| title | 任意文本 | 用来设置标签的额外信息，其实就是当鼠标悬停到元素上时的显示文本 |
其他不常用的全局属性请参考: HTML全局属性用法
相关文章
- 从零实现Web框架Geo教程-Http基础-01
- html中超链接使用_HTML超链接代码
- python基础（9）增强型赋值与使用普通赋值的区别
- 网站开发html_网页基础代码大全
- HTML基础第二课（冲浪笔记2）
- 新手网络工程师快看，一文带你掌握6个基础配置技能！
- 【原创】HTML基础知识点
- 《嵌入式技术基础与实践》视频课程系列上线啦！
- 1.HTML基础必备知识学习笔记
- PostgreSQL数据库基础 之 对数组的遍历操作详解
- Spring Data MongoDB 基础查询详解大数据
- Linux 的依赖性：建立强韧的基础（linux依赖性）
- 让Linux灵活运行HTML：简单有效的方法（linux运行html）
- MySQL与HTML的无缝连接（html与mysql连接）
- 从 HTML 页面访问 MySQL 数据库.（html访问mysql）
- 用HTML操作MySQL数据库（html调用mysql）
- 学习MySQL：从零基础到入门!（数据库mysql入门）
- Oracle OCU架设数据分析基础，轻松实现智慧商机（oracle ocu）
- jsp基础学习资料
- Linux网络服务器配置基础
- JavaScipt基本教程之JavaScript语言的基础
- (跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享