一、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>

随机推荐

  1. mysql(5.7)配置文件示例

    # For advice on how to change settings please see# http://dev.mysql.com/doc/refman/5.6/en/server-con ...

  2. VirtualBox通过Host-Only网络连接方式实现宿主机与虚拟机通信

    适用情况 (1)没有联网, 不插网线 (2)宿主机直接连接宽带(无路由器) 情景: 宿主机 Windows 7 虚拟机 Windows XP 虚拟机安装了SQLServer2005,宿主机想连接使用虚 ...

  3. Tensorflow学习资源

    https://tensorflow.google.cn/ 中文官网 https://www.w3cschool.cn/tensorflow_python/tensorflow_python-gnwm ...

  4. IDEA自动生成序列化ID

    1.安装 serialVersionUID 插件: 2.设置你的IDEA为检查序列化ID 3.重启IDEA(有的版本可以不重启) 4.在需要自动生成序列化ID的类中使用快捷键:Alt+Insert 转 ...

  5. 关于FastJSON

    https://github.com/alibaba/fastjson/wiki/Quick-Start-CN FastJSON常见问题 FastJson和get方法的问题 使用SimplePrope ...

  6. [pig] pig 基础使用

    1.pig运行模式 本地模式: pig -x local 直接访问本地磁盘 集群模式: pig  或者 pig -x mapreduce 2.pig latin 交互 帮助信息 help 上传本地文件 ...

  7. 21备忘录模式Memento

    一.什么是备忘录模式 Memento模式也叫备忘录模式,是行为模式之 一,它的作用是保存对象的内部状态,并在需要 的时候(undo/rollback)恢复对象以前的状态. 二.备忘录模式的应用场景 如 ...

  8. Qt编写自定义控件11-设备防区按钮控件

    前言 在很多项目应用中,需要根据数据动态生成对象显示在地图上,比如地图标注,同时还需要可拖动对象到指定位置显示,能有多种状态指示,安防领域一般用来表示防区或者设备,可以直接显示防区号,有多种状态颜色指 ...

  9. jquery实现同时展示多个tab标签+左右箭头实现来回滚动

    内容: jquery实现同时展示多张图片+定时向左单张滚动+前后箭头插件 jquery实现同时展示多个tab标签+左右箭头实现来回滚动 小颖最近的项目要实现类似如下效果: 蓝色框圈起来的分别是向上翻. ...

  10. ASP.NET MVC+BUI实现表格的操作

    在Web中基于表格的操作,比如添加行.单元格内容编辑等等功能,是完全基于js实现的.但如果程序员完全使用js或者jquery去编写表格控件,则会导致样式不统一,代码量较大等问题,尤其对于不太熟悉js的 ...