什么是行级标签?
行级标签可以在页面中可以和其他元素在同行显示,直到一行不能放下一个完整的元素,并且通常行级标签内不会包含其他元素。
1、<img/>:图片标签
网页设计中选择的图片不会太大,图片过大影响网页的加载速度;过小内容模糊不清则失去了存在的意义。
网页中常用的图片格式为GIF、JPG和PNG等。
基础语法:
<img src="img/logo.png" alt="GUIDM.LOGO" title="GUIDM blog"/>
属性:
- src属性:
src属性表示引用图片的路径地址。
1)相对路径:以当前文件为准去寻找图片地址。
- 与当前文件处于同一层的图片:直接写图片名
- 图片在当前文件下一层:文件夹名/图片名
- 图片在当前文件上一层:../图片名
2)绝对路径:file:///盘符:/文件夹/图片.扩展名
严禁使用绝对路径,原因:
- 绝度路径只在当前计算机生效,若将网站转移服务器,则路径会失效。
- 通过绝对路径打开图片使用的是file协议,但网页中使用的是http协议。
3)网络地址:使用网络上的图片链接。
一般不使用,因为网络图片可能由于各种原因被删除、转移位置,使图片无法打开。
- height(高度)和width(宽度)属性:
推荐CSS style="width:100px;height=100px;
- title属性:
用于设置图片的标题,即当鼠标指在图片上后显示的文字。
- alt属性:
设置用于图片无法加载时显示的文字。
- align属性:
用处不大,推荐使用CSS来控制样式。
设置图片周围文字相对于图片的位置。
常用值:top、 center、 bottom
2、<a></a>:超链接标签
一个网站是由多个页面组成,用链接来完成不同页面的跳转。
标签可以设置一个超链接,单击则可跳转到新的文档或当前文档中的某个部分。
基础语法:
<a href="#">超链接</a>
属性:
- href属性:
用来描述链接的地址,可以是网络地址也可以是本地文件。
当用#时,不是一个空的超链接。
- target属性:
定义通过超链接打开的文档在何处显示。
常用的属性值:
- _self(默认值):在与链接相同的框架中打开被链接的文档。
- _blank:在新窗口在打开链接。
锚链接的用法
- 本页面锚链接
- 设置锚点:
- 在超链接上,使用#name跳转到对应锚点:超链接
- 页面间锚链接
- 在即将跳转页面的指定位置,设置锚点。
- 在超链接的href属性中,使用"页面地址.html#name"
页面间锚链接基础语法:
<a href="GUIDM.html#weixin">跳转到新页面指定部分</a>
3、<span></span>:行内标签
用来组合文档中的行内元素,无实际意义,用于包裹某部分文字。
div和span的区别
- div是块元素,可以包含任何块元素和行内元素,不会与其他元素位于同一行;span是行内元素,可以与其他行内元素位于同一行。
- div常用于页面中较大块的结构划分,然后配合css来操作;span一般用来包含文字等,他没有结构的意义,纯粹是样式应用。
其他行内元素都不适合的时候,可以用span来配合css操作,span标签往往用来配合css来修饰元素。
4、<em>:强调标签
可以嵌套使用,嵌套个数越多,强调级别越高。
表示强调的内容,显示效果为斜体。
当引入新的术语或引用特定类型的术语或概念是作为固定样式的时候,也可以考虑使用。如果仅仅想使用斜体请使用标签。
5、<i>:斜体标签
显示斜体文本效果。还可以表示场景有外来语,分类名称和技术术语等。
6、<strong>:强调标签(程度更强)
通常以加粗的字体来显示,表示内容的重要性。
7、<small>:缩小字体标签
可以用于免责声明、使用条款和版权信息等需要小字体的场景。
8、<s>:删除线标签
有误文本,显示为文本文字上加删除线的样式
HTML5已经不支持,若需要使用请用代替。
9、<b>:粗体标签
可以定义一些需要引起注意却没有额外语义的内容,比如摘要的关键内容和文章导语的加粗等。
10、<cite>:引用标签
表示它所包含的文本对某个参考文献的引用,比如书籍或杂志的标题。
通常应该把引用包括在一个标签中,从而把一个超链接指向该联机版本。
隐藏功能:可以从文档中自动摘抄参考书目
11、<q></q>:短引用标签
显示文字用“”引起来
<q>和<blockquote>的区别
- 他俩本质上是一样的,不同之处在于它们的显示和应用,标签用于简短的行内应用。
- 如果需要从周围内容分离出来比较长的部分,通常显示为缩进的块,这时应使用
12、<code></code>:源代码标签
专门为软件代码的编写者设计的。
表示计算机源代码或其他机器可以阅读的文本内容。通常只是把文字变成等宽字体,但它暗示着这段文本是源代码。
如果只希望使用等宽字体效果,此时应使用标签。
若想要在严格限制为等宽字体格式的文本显示编程代码,此时应使用<pre>标签。