HTML简介！
HTML的英文全称是 Hypertext Marked Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML语言，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML5极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML与HTTP之间的相互关系
HTML 指的是超文本标记语言 (Hyper Text Markup Language)，HTML 不是一种编程语言，而是一种标记语言 (markup language)。
HTTP 指的是超文本传输协议。
HTTP的产生是为HTML服务的，可以通过客户端发起HTTP请求到服务器端，将服务器端存储的HTML文档等内容返回。
HTML标签实例一：制作一个导航
<!-- 手写代码 --!>
实例
<!doctype html> <!-- 声明当前页面是标准的HTML5网页 --> <html lang="en"> <!-- 告诉搜索引擎当前页面是英文网页 --> <head> <!-- 所有头部元素的容器 --> <meta charset="UTF-8"> <!-- META 标签 此处告诉浏览器当前网页字符编码为 UTF-8 --> <!-- 自适应网页重要标签 网站会自动缩放 固定宽度无效 --> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <!-- 根据官网定义X-UA-compatible 标头不区分大小写；不过，它必须显示在网页中除 title 元素和其他 meta 元素以外的所有其他元素之前。如果不是的话，它不起作用2，content的内容是IE=8，或者IE=edge等值，注意不是IE8或者直接写个edge的值，否则不起作用 --> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 网页标题 显示在浏览器上 网站SEO重要元素 --> <title>第一个导航</title> </head> <!-- body 网页的内容容器 --> <body> <!-- Nav 标签为HTML5新增标签 用于网页导航容器 --> <nav> <!-- ul 标签定义无序列表--> <ui> <!-- li 标签定义列表项目--> <li> <a href="https://www.php.cn">PHP中文网</a> </li> <li> <a href="https://www.php.cn/k.html"> <img src="https://www.php.cn/static/images/logo.png" width="120px" alt="php中文网" > </a> </li> </ui> </nav> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
HTML标签实例二：表格（Table）
<!-- 手写代码 -->
实例
<!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> <h3>双十一特价商品</h3> <table border="1" cellspacing="0"> <thead> <tr> <th>ID</th> <th>商品名称</th> <th>商品单价</th> <th>剩余库存</th> <th>销售金额</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>苹果11</td> <td>10900￥</td> <td>10</td> <td>109000</td> </tr> </tbody> <tfoot> <tr> <td colspan="3" align="center">总计</td> <!-- <td></td> <td></td> --> <td>10</td> <td>109000</td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
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> <h3>会员注册</h3> <form action="member.php" method="post"> <p> <label for="">账号：</label> <input type="text" name="name" id="" value="" placeholder="" autocomplete="off" /> </p> <p> <label for="">密码：</label> <input type="password" name="password" id="" value="" placeholder="" autocomplete="off" /> </p> <p> <label for="">年龄：</label> <input type="number" name="age" min="15" max="80" value="" placeholder="" autocomplete="off" /> </p> <p> <label for="male">性别:</label> <input type="radio" name="gender" id="male"><label for="male">男</label> <input type="radio" name="gender" id="female" checked><label for="female">女</label> <input type="radio" name="gender" id="secrecy"><label for="secrecy">保密</label> </p> <p> <label for="read">兴趣爱好:</label> <input type="checkbox" name="aihao" value="read" id="read" checked> <label for="read">读书</label> <input type="checkbox" name="aihao" value="game" id="game"><label for="game">游戏</label> <input type="checkbox" name="aihao" value="lvyou" id="lvyou"><label for="lvyou">旅游</label> <input type="checkbox" name="aihao" value="jiaoyou" id="jiaoyou"><label for="jiaoyou">交友</label> </p> <p> <label for="area">地区:</label> <select name="" id="area"> <optgroup label="河北省"> <option value="">秦皇岛</option> <option value="">唐山</option> <option value="">天津</option> <option value="" selected>廊坊</option> </optgroup> <optgroup label="四川省"> <option value="">成都</option> <option value="">广元</option> <option value="">眉山</option> </optgroup> </select> </p> <p> <label for="photo">头像上传:</label> <input type="file" name="photo" id="photo"> </p> <button type="button">立即注册</button> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
HTML标签实例：内联框架
<!-- 手写代码 -->
实例
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>内联框架</title> </head> <body> <!--内联框架 iframe--> <!--将另一个HTML页面嵌入到当前页面中,而不是窗口中打开另一个网页, 类似画中画--> <!--内联框架不会被搜索引擎抓取一般用于后台设计--> <ul style="float: left;margin-right: 20px;list-style-type: none;"> <li><a href="qq.html" target="content">腾讯新闻</a></li> <li><a href="baidu.html" target="content">百度一下</a></li> <li><a href="php.html" target="content">php中文网</a></li> </ul> <!--srcdoc代替src, 可以在属性值中直接写html代码--> <!--name属性是链接到该框架的入口--> <iframe srcdoc="<h1>这里是首页</h1>" frameborder="1" name="content" width="900" height="500"></iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
总结: 为什么推荐使用语义化的标签?
在HTML5出现之前，我们一般采用DIV+CSS布局我们的页面。但是这样的布局方式不仅使我们的文档结构不够清晰，而且不利于搜索引擎爬虫对我们页面的爬取。为了解决上述缺点，HTML5新增了很多新的语义化标签。
语义化的HTML就是正确的标签做正确的事情，能够便于开发者阅读和写出更优雅的代码的同时让网络爬虫很好地解析。
有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。
便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。
