Html5标签（列表、行级、文本格式、字符实体、语义化）
一、
1.无序列表
(1)语法
<ul>
<li>内容<li>
……
</ul>
(2)语义
将没有数字顺序的一组数据或内容进行分组
(3)典型应用
新闻列表
产品列表
(4)type属性
disc列表样式实心圆
circle 列表样式空心圆
square列表样式为小方块
注意:type属性不常用，通常使用css属性替代。
2.有序列表
（1）语法
<ol>
<li>内容<li>
……
</ol>
(2)语义
将顺序是有意义的一组数据或内容进行分组
（3)默认样式（演示）
默认间距
列表样式：数字编号
注意:type属性不常用，通常使用css属性替代。
(4)type属性（了解）
a: 小写字母A: 大写字母i: 小写罗马数字I: 大写罗马数字1: 数字
3.定义列表
（1）语法
<dl>
<dt>定义</dt>
<dd>描述</dd>
……
</dl>
(2)语义
包含术语定义以及描述的列表
烹饪食谱中的各个步骤
指路时的各处转弯方向
营养信息标签上 按含量排序的成分列表
面包屑导航
dl自定义列表、dt 自定义列表项、dd自定义列表项的注释（描述）
用于将一组项目及其相关的描述进行分组
(3)典型应用
默认dl，dd带有间距
名词解释、分类（大分类-细节的类别）
键-值对列表
注意:允许使用多条项目定义与描述。
允许使用带有多个描述的单个项目定义。
二、行级标签
1、图像
(1)语法
<img src="" width="" height="" alt="">
(2)标签属性
src属性
作用：用于指定图像文件的路径和文件名
注意：是<img>标签的必须属性
代码演示
alt属性
作用:指定替换文本,默认不显示，当图像不能正常显示时，显示该文字对图像进行替换,有利于用户体验
代码演示
width/height属性
作用:指定图片宽度/高度
注意：值可以不带单位默认px，只指定宽或高属性其中一个，另一个按照原比例等比缩放
代码演示
(3)默认样式
多张图片可以交列在一行显示
默认产生下间隙
(4)典型应用
作为内容展示的图像：产品图、广告图、详情页、文章页中插图。
(5)图像路径
页面中的图片会非常的多，通常我们会新建一个文件夹来存放这些图像文件images，这时候再查找图像，就需要通过路径的来描述图像文件的位置。 路径可以分成，相对路径和绝对路径。
相对路径
概述:相对路径是指由这个文件所在位置为参考基础，而建立出的目录关系，常用的相对路径包括当前目录，上一级目录，下一级目录。
当前目录
语法
一个点（.）后面跟一个斜杠表示当前目录也就是当前文件所在目录。
上一级目录
语法
两个点（.）后跟一个斜杠表示前文件所在目录的上一级目录。
下一级目录
语法
一个斜杠，表示图像文件位于HTML文件下一级。
绝对路径
绝对路径文件在目录中的绝对位置完整描述，常见的绝对路径一种由其在网络上的绝对位置定义的位置，一种是本地从盘符出发的绝对位置。
网络绝对位置
语法
包括协议和域名：如：http://www.ujiuye.com/statics/images/logo.png
本地绝对位置
语法
D盘下webset文件夹下的image文件夹中的logo.png描述为：
D:\webset\images\logo.jpg
特点:绝对URL始终指向同一位置，无论在何处使用
注意:在链接到同一网站内的其他位置时，应尽可能使用相对链接。链接到另一个网站时，需要使用绝对链接。
2、超链接
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像。将文档链接到其他文档或资源，链接到文档的特定部分。
(1)语法
<a href="">文字或图片</a>
(2)语义
超链接
(3)默认样式
不独占一行
默认当前窗口打开
默认带有下划线、文字颜色
(4)超链接属性
href属性
作用：指定链接跳转的地址
target属性
作用：指定目标地址的打开方式
取值
_blank新窗口打开_self当前窗口打开（默认值 ）
title属性
作用：定义提示文本，将鼠标悬停在链接上会显示标题作为工具提示
(5)链接的类型
空链接
描述：如果当时没有确定链接的目标时使用空链
外部链接
描述：链接到站外其他 网站的链接 （绝对地址）
内部链接 （相对地址）
描述：网站内部页面之间的相互链接。直接链接内部页面的名称
下载链接
描述：如果href里面的地址是一个文件或压缩包，会下载这个文件。
代码演示
(6)锚点链接
描述：当我们点击锚点链接时，可以快速定位到页面中的某个位置。
跳转至当前页面指定位置的锚点
语法：
定义目标：<p id="box"></p> 定义跳转：<a href="#box"></a>
跳转至其它页面的锚点
语法：
定义目标：a.html页面的 <div id="box"></div> 定义跳转：<a href="a.html#test"></a>
总结：重点掌握内部链接，外部链接，锚点链接。
三、文本格式
1、
概述：在日常用语中，我们常常会加重某个字的读音，或者用加粗等方式突出某句话的重点。
与此类似，HTML 也提供了相应的标签，用于标记某些文本，使其具有加粗、倾斜、删除划线等效果。
2、em标签
(1)语法
<em></em>
(2)语义
强调，用于标记强调内容。
(3)默认样式
斜体显示
不独占一行
3、strong 标签
(1)作用
标记重要强调的内容。
为了强调重要的词，在口语方面我们往往用重音强调，在文字方面则是用粗体字来达到强调的效果。
(2)语法
<strong></strong>
(3)语义
着重强调
(4)默认样式
不独占一行
加粗显示
4、del标签
(1)作用
被从文档中删除的文字内容
(2)语法
<del></del>
(3)语义
删除的内容
(4)默认样式
带有中划线
不独占一行
(5)应用
价格中的原价
待办事项中已完成的项
5、I标签
(1)作用
区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等
(2)语法
<i></i>
(3)语义
无
(4)默认样式
斜体显示
不独占一行
6、b标签
(1)作用
定义粗体文本,用于吸引读者的注意到该元素的内容上。
(2)语法
<b></b>
(3)语义
没有语义
(4)默认样式
加粗
不独占一行
7、span标签
(1)作用
作为行内容器包含短语内容，通常用来区分文本样式。
(2)语法
<span></span>
(3)语义：无
(4)默认样式：无
8、 换行
常常我们在需要手动换行地方，加入换行标签 ，即可实现内容强制换行。
(1)语法
<br />
注意：
不应该只为了实现加粗、斜体效果使用strong，em，可以使用css替代
br用于处理文本内容换行，不应用于控制元素间距
四、字符实体
概述:HTML中有些字符是保留的。例如，不能直接在文本中输入大于号（>）或小于号（<），因为浏览器会误以为它们是标记。 希望浏览器如实显示这些字符，那么我们必须在HTML源代码中插入字符实体。
常用的实体字符
空
小于号<
大于号>
and符号&
版权符号©
注册商标®
商标™
<sup>TM</su注意：实体名称对大小写敏感！
五、 HTML语义化
1 什么是语义化
语义化是指用合理的HTML标记以及其特有的属性去格式化文档内容。（例如标题用 h1-h6、段落用 p 标签，合理得给图片添加alt属性等）
2 语义化的好处（为什么要语义化）
在没有 CSS 的情况下，页面也能呈现出很好地内容结构。
使代码更具【可读性】，便于团队开发和维护。
有利于SEO搜索引擎优化（和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息。爬虫依赖于标签来确定上下文和各个关键字的权重）。
有利于【用户体验】（例如：title、label 标签、alt属性的灵活运用
Html5标签（列表、行级、文本格式、字符实体、语义化）相关推荐
- HTML5 标签列表
List of HTML5 Tags/Elements - Tutorial Republichttps://www.tutorialrepublic.com/html-reference/html5 ...
- html5标签属性大全_html5 文本相关标签
html5 文本相关标签 一.标题 h1.h1.hgroup(标题组) 1.什么情况下使用标题? 01.标题是概括性的简短文字 02.标题能概括随后的内容 2.主标题与副标题 01.主标题 02.副标 ...
- CSS块级、行级、行级块标签、display、div、span
文章目录 块级标签 行级标签 行级块标签 display div 和span 块级标签 无论内容有多少,都会占据一行; 默认宽:与父级标签一致; 默认高:0 :或者与内容高度一致. 但是可以通过 wi ...
- html字符实体标签语法,HTML字符实体与文本格式化标签
HT环行进端处触码通法果泉位可近境其行框理发ML 字符实体/HTML 中的预留字符必须被替换为字符实体,一些在键盘上找不到的字符也可以使用字符实体来览页些求时是过解些这确如目前例总站回广随能4果泉时标 ...
- HTML5标签属性全在这里了
一.HTML5文档结构 HTML5文档的基本结构 <!DOCTYPE html> <html><head><meta charset="utf-8& ...
- html什么是语义化,什么是html语义化，HTML5新增标签有哪些
1.什么是语义化标签?(就是用合理.正确的使用标签来展示内容) 那么什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下我可以使用这个标签才合理)比如, 网页上的文章的标题就可以用标题标 ...
- IE6,IE7和8浏览器兼容HTML5标签的解决方案
html5大行其道的时代已经到来.如果你还在等待浏览器兼容,说明你已经与web脱节几条街了.当然,这得益于移动客户端的蓬勃发展.如果还在纠 结于,是否应该掌握html5和css3技术时,请狠狠的抽自己 ...
- mysql表级锁和行级锁_MySQL表级锁和行级锁
一:概述 相对其他数据库而言,MySQL的锁机制比较简单,其最显著的特点是不同的存储引擎支持不同的锁机制.比如,MyISAM和MEMORY存储引擎采用的是表级锁(table-level locking ...
- html中哪个属性表示块级元素,HTML块级元素与行级元素
转自:http://gkecenter.blog.163.com/blog/static/181380305201291745234195/ 一.两种类型 HTML中的大部分元素都可分为两种类型:块级 ...
- 为什么span，label，是行级元素，div，p等等是块级元素
这期的问题非常有意思,我们一直说span,label,a都是行元素,div,p还有h1~h5是块级元素等等,但是你有想过为什么吗?别告诉我这是大家约定俗成的东西,实际上,他还真的不是. 先知道啥是行级 ...
最新文章
- 从零开始搭建 web 聊天室（一）
- C++ Primer 5th笔记（chap 17 标准库特殊设施）regex_replace
- python弹出警告框_selenium+webdriver+python 中警告框的处理方法
- python3.7 keras和tensorflow兼容_结果无法在Python中用Keras和TensorFlow重现
- 计算机常用的矢量图形文件,学位计算机考试2
- 牛客网暑期ACM多校训练营（第二场）A run （dp）
- 什么是Freedoc？Freedoc是什么？
- jdbc连接mysql8的一些坑_mysql8.0 jdbc连接注意事项
- JAVA入门级教学之（异常机制的原理到底是什么）
- SpringMVC系列（十四）Spring MVC的运行流程
- vue 指令 v-cloak
- 发现个好玩的，去页面敲键盘，页面键变色
- Codeforces Round #460 (Div. 2): D. Substring（有向图）
- GdiPlus[15]: IGPLinearGradientBrush 之 GammaCorrection
- 如何在康佳电视上看音乐MV
- Markdown文档编写规则：标题
- 腾讯市值首破5000亿美元；阿里224亿港币入股高鑫零售；特斯拉新超跑在华接受预定丨价值早报
- ITパスポート5天学习笔记④_Rx
- SpringBoot整合Elasticsearch，中软国际java二面华为面试
- 代码生成有趣的python精短程序 代码生成