HTML含义:
HTML是的英文全称是Text Mark-up Language（超文本标记语言）的缩写，它也是一种制作万维网页面的标准语言，相当于定义统一的一套规则，这样可以让浏览器根据标记语言的规则进行解释。
超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一个中标准，它通过标记符号来标记要显示网页中的各个部分。网页文件本身是一种文本文件，通过文本文件中添加标记符，可以告诉浏览器如何显示其中的内容(如:文件如何处理，画面如何安排，图片如何显示等).
网页的组成:
一个网页一般由两部分组成:
HTML(Hypertext Markup Language)
CSS(Cascade Style Sheets)
HTML负责描述网页的结构和内容（如标题、导航栏等）
<head>和</head>之间的内容，是元信息和网站的标题，元信息一般不显示出来，但是记录了了这个HTML文件的很多描述性质的信息
<body>和</body>之间的内容，是浏览器展示出来的，用户看到的页面效果。也就是说这里是网页的支柱或者说主体，即body的身体之意
<html>和</html>说明这个文件是一个网页。告诉浏览器这个网页的开始和结束。包含了之后的连个元素<head>和</head>|<body>和</body>
代码如下:
计算
安全
数据库
网络和加速
企业服务
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>代码解释:
DOCTYPE:告诉浏览器使用什么样的html或者xhtml规范来解析html文档
DOCTYPE的模式:
BackCompat：标准兼容模式未开启（或叫怪异模式【Quirks mode】、混杂模式）
CSS1Comat:标准兼容模式已开启（或叫做严格模式[Standards mode/Strict mode]）
head部分
1、meta(metadata information)
提供有关页面的元信息，例如:页面编码、刷新、跳转、针对搜索引擎和更新频率的描述以及关键词
①、页面编码
<meta charset="UTF-8"> #指定编码类型为UTF-8
②、刷新和跳转
<meta http-equiv="refresh" content="5"/> #设置每隔5秒刷新页面一次
<meta http-equiv="refresh" content="1:Url=http://www.baidu.com"/> #指定1秒后跳转到百度页面
③、关键字
关键字作用其实就是用来让爬虫之类的收录程序，当他们在爬我们网站的时候，如果你有关键字，那么他们会优先把关键字收录到他们的记录中，比如百度，如果他们收录之后，然后我们在搜索关键字的时候就能找到咱们的网站。
<meta name="keywords" content="python 21天学会Python html语言精通">
④、描述
例如一个51cto里就有一个描述
<meta name="description" content="51cto技术博客 领先的IT技术博客">
⑤、X-UA-Compatible
X-UA-Compatible 这个是IE8特有的，知道即可，因为做前端的同学都很害怕IE因为他们问题比较多各个版本问题很诡异，当IE8的时候微软想把各个版本的统一，那么这个参数就出现了，他为了向下兼容，如下的代码如果使用IE8的时候他会以IE7的模式运行。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
2、title
网页头部信息，如下所示:
HTML文件各标签举例说明如下:
<!DOCTYPE html><!--定义通用规则标准-->
<html lang="en">
<head>
<meta charset="UTF-8"> <!--定义字符编码-->
<meta http-equiv="refresh" Content="5"><!--每5秒钟刷新一次请求你页面-->
<meta http-equiv="refresh" Content="5" Url=http://www.baidu.com><!--5秒钟后刷新后跳转到百度-->
<title>Python之路</title>
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<h2 >addafagag</h2><!--不管内容多少一直占用整行的标签为块级标签 -->
<a >"汽车之家"</a><!--根据内容自己有多少内容占多少空间的标签叫做内嵌标签 -->
<p>段落标签①</p><!--段落标签!-->
<br/><!--换行标签-->
<p>段落标签②</p><!--换行标签-->
<br/><!--换行标签-->
<a>Python之路</a><!--超链接标签-->
<br/>
<a href="www.python.org">python之路</a><!--超链接实现跳转，在原来的页面打开-->
<br/><!--换行标签-->
<a target="_blank" href="www.python.org">python之路</a><!--超链接实现跳转，在新页面打开,target的属性为_blank表示在新的页面打开-->
<br/>
<a href="#要跳转的位置参数">python之路</a><!--锚的定位,注意要有#开头-->
<br/>
<a href="#a1">python之路</a><!--锚的定位-->
<br/>
<div id="a1" >
id为a1的内容所在位置
</div>
<div id="a2" >
id为a2的内容所在位置
</div>
<h2>h2标签作用是将标签加大加粗</h2><!--H标签的作用仅仅是将标签字体进行大小粗细设置-->
<h3>h3标签作用是将标签加大加粗</h3>
<h4>h4标签作用是将标签加大加粗</h4>
<h5>h5标签作用是将标签加大加粗</h5>
<select>
<option value="1">上海</option>
<option value="2">北京</option>
<option value="3" selected="selected">广州</option>
</select>
<!--单选标签-select-->
<select size=2>
<option value="1">上海</option>
<option value="2">北京</option>
<option value="2" selected="selected">广州</option>
</select>
<!--多显标签，最多显示2个-->
<select multiple="multiple" size="4">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
<option value="5" selected="selected">武汉</option>
</select>
<!--多选标签，在显示4个的基础上可以进行多选-->
<select>
<optgroup label="湖北省">
<option>武汉市</option>
<option>襄阳市</option>
<option>宜昌市</option>
</optgroup>
<optgroup label="广东省">
<option>广州市</option>
<option>深圳市</option>
<option>珠海市</option>
</optgroup>
</select>
<!--分组标签，该标签不能进行选择，只是对元素进行了分组-->
<!--复选标签-->
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<!--input标签系的复选框，类型为checkbox 默认是没有选择，如果默认要选择则需要添加如下属性字段checked="checked" -->
<input type="checkbox" checked="checked" />
<!-- radio标签，单选标签，默认请三个选项都可以选择 -->
<input type="radio"/>
<input type="radio"/>
<input type="radio"/>
<!-- radio标签实现单选功能，可以在标签内添加字段name="gender"来实现 -->
<hr/>
<input type="radio" name="gender"/>
<input type="radio" name="gender"/>
<input type="radio" name="gender"/>
<!--标准的单行文本输入框，类型为text-->
<input type="text"/>
<!--通过value属性对文本输入框设置默认值 -->
<input type="text" value="请输入内容">
<!--标准的密码输入框,类型为password -->
<input type="password"/>
<!--标准的email类型输入框,类型为email,输入类容必须满足邮件格式，一般用于高版本浏览器IE或者chrome Firefox-->
<input type="email"/>
<!-- 标准的按钮标签类型为button或者为submit,当类型为submit的value值默认为提交-->
<input type="button"/>
<input type="submit"/>
<!--值可以通过value属性来设置,这里设置提交 -->
<input type="button" value="提交"/>
<input type="submit" />
<!--标准的选择上传文件标签其类型为file -->
<input type="file"/>
<!--多行输入，可以通过css来对输入框的长宽进行自定义设置 --->
<textarea>Python之路Python之路Python之路Python之路</textarea>
<!--通过css来设置输入框的长宽 -->
<textarea >Python之路Python之路Python之路Python之路</textarea>
<!--form表单 --->
<form>
<p>
用户名:<input type="text">
</p>
<p>
密 码:<input tpye="password">
</p>
</form>
<hr/>
<form action="提交到后台的地址">
<p>
用户名:<input type="text">
</p>
<p>
密 码:<input tpye="password">
</p>
<input type="submit" value="提交">
<input type="button" value="按钮">
</form>
<!--submit和button的区别是，如果submit在form标签内，就会提交整个form标签到后台-->
<!--Label标签作用，增加用户体验 -->
<div>
<h2>Label标签</h2>
姓名:<input type="text"/>
婚否:<input type="checkbox"/>
</div>
<hr/>
<!--在使用label标签后，如果要在输入框中输入内容，只需要鼠标点击旁边的"姓名"或者"婚否"就可以自动将鼠标移至输入框内而不需要特意点击输入框进行输入 -->
<div>
<label for="name_1">
姓名:
<input id="name_1" type="text"/>
</label>
</div>
<div>
<label for="name_2">
婚否:
<input id="name_2" type="checkbox"/>
</label>
</div>
<!--列表序号，ul是黑点，ol是数字序号-->
<ul>
<li>ul.li</li>
<li>ul.li</li>
<li>ul.li</li>
</ul>
<ol>
<li>ol.li</li>
<li>ol.li</li>
<li>ol.li</li>
</ol>
<!--分组dl -->
<dl>
<dt>湖北省</dt><!--dt表示标题 -->
<dd>武汉市</dd><!--dd表示内容 -->
<dd>荆州市</dd>
<dt>湖南省</dt>
<dd>长沙市</dd>
<dd>岳阳市</dd>
</dl>
<!--table 常见的表格标签 tr表示行，td表示列-->
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
<!--table表格添加边框可以通过属性border来设置-->
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
<!-- table 行和列合并用属性"colspan"和"rowspan"来设置 -->
<table border="1">
<tr>
<td colspan="2">1</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
<!--table标签的另外一种表示结构 -->
<table border="2">
<thead>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
<th>标题4</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">1</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
<br>
<hr/>
<!-- fieldset标签 -->
<fieldset>
<legend>登录</legend>
<p>用户名:</p>
<p>密码:</p>
</fieldset>
</body>
</html>HTML常用标签分组:
对于a标签属性小窍门:
1、知识点属性，a标签属性，在其调用样式中添加：
cursor:pointer
使其指导目标时鼠标变成小手
2、a标签中如果想实现鼠标放在目标位置时下划线消失，在对应的样式中添加:
text-decoration:none
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
