超链接<a>
<a></a>
超链接属性target
_self 当前页
_black 空白页 默认
文本修饰常用标签
加粗
用b
和strong
<b></b>
<strong>
效果:
加粗
加粗
倾斜
用i
和em
<i></i>
<em></em>
效果:
倾斜
倾斜
删除线
用s
和del
<s></s>
<del></del>✔
效果:
删除线
删除线✔
HTML5已经不支持 s 标签
下划线
用u
<u></u>
效果:
下划线
角标
用sup
和sub
xxx<sup> x
xxx<sub> x
效果:
角标上
角标下
列表标签
有序列表
用ol
和li
<ol>
<li>把冰箱门打开</li>
<li>把大象放进去</li>
<li>把冰箱门关上</li>
</ol>
效果:
- 把冰箱门打开
- 把大象放进去
- 把冰箱门关上
type
属性:设置列表项目的符号
需要记住5种常用A
,a
,I
,i
,1
A
,a
:英文字母顺序
I
,i
:罗马字母顺序
1
:阿拉伯数字顺序
<ol type=''></ol>
效果:
- 把冰箱门打开
- 把大象放进去
- 把冰箱门关上
start
属性:开始首个顺序,start
取值是数字序号,不需要加任何单位
如start='6'
,会从第6个开始
<ol start=''></ol>
效果:
- 把冰箱门打开
- 把大象放进去
- 把冰箱门关上
无序列表
指列表项中的内容,是没有时间、空间或者逻辑等顺序要求的
用ul
和li
<ul>
<li>把冰箱门打开</li>
<li>把大象放进去</li>
<li>把冰箱门关上</li>
</ul>
效果:
- 把冰箱门打开
- 把大象放进去
- 把冰箱门关上
alt+上下键换顺序
无序列表同样有type
属性,有四个
disc
:实心圆点 type默认值
circle
:空心圆点
none
:隐藏项目
square
:实心方点
自定义列表
用dl
、dt
和dd
,都为双标签语法
dl
:定义列表
dt
:定义术语,可以理解为列表标题
dd
:定位描述,可以理解为列表内容
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
dt
和dd
为dl
的子标签
dt
和dd
为兄弟标签,dt
不能放在dd
内,反之亦如此
dt
和dd
不能脱离dl
使用
<dl>
<dt>问:英语不好能学编程吗</dt>
<dd>答:没问题</dd>
</dl>
效果:
- 问:英语不好能学编程吗
- 答:没问题
缩进是浏览器默认样式
列表标签快捷键
Emmet工具
<h1>工具</h1> 这样输入很慢
h1{工具} + tab键或者回车键 可以直接生成
alt + b 直接在浏览器中运行
任意合法HTML标签都可以使用Emmet来实现代码自动补全
生成多个一样的标签
标签名{标签文本内容}*标签重复次数
h1{工具}*3
如果要实现多个带项目符号
标签${标题文$本内容}*标签重复次数
h${这是$级}*3
嵌套标签
如果要实现以下效果
<ul>
<li>这是ul里面的li</li>
<li>这是ul里面的li</li>
<li>这是ul里面的li</li>
<li>这是ul里面的li</li>
<li>这是ul里面的li</li>
</ul>
Emmet的语法为:
父标签名>子标签名{子标签文本}*子标签重复次数
ul>li{这是ul里面的li}*5
表格 <table>
表格基础标签都遵循双标签的基本结构
行标签 <tr>
单元格 <td>
构成最基本的表格结构
<table>
<tr>
<td></td>
</tr>
</table>
table标签修饰属性
<th>
: 表头单元格,加粗并居中显示
快捷键ctrl+鼠标左键不能多选多个光标
实际上是alt+鼠标左键可以多选光标
表格线
表格线的属性是<border=>
,用来定义线条的粗细
表格的总宽度属性为:<width>
表格的总高度属性为:<hight>
<table border="1/2/3" width="数值" hight="数值"> </table>
间距属性
cellspacing
:单元格之间的距离 , 间与间
cellpadding
:单元格边框和文本之间的距离 , 框与字
居中属性
align
:"left"、"center"、"right"
用于表格 左对齐、居中对齐、右对齐
表格颜色
bgcolor
:用来修饰表格的背景颜色
bordercolor
:用来修饰表格的边框颜色
tr标签属性
<table>
<tr hight="">
</tr>
</table>
hight
属性增加高度不改变table的高度,其他单元格会均分表格宽度和高度
根据W3C官方公布的tr属性中,是没有宽度属性的
bgcolor
属性用来设置tr的背景颜色
对齐方式属性
align
:水平对齐方式,取值有 left 、center 、 right
valign
:垂直对齐方式,取值有 top 、middle 、 bottom
单元格td属性
width
单元格宽度、hight
单元格高度、bgcolor
单元格背景颜色
修改width
、hight
会影响这一列的单元格宽度、高度
td里也有align
和valign
属性
align
:水平对齐方式,取值有 left 、center 、 right
valign
:垂直对齐方式,取值有 top 、middle 、 bottom
合并单元格属性
rowspan
为行合并,值为合并行的总数,意为纵向占x个单元格
colsoan
为列合并,值为合并列的总数,意为横向占x个单元格
表格标题和结构分组
表格标题
caption
说明文字
一般习惯放置在第一个tr标签之前
<table>
<caption>标题<caption>
<tr></tr>
</table>
结构分组
行分组标签
thead
、 tbody
、 tfoot
均为双标签
分别表示 表格头 、 表格体 、 表格尾
<table>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
列也可以分组
colgroup
常用于定义表格一整列单元格的颜色
<colgroup span=""></colgroup>
其中span
属性取值为一个数值,含义为多少列分为一组
如果需要划分多组,则需要多个colgroup标签
颜色值和长度单位
颜色值
1、red,green,green这些130种,但只能是130种的
2、十六进制,比如 #ffffff
3、RGB(255,0,0)
长度单位
绝对单位和相对单位
比如1px 和 100%
px可以省略不写,浏览器渲染会默认用px来渲染
块级元素和内联元素
div块
span
范围
内联元素里面不能嵌套块级元素
块级元素有:table
p
h1-h6
tr
内联元素有:a
b
strong
i
sub
em
sub
sup