HTML标签(上)

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

标题标签 <h1> - <h6>(重要) head的缩写 作为标题使用 分1-6级
特点:
1.加了标题的文字会变的加粗,字号也会依次变大.
2.一个标题独占一行.

段落和换行标签(重要)
<p></p>标签用于定义段落,它可以将整个网页分为若干个段落
标签语义:可以把HTML文档分割为若干段落

特点:
1.文本在一个段落中会根据浏览器窗口的大小自动换行.
2.段落和段落之间保有空隙.

在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后才自动换行.
如果希望某段文本强制换行显示,就需要使用换行标签<br />

标签语义:强制换行
特点:
1.<br />是单个标签
2.<br />标签只是简单地开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距

文本格式化标签(粗体、斜体或下划线)
标签语义:突出重要性,比普通文字更重要
加粗<strong></strong>或者<b></b> 推荐使用<strong>标签加粗 语义更强烈
倾斜<em></em>或者<i></i> 推荐使用<em>
删除线<del></del>或者<s></s> 推荐使用<del>
下划线<ins></ins>或者<u></u> 推荐使用<ins>

<div>和<span>是没有语义的,它们就是一个盒子,用来装内容的
特点:
1.<div>标签用来布局,但是现在一行只能放一个<div> 大盒子
2.<span>标签用来布局,一行上可以多个<span> 小盒子

图像标签和路径(重点)
1.图像标签
<img src="图像URL" />

src 图片路径 必须属性
alt 文本 替换文本 图像不能显示的文字
title 文本 提示文本 鼠标放在图像上 显示的文字
width 像素 设置图像的宽度
height 像素 设置图像的高度
border 像素 设置图像的边框粗细

一般只设置宽度或者高度就行 另一个会等比例缩放

相对路径 文件所在位置为根目录

同一级路径 <img src="baidu.gif" />
下一级路径 <img src="images/baidu.gif" />
上一级路径 <img src="../baidu.gif" />

绝对路径
<img src="D:\web\img\logo.gif" />
<img src="http://www.baidu.com/images/logi.gif" />

超链接标签(重要)

<a href="跳转目标"target="目标窗口的弹出方式">文本或图像</a>
_self为默认值 在当前窗口打开
_blank 在新窗口打开
外部链接<a href="http://www.baidu.com">百度</a>
内部链接<a href="index.html">首页</a>
空链接<a href="#">首页</a>
网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接
锚点链接:点击链接可以快速定位到页面中的某个位置
	在连接文本的href属性中,设置属性值为#名字的形式，如<a href="#two">第二季</a>
	找到目标位置标签,里面添加一个id属性 = 刚才的名字 如:<h3 id="two">第二季介绍</h3>

注释标签
<!-- 注释语句 --> 快捷键:ctrl + /

特殊字符
在HTML页面中,一些特殊的符号很难或者不方便直接使用,此时我们就可以使用下面的字符来替代
	空格符号 &nbsp;
<	小于号 &lt;
>	大于号 &gt;
上面三个要记 常用 下面的可以不记 用的时候再查
&	和号 &amp;
￥	人民币 &yen;
©	版权 &copy;
®	注册商标 &reg;
°	摄氏度 &deg;
±	正负号 &plusmn;
×	乘号 &times;
÷	除号 &divide;
²	平方(上标2) &sup2;
³	立方(上标3) &sup3;