一.什么是html
超文本标记语言，运行在浏览器端。
二.基本结构
<!doctype html>//声明文档类型
<html>
<head>
<title>网页名称</title>
<meta charset="utf-8">//声明编码，万国码，否则会出现乱码
</head>
<body>
(页面上所有能看到的)
</body>
</html>
三.段落标签
<p>段落内容</p>
四.图片标签
<img src="路径名" alt="" width=""/height="">
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
五.文字排版标记
<br>换行：在段落里换行处加<br>
<h1>～<h6>标记标题：只有六个标题
共同点：都是标题标签 字体加粗，都有默认的外边距
不同点：字体大小不一样,h1～h6依次减小
<ul></ul>:无序列表标记,表示列表所包含的项是没有先后顺序的，列表项使用<li>表示
<ol></ol>:有序列表标记,表示列表所包含的项是有先后顺序的，列表项使用<li>表示
六.定义列表：
<dl>
<dt>需要解释的术语/关键字</dt>//定义列表项
<dd>解释说明<dd>//列表项说明
</dr>
<dt></dt>和<dd></dd>不能脱离<dl></dl>
段落中添加空格："  "" &ensp"" &emsp"(空格大小，小→大)
1.加粗
<b></b>表示加粗
<strong></strong>加粗，主旨表强调
2.倾斜
<i></i>表示倾斜
<em></em>倾斜，主旨表强调
3.上下标
<sub></sub>表示下标
<sup></sup>表示上标
4.注释
<！--注释-->
5.无自带样式的块级元素<div></div>
无自带样式的行内元素<span></span>
6.水平线
<hr width="数字百分比" align="left/right/center">align表示水平对齐方式，默认为居中对齐
7.大于号>
小于号<
版权©
8.<a></a>
<a href="地址">超链接</a> 双标记标签1
>href 跳转的路径，相对路径/绝对路径
mailto:邮箱地址
锚点： #+id值2>target 链接打开的方式
-blank 在新窗口中打开 -self/-parents/-top 在旧窗口打开
9.热点区域（地图热点）
<img src="地址"...usemap="#name值">
<map name="name值" id="name值">
<area shape="" coords="" href="" target="">
.......
</map>
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>行内框架：
<iframe src="路径"></iframe>
属性：
src： 引入框架的路径
frameborder： 框架的边框 值： 1 默认值，有边框
0 无边框
scrolling： 框架的滚动条 值： 1 默认值，有滚动条
0 无滚动条
width/height 设置行内边框的大小
2>框架集(不能和body共用)：
<frameset cols/rows="30%,400px,*">(数值可以用百分比，像素，*表示，*表示剩下所有的空间)
<frame src=""...>
</frameset>
frameset的属性：
1>cols或rows 值：数值或百分比 或*
2>frameborder 框架的边框
frame 的属性：
1>src 引入框架的路径
2>scrolling 当前框架是否有滚动条
3>noresize 不能调整框架大小
表格：
1.表格的基本结构：
<table>
<tr>
<th>表格的标题</th>
<td>表格的单元格</td>
</tr>
</table>
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）
<input type="checkbox" checked>
<input type="checkbox" checked="checked">
点文字可以把复选框选中或取消：
<label>文字<input type="checkbox"></label>
<label for="id内容">文字</label><input type="checkbox" id=“”“”
单选框和复选框用法类似
4.文本域/多行文本框
<textarea cols=""/rows="" placeholder="提醒文字（点中就会消失）">
5.下拉选择框
<select>
<option></option>
<option></option>
.......</select>
默认被选中：第一个option默认是被选中/selected设置默认被选中
6.按钮
<button></button>一般按钮
<button type="submit"></button>提交按钮
<button type="reset"></button>重置按钮
<button type="button"></button>一般按钮
新增语义化标签
头标签 <header></header>
导航 <nav></nav>
文章<article></article>
文档中的节<section></section>
脚注 底部<footer></footer>
侧边栏<aside></aside>
其他标签
<details>
<summary>标题</summary>
其他内容
</details>
<time></time>
进度条：<progress value="" min="" max="" ></progress>
度量衡：<meter value="" min="" max=""low=""high=""></meter>
数据列表：
<input list="id值">
<datalist id="id值">
<option value=""></option>
.......
</datalist>
进度条
度量衡
数据列
form新增控件
邮箱
地址
数字<input type="number" min="" max="" step="" />step是步长
滑动条：<inputtype="range"min=""max=""step=""/>
年月日<input type="date"/>
年月<input type="month"/>
年周<input type="week"/>
时分<input type="time"/>
年月日时分:<input type="datatime"/>
年月日时分（本地时间）<input type="datatime-local"/>
搜索域<input typt="search"/>
颜色<inputtype="color" value="十六进制"/>
电话<input type="tel" pattern="\d{11}" /> \d表示数字【0,9】{11}表示重复11次
新增属性
placeholder 文本提醒
required 必填项
autocomplete 自动补全值：1）on 默认开启自动补全2）off 关闭自动补全
autofocus 自动获取焦点
readonly 只读状态
四．多媒体
1.音频
<audio src=""></audio>
兼容
<audio>
<source src=""type=" audio/ogg"></source>
<sourcesrc="" type="audio/mpeg"></source>
....
你的浏览器不支持audio标签
</audio>
audio属性：
1）controls 控件
2）autoplay 自动播放
3）loop 重复播放
2.视频
<video src=""></video>
兼容
<video>
<source src="" type="video/ogg"></source>
<source src="" type=" video/mp4"></source>
....
你的浏览器不支持video标签
</video>
video属性：
1）controls 控件
2）autoplay 自动播放
3）loop 重复播放
4）muted 静音
5）poster 值：url(“图片路径”)视频的背景图片
网友评论