4.<div>和<span>标签
<div>和<span>没有语义,他们就是一个盒子,用来装内容的
div表示分割,分区;span意为跨度,跨距
特点:div标签用来布局,但是现在一行只能放一个<div>,大盒子;<span>标签用来布局,一行上可以多个span,小盒子
5.图像标签和路径
(1)图像标签
<img>标签用于定义HTML页面中的图像
<img src="图像URL" /> src是<img>标签的必须属性,它用于指定图像文件的路径名和文件名
图像标签的其他属性
属性 | 属性值 | 说明 |
src | 图片路径 | 必须属性 |
alt | 文本 | 替换文本,图像不能显示的文字 |
title | 文本 | 提示文本,鼠标放到图像上显示的文字 |
width | 像素 | 设置图像的宽度 |
height | 像素 | 设置图像的高度 |
border | 像素 | 设置图片的边框粗细 |
图像标签属性注意点:
- 图像标签可以拥有多个属性,必须写在标签名的后面
- 属性之间不分先后顺序,标签名与属性,属性与属性之间均以空格分开
- 属性采取键值对的格式,即key="value"的格式
(2)路径(前期铺垫知识)
- 目录文件夹和根目录
- 目录文件夹:就是普通文件夹,里面存放了我们做页面所需要的的相关素材,比如html文件、图片等。
- 根目录:打开目录文件夹的第一层就是根目录
2.路径
相对路径:以引用文件所在位置为参考基础,而建立出的目录路径,这里简单来说就是图片相对于HTML页面的位置
相对路径分类 | 符号 | |
同一级路径 | 图像文件位于HTML文件同一级 如<img src="baidu.gif"/> | |
下一级路径 | / | 图像文件位于HTML文件下一级 如<img src="images/baidu.gif"/> |
上一级路径 | ../ | 图像文件位于HTML文件的上一级 如<img src="../baidu.gif"/> |
绝对路径:是指目录下的绝对路径,直接到达目标位置,通常是从盘符开始的地址或完整的网络地址
6.超链接标签
<a>标签用于定义超链接,作用是从一个页面链接到另一个页面
语法格式:<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性 | 作用 |
href | 用于指定链接目标的url地址(必须属性)当标签应用href属性时,它就具有了超链接的功能 |
target | 用于指定链接页面的打开方式,其中_self为默认值,__blank为在新窗口中打开方式 |
链接分类:
1.外部链接:如<a href="http://www.qq.com">腾讯</a>
2.内部链接:网站内部页面之间的相互链接,直接链接内部页面名称即可,例如<a href="index.html">首页</a>
3.空链接:如果当时没有确定链接目标时,<a href="#">首页</a>
4.下载链接:如果href里面地址是一个文件或者压缩包,会下载这个文件
5.网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频等都可以添加超链接
6.锚点链接:点击链接可以快速定位到页面中的某个位置
- 在链接文本的href属性中,设置属性为#名字的形式,如<a href="#two">第二集</a>
- 找到目标位置标签,里面添加一个id属性=刚才的名字,如<h3 id="two">第二集介绍</h3>
5.HTML中的注释和特殊字符
5.1注释
注释以"<!--"开头,以“-->”结束,Ctrl+/添加取消注释
HTML标签(下)
1.表格标签
(1)表格的主要作用:显示,展示数据,可读性好
(2)表格的基本语法:
- <table></table>是用于定义表格的标签
- <tr></tr>标签用于定义表格中的行,必须嵌套在<table></table>标签中
- <td></td>用于定义表格中的单元格,必须嵌套在<tr></tr>中
- 字母td指表格数据,即数据单元格的内容
- <th>标签表示表格的表头部分,表头单元格里面的文本内容加粗居中显示
(3)表格属性:不常用,后面通过css来设置
属性名 | 属性值 | 描述 |
align | left,center,right | 规定表格相对周围元素的对齐方式 |
border | 1或“” | 规定表格是否拥有边框,默认为“”,表示没有边框 |
cellpadding | 像素值 | 规定单元边沿与其内容之间的空白,默认1像素 |
cellspacing | 像素值 | 规定单元格之间的空白,默认2像素 |
width | 像素值或百分比 | 规定表格的宽度 |