沃土前端系列 - 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>

沃土前端系列 - HTML常用标签相关推荐

从零开始学前端 - 3. HTML 常用标签_2
作者: 她不美却常驻我心博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
前端之HTML常用标签
## 本资源由 itjc8.com 收集 --- typora-copy-images-to: media --- > 第01阶段.前端基础.HTML常用标签 ## 学习目标 - 理解: - ...
从零开始学前端 - 2. HTML常用标签_1
作者: 她不美却常驻我心博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
前端--HTML，常用标签学习
文章目录一.HTML 1. 概述 2.入门案例 3.使用HBuilder 二.常用标签 1.概述 2. 常用标签 3.表格标签 4.表单标签form 5,无法提交的问题 6.练习表单标签一.HTM ...
前端开发 html常用标签 0229
文本标签字体实符实体常用元素列表标签超级链接图片标签
HTML常见双标记图,HTML基础-常用标签及图片
标记/标签{元素} 双标签: 内容标签> 网页页面的根元素 .....h2-h6 标题表格.... 单标签: 内容例如:图片换行水平线.... 常用标签段落换行空格小 ...
03 HTML常用标签及特殊字符（狗子前端系列之HTML5）
03 HTML常用标签及特殊字符 1 HTML 常用标签 1.1 标签语义标签语义是指标签的含义,即这个标签是用来干嘛的根据标签的语义,在合适的地方给一个最合理的标签,可以让页面结构更清晰 1.2 ...
讲给后台程序员看的前端系列教程(06)——HTML5标签(5)
C语言自学完备手册(33篇) Android多分辨率适配框架 HTML5前端开发实战系列教程 MySQL数据库实操教程(35篇图文版) 推翻自己和过往--自定义View系列教程(10篇) 走出思维困境 ...
web前端 HTML常用标签,标签分类
1.什么是标签 #1.在HTML中规定标签使用英文的的尖括号即<和>包起来,如<html>.<head>.<body>都是标签, #2. HTML中标签 ...