初识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.  要想输入空格,必须写入  &nbsp;  

十一:认识<hr>标签,添加水平横线

1.在信息展示时,有时会需要加一些用于分隔的横线,这样会使文章看起来整齐些。
2.<hr />标签和<br />标签一样也是一个空标签,所以只有一个开始标签,没有结束标签。

十二:<address>标签,为网页加入地址信息

1.一般网页中会有一些网站的联系地址信息需要在网页中展示出来,这些联系地址信息如公司的地址就可以<address>标签
2.语法:<address>联系地址信息</address>

十三:想加入一行代码吗?使用<code>标签

1.语法:<code>代码语言</code>

十四:使用<pre>标签为你的网页加入大段代码

1.语法:<pre>语言代码段</pre>
2.<pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符



©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 2-1语义化,让你的网页更好的被搜索引擎理解 在这一章节我们要开始把网页中常用到的标签一 一向大家介绍,学习这一章...
    静默丶阅读 769评论 9 5
  • 引言 在日常开发Android中,很多时候会遇到和WebView打交道,对CSS HTML JS不是很清楚的话是完...
    张文靖同学阅读 2,934评论 0 11
  • 1、HTML介绍 1 2、Html和CSS的关系 HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户...
    夏沫xx阅读 1,675评论 0 8
  • 一、Html和CSS的关系 学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我...
    空指针的空阅读 1,036评论 0 2
  • 这样的事情哪还用在经历,赌博的陋习不会注定跟你一辈子,但你要自己学会控制,让这样的错误不要在发生,如今你妻离子散,...
    贰拾伍碎阅读 340评论 0 0

友情链接更多精彩内容