DAY02
列表
1.无序列表：没有排序
<ul>
<li></li>
<li></li>
</ul>
2.有序列表：默认排序
<ol>
<li></li>
<li></li>
</ol>
3.自定义列表
<dl>
<dt>名词</dt>
<dd>解释</dd>
</dl>
div标签
语法：<div></div>
作用：布局用用于区域划分
图片标签
语法：<img src="" alt="" width="" height="" border="" title="">
img 是图片标签
src="" 添加图片的路径
alt="" 提示图片 提示浏览器 提示用户
当图片因为某种原因加载不出来时显示在图片所在位置上的提示信息(在优化的角度上必须要有)
title="" 给图片添加标题，提示作用
插入图片是占用空间的，图片上不会显示其他的内容
补充：
1.在html的属性里，属性值是数值型，可以不写单位，默认单位是像素
2.属性是标签所具有的属性，是规定好的，直接使用即可
3.如果标签没有该属性，添加也是无效的
4.title="" 属性可以添加给所有标签，一般在超链接和图片标签上使用的比较多
路径
绝对路径：从根目录出发，寻找目标文件
相对路径：从当前文件的位置出发去寻找目标文件
当前文件：当前写代码的文件
目标文件：要链接的文件
同级 ./ 或 省略
上一级 ../
从根目录出发 / (一版绝对路径才会用到，相对路径一般不会使用)
超链接标签
语法：<a href="目标文件的路径" target="" title="给当前标签添加标题" download="下载文件的名称"></a>
1.href属性：
网页之间的跳转:超链接
<a href="http://www.baidu.com"></a>
同一页面不同位置的快速跳转：锚点链接
<div id="top"></div>
<a href="#锚点名称(#top)"></a>
实现指定页面的某个位置，进行跳转，超链接和锚点链接结合
<a href="http://www.jd.com#j_feeds"></a>
本地页面上跳转:
<a href="index.html"></a>
扩展
电子邮件：
<a href="mailto:2821675627@qq.com"></a>
手机电话：
<a href="tel:10086"></a>
发送短信：
<a href="sms:10086"></a>
2.target属性：超链接是否在当前窗口打开
target="_self" 链接在当前窗口打开
target="_blank" 链接在新窗口打开
3.download属性下载文件：
如果href内添加的是.txt .png .jpg支持浏览器直接打开，不支持下载，如果需要下载需要给a标签添加一个download属性；h5新增属性
<a href="images.rar">下载文件压缩包</a>
<a href="img.jpg" download="img.jpg">下载图片</a>
4.title属性：
给当前标签添加标题，提示文本
扩展：<base>空标记
1.为网页上所有链接规定默认地址或默认目标
2.为页面上所有的相对路径设置一个基准路径
3.base标签一定要写在head里面
<base target="_blank" href="images/">
iframe框架标签，内联框架
语法：<ifarme src="目标文件路径" width="宽度" height="高度" frameborder="是否有边框0无边框/1有边框" scrolling="no不显示滚动条/yes显示滚动条/auto默认值，自由显示，是否溢出"></iframe>
作用：把其他页面引入到本页面内显示
1.引入网页
<ifarme src="http://www.atguigu.com"></ifarme>
2.引入本地页面
<ifarme src="js/index.html" width="500px" height="500px"></ifarme>
3.引入图片
<ifarme src="http://www.atguigu.com/teacher/new/liming.jpg" width="500px" height="500px"></ifarme>
4.引入广告
<ifarme src="img12.360buyimg.com/seckillcms/s280x280_jfs/t1/2149
62/30/17186/112789/625d1b79Eabd3b51c/f94597d2a6c25bc7.jpg.webp"
width="500px" height="500px">
</ifarme>
5.指定a超链接标签的打开位置，指定超链接指向的文件在iframe中打开
<a href="http://www.atguigu.com" target="guigu"></a>
<iframe width="500px" height="500px" name="guigu"></iframe>
打开位置在指定的iframe中打开,给该框架添加一个名字，是所有标签都可以添加的属性
6.指定form表单的打开位置
表格标签
1.表格
作用：展示数据
组成：行、列、单元格
语法：
<table border="value" bordercolor="颜色" cellspacing="value" cellpadding="value">
<tr>行
<th></th>列标题，居中加粗
<th></th>
<th></th>
</tr>
<tr>
<td></td>列/单元格
<td></td>
<td></td>
</tr>
</table>
属性：
width="" 宽度
height="" 高度
bgcolor="颜色" 背景颜色
border="value" 边框
bordercolor="颜色" 边框颜色
cellspacing="value" 单元格之间的边距
cellpadding="value" 单元格与内容之间的间距
colspan="" 横向合并单元格，合并列
rowspan="" 纵向合并单元格，合并行
align="" 对齐属性
align="center" 水平居中
align="left" 左对齐
align="right" 右对齐
valign="" 垂直对齐属性
valign="top" 顶对齐
valign="middle" 居中对齐
valign="bottom" 底对齐
rules="" 分割线属性
rules="rows" 行与行之间的线条
rules="cols" 列与列之间的线条
rules="all" 行与列之间的线条
rules="none" 没有线条
rules="groups" 组与组之间的线条
2.长表格：行分组
只能有一个thead，tfoot；可以有多个tbody
浏览器会自动添加tbody
<table>
<caption>表格的标题</caption>
<thead> 表格的头部，表头
<tr>行
<th></th>列标题
<th></th>
<th></th>
</tr>
</thead>
<tbody> 表格的主要内容 表体
<tr>
<td></td>列/单元格
<td></td>
<td></td>
</tr>
</tbody>
<tfoot> 表格的底部，表尾
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
3.列分组标签：
<colgroup span="数值"></colgroup>
span="" 表示把相邻的几列划分为一组；默认值为1，自左向右依次分组
浙公网安备 33010602011771号