认识HTML标签

1.段落标签:<p>内容</p>。使用段落标签,段前段后会有一段空白距离,可用CSS删除或改变它。

2.标题标签:<hx>内容</hx>。标题标签一共有6个,h1、h2、h3、h4、h5、h6,重要性依次递减。<h1>是最高等级,常被用于网站名称。

3.强调标签:<strong>内容</strong>和<em>内容</em>。用以强调一段话中的某个关键字,在浏览器中<em>默认用斜体表示,<strong>默认用粗体表示。目前国内前端程序员更喜欢用<strong>表示。

4.为文字设置单独的样式:<span>文字</span>。<span>标签本身并没有语义,他的作用就是设置单独的样式,并不是为了起强调作用。

5.短文本引用:<q>引用的文本内容</q>。注意引用的文本不用加双引号,浏览器会自动对q标签添加双引号。但<q>标签的真正关键点不是它的默认样式双引号,而是它的语义:引用别人的话。

6.长文本引用:<blockquote>引用文本</blockquote>。该标签是对长文本的引用,如在文章中引入大段某知名作家的文字。浏览器对<blockquote>标签的解析是缩进样式。

7.分行显示标签:<br>或<br/>。

8.添加空格的标签:&nbsp;

9.添加水平分隔线:<hr/>标签。该标签在浏览器中的默认样式线条比较粗,颜色为灰色。

10.为网页添加地址信息:<address>联系地址</address>。一般网页中会有一些网站的联系地址信息需要在网页中展示出来,这些联系地址信息如公司的地址就可以<address>标签。也可以定义一个地址(比如电子邮件地址)、签名或者文档的作者身份。该标签在浏览器上显示的样式为斜体

11.网页中加入一行代码:<code>代码语言</code>。适用于在网页中显示一些计算机专业的编程代码。但是如果要插入多行代码就不能使用该标签了,此时可以使用<pre>标签

12.网页中插入大段的代码:<pre>编程代码段</pre>。<pre>标签的主要作用:预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。只要是需要在网页中预显示格式化时都可以使用该标签,通常用来显示计算机的源代码。

13.无序列表标签:ul。网页上很多信息的列表,如新闻列表、图片列表可以使用ul-li标签来完成。ui-li是没有先后顺序的信息列表,在网页中显示的默认样式一般为:每项li前带有一个圆点。语法:

    <ul type="列表前符号的样式">     <!--一般有disc;circle;square;-->    

           <li>信息</li>

            <li>信息</li>

       </ul>

14.有序列表标签:ol。语法:

    <ol type="列表前符号的样式">     <!--默认样式为数值递增-->

            <li>信息</li>

            <li>信息</li>

    <ol>

15.盒子/容器<div>……</div>。使用div标签可以为网页划分出独立的版块,它将网页的版块看成一个个盒子。将一些标签放进<div>里,可以划分出一个独立的逻辑部分。为了使逻辑更加清晰,我们可以为这一个独立的逻辑部分设置一个名称,用 id 属性来为<div>提供一个唯一的名称,就像每个人的身份证号。语法: <div   id="版块名称">……</div>

16.表格标签:table标签。

创建表格的四个元素:table、tbody、tr、th、td

(1)<table>……</table>:整个表格以<table>标记开始,以</table>标记结束。

(2)<tbody>……</tbody>:如果不加<thead><tbody><tfoot>,table表格加载完后才会显示。加上这些表格结构,tbody包含行的结构下载完优先显示,不必等待表格结束后再显示,同时如果表格很长,用tbody分段,可以一部分一部分地显示。即使用tbody可以让表格按结构一块一块的显示。

(3)<tr>……</tr>:表格的一行,所以有几对tr,表格就有几行。

(4)<td>……</td>:表格的一个单元格,一行中包含几对<td>……</td>,说明一行就有几列。

(5)<th>……</th>:表格的头部的一个单元格,表格表头。

table表格在没有添加CSS样式之前,在浏览器中显示是没有表格线的。

如:<style  type="text/css">

       table tr td,th{border:1px;solid #000;}

       </style>

表头,也即<th>标签中的文本默认为粗体居中显示。

17.为表格添加标题和摘要:caption标签和summary标签。

(1)摘要标签语法:<table  summary="表格简介文本">。

摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

(2)标题标签语法:<caption>标题文本</caption>。

标题标签显示的位置在表格的上方,用以描述表格的内容。它的标签放在<table>和<tr>之间。

18.超链接标签:<a>标签。语法:<a    href="要链接到的网址"    title="鼠标滑过时显示的文本">链接显示的文本</a>。

title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大,主要方便搜索引擎了解链接地址的内容(语义化更友好)。

<a>标签在默认情况下,链接的网页是在当前浏览器窗口中打开,如果需要在新的浏览器窗口中打开,可以在标签中使用target属性,一共有5种属性值。

如:<a    href="目标网址"    target="_blank">click here!</a>。

19.在网页中链接Email地址:mailto。语法如下:



20.为网页插入图片:<img>。语法:<img    src="图片地址"    alt="下载失败时的替换文本"    title="提示文本">

图像可以是GIF、PNG、JPEG格式的图形文件。


阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页