HTML标签整理（一）

最新推荐文章于 2024-07-25 09:11:11 发布

故梦连城

最新推荐文章于 2024-07-25 09:11:11 发布

阅读量1.1k

点赞数 4

分类专栏： HTML复习笔记文章标签：前端 html 基础

本文链接：https://blog.csdn.net/weixin_41482001/article/details/85920575

版权

HTML复习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML 标签整理

页面结构标签

<!DOCTYPE html>-------声明文档类型
<html>  
<head>------一般用来包含网页的信息
    <meta charset="UTF-8">------提供页面的元信息，比如比如针对搜索引擎和更新频度的描述和关键词。
    <title>我是网页的标题</title>------网页的标题
</head>
<body>------网页主题内容都会显示的标签
    
</body>
</html>

文本标签

在html文档中，标题有六个级别：

h1~h6

h1~h6字体大小依次递减
代码如下：

    <h1>This main heading!!!</h1>
    <h2>This is level 2  heading!!!</h2>
    <h3>This is level 3  heading!!!</h3>
    <h4>This is level 4  heading!!!</h4>
    <h5>This is level 5  heading!!!</h5>
    <h6>This is level 6  heading!!!</h6>

段落标签 ` `

	<p>This is some text in a very short paragraph</p>
    <p>This is some text in a very short paragraph</p>

效果如下：

粗体和斜体 ` `

代码如下

	 <b>世界上最帅的男人</b><br>
     <i>猜猜是谁？</i>

效果如下：

上标和下标 ` `

<sup>元素用来标记作为上标的字符
<sub>元素用来标记作为下标的字符
代码如下：
	<div>
		 C<sub>2</sub>&nbsp;&nbsp;
    	 5<sup>3</sup>
	</div>

效果如下：

空白

为了提高代码的可读性，设计人员经常通过补充空格或换行的方式编写代码。
当浏览器遇见多个空格的时候，只会解析成一个空格。同样，遇见换行也会解析成一个空格，这一特性称为白色空间折叠

换行符和水平线

	<br/> ------------ 自动换行符
	<hr/> ------------ 水平线

语义化标记

定义：不影响网页结构，却为所在页面添加额外信息。

加粗强调`、`

<strong>元素的作用表示其中的内容十分重要，在浏览器中显示为粗体
<em>元素起强调作用，能够细微的改变语句的含义。默认的情况下，<em>显示为斜体

引用 `<blockquote>、<q>`

<blockquote>用法：用来标记那些会占用一整段的较长的引用。会对<blockquote>中的元素进行默认的首行缩进，但是不推荐用来进行首行缩进，应该使用css来完成缩进效果。
<q>用法:用来标记位于段落中的短引用,效果就是在文字两端加上双引号。

缩写词和首字母缩写词

用法与效果：当你使用缩写词的时候，那么<abbr>会派上用场，代码如下：

	<p>
        <abbr title="HyperText Markup Language">HTML </abbr>
    </p>

效果：略。

引文和定义

当你引用一部作品时，<cite>元素可以用来表明引用的来源。显示为斜体，更美观。
<dnf>标签，有的浏览器会显示为斜体，但是Chrome和Safari不会改变其外观。

设计者详细信息

<address>设计者详细信息：可以包含页面设计者的联系详情，通常浏览器会将其中的内容显示为斜体。

内容的修改

<ins>------下划线
<del>------删除线，用来显示已经从文档中删除的文本。
<s>   ------删除线，表示不准确或者不相关予以删除的内容。

列表

有序列表

按照一定顺序排列的列表。

	<ol>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
      </ol>

效果如下：

无序列表

没有明确标明顺序的列表

	<ul>
	        <li>Coffee</li>
	        <li>Tea</li>
	        <li>Milk</li>
     </ul>

效果如下：

定义列表

代码如下：

<dl>------创建定义列表
   <dt>计算机</dt>------包含被定义的术语
   <dd>用来计算的仪器 ... ...</dd>------用来包含定义
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

嵌套列表

由有序列表、定义列表、嵌套列表等组合成的列表，常规的为在<li></li>中嵌套另一个列表。
代码如下：

<ol>
    <li>贴吧导航</li>
    <li>大事记载</li>
    <li>等级制度</li>
    <li>实名制度</li>
    <li>特点分析</li>
    <li>品牌价值</li>
    <li>手机贴吧</li>
       <ul>
           <li style="list-style:circle;color:blue">贴吧客户端</li>
           <li style="list-style:circle;color:blue">贴吧智能版</li>
      </ul>
    <li>平台推广</li>
    <ul>
        <li style="list-style:circle;color:blue">官方平台</li>
        <li style="list-style:circle;color:blue">贴吧推广</li>
    </ul>
</ol>

链接

指向其他网站的链接

	<a href = "www.baidu.com"></a>

指向同一网站中其他页面链接

	<a href = "index.html">超链接</a>

EMAIL链接

	<a href = "mailto:987078883@qq.com">超链接</a>

在新窗口打开链接
在新窗口打开链接需要利用<a>标签target属性，并且设置为_blank

<a href = "www.baidu.com" target = "_blank">超链接</a>

链接到某个位置
效果：点击某个链接，就跳转到页面相应的位置。
示例代码：

<html>
	<head>
		<title>Linking to a Specific Part of a Page</title>
	</head>
	<body>
		<h1 id="top">Film-Making Terms</h1>
		<a href="#arc_shot">Arc Shot</a><br />
		<a href="#interlude">Interlude</a><br />
		<a href="#prologue">Prologue</a><br /><br />
		<h2 id="arc_shot">Arc Shot</h2>
		<p>A shot in which the subject is photographed by an encircling or moving camera</p>
		<h2 id="interlude">Interlude</h2>
		<p>A brief, intervening film scene or sequence, not specifically tied to the plot, that appears within a film</p>
		<h2 id="prologue">Prologue</h2>
		<p>A speech, preface, introduction, or brief scene preceding the the main action or plot of a film; contrast to epilogue</p>
		<p><a href="#top">Top</a></p>
	</body>
</html>

*注：id样式，只能以字母或者下划线开头，并且在一个页面中不允许出现两个相同的id特性值。
*链接到其他页面的某个特定位置
可以使用与上面类似的方法。由于id在单个网页内的唯一性，因此就可以直接在目标地址使用相同的语法。
示例代码如下：
index.html

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
</head>
<body>
	<a href="listings.html/#prologue">超链接</a>
</body>
</html>

listings.html代码（请把两个html文件放入同一目录下面）

<html>
	<head>
		<title>Linking to a Specific Part of a Page</title>
	</head>
	<body>
		<h1 id="top">Film-Making Terms</h1>
		<a href="#arc_shot">Arc Shot</a><br />
		<a href="#interlude">Interlude</a><br />
		<a href="#prologue">Prologue</a><br /><br />
		<h2 id="arc_shot">Arc Shot</h2>
		<p>A shot in which the subject is photographed by an encircling or moving camera</p>
		<h2 id="interlude">Interlude</h2>
		<p>A brief, intervening film scene or sequence, not specifically tied to the plot, that appears within a film</p>
		<h2 id="prologue">Prologue</h2>
		<p>A speech, preface, introduction, or brief scene preceding the the main action or plot of a film; contrast to epilogue</p>
		<p><a href="#top">Top</a></p>
	</body>
</html>