<!--字体倾斜-->
<i>中国</i>
<!--字体加粗-->
<b>中国</b>
<!--下划线-->
<u>中国</u>
<!--字体删除线-->
<del>中国</del>
<!--上标-->
3<sup>2</sup>
<!--下标位-->
log<sub>10</sub>
<!--字体变小-->
<small>中国</small>
<!--字体变大-->
<big>中国</big>
<!--字体标签 face格)-->
<font color="black" size="5" face="微软雅黑">中国人民</font>
<span > </span> <!-- 行内标签 style样式操作-->
<!--无序列表-->ul
<ul type="square">
<li>春天</li>
<li>夏天</li>
<li>秋天</li>
<li>冬天</li>
</ul>
<!--有序列表-->ol
<ol type="i">
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
</ol>
<!--自定义列表-->dl
<dl>
<dt>四季有你</dt>
<dd>春</dd>
<dd>夏</dd>
<dd>秋</dd>
</dl>
<!--跑马灯装饰-->marquee
<marquee direction="right"> 跑起来啊</marquee>
<head>
<meta charset="utf-8">
<a href="#bottom" name="top">返回底部</a>
<a href="#top" name="bottom">返回顶部</a>
超链接标签的作用（不会自动换行）
【1】实现不同页面之间的跳转 href:指定跳转到目标资源的位置 target：打开网页的方式 【2】实现锚点功能
<!--跳转到本地的资源位置--> <a href="02body中常用小标签.html" target="_blank">02小标签测试</a> <!--跳转到网络的位置--> <a href="http://www.bjsxt.com">北京尚学堂</a>
7.1 图片标签
img (不会自动的换行)
src:引入图片的位置{相对路径、绝对路径、网络路径 }
title：图片的标题
原始 宽和高
400px 260px
200px 130px
border:图片的边框
alt：图片无法正常显示的时候显示的属性
align:图片的位置 ，必须有参照物
7.2 图片标签的使用
<!--相对路径-->
<img src="img/2.jpg" />
<!--绝对路径-->
<img src="C:\\Users\\my\\Documents\\HBuilderProjects\\01
HTML\\img\\1.jpg" />
<!--网络路径-->
表格标签
table>tr*3>th*3 :声明3行3列的表格
table表格的自适应能力 (align="center")整个的表格整
体居中
width="300px" height="300px"
cellpadding：内容和单元格的距离
cellspacing：单元格和单元格的距离
tr：行 :height
td/th：列 width
td:普通的列
th:标题列:自动的居中，加黑效果
colspan:列合并
rowspan：行合并
bgcolor：背景颜色
表单标签
https://www.baidu.com/s？键1=值1&键2=值2
action：表单提交的位置
method（get/post）：表单提交的方式
GET:
(1)参数会依附于url地址之后
(2)利用get方式提交数据，数据的长度有限制
(3)利用get方式提交数据，是不安全的
Post
(1)请求不会依附于地址，
(2)利用post处理参数不受限制
(3)post提交数据比较安全
普通文本框 value：文本框中值
账号： <input type="text" name="zh" value="123" />
密码：<input type="password" name="pwd" value="123" />
单选框 实现单选的效果必须指定同一个name属性 checked：默认的选择
男：<input type="radio" name="sex" value="1" checked="checked"/>
女：<input type="radio" name="sex" value="0"/>
多选框
抽烟:<input type="checkbox" value="1" checked="checked">
喝酒:<input type="checkbox" />
烫头:<input type="checkbox" /><br />
多行文本框
个人介绍： <textarea rows="15" cols="20" value="">你好</textarea><br />
文件选择框
<input type="file" name="file" /><br />
隐藏框
<input type="hidden" name="sno" value="20180607" />
下拉框 selected：默认的选择
<select name="ch">
<option value="1">中国</option>
<option value="2" selected="selected">美国</option>
<option value="3">日本</option>
<option value="4">新加坡</option>
</select>
提交按钮
<input type="submit" value="提交" />
清除按钮,清空写好的内容
<input type="reset" value="清除" />
普通的按钮 没有提交数据的功能
<input type="button" value="提交" />
增强表单标签
<form>
邮箱
邮箱: <input type="email" />
数字
年龄: <input type="number" />
滑动器
滑动器: <input type="range" />
搜索框
搜索: <input type="search" />
日期的框
日期: <input type="date" />
日期: <input type="week" />
日期: <input type="month" />
颜色
颜色: <input type="color" />
网址
网址: <input type="url" />
</form>
H5中表单增强的属性
placeholder 默认值
autofocus:自动的获得焦点
max：最大值
min：最小值
minlength:最小长度
maxlength:最大长度
<form>
账号:<input type="text" placeholder="手机号/邮箱/账号" autofocus/>
密码:<input type="number" max="130" min="0" />
密码:<input type="password" minlength="2" maxlength="4" />
</form>
div 标签
div本身是没有任何的含义
div：作用就是把网页进行模块化的划分
div 标签的使用
<!--头部模块-->
<div class="top"></div>
<!--中间提示-->
<div class="tips"></div>
<!--中间的展现-->
<div class="center">
<div class="login">
</div>
</div>
<!--底部模块-->
<div class="bottom"></div>
17.1 标签的使用
<!--引入音频的标签-->
<audio src="img/1.mp3" controls="controls">
该网页不支持媒体标签
</audio>
<audio>
<source src="img/1.mp3"></source>
<source src="img/1.ogg"></source>
该网页不支持媒体标签
</audio>
<!--引入视频的标签-->
<video src="img/movie.mp4" controls="controls"
width="300px" height="300px"></video>
<video>
<source src="img/movie.mp4"></source>
<source src="img/movie.ogg"></source>
<source src="img/movie.webm"></source>
改网页不支持媒体标签
</video>
<hr />
<!--多媒体标签 -->
<embed src="img/1.mp3"></embed>
<embed src="img/movie.mp4" width="500px"
height="500px">
</embed>
<figure>
<img src="img/1.jpg" />
<figcaption>IT程序员</figcaption>
</figure>
<!--展示文章的细节
mark：着重突出的内容-->
<details>
<summary>请选择</summary>
<p>中国1</p>
<p><mark>中国2</mark></p>
<p>中国3</p>
<p>中国4</p>
</details>
<!--刻度标签
max:规定的最大值
min:规定最小值
value：当前的值
low：自己定义的最小值
high：自己定义的最大值
-->
<meter max="100" min="0" value="10" low="20"
high="80"></meter>
<!--进度条-->
<progress max="100" value="40"></progress>
<input type="text" list="city" />
<datalist id="city">
<option value="IBM">IBM</option>
<option value="IBM1">IBM1</option>
<option value="IBM2">IBM2</option>
<option value="IBM3">IBM3</option>
</datalist>
<!--画布标签-->
<canvas id="mycat"></canvas>
<script>
var ca=document.getElementById("mycat");
var te= ca.getContext("2d");
//背景颜色
te.fillStyle="#FF0000";
//绘制图形的大小
te.fillRect(0,0,80,100);
</script>
<!-- 搜索引擎优化
<meta name="author" ccontent="毛泽东"/>
<meta name="description" content="中华人民共和国领袖"/>
<meta name="keywords" content="共产党，主席"/>
<!--自动刷新网页
<meta http-equiv="refresh" content="5;http://www.baidu.com">-->
<!-- 关闭缓存
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="expires" content="0">
<title>我的</title>-->
</head>
<body>
<!-- 标题标签 h1-h2 默认自动加粗 align调整标签位置 -->
<!-- hr 分割线 width align位置(默认center居中) color size(垂直大小) -->
<hr width="300px" align="left" color="darkkhaki" size=5 >
<!--<p>段落 <br>换行 空格 <pre>预文本 -->
