一、
1、 格式标签：
示例——定义一段联系信息 <body> <address> 地址信息 </address>
</body>
2、文本格式化标签
块级元素和行内元素的不同
a、块级元素独占一行，行内元素在同一行显示
b、块级元素默认宽度100%，行内元素由内容撑开
c、块级元素可以设置宽高，行内元素不可以设置宽高
d、块级元素可以设置margin和padding 和四个方向，行内元素只可以设置margin和padding和左右值，上下不起作用
e、块级元素默认元素的display为black，行内元素的display为inline.
f、块级元素包括块级元素和行内元素，行内元素一般只包含行内元素和文本
g、常见的块级元素有h1-h6,p,div,hr水平线,ul,ol,li,dl,dt,dd,table等，行内元素有img,a,b加粗,i倾斜,u下划线s删除,em倾斜显示 ,strong加粗显示,sup上标,sub下标
small 小号字体big 大号字体s 删除线del 删除线ins 插入
3.HTML的属性语法：开始标签里面 属性="属性值"多个属性空格隔开4.h1-h6,p 都有align属性和title属性h1-h6一号字体最大六号最小align 水平对齐方式 取值 left right centertitle 鼠标悬停给予提示6.段落元素palign 水平对齐方式 取值 left right centertitle 鼠标悬停给予提示7.强制换行br 没有任何属性5.<img src="" alt="" title=""/>src:路径相对路径同一等级 直接写下一级 /上一级 ../绝对路径alt:当图片不能正常显示的时候，给予提示title：当鼠标悬停时给予提示--><!--<h1>一号标题</h1>
<H1>一号标题</H1>-->
<!--1.强制换行 <br/>没有任何属性2.水平线<hr/>块级元素color:颜色size：线的高度width:线的长度align:默认值为center3.超链接<a></a>双标记，行内元素href 路径target 跳转窗口默认值 _self 原窗口打开_blank 新窗口打开空链接href="#"返回网页顶部锚点：1.点击a跳转到a<a href="#name">点击</a><a href="" name="name">跳转到</a>2.点击a跳转到div<a href="#name">点击</a><div id="name">跳转到</div>
<a href="#">空链接</a><a href="http://www.baidu.com" target="_blank" >跳转到百度</a><a href="05HTML常用标签.html">相对路径</a><a href="#text">点击我（标题）</a><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><a href="" name="text">跳转到我</a><a href="#">空链接（跳转到网页顶部）</a>
9.水平线<hr align="水平对齐方式" size="宽度" width="长度" color="颜色"/><hr width="500"/><hr width="50%"/>
表格
三行三列
table>tr*3>td*3
表格行的常用属性表格是按行和列（单元格）组成的，一个表格有几行组成就要有几个行标签<tr>
合并单元格横着合并 colspan竖着合并 rowspan属性写在开始的td上面横着合并删除自己的td竖着合并删除下面的td Iframe（Inner Frame）内联框架 iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。iframe是属于内联框架，它是body的子级，和body是父子关系。iframe作为一个普通元素放在body里 属性 ①width 可设置内联框架的宽 ②height 可设置内联框架的高 ③name 设置框架名称 ④src 设置页面的路径 ⑤scrolling规定是否在 iframe 中显示滚动条（yes，no，auto） ⑥ frameborder规定是否显示框架周围的边框（1默认有边框,0）from表单标签块元素三个属性
作用：提交数据的功能
语法：<from action = "提交地址" name="表单名称 自定义" method="提交的方法get/post"></from>
get 不安全 提交的信息会在地址栏显示
提交的数据有限制不能大于1kb
post 安全 理论上对数据没有限制
input属性：name 表单名称value 当前值checked 默认被选中（配合单选按钮和多选按钮使用）selected 默认显示（配合option使用）disabled 禁用readonly 只读size select显示的数量<form action="提交的地址" name="表单的名称" method="提交的方式get|post" enctype="multipart/form-data"> <input type="text"/>文本 <input type="password"/>密码 <input type="radio" name=""/ <input type="checkbox"/>框 <input type="file"/> <input type="hidden"/>隐藏 <input type="submit"/>提交 <input type="reset"/>重置 <input type="button" value=""/>内容用value 值来改 <button>提交</button> <button type="reset">重置</button> <button type="button">按钮</button>
<input type="image" src=""/>图片引入
邮箱：<input type="email" name="email"/>
电话：<input type = "tel"/>
数字：<input type:'number' min='0' max='100' step='5步长>
范围：（滑块）：<input type="range" min="0" max="100" value="20" step="10"/>
网址：<input type="url 输入网址" name="wz"/>
颜色：<input type=“color”>
日期:<input type="data"/>
月:<input type="month"/>
周:<input type="week"/>
搜索：<input type="search/>
<select name="" id=""> <option value=""></option> <option value=""></option> </select> <select name="" id=""> <optgroup label="标题"> <option value=""></option> </optgroup> <optgroup label="名字"> <option value=""></option> </optgroup> </select> <textarea name="" id="" cols="30" rows="10"> 多行文本框（文本域） </textarea> <fieldset> <legend>标题</legend> <input type="text"/> </fieldset></form>
html5新增属性placeholder 默认提示required 必填项autofocus 自动获取焦点multiple 输入多个，用逗号隔开（配合邮箱和网址使用）min和max 最小值和最大值minlength和maxlength 最小长度和最大长度--><form action=""> <p> 姓名： <input type="text" placeholder="请输入您的姓名" name="userName" required autofocus /> </p> <p> 密码：<input type="password" placeholder="请输入您的密码" name="psd" required minlength="5" maxlength="9"/> </p> <p> 邮箱：<input type="email" multiple/> </p> <p> <input type="submit"/> </p>
</form>
html5新增语义化标签
<title>HTML5新增语义化标签</title></head><body><div>头部</div><div>导航</div><div>主体</div><div>页脚</div><!--HTML5语义化标签--><header>头部</header><nav>导航</nav><div>主体</div><footer>页脚</footer><article>文章，帖子</article><section>文章的标题</section><aside>侧边栏</aside></body></html>
音频和视频
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>视频和音频</title></head><body><video src="images/b.mp4" controls poster="images/pic2.jpg" muted>这是一个视频您的浏览器不支持</video><video src="images/a.mp4" controls loop width="600" poster="images/pic1.gif">这是一个视频您的浏览器不支持</video><audio src="images/a.mp3" autoplay controls loop>这是一个音频您的浏览器不支持</audio><video autoplay controls loop> <source src="images/a.mp4"/> <source src="images/a.ogg"/> <source src="images/a.webM"/> 这是一个视频您的浏览器不支持</video><embed src="images/b.mp4"/><embed src="images/a.mp3"/></body></html>
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>html5新增标签</title></head><body><!--图片和图片的描述--><figure> <img src="images/pic3.jpeg" alt="" width="300"/> <figcaption>这是蜡笔小新</figcaption></figure><dl> <dt><img src="images/pic3.jpeg" alt="" width="300"/></dt> <dd>这是蜡笔小新</dd></dl><!--文章或者文档的细节--><details> <summary>这是标题</summary> <p>Lorem ipsum dolor sit amet, <mark>consectetur</mark> adipisicing elit. Atque, autem commodi consectetur dolor dolorum eligendi eos eveniet explicabo illo impedit inventore nulla numquam suscipit, tempora tenetur. Aspernatur cupiditate ex iusto!</p></details><!--刻度--><meter min="0" max="100" value="19" low="20" high="80">您的浏览器不支持刻度</meter><!--进度条--><progress max="100" value="50">您的浏览器不支持进度条</progress><input type="text" list="city"/><datalist id="city"> <option value="北京"></option> <option value="河北"></option> <option value="安徽"></option> <option value="山东"></option></datalist><canvas id="myCanvas" width="800" height="800">你的浏览器不支持canvas标签</canvas><script type="text/javascript"> var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100);</script></body></html>
css 样式还有选择器
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>基础选择器</title> <link rel="stylesheet" href="css/04style.css"/></head><body><!--作用：选择要施加样式的元素1.通用选择器（全局选择器） *{} 选中网页中所有的元素2.元素选择器 div img p a body 选中所有指点的元素3.类选择 .className{} 名字可以重复，多个名字用空格隔开 选中所有有类名的元素4.ID选择器 #idName{} 名字唯一
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>基础选择器</title> <link rel="stylesheet" href="css/04style.css"/></head><body><!--作用：选择要施加样式的元素1.通用选择器（全局选择器） *{} 选中网页中所有的元素2.元素选择器 div img p a body 选中所有指点的元素3.类选择 .className{} 名字可以重复，多个名字用空格隔开 选中所有有类名的元素4.ID选择器 #idName{} 名字唯一选择器优先级：sytle行内样式>ID选择器>类选择器>元素选择器>通用选择器权重： 1000 100 10 1优先级相同的情况下，后面的代码生效合并选择器 逗号链接多个选择器选择器1,选择器2，。。。{}--><div class="box box1" id="box" style="color: green;">div1</div><div>div2</div><div>div3</div><p class="box">p1</p><p>p2</p><p>p3</p><a href="#">a</a><b class="box1">b</b><ul> <li>li</li> <li>li</li></ul></body></html>
选择器优先级：sytle行内样式>ID选择器>类选择器>元素选择器>通用选择器 权重： 1000 100 10 1 优先级相同的情况下，后面的代码生效 合并选择器 逗号链接多个选择器 选择器1,选择器2，。。。{ } --> <div class="box box1" id="box" style="color: green;">div1</div> <div>div2</div> <div>div3</div> <p class="box">p1</p> <p>p2</p> <p>p3</p> <a href="#">a</a> <b class="box1">b</b> <ul> <li>li</li> <li>li</li> </ul> </body> </html>