一,什么是html
* HyperText Markup Language*
二,第一个Html
<!doctype html>
<html>
<head></head>
<body></body>
</html>
三,常用的标签
1.p 标签 ,段落标签,占整行
2.img 图片标签
src 图片路径
alt 错误替换文本
title 悬停提示
width/height 图片的宽高
3.h1~h6 标题标签,占整行, 包含 其他块 和 行内元素
4. br 换行标签
5. ul>li 无序列表,块元素,占整行
6. ol>li 有序列表,块元素,占整行
7. dl>dt+dd 定义列表 ,块元素,占整行
8. b / strong 加粗
9. i / em 倾斜
10. font 字体 属性:颜色color 大小size
11. sub / sup 上下标
12. hr 水平线 属性: 宽度width 颜色 color
13. marquee 滚动文本 属性: 方向direction 运动方式behavior
四,网页图片
1. jpeg/jpg 有损压缩,不支持透明,颜色丰富
2. png 无损压缩,支持透明,颜色丰富
3. gif 支持动画,支持透明,颜色范围256色
4. webp 有损压缩与无损压缩的图片文件格式
五,颜色
1.RGB
Red 0-255
Green 0-255
Blue 0-255
2.十六进制的等值 转换
六,标签的显示类型
1.块 block
h1~h6
p
ul
li
ol
div
hr
2.行内块 inline-block
3.行内inline
span
sub
sup
i
em
b
strong
七,特殊字符
1.< <
2.> >
3. 空格
4.能字符输入法打印识别的就直接使用
八,超链接
1.跳转html页面
<a href = 'http://www.baidu.com'> 去百度</a>
<a href = 'task1.html'> 去task1</a>
2.跳转图片,音频,视频等可识别文件类型,直接打开
<a href = 'abc/x.png'> 打开图片</a>
3. 跳转未知类型的文件,根据浏览器情况,大部分浏览器下载
<a href = 'abc/x.xmind'> xmind 文件</a>
4.移动端 可以实现 跳转 拨号界面
<a href = 'tel:110'> 去拨号</a>
5.跳转邮件应用方式
<a href = 'mailto:123@qq.com'> 发邮件</a>
九,超链接的跳转方式
1.target属性 跳转 _self 当前页面 , _blank 新页面
2.锚链接
设置锚点 为标签 添加 id 属性值
跳转锚点 <a href="#锚点名"></a>
十,框架iframe
1.一个html页面嵌套展示多个html页面,实现分模块开发的方式,属于行内块类型
2.iframe
src 页面地址
frameborder 边框
scrolling 滑动条
width/height 宽高
name 框架名
3.单页面框架跳转
设置导航 a 超链接的 target 指向对应页面iframe 的name值
主页面使用iframe嵌套其他页面,局部刷新iframe添加name属性和 导航a超链接 target 对应
十一,表格
1. table
border 表格四边宽度
2.frame 表格四边的显示
单词 | 解释 |
---|
above | 上 |
below | 下 |
rhs | 右 |
lhs | 左 |
vsides | 左右 |
hsides | 上下 |
void | 不显示 |
border | 默认显示四边 |
3.rules 表格间隔线设置
单词 | 解释 |
---|
rows | 单线显示行 |
cols | 单线显示列 |
all | 单线显示行列 |
4.width/height 宽高
5.cellspacing 单元格外间距
6.cellpadding 单元格内填充
7.align 表格对齐方式
8. bordercolor 边框颜色
9. tr与td
width/height 一半高度由行设置, 单元格只设置宽度
align:水平对齐 left center right
valign:垂直对齐 top middle bottom
bgcolor 背景色
colspapn:列合并
rowspan:行合并