目录
HTML常用标签
标题标签
有<h1>
-<h6>
一共六个等级
语义:作为标题使用,按照重要性递减
特点:单行显示
段落标签
<p>我是一个段落</p>
<p>我是一个段落</p>
特点:
-
文本在一个段落中会随着浏览器窗口的大小自动换行
-
段落和段落之间会有一定的间隔
换行标签
单标签<br/>
语义:强制换行
文本格式化标签
语义:突出重要性
语义 | 标签 | 描述 |
---|---|---|
加粗 | <strong></strong> 或者<b></b> | 推荐使用<strong></strong> |
倾斜 | <em></em> 或者<i></i> | 推荐使用<em></em> ,语义更强烈 |
删除线 | <del></del> 或者<s></s> | 推荐使用<del></del> |
下划线 | <ins></ins> 或者<u></u> | 推荐使用<ins></ins> |
<div>
标签和<span>
标签
没有语义,只是盒子,用来布局
div(divison):分割、分区(竖向)——大盒子
span:跨度、跨距(横向)——小盒子
图像标签
<img scr="图像URL" alt="替换文本" title="提示文本"/>
scr是图像标签的必须属性。
属性 | 属性值 | 说明 |
---|---|---|
scr | 图片路径 | 必须属性 |
alt | 文本 | 替换文本,图像无法显示时显示该文本 |
title | 文本 | 提示文本,鼠标放到图片上提示的文本 |
width | 像素 | 设置图像的宽度 |
height | 像素 | 设置图像的高度 |
border | 像素 | 设置图像的边框大小 |
宽度和高度一般修改其中的一个,图片会等比缩放。
border一般通过css来设置。
注意:
-
属性要放在标签名的后面
-
属性之间没有前后次序,中间以空格分开
-
属性采取键值对的格式,key="value"
路径
文件不能随便乱放,需要用文件夹来管理,以便快速查找
目录文件夹:存放了我们所需要的素材
根目录:目录文件夹的第一层
VScode可以打开目录文件夹,也可以直接把文件夹拖拽到VScode中。
相对路径
引用文件相对于html文件的位置
相对路径分类 | 符号 | 说明 |
---|---|---|
同一级路径 | 图像文件位于HTML文件的同一级,如,<img scr="img.jpg"/> | |
下一级路径 | / | 图像文件位于HTML文件的下一级,如,<img scr="images/img.jpg"/> |
上一级路径 | ../ | 图像文件位于HTML文件的上一级,如,<img scr="../img1.jpg"/> |
绝对路径
通常是从盘符开始的路径
如:D:\web\img\logo.jpg或者完整的网络地址“http://www.itcast.cn/images/logo.jpg”
通常不使用绝对路径
注意:相对路径“/” 绝对路径“\”
超链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性 | 作用 |
---|---|
href | 用于指定链接目标的URL地址 |
target | 用于指定链接页面的打开方式,_self(默认值):当前页面跳转;_blank:在新的窗口打开。 |
链接分类
外部链接
http://XXXXXXX
内部链接
在目录文件夹中的两个html网站跳转,网站内部页面之间的相互链接,href的值只要写名字即可。
空链接
在网站开发前期,href的值为“#”
<a href="#">未开发的页面</a>
下载链接
如果href里面是一个文件(.exe)或者压缩包(.zip或.rar),会下载这个文件
网页元素超链接
网页中的各种网页元素:文本、图像、视频、音频、表格等都可以添加超链接。
例:给图片添加超链接
<a href="#"><img src="1.jpg" alt="图片"></a>
锚点链接
点击链接时,可以快速定位到页面中的某个位置
实现:
-
链接文本的href属性的属性值为”#名字“
-
目标位置标签除添加id属性,属性值为”名字“
<a href="#跳转部位">重点内容</a>
<h4 id="跳转部位">重点内容:。。。。。。。。此处省略一万字</h4>
注释
<!--注释内容-->
在VScode中,ctrl+/就可以添加注释。
特殊字符
特殊字符 | 描述 | 字符的代码 |
---|---|---|
空格符 | | |
< | 小于号 | < (less than) |
> | 大于号 | > (greater than) |
& | 和号 | & |
¥ | 人民币 | ¥ |
© | 版权 | © |
® | 注册商标 | ® |
° | 摄氏度 | ° |
± | 正负号 | ± |
表格标签
作用:为了更好的显示数据
<table>
标签:定义整个表格主体
<tr>
标签:定义表格的一行
<td>
标签:定义表格的一个单元格
<th>
标签:表头单元格标签,区别于<td>
,其中的文字会加粗居中显示,起显示突出作用。
<table>
<thead>
<tr>
<th>表头单元格标签</th>
...
</tr>
...
</thead>
<tbody>
<tr>
<td>单元格标签<td>
...
</tr>
...
</tbody>
</table>
表格属性
通常是通过CSS样式定义,现在只是了解。
属性 | 属性值 | 描述 |
---|---|---|
align | left、center、right | 描述表格在页面中的位置(对齐方式) |
border | "1"或""(默认值为“”) | 描述表格单元是否有边框 |
cellpadding | 像素值 | 规定单元的边沿到其内容之间的空白,默认1像素 |
cellspacing | 像素值 | 规定单元格之间的空白,默认为2像素(通常设置成0) |
width | 像素值或百分比 | 规定表格的宽度 |
height | 像素值或百分比 | 规定表格的高度 |
表格结构标签
为了更好的表示表格的语义,将表格分为表格头部和表格主体
<thead>
标签:一般是表格的第一行(表头)
<tbody>
标签:定义表格的主体
合并单元格
方式:
-
跨行合并:rowspan="合并单元格个数"
-
跨列合并:colspan="合并单元格个数"
目标单元格:
-
跨行:最上侧的单元格为目标单元格,写合并属性
-
跨列:最左侧的单元格为目标单元格,写合并属性
步骤:
-
首先确定是跨行合并还是跨列合并
-
找到目标单元格,填写row(col)span="合并单元格数目"
-
删除多余的单元格
<table border="1" align="center" width="500" height="249" cellspacing="0">
<tr>
<td></td>
<td colspan="2"></td><!-- 跨列合并 -->
<!-- <td></td> 跨列合并删除的单元格-->
</tr>
<tr>
<td rowspan="2"></td><!--跨行合并-->
<td></td>
<td></td>
</tr>
<tr>
<!-- <td></td> 跨行合并删除的单元格-->
<td></td>
<td></td>
</tr>
</table>