文章目录

什么是HTML
如何创建⼀个HTML文件
HTML标签
- 标签语法
格式标签
- 标题标签
- 段落标签
- 换行标签 (用来输入空行，而不是分割段落)
- 水平线标签
- 无意义标签
文本标签
字符实体
超链接标签
URL相对地址与绝对地址
锚点链接
图片标签
热点地图
视频标签【html5新增的标签】
列表标签
图文并茂
表格标签
- 表格基础标签
- 属性
- 合并单元格
- 表格分区

什么是HTML

全称是 HyperText Markup Language 即超⽂本标记语⾔，⼀种⽤于创建⽹⻚的标准标记语⾔。

如何创建⼀个HTML文件

想要使⽤HTML需要创建HTML文件，每个网页都是⼀个HTML文件，html文件就是以 .html 结尾的⽂件。
在文件夹中右键新建文本文档，将文本文档修改后缀为 .html 即可。

<!DOCTYPE HTML>
<html>
</html>

HTML标签

标签语法

html是由标记（标签）组成的，标签由标签名和属性组成

标签写法

标签的写法 <标签名></标签名> 或者 <标签名 />

<!-- 标题 -->
<h1></h1>
<!-- 图片 -->
<img />

标签属性
在每个HTML标签上都由属性 <标签名属性名=“属性值” 属性名=“属性值”></标签名>

<h1 class="title"></h1>
<a href="https://www.baidu.com">百度</a>

标签分类
● 双标签和单标签
○ 双标签：如：<h2><h2/>、
○ 单标签：如：<input/>、<img/>
● 块级元素、⾏内元素和⾏内块级元素
○ 块级元素：单独占⼀⾏，允许设置宽⾼值
○ ⾏内元素：不会单独占⼀⾏，从左往右排列，设置宽⾼值不起效
○ ⾏内块级元素：不会单独占⼀⾏，从左往右排列，能设置宽⾼值

格式标签

标题标签

< h1~6 align= "left|right|center"> </h1~6>

段落标签

给⽂本添加⼀个段落的语义，告诉浏览器，哪些⽂字是⼀个段落

< p align="left|right|center" >< /p >

换行标签 (用来输入空行，而不是分割段落)

< br />

水平线标签

< hr  width="" size="" align="" color=""  noshade / >

无意义标签

< span>< /span > < div></ div >

用来组合文档中的行内元素，没有固定的格式表现，使用样式时，才有样式上的变化

文本标签

字体标签 
粗体标签 
斜体标签 
下划线标签 
删除线标签 < del></ del>
上标标签 
下标标签 

字符实体

● 在 HTML 中，某些字符是预留的，比如HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签
● 如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体，比如<用 < 或< 表示
● 字符实体由三部分组成：
○ 以&开始
○ 中间为实体名或实体编号
○ 以 ; 结束
● 实体名称便于记忆而实体编号的浏览器兼容性更好
● 实体名称区分大小写

超链接标签

普通链接
基础语法：< a href=“链接地址” target=“blank | self” title=“描述”>文本或图片</ a>
href：连接路径
target：标的意思，跳转后的网站是否在新标签页打开； blank新窗口跳转， self当前窗口跳转
title：鼠标悬浮显示文字
空链接 < a href=“##”>< /a >
返回页面顶部 < a href=“#”>< /a>
保持原位置 < a href=“javascript:; ”>< /a >
脚本链接 < a href=“javscript:alert(‘hello world’)”>< /a>
电子邮件链接 < a href=“mailto:邮箱地址” >< /a >
拨打电话 < a href=“tel:电话号码” >< /a >
注意：
a标签不仅可以给⽂字添加超链接，也可以给图⽚，视频，⾳频，表格等添加超链接。
如果通过a标签的href属性指定⼀个URL，那么必须在地址前加上http://或者https://。

URL相对地址与绝对地址

● 协议://主机:端口号/文件/附加资源
● http://www.yunhedata.com.cn/info.html?uname=tina&age=20&sex=female
● 相对URL:
Images/logo.gif
…/css/demo.css
…/…/js/demo.js
./admin/index.php
● 绝对URL:
C:/appserv/www/image/logo.gif
/usr/local/apache/htdocs/www/index.php
http://www.yunhedata.com.cn/

锚点链接

● 使用 name 属性创建 HTML 页面中的锚点
● 当使用锚时，我们可以创建直接跳至该命名锚的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了
● 步骤：
a. 创建锚点 < a name=“锚点名称”></ a>
b. 链接到锚点
同一页面 : < a href=“#锚点名称”></ a>
不同页面 : < a href=“目标文档URL# 锚点名称”>< /a>

图片标签

基础语法：
src source的缩写，来源，表示图⽚的来源、路径。必须的属性
alt 图像无法显示时的替代文本，搜索引擎可以通过它指定的文字搜索该图片
width 图片宽度
height 图片高度
border 图片边框

设计网页时经常使用的图片有三种格式：
● GIF – 最多支持256色,支持透明,支持多帧动画显示效果.
● JPEG | JPG-- 支持多种颜色,可以有很高的压缩比,使用了有损压缩,不支持透明,不支持动画效果.256256256
● PNG – 是一种新的图片技术,可以表现品质比较高的图片,使用了无损压缩,支持透明,不支持动画

热点地图

<img  src="" alt="" usemap="#test">
<map name="test"  id="test"><area shape="rect" coords="x1,y1,x2,y2" alt="" href=""/><area shape="circle" coords="x,y,r" alt="" href=""/><area shape="poly" coords="x1,y1,x2,y2,……,xn,yn" alt="" href=""/>
</map>

area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域，img中的 usemap 属性可引用map中的 id 或 name 属性（取决于浏览器），所以我们应同时向 map添加 id 和 name 属性

视频标签【html5新增的标签】

<!-- 音频或者视频 -->
<object data="../video/Tomorrow.mp4" height="200" width="200"></object>
<!-- 音频或者视频 -->
<embed src="../video/Tomorrow.mp4" height="200" width="200">
<!-- 音频 -->
<audio src="../那一年.mp3"></audio>audio 音频元素；用于嵌入一个 音频文件src 音频文件的URLcontrols 显示播放控件autopaly 表示立刻播放preload 预先载入音频文件数据
<!-- 视频 -->
<video src="movie.mp4" controls="" width="400" muted="" poster="cover.jpg" loop="">video 视频播放元素src 视频资源的URLcontrols 表示显示播放控件autoplay 自动播放,目前不能使用muted 表示静音poster 指定视频载入时显示的图片封面loop 反复播放preload 预先加载

注意：如果你无法看到该视频,那么可能你的电脑不支持该文件格式
< object > 标签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。
< embed >标签是html5中新标签，几乎所有浏览器都支持。拥有width、height、src、type(src引用文件的MIME 类型)四个属性
embed是针对非IE的浏览器（如火狐、chrome）的媒体播放器;
object是针对IE浏览器标签

列表标签

分类：有序列表，无序列表，自定义列表
如果想要在页面上显示新闻业的内容，或者显示一列文字，可以使用列表
如图所示，百度新闻，腾讯新闻，网易新闻；还有一类用作网站栏目，比如小米官网栏目

<ul type="disc|square|circle"><li>1</li><li>2</li><li>3</li><li>6</li>
</ul>
<ol type="a|A|i|I" start="num"><li>1</li><li>2</li><li>3</li><li>6</li>
</ol>
<!--
ul 元素表示这是一个无序列表
li 元素表示表内部的列表项，每一条
-->
disc默认值实心圆，square正方形，circle空心圆

ul：unordered list 无序列表
ol：ordered list 有序列表
![在这里插入图片描述](https://img-blog.csdnimg.cn/8b59ea9923fd48dd85feb6a55edfc553.png#pic_center
![在这里插入图片描述](https://img-blog.csdnimg.cn/736ea8ddf95d49478eb48a90c219a1d0.png#pic_center

图文并茂

<figure><figcaption>这是一张图</figcaption><img src="1.png" width="200">
</figure>
<!--
figure 插图元素
figcaption 表示插图的标题内容 说明
-->

表格标签

表格基础标签

在过去表格标签⽤的⾮常多，很多⽹站都是⽤表格标签进⾏布局，展示数据的。
● table：表格
● tr：table rows ⾏
● td：table dock 单元格
表格标签之间是相互嵌套的。table>tr>td
如果我们需要添加表头的语义，可以使⽤⼀个新的标签，th标签，th：table head 表示表头单元格，替换的是td的位置，table>tr>th

<table><tr><th></th><th></th><th></th></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr>
</table>

表格宽高
表格的宽和⾼默认是按照内容的尺⼨⾃适应调整的。我们可以通过给table标签和td标签设置width/heigh属性的⽅式来指定表格/单元格的宽/⾼。
如果给td设置width和height，会修改当前单元格的宽和⾼，但不会影响这个表格的宽和高。

属性

border：表格边框
cellpadding：单元格内的空间
cellspacing：单元格之间的空间
align：内容⽔平对⻬⽅式
valign：内容垂直对⻬⽅式

<table border="1" width="600px" height="200px" cellpadding="0" cellspacing="0" align="center"><tr align="center" valign="middle"><td>疾⻛剑豪</td><td>中单</td><td>狂⻛绝息斩</td><td>6300</td></tr><tr><td>疾⻛剑豪</td><td>中单</td><td>狂⻛绝息斩</td><td>6300</td></tr><tr><td>疾⻛剑豪</td><td>中单</td><td>狂⻛绝息斩</td><td>6300</td></tr>
</table>

合并单元格

rowspan：合并列方向单元格
colspan：合并行方向单元格
属性值是⼀些数字，表示合并单元格的数量
上边线在同⼀⾏的，就算在同⼀⾏

<table border="1"><tr><td colspan="2">UZIYYDS</td><td>adc</td><td>我去洗个澡</td><td>4800</td></tr><tr><td>孤⼉索</td><td>疾⻛剑豪</td><td>中单</td><td>狂⻛绝息斩</td><td rowspan="2">6300</td></tr><tr><td>⼈⻢</td><td>战争之影</td><td>打野</td><td>⻢踏⻜箭</td></tr>
</table>

表格分区

标题：caption
表头：thead
页脚：tfoot
主体：tbody
语义化标签。
tfoot的位置在thead与tbody之间
这四个表格分区标签本身没有任何样式，仅仅是⼀个区块划分标记罢了

<table width="600" border="1" align="center" cellpadding="0" cellspacing="0"><caption>学生信息表</caption><thead><tr align="" valign="" bgcolor=""><th>姓名</th><th>性别</th><th>年龄</th><th>班级</th></tr></thead><tfoot><tr><td>章三</td><td rowspan="2">男</td><td>19</td><td>java</td></tr><tr><td>大张伟</td><td>18</td><td rowspan="2">python</td></tr><tr><td>章子怡</td><td>女</td><td>19</td></tr></tfoot>
</table>

table 元素表示一个表格的声明
tr 元素表示表格的一行
td 元素表示一个单元格
默认的 table 表格是没有边框的 border属性表示增加一个边框
th 为表格添加标题单元格实际作用就是内部文字居中加
td th均属于单元格，包含2个属性 colspan rowspan
colspan 表示合并一行所在列合并
rolspan 表示合并一列所在行合并

面试题：请阐述table的缺点
a. 太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量。
b. 灵活性差，比如要将tr设置border等属性，是不行的，得通过td
c. 代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱
d. 混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱。
e. 不够语义

前端入门知识点之html标签相关推荐

黑马pink老师Web前端入门笔记（二）
Web前端入门二.HTML标签 (一) 学习目标 (二)HTML语法规范 (三) HTML基本结构标签 (四) 开发工具 (五) HTML常用标签 1.语义标签: 2.标题标签(重要): 3.段落和 ...
web前端入门到实战：HTML5新增和废弃的标签
一.废弃的标签以下的 HTML 4.01 元素在HTML5中已经被删除,虽然浏览器为了兼容性考虑都还支持这些标签,但建议使用新的替代标签,矛盾的是老浏览器对新标签的支持度又不够,视项目的受众对象而定 ...
Web前端入门学习（5）——浮动原理及清除浮动
浮动原理及清除浮动上节回顾在上节的<Web前端入门学习(4)-- 块级元素和行内元素之特征与转换>中(http://cherry360.blog.51cto.com/12176744/ ...
码匠编程：零基础从前端入门到前端开发工程师路线
一.前端学习路径规划下面是一个学习线路图,其实还有很多的技术导图中没有涉及到,对于初学者来说,能够掌握上边的知识点已经很不错了. 零基础从前端入门到前端开发工程师路线二.入坑前的三问想要入前端的 ...
经验分享：Web前端入门要怎么开始学？
现在,几乎整个互联网行业都缺前端工程师,不仅是刚起步的创业公司,对上市公司乃至巨头这个问题也一样存在. 据统计,国外的前端开发人员和后端开发人员比例约1:1,但是在国内比例却在1:3以下,Web前端开 ...
结合个人经历总结的前端入门方法（这才是真的入门经典）
结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路.学习方法.资料.由于能力有限,不能保证面面俱到,只是作为入门参考,面向初学者,让初学者少走弯路. 互联网的快速发展和激烈竞争,用户 ...
前端入门——菜鸟之路
结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路.学习方法.资料.由于能力有限,不能保证面面俱到,只是作为入门参考,面向初学者,让初学者少走弯路. 互联网的快速发展和激烈竞争,用户 ...
写给栋栋的前端入门到熟悉教程
写给栋栋的前端入门到熟悉教程目前栋栋的情况了解HTML语法了解CSS作用 Javascript学了都忘了 jQuery也忘了 Ajax是啥都不知道写在开始大部分知识都是空缺的,因此想作为一名 ...
结合个人经历总结的前端入门方法
结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路.学习方法.资料.由于能力有限,不能保证面面俱到,只是作为入门参考,面向初学者,让初学者少走弯路. 互联网的快速发展和激烈竞争,用户 ...

前端入门知识点之html标签