ningzishuo/qianduan_jiangyi
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
846b75aa68
qianduan_jiangyi/1.Html/2-常用标签.md
hututu 846b75aa68 first push
2022-03-11 09:48:41 +08:00

6.5 KiB
Raw Blame History

1、标签

1.1、单标签

  • 注释标签 ：<!-- 注释 -->
  • 换行标签：<br> 或 <br />
  • 水平线标签：<hr> 或 <hr />

1.2、双标签

  • 段落标签：<p></p>

特点：上下自动生成空白行。br 换行不会生成空白行。

  • 标题标签：<h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6>

h1 在一个页面里只能出现一次。（作用是：便于SEO 搜索引擎优化）

  • 文本标签：<font size="" color=""></font>
  • 文本格式化标签

文本加粗 ：<strong></strong> <b></b>

工作里尽量使用strong，对于盲人来说 strong有语义强调的功能。

文本倾斜：<em></em> <i></i> <!-- 工作里尽量使用em，原因同strong --> 删除线标签：<del></del> <s></s> <!--工作里尽量使用del --> 下划线标签：<ins></ins> <u></u> <!--工作里尽量ins--> 图片标签：<img src="" alt="" title=""width="" height="" >

src : 图片的来源（必写属性） alt : 替换文本 ，图片不显示的时候显示的文字（重要性：1.SEO优化 2.盲人阅读需求） title : 提示文本，鼠标放到图片上显示的文字 width : 图片宽度 height : 图片高度

PS：图片没有定义宽高的时候，图片按照百分之百比例显示，如果只更改图片的宽度或者高度，图片等比例缩放

2、超链接

<a href="" title="" target="">填写内容</a>

href ：去往的路径、跳转的页面， 必写属性 title ： 提示文本，鼠标放到链接上显示的文字 target="_self" （默认值），在自身页面打开（关闭自身页面，打开链接页面）

Target=”_blank” 打开新页面，（自身页面不关闭，打开一个新的链接页面）

PS：当 href 的值为 javascript:void(0); 或 javascript:; ，表示超链接不做任何事情，不做任何跳转。

2.1、锚链接

我们先搞清楚什么是锚链接：

锚链接也称锚点链接，命名锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页，通过点击命名锚点，自动跳转到我们设置锚点的位置，类似于我们阅读书籍时的目录页码或章回提示。

锚点链接可以跳转到页面的任何位置。一般用于在页面下面的时候，点击回到最上面。锚点链接的名称可以随意取，只起到标记作用。

<p id="AAA">
  
</p>
...
<a href="#AAA"></a>   // 超链接到锚点

2.2、空链

不知道链接到那个页面的时候，用空链

<a href="#">空链</a>

PS：空链相当于 #top，实际点击此链接的时候会跳转到页首的位置。

2.3、压缩文件下载

<a href="../../xxx.rar"></a>

PS：不推荐使用

2.4、超链接优化写法

<base target="_blank">   // 让所有的超链接都在新窗口打开

PS：写的位置在 head 里面。

3、特殊字符

特殊符号 字符代码
(空格) &nbsp;
< &lt;
> &gt;
& &amp;
¥ &yen;
© &copy;
® &reg;
× &times;
÷ &devide;

参考链接：HTML特殊字符编码对照表

4、列表

4.1、无序列表

<ul type="">
	<li></li>    <!-- 列表项 -->
	<li></li>
	<li></li>
	......
</ul>

type="square" ：小方块 type="disc" ： 实心小圆圈 type="circle" ： 空心小圆圈

4.2、有序列表

<ol type="" start="">
    <li></li>   <!-- 列表项 -->
    <li></li>
    <li></li>
    ......
</ol>

type="1,a,A,i,I" ，type的值可以为1,a,A,i,I

start="3" 决定了开始的位置。

4.3、自定义列表

<dl>
 <dt></dt>    <!-- 小标题 -->
  <dd></dd>   <!-- 解释标题 -->
  <dd></dd>   <!-- 解释标题 -->
</dl>

5、音乐标签

<embed src="1.mp3" hidden="true"></embed>

hidden="true" 隐藏音乐标签

6、滚动标签

<marquee width="" height="" bgcolor="" behavior="" direction="" loop="">
</marquee>

width：宽度 height：高度 bgcolor：背景颜色

behavior：设置滚动的方式 ​ alternate：在两端之间来回滚动 ​ scroll：由一端滚动到另一端，会重复 ​ slide：由一端滚动到另一端，不会重复

direction：设置滚动的方向 ​ left | right | up | down loop：滚动次数（-1：一直滚动下去）

7、head相关知识

7.1、charset编码

<meta charset="UTF-8">

ASCII/ANSI/Unicode：英语 GBK ：亚洲通用字符集 GB2312：中文简体 Big5 ：台澳港繁体 UTF-8：世界通用字符集

7.2、name

  • 关键字
<meta name="keywords" content="">

告诉搜索引擎你的站点的关键字。SEO优化使用

  • 网页描述
<meta name="discription" content="">

告诉搜索引擎你的站点的主要内容。这个description是给SEO和用户看的。

  • 作者
<meta name="author" content="名字">

告诉搜索引擎你的站点的制作者

  • 文件检索
<meta name="robots" content="all | none | index | noindex | follow | nofollow">

有时候会有一些站点内容，不希望被 robots 抓取而公开。为了解决这个问题，robots 开发界提供了两个办法：一个是robots.txt，另一个是 robots meta 标签。 其中的属性说明如下： all：（默认）文件将被检索，且页面上的链接可以被查询； none：文件将不被检索，且页面上的链接不可以被查询； index：文件将被检索； follow：页面上的链接可以被查询； noindex：文件将不被检索，但页面上的链接可以被查询； nofollow：文件将不被检索，页面上的链接可以被查询。

7.3、http-equiv 网页重定向

<meta http-equiv="reflesh" content="5; http://www.google.com">

网页自动跳转：网页5秒后自动跳转到谷歌主页

7.4、链接外部样式表

<link rel="stylesheet" type="text/css" href="1.css">

rel="stylesheet"：链接的是什么？样式表还是图标 type="text/css" type="text/css"：规定链接文件的MIME类型，就是说链接文件时css还是js href="1.css"：链接的文件路径

7.5、设置 icon 图标

<link rel="icon" href="1.ico">