2.1 Html
一、Head中常用标签
<head>元素出现在文档的开头部分，会书写一些和浏览器中的配置信息。
<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。
1. 标题标签 title
<title>元素定义HTML文档的标题。<title>与</title>之间的内容将显示在浏器窗口的标题栏。
2. 定义文档约束
<!DOCTYPE html>
Html5中的文档约束
3. 供有关页面的元信息 meta
(1) 设置编码格式
<meta charset='UTF-8'/>
告诉浏览器按照UTF-8编码解析该网页
(2) name：加入网页描述，包括作者，描述，关键字等（搜索引擎优化）
<meta name="author" content="朱自清，张三" /> <meta name="description" content="盼望着盼望着东风来了" /> <meta name="keywords" content="东风，盼望" />
(3) refresh
自动刷新网页（5秒）
<meta http-equiv="refresh" content="5; http://www.bjsxt.com">
(4) 禁止网页缓存（了解）
<meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv="expires" content="0" />
二、 body中常用标签
<body>元素表明是HTML文档的主体部分。在<body>与</body>之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。
1. 标题标签 h1到h6
h1-h6 自动的加粗加黑 会自动的换行 align:调整标签的位置
<h1 align="right">【新时代·幸福美丽新边疆】西藏：代代接力守护绿色家园</h1>
2. 分割线标签 hr
width：宽度 500px:像素 color:颜色 align:位置（默认center） size:垂直方向的大小
<hr width="500px" color="red" align="left" size="20px"/>
3. 段落标签 p
br:换行 空格
<p> 新华网阿里5月11日电（张宸 雪珍）55岁的白玛加布看着在<br /> 玛旁雍错边飞舞的海鸥和欢呼的游客，脸上露出了欣慰的笑容。</p>
4. 预文本标签 pre
按照我们指定的格式输出 （灵活性比较的大）
pre> 新华网阿里5月11日电（张宸 雪珍） 55岁的白玛加布看着在 玛旁雍错边飞舞的海鸥 和欢呼的游客，脸上露出了欣慰的笑容 </pre>
5. 几个文本小标签（不会自动换行）
(1) 下划线标签u
<u>北京尚学堂</u>
(2) 斜体标签 i
<i>北京尚学堂</i>
(3) 加粗加黑标签 b
<b>北京尚学堂</b>
(4) 删除线标签 del
<del>北京尚学堂</del>
(5) 上标标签 sup
2<sup>3</sup>
(6) 下标标签 sub
log<sub>7</sub>
(7) 字体变小标签small
<small>北京尚学堂</small>
(8) 字体放大 big <big>北京尚学堂</big>
6. 字体标签 font
face：指定字体的风格
<font color="red" size="25px" face="宋体">北京尚学堂</font>
7. 列表标签
(1) 有序列表 ol
<li> 标签定义列表项
<ol type="I">
<li>javaSE</li>
<li>javaEE</li>
<li>javaME</li>
</ol>
(2) 无序列表 ul
<ul type="square">
<li>javaSE</li>
<li>javaEE</li>
<li>javaME</li>
</ul>
(3) 自定义列表 dl
<dt> 标签定义一个定义列表中的一个项目，<dd> 标签定义一个定义列表中对项目的描述。
<dl>
<dt>java</dt>
<dd>javaSE</dd>
<dd>javaEE</dd>
<dd>javaME</dd>
</dl>
8. 跑马灯标签
direction设置方向，scrollamount每次滚动的像素
<marquee direction="right" scrollamount="40px">北京尚学堂</marquee>
9. 超链接标签 a
作用：
(1) 实现不同页面之间的跳转
href:指定跳转到目标资源的位置
target：打开网页的方式
(2) 实现锚点功能
跳转到本地的资源位置
targe定义打开页面的目标
<a href="02body中常用小标签.html" target="_blank">02小标签测试</a>
跳转到网络的位置
<a href="http://www.bjsxt.com">北京尚学堂</a>
跳到锚点
定义锚点：a href="" name="top"></a>
<a href="#top" name="bottom">返回顶部</a>
10. 图片标签 img（不会自动换行）
相对路径
<img src="img/2.jpg" />
绝对路径
<img src="C:\\Users\\my\\Documents\\HBuilderProjects\\01HTML\\img\\1.jpg" />
网络路径
<img src="https://www.baidu.com/img/bd_logo1.png" />
src:引入图片的位置{相对路径、绝对路径、网络路径 }
title：图片的标题
width：宽
height：高
宽和高指定其中一个，图片等比例缩放
border:图片的边框
alt：图片无法正常显示的时候显示的属性
align:图片的位置 ，必须有参照物
<img src="img/1.jpg" title="图片" width="200px" height="200px" border="2px" alt="图片显示错误" align="right"/>
图片居左、中、右要有参照物（用p标签括起来）
<p>
6666
<a href="#">
<img src="img/1.jpg" title="图片" width="200px" height="200px" border="2px" alt="图片显示错误" align="right"/>
</a>
8888
</p>
11. 表格标签
table表格的自适应能力 (align="center")整个的表格整体居中
cellpadding：内容和单元格的距离 cellspacing：单元格和单元格的距离
tr：行 : height
td/th：列 width
td:普通的列
th:标题列:自动的居中，加黑效果
colspan:列合并
rowspan：行合并
bgcolor：背景颜色
<table border="1px" align="center" cellpadding="20px" cellspacing="30px">
<tr height="100px" align="center">
<td width="100px" align="center">11</td>
<td width="100px">2</td>
<td width="100px">3</td>
</tr>
<tr height="100px">
<th>4</th>
<td>5</td>
<td>6</td>
</tr>
<tr height="100px">
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr height="100px">
<th>11</th>
<th>12</th>
<th>13</th>
</tr>
</table>
12. 表单标签 form
action：表单提交的位置
method（get/post）：表单提交的方式
get:
(1) 参数会依附于url地址之后，
(2) 利用get方式提交数据，数据的长度有限制
(3) 利用get方式提交数据，是不安全的
https://www.baidu.com/s？键1=值1&键2=值2
post:
(1) 请求不会依附于地址，
(2) 利用post处理参数不受限制
(3) post提交数据比较安全
<form action="01body中的常用标签.html" method="get">
<!--普通文本框-->
<input type="text" name="wd"/>
<input type="submit" value="百度一下" />
</form>
登录框例子：
<form>
<!--普通文本框 value：文本框中值-->
账号： <input type="text" name="zh" value="123" /> <br />
密码：<input type="password" name="pwd" value="123" /><br />
<!--单选框 实现单选的效果必须指定同一个name属性 checked：默认的选择-->
男：<input type="radio" name="sex" value="1" checked="checked"/>
女：<input type="radio" name="sex" value="0"/> <br />
<!--多选框-->
抽烟:<input type="checkbox" value="1" checked="checked">
喝酒:<input type="checkbox" />
烫头:<input type="checkbox" /><br />
<!--多行文本框-- rows，cols指定行和列>
个人介绍： <textarea rows="15" cols="20" value="">你好</textarea><br />
<!--文件选择框-->
<input type="file" name="file" /><br />
<!--隐藏框-->
<input type="hidden" name="sno" value="20180607" /><br />
<!--下拉框 selected：默认的选择-->
<select name="ch">
<option value="1">中国</option>
<option value="2" selected="selected">美国</option>
<option value="3">日本</option>
<option value="4">新加坡</option>
</select> <br />
<!--提交按钮-->
<input type="submit" value="提交" /> <br />
<!--清除按钮,清空写好的内容-->
<input type="reset" value="清除" />
<!--普通的按钮 没有提交数据的功能-->
<input type="button" value="提交" />
</form>
13. 框架标签
(1) iframe
<ul>
<li><a href="http://www.baidu.com" target="ifm">百度</a></li>
<li><a href="http://www.taobao.com" target="ifm">淘宝</a></li>
<li><a href="http://www.jd.com" target="ifm">京东</a></li>
</ul>
框架学习 width：宽度 height：高度 src:默认路径
<iframe width="1000px" height="550px" name="ifm" src="http://www.baidu.com"></iframe>
(2) frameset（H5淘汰）
相当于引入网页
<frameset rows="150px,*,100px">
<!--顶部部分-->
<frame src="admin/top.html" noresize="noresize"/>
<!--中间的部分-->
<frameset cols="10%,*">
<!--左侧部分-->
<frame src="admin/left.html"/>
<!--右侧部分-->
<frame src="admin/right.html" name="rig"/>
</frameset>
<!--底部部分-->
<frame src="admin/bottom.html"/>
</frameset>
14. 区域标记 div
div本身是没有任何的含义，作用就是把网页进行模块化的划分
<style>
.login{
width: 350px;
height: 400px;
/*相对定位*/
position: relative;
left: 950px;
top: 10px;
}
</style>
<body>
<div class="login"></div>
</body>
15. H5中表单增强标签
placeholder：提示信息
autofocus:自动的获得焦点
max：最大值
min：最小值
minlength:最小长度
maxlength:最大长度
邮箱: <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" />
<body>
<!--头部模块-->
<header></header>
<!--中间提示-->
<nav></nav>
<!--中间的展现-->
<div class="center">
<div class="login"></div>
</div>
<!--底部模块-->
<footer></footer>
</body>
16. 音/视频标签
(1) 音频标签 audio
<audio src="img/1.mp3" controls="controls">
该网页不支持媒体标签
</audio>
source应用更广泛：
<audio>
<source src="img/1.mp3"></source>
<source src="img/1.ogg"></source>
</audio>
(2) 视频标签 video
<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>
(3) 多媒体标签 embed
<embed src="img/1.mp3"></embed>
<embed src="img/movie.mp4" width="500px" height="500px"></embed>
三、Html5中的其他标签
1. 对元素组合 figure
<figure>
<img src="img/1.jpg" />
<figcaption>IT程序员</figcaption>
</figure>
2. 定义元素细节 details
mark标签做强调作用
<details>
<summary>请选择</summary>
<p>中国1</p>
<p><mark>中国2</mark></p>
<p>中国3</p>
<p>中国4</p>
</details>
3. 刻度标签 meter
max:规定的最大值
min:规定最小值
value：当前的值
low：自己定义的最小值
high：自己定义的最大值
<meter max="100" min="0" value="10" low="20" high="80"></meter>
4. 进度条 progress
<progress max="100" value="40"></progress>
<br />
5. datalist
<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>
6. 画布标签 canvas
<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>
浙公网安备 33010602011771号