一.什么是html
超文本标记语言,运行在浏览器端。
二.基本结构
//声明文档类型
//声明编码,万国码,否则会出现乱码
(页面上所有能看到的)
三.段落标签
段落内容
四.图片标签
1.src 引入图片路径
2.alt 替代文字 当图片加载不出来时,用来代替图片的文字
3.width 设置图片的宽度 值:数字 默认单位是像素
4.height 设置图片的高度 值:数字 默认单位是像素
5.title 提醒文字 当目标放到图片上时的提醒文字
四.路径:(相对路径)
1.当图片和html文件在同一级目录下,直接写图片名字
2.当图片所在文件夹和html文件在同一级目录下,先写文件夹名称,再写图片名称 例如:xx(文件夹)/xx.jpg(图片名称)
3.当图片和html文件在同一个目录下,用“../”跳出当前目录,然后再写图片名称 ../xx.jpg
4.当图片所在的文件夹和html文件所在的文件夹在同一个目录下,用../跳出当前目录,再写图片所在的文件夹的名称,再写图片的名称 ../xx(文件夹)/xx.jpg
五.文字排版标记
换行:在段落里换行处加
~标记标题:只有六个标题
共同点:都是标题标签 字体加粗,都有默认的外边距
不同点:字体大小不一样,h1~h6依次减小
六.定义列表:
- 需要解释的术语/关键字 //定义列表项
- 解释说明
- //列表项说明
和不能脱离
段落中添加空格:"  "" &ensp"" &emsp"(空格大小,小→大)
1.加粗
表示加粗
加粗,主旨表强调
2.倾斜
表示倾斜
倾斜,主旨表强调
3.上下标
表示下标
表示上标
4.注释
<!--注释-->
5.无自带样式的块级元素
无自带样式的行内元素
6.水平线
align表示水平对齐方式,默认为居中对齐
7.大于号>
小于号<
版权©
超链接 双标记标签1
>href 跳转的路径,相对路径/绝对路径
mailto:邮箱地址
锚点: #+id值2>target 链接打开的方式
-blank 在新窗口中打开 -self/-parents/-top 在旧窗口打开
9.热点区域(地图热点)
.......
area标签的属性:
1.shape 形状
rect 矩形
circle 圆形
poly 多边形
2.coords 坐标
如果shape="rect",coords="1,2,3,4"(1,2代表矩形左上角坐标,3,4代表矩形右下角坐标)
如果shape="circle",coords="1,2,3"(1,2代表圆心坐标,3代表圆的半径
)如果shape="poly",coords="1,2,3,4......"(每两个数值代表一个多边形顶点的坐标)
3.href 跳转的链接
4.target 跳转的方式
块级元素:独占一行,能设置宽度和高度,行高,外边距,内边距等p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd,hr,div,form,option
行内元素,能和其他元素在一行显示,不能设置宽度和高度b,strong,i,em,sub,span,a,label
行内块级元素img,input,textarea,select,button
行内元素里不可以加块距元素,块距元素可以跟任意行内元素
1.框架
1>行内框架:
属性:
src: 引入框架的路径
frameborder: 框架的边框 值: 1 默认值,有边框
0 无边框
scrolling: 框架的滚动条 值: 1 默认值,有滚动条
0 无滚动条
width/height 设置行内边框的大小
2>框架集(不能和body共用):
frameset的属性:
1>cols或rows 值:数值或百分比 或*
2>frameborder 框架的边框
frame 的属性:
1>src 引入框架的路径
2>scrolling 当前框架是否有滚动条
3>noresize 不能调整框架大小
表格:
1.表格的基本结构:
表格的标题 | 表格的单元格 |
---|
table的属性:
1>border 边框
2>cellspacing 单元格与单元格之间的间隙
3>cellpadding 内容与单元格四周边框的距离
2.单元格的合并:
1>列合并colspan=“合并单元格的个数” 水平合并
2>行合并rowspan=“合并单元格的个数” 垂直合并
>颜色样式和字体大小:style="color:rgb(255,0,0);font-size:20px;"
rgb:
r red (255,0,0)
g green (0,255,0)
b blue (0,0,255)
表单:
1.form属性:
action:行为,提交的路径(服务器地址)
method: 方式 提交的方式
值:get 提交后,提交的内容会出现在地址栏里,安全性较低,提交的数据大小有限制
post 提交后,提交的内容不会出现在地址栏里,安全性较高,提交的数据大小无限制
2.input的属性:
1>type 类型 值: text 文本框
password 密码框
checkbox 复选框
radio 单选框 name值必须保持一致
hidden 隐藏域
submit 提交按钮
reset 重置按钮
file 文件上传域
button 一般按钮
2>name 名字
3>value 值(初始值)
3.label 行内标签
复选框(checkbox)
点文字可以把复选框选中或取消:
单选框和复选框用法类似
4.文本域/多行文本框
5.下拉选择框
.......
默认被选中:第一个option默认是被选中/selected设置默认被选中
6.按钮
一般按钮
提交按钮
重置按钮
一般按钮
新增语义化标签
头标签
导航
文章
文档中的节
脚注 底部
侧边栏
其他标签
其他内容
进度条:
度量衡:
数据列表:
.......
进度条
度量衡
数据列
form新增控件
邮箱
地址
数字step是步长
滑动条:
年月日
年月
年周
时分
年月日时分:
年月日时分(本地时间)
搜索域
颜色
电话 \d表示数字【0,9】{11}表示重复11次
新增属性
placeholder 文本提醒
required 必填项
autocomplete 自动补全值:1)on 默认开启自动补全2)off 关闭自动补全
autofocus 自动获取焦点
readonly 只读状态
四.多媒体
1.音频
兼容
....
你的浏览器不支持audio标签
audio属性:
1)controls 控件
2)autoplay 自动播放
3)loop 重复播放
2.视频
兼容
....
你的浏览器不支持video标签
video属性:
1)controls 控件
2)autoplay 自动播放
3)loop 重复播放
4)muted 静音
5)poster 值:url(“图片路径”)视频的背景图片