HTML标签部分（块级/行级）

时间：2017-08-06 23:45:22 阅读：327 评论：0 收藏：0 [点我收藏+]

一.基本块级标签

1.HTML标签的分类：

a.块级标签：显示为块状，独占一行，自动换行。

b.行级标签：在一行中，从左往右依次排列，不会自动换行。

2.h标签（标题标签）

h标签：标题标签，显示为黑体加粗！！！

标题标签，共分六种：h1~h6:h1最大，h6最小！

<h1>这是h1标签</h1>
        <h2>这是h2标签</h2>
        <h3>这是h3标签</h3>
        <h4>这是h4标签</h4>
        <h5>这是h5标签</h5>
        <h6>这是h6标签</h6>

2.hr标签

<hr />自闭和标签

3.p标签（段落标签）

p标签：表示段落标签。相当于我们文章中的一段文字！！

4. 换行符

注意：在代码中，直接回车换行，浏览器不认识。必须使用换行符 告诉浏览器这里要换行。

5.pre标签（预格式标签）

pre标签会保留代码中的空格，回车等符号，直接在浏览器中显示。

pre标签常用于在网页中显示代码，保留代码格式！！！

6.blockquote（块引用标签）

blockquote:块引用标签。表明一段话是从其他网站引用的。

有一个重要属性：cite=""表示这段话的引用来源，常放一个网站地址。

但是浏览器显示并没有任何区别。

二.基于布局的块级标签

1.无序列表

有多个列表项组成，每个列表前面带小黑点，称为无序列表。用<ui>表示。列表中的每一个小项用<li>表示。

         <ul>
            <li>这是无序列表第一项</li>
            <li>这是无序列表第二项</li>
            <li>这是无序列表第三项</li>
            <li>这是无序列表第四项</li>
        </ul>

2.有序列表

有序列表用<ol>标签，列表中的每一个小项用<li>表示。

       <ol>
            <li>这是有序列表第一项</li>
            <li>这是有序列表第二项</li>
            <li>这是有序列表第三项</li>
            <li>这是有序列表第四项</li>
        </ol>

3.定义列表（定义描述列表）

定义列表<dl>，里面有一个标题<dt>,有多个描述项<dd>.

标题默认顶格显示，描述项相对标题向后缩进。

        <dl>
            <dt>这是dl列表的标题</dt>
            <dd>这是dl列表的描述项1</dd>
            <dd>这是dl列表的描述项2</dd>
            <dd>这是dl列表的描述项3</dd>
            
        </dl>

4.图片组合标签（了解）

组合标签<figure>,里面有两部分；

①图片<img/>后续讲解；

②图片的标题：<figcaption></figcaption>

5.分区标签div（最常用的标签）

没有任何的特殊作用，仅仅起到一个包裹的功能，常用于网页中划分区块。

此标签中可以包裹任何内容，需要配合CSS一起使用。

三.基本行级标签

1.块级标签与行级标签的区别(很重要！！！)

① 块级标签：默认宽度100%(占满一行)；

块级标签自动换行(独占一行，右边不能有任何东西)；

块级标签可以使用CSS设置宽度高度！

② 行级标签：默认宽度由内容撑开(内容多宽、宽度就占多宽)；

行级标签不会自动换行(一行当中，从左往右依次排列)；

行级标签的宽度高度不能设置！

2.常见的行级标签

1、span标签：

① span标签只是包裹作用，没有任何其他含义；

② span作用与div类似，需配合CSS使用。只不过div是块级标签、span是行级标签。

2、[em/strong i/b 区别] ：{重点}

① em和i都能倾斜。strong和b都能加粗！但是，i和b仅仅是单纯的倾斜加粗，而em和Strong多了强调的语义。

② em和strong都表示强调，但是strong强调的级别更高！

注意：

1、强调的目的：让搜索引擎知道网页重点强调的内容！便于搜索引擎显示！

2、Strong和em都可以多层嵌套，表示强调程度的递增！

3、q标签

q标签：表示短引用。

cite属性：用于声明引用的来源。

【常用的引用标签】

<blockquote>用于引用一段内容</blockquote>

<q>用于引用一句话</q>

<cite>常用于引用作品名、书画名等</cite>

相同点：三个引用标签，都用cite属性表示引用来源

不同点：① 引用的内容不同。

blockquote->一段话，q->一句话，cite->作品名

② 显示的默认效果不同。

blockquote->默认整段向右缩进；

q->默认加引号；

cite->默认倾斜！

4、small和big

small标签：将字体缩小一号；

big标签：将字体放大一号；

注意：

① small和big可以多层嵌套，直到字体达到最小或最大为止；

② 这俩标签已经被淘汰，并不建议使用。

5、img 图片标签

① src属性：表示图片的路径

[图片路径的合法方式]

a.网络链接：由于图片在其他网站，如果其他网站删除图片，我们也不能访问，所以不建议使用这种方式；

b.绝对路径：使用绝对路径的图片，只有在本机使用file协议才能访问！所以，严禁使用这种方式！

c.相对路径：

① 图片与当前文档在同一层文件夹：直接写图片名

eg:<img src="icon.jpg" />

② 图片在当前文档的下一层文件夹：文件夹名/图片名

eg:<img src="img/icon.jpg" />

③ 图片在当前文档的上一层文件夹： ../图片名 (../表示后退一层)

eg:<img src="../icon.jpg" />

但是，一定要注意：图片必须包含在项目里面，不能访问项目外的图片。

② height:图片的高度 width：图片的宽度

eg:<img src="img/icon.jpg" height="500" width="10" />

③ title：图片的标题，也就是鼠标指上后看到的提示文字

eg:<img src="img/icon.jpg" title="鼠标指上后看到的提示文字" />

④ alt: 图片无法加载时显示的文字。省略alt，将默认显示title内容。

eg:<img src="img/icon.jpg" alt="图片无法加载时显示的文字" />

⑤ align：图片周围的文字相对于图片如何对齐。

可选值：top->图片顶部 center->图片中部 bottom->图片底部

eg: <img src="img/icon.jpg" align="top" />12345

6.a标签（超链接）

a标签属性

①href属性：表示超链接需要跳转的页面。

A.可以写网络地址：

<a href="http://www.baidu.com">这是一个超链接</a>

B.可以打开本地html文件：

采用相对路径确定文件地址。与img标签确定方式相同。

②title属性：鼠标指上后显示的提示文字。

③target属性：设置新页面打开的窗口位置

可选值：-self自身页面打开（默认）-blank新窗口打开

【超链接的特殊应用】

1.功能性链接：（了解）

mailto：//点击链接给指定邮箱发送邮件

代码示例：

tencent://message/?uin=1097270356 点击与指定QQ聊天

还有：tell：//手机端点击打电话；

message：//手机端点击发送短信；

ftp://使用ftp协议进行文件的上传下载；

2.锚链接：（重点）

①在页面的指定位置设置一个锚点，用name属性表示锚点的名字；

②将超链接的href属性，设置为#加锚点的名字；

<a href="#top">点击链接，跳转到top锚点位置</a>

>>>页面间锚链接

①在新页面的指定位置设置一个锚点，用name属性表示锚点的名字；

②将超链接的href属性，设置为“新页面地址#加锚点名字”；

<a href="test.html#top">点击链接，跳转到test.html的top锚点位置</a>

7.W3c规范：

1.W3c:万维网联盟，负责制定和维护Web行业开发标准；

2.W3c要求的规范：

①规范中倡导两个分离：

内容与表现分离；（HTML与CSS分离开）

内容与行为分离：（HTML与JavaScript分离开）

②HTML语言要遵循语义化！！

③关于代码书写的规范：

标签与属性必须要小写

标签必须要闭合

属性值必须用引号引起来（img src="属性值"）

标签必须正确嵌套（不能交叉，块级标签可以包裹行级标签，行级标签不能包裹块级标签）

8. 其他的行级标签:[了解即可]

(1)u标签:带下划线

代码：

u标签带下划线

css实现下划线

(2)s标签：带删除线

代码：

<s>s标签带删除线</s>

css实现删除线

(3)定义专业术语(dfn 定义专业术语 abbr 专业术语缩写词)

提示搜索引擎，当前为一段计算机代码。

但是code不会保留代码格式，需要配合pre标签共同使用。

(5)var:表示变量

代码：

(6)bdo：定义文本的显示方向

rtl 从右向左 ltr从左向右

(7)kbd：需要用户输入的文字

(8)sup，sub:上下标

(9)time:表示时间

HTML标签部分（块级/行级）

原文：http://www.cnblogs.com/1996zy/p/7296401.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)

HTML标签部分（块级/行级）

一.基本块级标签

1.HTML标签的分类：

2.h标签（标题标签）

2.hr标签

3.p标签（段落标签）

4.<br />换行符

5.pre标签（预格式标签）

6.blockquote（块引用标签）

二.基于布局的块级标签

1.无序列表

2.有序列表

3.定义列表（定义描述列表）

4.图片组合标签（了解）

5.分区标签div（最常用的标签）

三.基本行级标签

1.块级标签与行级标签的区别(很重要！！！)

2.常见的行级标签

1、span标签：

2、[em/strong i/b 区别] ：{重点}

3、q标签

4、small和big

5、img 图片标签

[图片路径的合法方式]

6.a标签（超链接）

a标签属性

【超链接的特殊应用】

7.W3c规范：

8. 其他的行级标签:[了解即可]

(1)u标签:带下划线

(2)s标签：带删除线

(3)定义专业术语(dfn 定义专业术语 abbr 专业术语缩写词)

(5)var:表示变量

(6)bdo：定义文本的显示方向

(7)kbd：需要用户输入的文字

(8)sup，sub:上下标

(9)time:表示时间