1 列表标签
ul无序列表 ol有序列表 li为列表项内容 自定义列表为dl dt dd为列表项 其中 dt可以作为小标题使用 因为dt不会缩进前两格
2. div和span标签
div:作用:划分区域; 特点:div是可以嵌套任何标签的; span标签:文本节点
特点:没有任何效果; div和span是典型的块元素和行内元素的代表 日后会分享这两个元素的区别
3.html的注释语句
作用:
1、隐藏代码 2、提示作用 注意: 注释里面不能嵌套注释;
快捷键:ctrl+/ 添加或删除注释
4.图片标签(插入图片)
语法:
<img src="目标文件路径" alt="自定义的提示信息">
属性:
src="" 设置目标文件路径,是必须要有的属性; alt="" 起到优化的和提示信息的作用,提示用户,提示浏览器; 当图片没有正确加载出来的时候,显示在图片位置上的提示文本 title="" 添加标题属性,是所有标签都可以添加的属性,起到提示作用; width="" 设置图片宽度 height="" 设置图片高度
5.路径
./ 表示 '当前文件所在的位置' ,默认时,就是在当前文件的位置;所有./可写可不写; ../ 表示 '返回上一级' ../../ 返回两级
6.超链接(a 标签 我们常用的链接)
(1)
语法:<a href=""></a> href="" 设置目标文件路径(url地址),是超链接标签必不可少的属性;
download="下载文件的名称.扩展名" (firefox/chrome支持)是h5新增属性; target="" 设置打开方式
属性值: _self 默认值,在当前窗口打开 _blank 在新窗口打开
作用:
1、实现页面和页面之间的跳转;
2、实现同一个页面内不同位置的快速跳转(锚点连接)
(2)锚点链接(单页面使用的例如:返回顶部按钮)
作用:实现在同一个页面内,不同位置之间的快速跳转;
使用方法:
<a href="#box">box</a> href里面设置的就是目标元素的url地址;
<div id="box">box</div>
注:id属性具有唯一性,一个元素只能有一个唯一的id名字;
每个标签都可以添加id属性;
7.base标签 <base target="" href="http://"> 标签为页面上的所有链接规定默认地址或默认目标,使用方法,<
base
target
=
"_blank"
> 但是需要写入head内。其作用就是 所有的A标签都是打开新窗口。
8.
iframe 内联框架(即行内框架)
作用:会创建包含另外一个文档的内联框架
语法:<iframe></iframe>
属性:
src="" 引入目标文件路径(有些网站拒绝引入);
name="" 添加name名字,自定义名字,该属性是所有元素都可以添加的属性;
frameborder="" 设置是否显示边框 0 :no不显示边框
1 :yes 显示边框,默认值
scrolling="" 是否显示滚动条: no不显示 yes显示 auto自由显示
9.
表格标签
(1) 作用:展示数据
语法:
<table>
<tr>
<td>
</td>
</tr>
</table>
table 表格标签 tr 表格的行标签 td 单元格标签
<th></th>
注:写在tr标签内,和td是一个等级的;
自带居中和加粗效果
table 是外面的大标签 每写一个tr就会多一列 td表示独立的一个单元格写在tr里面,垂直排列每写一个td就会垂直多一个单元格。
表格标题标签:
<caption></caption>
注:要写在table里面的第一个子元素的位置上,且caption标签里可写h1-h6或p标签等
(2)表格的基本html属性:
border="" 边框
bordercolor="" 边框颜色
cellspacing="" 设置单元格之间间距
cellpadding="" 设置单元格和内容之间的间距
注:以上属性添加给table标签
bgcolor="" 背景属性,表格里的标签都可以添加
width="" 宽度 ,添加给table或者td
height="" 高度(最小高度) ,添加给table或者td
(3)表格行分组标签:
<thead></thead> 表格的头部区域,表头
<tbody></tbody> 表格的主体区域,表体
<tfoot></tfoot> 表格的尾部区域,表尾
作用:给表格的行进行分组;
注:一个table里面,只能有一个thead和一个tfoot;可以出现多次tbody;
当没有设置行分组时,浏览器会自动添加一个tbody;
其主要目的是用来给表格分组,日后也可以用div起名字代替。
(4)
表格列分组标签:(了解)
<colgroup span=""></colgroup>
span="" 属性值为整数值,值为几,,就表示相邻的几列为一组;自左向右一次划分;
<
colgroup
span
=
"1"
bgcolor
=
"pink"
></
colgroup
>
<
colgroup
span
=
"2"
bgcolor
=
"yellow"
></
colgroup
>
<
colgroup
span
=
"1"
bgcolor
=
"tomato"
></colgroup>4
效果展示:
(5)表格的对齐属性:
水平对齐:
align=""
left 左对齐(默认值)
center 居中对齐
right 右对齐
注:如果algin属性添加给table,改变的事整个table表格在水平方向中的对齐方式;而不是里面内容的对齐方式;
垂直对齐:
valign=""
top 顶对齐
middle 居中对齐,默认值
bottom 底对齐
(6) 添加分割线属性:
rules=""
rows 行之间的分割线
cols 列之间的分割线
all 行和列之间的分割线
none 没有分割线(默认值)
groups 组之间的分割线
注:要添加给table标签