文章目录
一、认识HTML
HTML（HyperText Mark-up Language），即超文本标记语言或超文本链接标示语言。"超文本"指的就是在本文之外，页面内还可以包含图片，链接，甚至音乐，程序等非文本元素。
HTML文本主要由标签组成，它的基本结构如下代码所示。
<!DOCTYPE html> //浏览器得知自己需要处理的内容是html
<html> //html文本开始的地方
<head> //head部分：提供有关内档内容和标注信息的内容
<title>HTML页面</title>
</head>
<body> //body部分：即为网页中显示的内容
HTML（HyperText Mark-up Language），
即超文本标记语言或超文本链接标示语言，
是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。
</body>
</html>
对应的HTML页面如下图所示
二、head元素
<head>标签是所有头部元素的容器。位于 <head>内部的元素可以包含脚本、指引浏览器找到样式表、提供元信息，等等。 <head>内部具体可以包括的如下：
<base> <!--规定页面上所有链接的默认 URL 和默认目标-->
<link> <!--标签定义文档与外部资源之间的关系,大多数时候都用来连接样式表-->
<meta> <!--提供额外的信息，通常写入页面的编码格式-->
<script> <!--标签用于定义客户端脚本，比如 JavaScript-->
<style> <!--标签定义 HTML 文档的样式信息-->
<title> <!--标签定义文档的标题-->
三、body元素
body元素承载了页面中显示出来的几乎所有的内容，包括：文本元素、表单元素、图片元素、视频元素、音频元素等等…
3.1 文本元素
3.1.1 标题
在html的文本元素中，标题一共分为6级，从h1到h6。具体的使用如下代码所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>标题标签</h1>
<h1>标题一共六级选,</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减，</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>
</body>
</html>
对应的效果图如下所示
3.1.2 段落
html中的换行<br/>和分段<p>text</p>。在html中的文本，如果直接换行和分段，在浏览器中显示时，并不会如期发生换行和分段，比如使用对应的标签，才可以实现文本换行和文本分段，如下代码所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>H5 是一个产品名词<br/> HTML5 是一个技术名词 <br/>
H5指的不是HTML5，
而是某种在微信等移动端,
看上去酷炫能够提升公司格调,
顺便亮瞎访问者氪金狗眼,
顿升膜拜之心,
就算没有内容也能被广泛转发分享的一种东西。</p>
<p>H5到底是什么意思，其实真的很难把它用概念的形式来讲清楚。
因为H5更像是国人制造的一个专有名词，就像是我们喜欢把“苹果 7”说成是“肾7”一样。
但H5就坏在它看上去像是个英文缩写，似乎是某种尖端技术，
实际上国外根本没有这个说法，老外都不知道这个H FIVE是什么东西。
</p>
<p>
H5所涵盖的范围其实很大，
它不是 HTML5、不是微信网页、不是移动PPT。
相反，从某种意义上来说，
它是这些东西的母级，H5所指的就是移动网页本身，它能够包含所有这些分支。
</p>
</body>
</html>
3.1.3 文本格式标签
html文本提供基础的文字格式标签，包括加粗、斜体、下划线等等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文本格式标签</title>
</head>
<body>
我是<strong>加粗</strong>的文字
我是<b>加粗</b>的文字
我是<em>倾斜</em>的文字
我是<i>倾斜</i>的文字
我是<del>删除线</del>
我是<s>删除线</s>
我是<ins>下划线</ins>
我是<u>下划线</u>
</body>
</html>
对应的效果如图所示
3.1.4 容器标记
<div>（divsion）可以理解为容器标记，也就是说<div></div>之间是一个容器，可以容纳段落，标题，表格，图片，章节，摘要和备注等各种HTML元素。因此，可以把<div>与</div>中的内容视为一个独立的对象，用于CSS的控制。声明时只要对<div>进行相应的控制，其中的各标签元素都会因此而改变。
<span>标记和<div>标记一样，作为容器标记而被广泛用于HTML语言中。<span>元素是无语义的行内元素，它可以对元素进行分组，使它们以不同的样式显示。区别在于，<div>是一个块级(block-level)元素，它包围的元素会自动换行。而<span>仅仅是一个行内元素(inline element)，在它的前后不会换行。<span>没有结构上的意义，纯粹是应用样式，当其他行内元素都不合适时，就可以使用<span>元素。
需要注意的是，<span>标记可以包含于<div>标记之中，成为他的子元素，而反过来则不成立，即<span>标记不能包含<div>标记。
<!DOCTYPE html>
<html lang="en">
<head>
<title>div和span标签</title>
</head>
<body>
<div>我是一个div标签我一个人单独占一行</div>
<div>我是一个div标签我一个人单独占一行</div>
<span>百度</span>
<span>新浪</span>
<span style="color: red">美团</span>
<span>搜狐</span>
</body>
</html>
3.1.5 文本锚点定位
通俗的讲，我们想要让页面跳转到的位置，就是锚点。锚点是一种超链接，只不过它是页面内部的超链接，它指向页面特定的部分。这就涉及到<a>标签的锚点应用，把它称为“锚点标签”。
要使用锚点定位，需要两个部分组成：1、锚记； 2、指向锚记的链接
有以下方法：
方法一：使用a标签 + “name”定位;
方法二：使用a标签 + “id”定位
<html>
<head>
<title>锚点测试</title>
</head>
<body>
<a href="#targetName" >点击此处到targetName</a><br/>
<a href="#targetId">点击此处到targetId</a>
<br><br><br><br><br><br><br><br><br><br>
<br>第一段内容<br>
<br><br><br><br><br><br><br><br><br><br>
<br>第二段内容<br>
<br><br><br><br><br><br><br><br><br><br>
<br>第三段内容<br>
<br><br><br><br><br><br><br><br><br><br>
<br>第四段内容<br>
<br><br><br><br><br><br><br><br><br><br>
<br><a name="targetName">目标位置1</a>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br>第五段内容<br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><div id="targetId">目标位置2</div>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
</body>
</html>
3.2 图片元素
图片标签使用<img>, 属性包括：
src：图片地址
alt：如果无法显示图像，浏览器将显示替代文本
title：图片标题
width：图片宽度
height：图片高度
border：图片边界
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图像标签</title>
</head>
<body>
<h4> 图像标签的使用:</h4>
<img src="img.jpg"/>
<h4> alt 替换文本 图像显示不出来的时候用文字替换:</h4>
<img src="img1.jpg" alt="我是pink老师"/>
<h4> title 提示文本 鼠标放到图像上,提示的文字:</h4>
<img src="img.jpg" title="我是pink老师思密达" alt="我是pink老师"/>
<h4> width 给图像设定宽度:</h4>
<img src="img.jpg" alt="我是pink老师" title="我是pink老师思密达" width="500"/>
<h4> height 给图像设定高度:</h4>
<img src="img.jpg" alt="我是pink老师" title="我是pink老师思密达" height="100"/>
<h4> border 给图像设定边框:</h4>
<img src="img.jpg" alt="我是pink老师" title="我是pink老师思密达" width="500" border="15"/>
</body>
</html>
3.3 表格元素
3.3.1 表格基本元素
<tr></tr>表示表格的行
<td></td>表示表格的列
<table>标签用于定义表格表格的样式，属性包括align(对齐方式)、border(边框宽度)、cellpadding(单元格与内容间空白)、ceelSpacing(单元格之间空白)、width、height。
<thead>标签定义表格的表头, <tbody>和 <tfoot>元素分别表示表格主体和表格页脚。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>今日小说排行榜</title>
</head>
<body>
<table align="center" width="500" height="249" border="1" cellspacing="0">
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>进入搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>3</td>
<td>西游记</td>
<td><img src="up.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
</tbody>
</table>
</body>
</html>
3.3.2 合并单元格
<td colspan="2"></td>用于合并单元格，表示将两列合并在一起。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>合并单元格</title>
</head>
<body>
<table width="500" height="249" border="1" cellspacing="0">
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
3.3.3 无序列表
<!DOCTYPE html>
<html lang="en">
<head>
<title>无序列表</title>
</head>
<body>
<h4>您喜欢的食物?</h4>
<ul>
<li>榴莲</li>
<li>臭豆腐</li>
<li>鲱鱼罐头</li>
<li>
<p>123</p>
</li>
</ul>
</body>
</html>
3.3.4 列表编号
<ul>是项目列表，<li>做列表项，每一项的符号默认是小黑圆点；
<ol>是编号列表，<li>做列表项，每一项的符号默认是数字;
ul与ol前的符号是可以修改的。只需要修改它们的type值。
ul的type属性有：disc—实心圆(默认）、circle—空心圆、square—实心方块
ol的type属性有：1—数字（默认）、a—小写字母、A—大写字母、i—小写希腊字母、I—大写希腊字母。
<!DOCTYPE html>
<html lang="en">
<head>
<title>有序列表(理解)</title>
</head>
<body>
<h4>粉丝排行榜</h4>
<ol>
<li>刘德华 10000</li>
<li>刘若英 1000</li>
<li>pink老师 1</li>
</ol>
</body>
</html>
3.4 输入元素
<form>标签用于为用户输入创建 HTML 表单。里面可以包含<input>、<select>、<textarea>等元素。
3.4.1 input标签
input元素的属性
- type属性：指定输入内容的类型，默认为text:单行文本框
- name属性:输入内容的识别名称，传递参数时候的参数名称
- value属性:默认值
- maxlength:输入的最大字数
- readonly属性：只读属性，设置内容不可变更，提交时会以前发送至服务器
- disabled属性：设置为不可用（不可操作）
- required属性：设置该内容为必须填写项，否则无法提交
- placeholder属性：设置默认值，当文本框获得焦点时被清空，对text/url/tel/email//password/search有效
- autofocus属性：自动获得焦点
- accesskey属性：指定快捷键windows中，指定快捷键后，按Alt+“快捷键”,便会获得焦点
- tabindex属性：指定按Tab键时，项目间的移动顺序
- autocomplet属性： HTML5新增属性属性值为on/off,定义是否开启浏览器自动记忆功能
更多可以参考博客：https://blog.csdn.net/joyce_wu66/article/details/51719287
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>input 表单元素</title>
</head>
<body>
<form action="xxx.php" method="get">
<!-- text 文本框 用户可以里面输入任何文字 -->
用户名: <input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
<!-- password 密码框 用户看不见输入的密码 -->
密码: <input type="password" name="pwd" > <br>
<!-- radio 单选按钮 可以实现多选一 -->
<!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
<!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->
性别: 男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女" checked="checked"> 人妖 <input type="radio" name="sex" value="人妖"> <br>
<!-- checkbox 复选框 可以实现多选 -->
爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby"> 打豆豆 <input type="checkbox" name="hobby" checked="checked">
<br>
<!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 -->
<input type="submit" value="免费注册">
<!-- 重置按钮可以还原表单元素初始的默认状态 -->
<input type="reset" value="重新填写">
<!-- 普通按钮 button 后期结合js 搭配使用-->
<input type="button" value="获取短信验证码"> <br>
<!-- 文件域 使用场景 上传文件使用的 -->
上传头像: <input type="file" >
</form>
</body>
</html>
3.4.2 select标签
<!DOCTYPE html>
<html lang="en">
<head>
<title>select下拉表单</title>
</head>
<body>
<form>
籍贯:
<select>
<option>山东</option>
<option>北京</option>
<option>天津</option>
<option selected="selected">火星</option>
</select>
</form>
</body>
</html>
3.4.3 文本输入
<!DOCTYPE html>
<html lang="en">
<head>
<title>textarea 文本域</title>
</head>
<body>
<form>
今日反馈:
<textarea cols="50" rows="5">反馈留言是textarea来做的 </textarea>
</form>
</body>
</html>
