HTML基础知识

HTML基础知识

排版标签

• <h1>
• <p>
• <hr />
• <br />
• <div>
• <span>
• <center>
• <pre>

文本级标签：p、span、a、b、i、u、em。文本级标签里只能放文字、图片、表单元素。（a标签里不能放a和input）

容器级标签：div、h系列、li、dt、dd。容器级标签里可以放置任何东西。

字体标签

转义字符

•  ：空格
• <：小于号 < （less than）
• >：大于号 > （greater than）
• &：符号 &
• "：双引号
• '：单引号
• ©：版权 ©
• ™：商标 ™
• 绐：文字 绐。其实，#32464 是汉子 绐 的unicode编码。

比如说，你想把 <p> 作为一个文本在页面上显示，直接写 <p> 是肯定不行的，因为这代表的是一个段落，所以这里需要用到转义字符。应该这么写：

<p>这是一个&lt;p&gt;标签</p>

来一张表格，方便需要的时候查询：

字符	描述	转义字符代码
	空格符	 
<	小于号	&lt;
>	大于号	&gt;
&	和号	&amp;
￥	人民币	&yen;
©	版权	&copy;
®	注册商标	&reg;
°	摄氏度	&deg;
±	正负号	&plusmn;
×	乘号	&times;
÷	除号	&divide;
²	平方2（上标2）	&sup2;
³	立方3（上标3）	&sup3;

下划线、中划线、斜体、粗体、上下标。

• <u>：下划线标记
• <s> 或 <del>：中划线标记（删除线）
• <i> 或 <em>：斜体标记
• <b> 或 <strong>：粗体标记
• <sup>：上标
• <sub>：下标

上下标这两个标签容易混淆，怎么记呢？这样记：b 的意思是 bottom：底部 举例：

    O<sup>2</sup>
    5<sub>3</sub>

超链接

1、外部链接：链接到外部文件

<a href="http://www.baidu.com" target="_blank">点我点我</a>

2、锚链接

<a href="#name1">跳到顶部</a>
<a name="name1">顶部</a>

3、邮件链接

<a href="mailto:xxx@163.com">点击进入我的邮箱</a>

超链接的属性

• href：目标URL
• title：悬停文本
• name：主要用于设置一个锚点的名称
• target：告诉浏览器用什么方式来打开目标网页。 target 属性有一下几个值：
  • _self：在同一个网页中显示（默认值）
  • _blank：在新的窗口中打开
  • _parent：在父窗口中显示
  • _top：在顶级窗口中显示

图片标签

<img src="images/1.jpg" width="300" height="`188" title="悬停标题" alt="代替图片显示的内容">

图片的相对路径

相对当前页面所在的路径。两个标记 . 和 .. 分别代表当前目录和上一层目录。

举例1：

<!-- 当前目录中的图片 -->
<img src="2.jpg">
<img src="./2.jpg">

<!-- 上一级目录中的图片 -->
<img src="../2.jpg">

举例2：

<img src="images/1.jpg">

图片的绝对路径

绝对路径包括以下两种：

（1）以盘符开始的绝对路径。举例：

<img src="C:\Users\qianguyihao\Desktop\html\images\1.jpg">

（2）网络路径。举例：

<img src="http://img.smyhvae.com/20200122_200901.png">

img标签的属性

• width：图像的宽度
• height：图像的高度
• alt：当图片无法显示的时候，代替图片显示的内容，alt 是英语 alternate “代替” 的意思
• title：鼠标悬停时出现的文本
• align：图片和周围文字的相对位置，属性取值可以是：bottom（默认）、center、top、left、right。该属性已废弃，替换为 vertical-align 这个CSS属性