1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > HTML基础---认识标签(body p hx span br blockquote q address code pre)

HTML基础---认识标签(body p hx span br blockquote q address code pre)

时间:2021-06-25 10:11:24

相关推荐

HTML基础---认识标签(body p hx span br  blockquote q address code pre)

一:语义化,让网页更好的被搜索引擎理解

明白每个标签的用途(在什么情况下使用此标签合理)比如,网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中,在文章中有想强调的文本,就可以使用 em 标签表示强调等等。

语义化的好处

更容易被搜索引擎收录。更容易让屏幕阅读器读出网页内容。

二:标签,网页上显示的内容放在这里

<body><h1> 一级标题 </h1><h2> 二级标题 </h2><p> HTML是网页内容的载体,<em>内容倾斜</em>就是<strong>网页制作加粗</strong>者放在页面上想让用户浏览的信息,可以包含文字,图片,视频等 </p><p> CSS样式是表现,就像网页的外衣.比如,标题字体,颜色变化或标题加入背景图片,边框等,所有这些用来改变内容外观的东西称之为变现 </p><img src="/img/bd_logo1.png"></body>

显示结果:

三:<p>标签,添加段落

在网页上显示文章,这时就需要<p>标签了,把文章的段落放到<p>标签中。注意一段文字一个<p>标签,如在一篇新闻文章中有3段文字,就要把这3个段落分别放到3个<p>标签中。

<p>标签的默认样式,可以在上图中看出来,段前段后都会有空白,如果不喜欢这个空白,可以用css样式来删除或改变它。

<body><p>这是第一段</p><p>这是第二段</p></body>

显示结果:

四:<hx>标签,为网页添加标题

标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。因为h1标签在网页中比较重要,所以一般h1标签被用在网站名称上。

<body><h1> 一级标题 </h1><h2> 二级标题 </h2><h3> 三级标题 </h3><h4> 四级标题 </h4><h5> 五级标题 </h5><h6> 六级标题 </h6></body>

显示结果:

五:使用<strong><em>标签加入强调语气

<em>表示强调,<strong>表示更强烈的强调。并且在浏览器中<em>默认用斜体表示,<strong>用粗体表示。两个标签相比,目前国内前端程序员更喜欢使用<strong>表示强调。

<body><h1> <em>一级标题</em> </h1><p> HTML是网页内容的载体,<em>内容</em>就是<strong>网页制作</strong>者放在页面上想让用户浏览的信息,可以包含文字,图片,视频等 </p></body>

显示效果:

六:使用<span>标签为文字设置单独样式

<span>标签是没有语义的,它的作用就是为了设置单独的样式用的。

<head><style>span {color: blue;font-size: 200%;}</style></head><body><p> <span>Stevin</span>三天三夜的专栏 </p></body>

显示结果:

七:<q>标签,短文本引用

引用的文本不用加双引号,浏览器会对q标签自动添加双引号。用<q>标签的真正关键点不是它的默认样式双引号(如果这样我们不如自己在键盘上输入双引号就行了),而是它的语义:引用别人的话。

<body><p> Stevin<q>三天三夜</q>的专栏 </p></body>

显示结果:

八:<blockquote>标签,长文本引用

<blockquote>的作用也是引用别人的文本。但它是对长文本的引用,如在文章中引入大段某知名作家的文字,这时需要这个标签。<q>标签是对简短文本的引用,比如说引用一句话就用到<q>标签。

<body><p> Stevin<q>三天三夜</q>的专栏 </p><p> 吟诗一首:<blockquote>白日依山尽,黄河入海流,欲穷千里目,更上一层楼</blockquote></p></body>

显示结果:

九:<br>标签分行显示文本

<br />标签是一个空标签,没有HTML内容的标签就是空标签,空标签只需要写一个开始标签,这样的标签有<br />、<hr />和<img />

xhtml1.0写法:<br />,html4.01写法:<br>,现在一般使用 xhtml1.0 的版本的写法(其它标签也是),这种版本比较规范。

<body><p> Stevin<q>三天三夜</q>的专栏 </p><p> 吟诗一首:<blockquote>白日依山尽,<br />黄河入海流,<br />欲穷千里目,<br />更上一层楼<br /></blockquote></p></body>

显示结果:

十:&nbsp;为网页添加空格

<body><p> Stevin&nbsp;三&nbsp;&nbsp;天&nbsp;&nbsp;&nbsp;三夜&nbsp;&nbsp;&nbsp;&nbsp;的专栏 </p></body>

显示结果:

十一:<hr>添加水平横线

html4.01版本<hr>,xhtml1.0版本<hr />

<hr />标签和<br />标签一样也是一个空标签,所以只有一个开始标签,没有结束标签。

<hr />标签的在浏览器中的默认样式线条比较粗,颜色为灰色,认为不美观的,可以用css样式对其修改。

<body><p> Stevin<hr />三天三夜的专栏<hr /></p></body>

显示结果:

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

在浏览器上显示的样式为斜体,如果不喜欢斜体,可以用css样式来修改<address>标签的默认样式。

<body><p> <address>北京市朝阳区</address> </p></body>

显示效果:

十三:<code>标签,为网页加入代码

在文章中一般如果要插入多行代码时不能使用<code>标签了。语法:<code>代码语言</code>注:如果是多行代码,可以使用<pre>标签。

<body><p> <code>单行代码UIViewController</code> </p></body>

多行代码:

十四:<pre>标签,为网页加入大段代码

<body><pre>var message="Stevin三天三夜的专栏";for(var i = 1;i <= 10;i ++) {alert(message);}</pre></body>

显示结果:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。