沃土前端系列 – HTML常用标签

html是什么

HTML是Hyper Text Markup Language的缩写，中文的意思是“超文本标记语言”，它是制作网页的标准语言。由于网页中不仅包含普通文本，还包含超文本，故被称作超文本描述语言。
那什么是超文本呢？所谓超文本，就是指图像、视频、动画、声音、表格、链接等多媒体的内容。

第一个网页Hello world

打开记事本,写上Hello world,然后保存为index.html,接着用浏览器把index.html打开,就看到了
Hello world,这就是一个最简单的网页。

认识标签

什么是标签（元素）

<!-- DOCTYPE 这个文档类型，一开始无需深究 -->
<!DOCTYPE html>
<html><!-- 网页的一些设置放在head --><head><!-- 设置字符集 --><meta charset="UTF-8"><!-- 设置标题--><title>demo</title></head><!-- 看得见的部分放在body --><body>hello world</body>
</html>

html、body、head、meta都是标签，不同的标签作用也不同

常用标签一

标题标签H1~H6
分割线标签 hr
div标签
段落p标签
span标签
块级标签和行内标签
换行标签 br
图片标签
列表标签

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!-- 标题标签 --><h1>这是h1标签</h1><h2>这是h1标签</h2><h3>这是h1标签</h3><h4>这是h1标签</h4><h5>这是h1标签</h5><h6>这是h1标签</h6><!--分割线标签--><hr /><!-- div标签 --><div>这是div标签</div><!-- 段落标签 --><p>这是段落标签，文字的上下会有间隔</p><!-- span标签 --><span>第一个span标签</span><span>第二个span标签</span><!-- 换行标签 --><br /><!-- 图片标签 --><img src="tupian.jpg"/><!-- 列表标签，包括有序列表和无序列表 --><h3>无序列表</h3><ul><li>内容1</li><li>内容2</li><li>内容3</li><li>内容4</li><li>内容5</li></ul><h3>有序列表</h3><ol><li>内容1</li><li>内容2</li><li>内容3</li><li>内容4</li></ol></body>
</html>

常用标签二：表格标签

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!-- border加上边框，width设置宽度 --><table border width="500"><!-- thead 表头 --><thead><!-- tr 行 --><tr><th>姓名</th><th>年龄</th><th>性别</th></tr></thead><!-- tbody 表的主体内容 --><tbody><!-- tr行 --><tr><!-- td列 --><td>楚留香</td><td>22</td><td>男</td></tr><tr><td>胡铁花</td><td>20</td><td>男</td></tr><tr><td>范冰冰</td><td>30</td><td>女</td></tr></tbody></table></body>
</html>

常用标签三：表单标签

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!-- form表单标签，用来包各种表单相关的元素 --><form action=""><!-- 输入元素 --><!-- 文本域type为text，value是默认值，placeholder为提示语 --><input type="text" value="" placeholder="请输入文字"/><br /><!-- 密码框type=password --><input type="password" value="" placeholder="请输入密码"/><br /><!-- 单选按钮type=radio，必须拥有相同的name -->男：<input type="radio" name="sex" value="" />女：<input type="radio" name="sex" value="" /><br /><!-- 复选框checkbox -->足球：<input type="checkbox" name="ball" value="" />篮球：<input type="checkbox" name="ball" value="" />羽毛球球：<input type="checkbox" name="ball" value="" />乒乓球：<input type="checkbox" name="ball" value="" /><br /><!-- 按钮 --><input type="button" name="" id="" value="按钮" /><br /><!-- 提交按钮 --><input type="submit" name="" id="" value="提交" /><!--重置按钮 --><input type="reset" name="" id="" value="重置" /></form></body>
</html>

常用标签四：链接标签、下拉列表标签和iframe标签

链接标签

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">p {width: 300px;line-height: 3;}</style></head><body><a href="helloWorld.html">hello world</a><br /><a href="https://www.baidu.com">百度</a><br /><!-- 打开新页面 --><a href="https://www.sina.com" target="_blank">新浪</a><br /><a href="#aaa">锚点aaa</a><p>HTML是Hyper Text Markup Language的缩写，中文的意思是“超文本标记语言”，它是制作网页的标准语言。由于网页中不仅包含普通文本，还包含超文本，故被称作超文本描述语言。 那什么是超文本呢？所谓超文本，就是指图像、视频、动画、声音、表格、链接等多媒体的内容。 HTML是网页的基本描述语言，由Tim Berners-Lee在1990年提出，其目的是方便地把一台电脑中的文本或图形，与另一台电脑中的文本或图形联系在一体，形成一个有机的整体，让人们不必考虑这些信息是在当前的电脑上，还是在网络上的其他电脑上。 HTML 不是一种编程语言，而是一种描述性的标记语言 (markup language)，它使用标签来描述网页，负责将网页内容进行格式化，使内容更具逻辑性。 HTML文档不需要编译，直接由浏览器解释执行，浏览器（IE、FireFox、Chrome、Opera、Safari、UC等）软件知道HTML的语法，知道如何解释HTML文档。目前互联网上的绝大部分网页，都是使用HTML编写的。</p><p>HTML是Hyper Text Markup Language的缩写，中文的意思是“超文本标记语言”，它是制作网页的标准语言。由于网页中不仅包含普通文本，还包含超文本，故被称作超文本描述语言。 那什么是超文本呢？所谓超文本，就是指图像、视频、动画、声音、表格、链接等多媒体的内容。 HTML是网页的基本描述语言，由Tim Berners-Lee在1990年提出，其目的是方便地把一台电脑中的文本或图形，与另一台电脑中的文本或图形联系在一体，形成一个有机的整体，让人们不必考虑这些信息是在当前的电脑上，还是在网络上的其他电脑上。 HTML 不是一种编程语言，而是一种描述性的标记语言 (markup language)，它使用标签来描述网页，负责将网页内容进行格式化，使内容更具逻辑性。 HTML文档不需要编译，直接由浏览器解释执行，浏览器（IE、FireFox、Chrome、Opera、Safari、UC等）软件知道HTML的语法，知道如何解释HTML文档。目前互联网上的绝大部分网页，都是使用HTML编写的。</p><p id="aaa">这是个锚点</p><a href="#">回顶部</a><p>那什么是超文本呢？所谓超文本，就是指图像、视频、动画、声音、表格、链接等多媒体的内容。 HTML是网页的基本描述语言，由Tim Berners-Lee在1990年提出，其目的是方便地把一台电脑中的文本或图形，与另一台电脑中的文本或图形联系在一体，形成一个有机的整体，让人们不必考虑这些信息是在当前的电脑上，还是在网络上的其他电脑上。 HTML 不是一种编程语言，而是一种描述性的标记语言 (markup language)，它使用标签来描述网页，负责将网页内容进行格式化，使内容更具逻辑性。 HTML文档不需要编译，直接由浏览器解释执行，浏览器（IE、FireFox、Chrome、Opera、Safari、UC等）软件知道HTML的语法，知道如何解释HTML文档。目前互联网上的绝大部分网页，都是使用HTML编写的。</p></body></html>

下拉列表标签

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><select name=""><!-- 列表选项 --><option value="xigua">西瓜</option><option value="apple">苹果</option><option value="xueli">雪梨</option><option value="banner">香蕉</option></select></body>
</html>

iframe标签

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><iframe src="https://www.baidu.com" width="800" height="600"></iframe></body>
</html>

常用标签五：html5新标签

html5是什么
Html5常用新增标签

header头部标签
footer底部标签
nav导航标签
audio音频标签
video视频标签
canvas画布标签
其他标签

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!-- 头部标签 --><header><!-- 导航标签 --><nav><a href="https://www.baidu.com" target="_blank">百度</a><a href="https://www.sina.com"  target="_blank">新浪</a><a href="https://www.qq.com"  target="_blank">腾讯</a></nav></header><hr /><!-- input type=tel移动端点击输入框，弹出的数字键盘 --><input type="tel" value="" placeholder="请输入手机号码" /><br /><!-- 音频 --><audio src="jiaobu.mp3" controls="controls"></audio><br /><!-- 视频 --><video width="800" height="400" controls="controls"><source src="zhanlang.mp4" type="video/mp4"></source></video><br /><!-- 画布 --><canvas id="myCanvas" width="200" height="100"></canvas><hr /><footer>底部标签</footer><script type="text/javascript">var c = document.getElementById("myCanvas");var cxt = c.getContext("2d");cxt.fillStyle = "#FF0000";cxt.fillRect(0, 0, 150, 75);</script></body></html>