初识HTML+CSS( 第2章 认识标签 一 )
第2章 认识标签
一:语义化,让你的网页更好的被搜索引擎理解
语义化,说的通俗点就是:明白每个标签的用途(在什么情况下使用此标签合理)比如,网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中,在文章中有想强调的文本,就可以使用 em 标签表示强调等等。
讲了这么多语义化,但是语义化可以给我们带来什么样的好处呢?
1. 更容易被搜索引擎收录。
2. 更容易让屏幕阅读器读出网页内容。
二:<body>标签,网页上显示的内容放在这里
在网页上要展示出来的页面内容一定要放在body标签中
三:<p>标签,添加段落
1.<p>标签放置文章的段落
2.注意一段文字一个<p>标签
3.<p>标签的默认样式,段前段后都会有空白,如果不喜欢这个空白,可以用css样式来删除或改变它
四:了解<hx>标签,为你的网页添加标题
1.使用<hx>标签来制作文章的标题。
2.标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。
3.语法:<hx>标题文本</hx> (x为1-6)
4.因为h1标签在网页中比较重要,所以一般h1标签被用在网站名称上。
五:加入强调语气,使用<strong>和<em>标签
1.如果想在一段话中特别强调某几个文字,这时候就可以用到<em>或<strong>标签。
2.但两者在强调的语气上有区别:
<em>表示强调, 浏览器中 默认用斜体表示
<strong>表示更强烈的强调。并且在浏览器中 用粗体表示。
两个标签相比,目前国内前端程序员更喜欢使用<strong>表示强调。
语法:
<em>需要强调的文本</em>
<strong>需要强调的文本</strong>
六:使用<span>标签为文字设置单独样式
1. <em>和<strong>标签是为了强调一段话中的关键字时使用,它们的语义是强调。
2. <span>标签是没有语义的,它的作用就是为了设置单独的样式。
七:<q>标签,短文本引用
1.使用<q></q>实现引用
2.要引用的文本不用加双引号,浏览器会对q标签自动添加双引号。
八:<blockquote>标签,长文本引用
1. 语法: <blockquote>引用文本</blockquote>
2.浏览器对<blockquote>标签的解析是缩进样式
九:使用<br>标签分行显示文本
1.在需要加回车换行的地方加入<br />,<br />标签作用相当于word文档中的回车
2.<br />标签是一个空标签,没有HTML内容的标签就是空标签,空标签只需要写一个开始标签,这样的标签有<br />、<hr />和<img />
3.在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行,就必须输入<br />。
十:为你的网页中添加一些空格
1. 要想输入空格,必须写入
十一:认识<hr>标签,添加水平横线
1.在信息展示时,有时会需要加一些用于分隔的横线,这样会使文章看起来整齐些。
2.<hr />标签和<br />标签一样也是一个空标签,所以只有一个开始标签,没有结束标签。
十二:<address>标签,为网页加入地址信息
1.一般网页中会有一些网站的联系地址信息需要在网页中展示出来,这些联系地址信息如公司的地址就可以<address>标签
2.语法:<address>联系地址信息</address>
十三:想加入一行代码吗?使用<code>标签
1.语法:<code>代码语言</code>
十四:使用<pre>标签为你的网页加入大段代码
1.语法:<pre>语言代码段</pre>
2.<pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符