一、Head中常用标签

<head>元素出现在文档的开头部分，会书写一些和浏览器中的配置信息。

<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。

1. 标题标签 title

<title>元素定义HTML文档的标题。<title>与</title>之间的内容将显示在浏器窗口的标题栏。

2. 定义文档约束

<!DOCTYPE html>

Html5中的文档约束

3. 供有关页面的元信息 meta

(1) 设置编码格式

告诉浏览器按照UTF-8编码解析该网页

(2) name：加入网页描述，包括作者，描述，关键字等（搜索引擎优化）

(3) refresh

自动刷新网页（5秒）

(4) 禁止网页缓存（了解）

二、 body中常用标签

<body>元素表明是HTML文档的主体部分。在<body>与</body>之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。

1. 标题标签 h1到h6

h1-h6 自动的加粗加黑会自动的换行 align:调整标签的位置

<h1 align="right">【新时代·幸福美丽新边疆】西藏：代代接力守护绿色家园</h1>

2. 分割线标签 hr

width：宽度 500px:像素 color:颜色 align:位置（默认center） size:垂直方向的大小

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> 标签定义列表项

<li>javaSE</li>

<li>javaEE</li>

<li>javaME</li>

</ol>

(2) 无序列表 ul

<li>javaSE</li>

<li>javaEE</li>

<li>javaME</li>

</ul>

(3) 自定义列表 dl

<dt> 标签定义一个定义列表中的一个项目，<dd> 标签定义一个定义列表中对项目的描述。

<dl>

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

10. 图片标签 img（不会自动换行）

相对路径

绝对路径

网络路径

src:引入图片的位置{相对路径、绝对路径、网络路径 }

title：图片的标题

width：宽

height：高

宽和高指定其中一个，图片等比例缩放

border:图片的边框

alt：图片无法正常显示的时候显示的属性

align:图片的位置，必须有参照物

图片居左、中、右要有参照物（用p标签括起来）

<p>

6666

</a>

8888

</p>

11. 表格标签

table表格的自适应能力 (align="center")整个的表格整体居中

cellpadding：内容和单元格的距离 cellspacing：单元格和单元格的距离

tr：行 : height

td/th：列 width

td:普通的列

th:标题列:自动的居中，加黑效果

colspan:列合并

rowspan：行合并

bgcolor：背景颜色

</tr>

</tr>

</tr>

</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>

登录框例子：

<form>

账号： <input type="text" name="zh" value="123" /> <br />

密码：<input type="password" name="pwd" value="123" /><br />

男：<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 />

</select> <br />

</form>

13. 框架标签

(1) iframe

<ul>

</ul>

框架学习 width：宽度 height：高度 src:默认路径

(2) frameset（H5淘汰）

相当于引入网页

</frameset>

</frameset>

14. 区域标记 div

div本身是没有任何的含义，作用就是把网页进行模块化的划分

<style>

.login{

width: 350px;

height: 400px;

/*相对定位*/

position: relative;

left: 950px;

top: 10px;

}

</style>

<body>

</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>

</div>

</body>

16. 音/视频标签

(1) 音频标签 audio

该网页不支持媒体标签

</audio>

source应用更广泛：

<audio>

</audio>

(2) 视频标签 video

<video

该网页不支持媒体标签

</video>

(3) 多媒体标签 embed

三、Html5中的其他标签

1. 对元素组合 figure

<figcaption>IT程序员</figcaption>

</figure>

2. 定义元素细节 details

mark标签做强调作用

</details>

3. 刻度标签 meter

max:规定的最大值

min:规定最小值

value：当前的值

low：自己定义的最小值

high：自己定义的最大值

4. 进度条 progress

<br />

5. datalist

</datalist>

6. 画布标签 canvas

var ca=document.getElementById("mycat");

var te= ca.getContext("2d");

//背景颜色

te.fillStyle="#FF0000";

//绘制图形的大小

te.fillRect(0,0,80,100);

</script>

随机推荐

d3绘制饼状图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Python实现正则表达式匹配任意的邮箱
首先来个简单的例子,利用Python实现匹配163邮箱的代码: #-*- coding:utf-8 -*- __author__ = '杨鑫' import re text = input(" ...
[转]JS判断字符串是否为json数据
原文地址:https://blog.csdn.net/qq_26400953/article/details/77411520 这周碰到了很多问题,尽量把遇到的问题都记录下来. JS判断字符串是否为j ...
php -- new self() 和 new static
看一段摘自网上的代码 class A { public static function get_self() { return new self(); } public static function ...
docker安装和使用
1.安装的docker版本 docker -v Docker version 17.03.2-ce 2.查看本地的镜像 docker images 3.拉取镜像 docker pull centos: ...
蜕变成蝶~Linux设备驱动之CPU与内存和I/O
那是世上最远的距离思念让我无法去呼吸你的一动和一举占据我心里陪我每个孤独无尽的夜里用我心中盛放的画笔描绘你微笑时的绚丽爱让人痛彻心底我却不怀疑你的存在是我生命的奇迹感受你的每一次的 ...
python之刷博客访问量
通过写刷访问量学习正则匹配说明信息说明:仅仅是为了熟悉正则表达式以及网页结构,并不赞成刷访问量操作. 1.刷访问量第一版 1.1 确定网页url结构,构造匹配模式串首先是要确定刷的网页.第一版实 ...
postgresql免密码登录
https://www.postgresql.org/docs/8.3/static/libpq-pgpass.html vi ~/.pgpass 输入以下内容 hostname:port:datab ...
phpStudy apache 启动不了
做 phpstudy 环境配置的时候,apache 一直启动不了,启动后又停止,80 端口也没有被占用,也下载了 vc9 运行库,还是不行,后来找了半天,中文路径的问题
七牛 OCR 接口调试 & 七牛鉴权 Token 应用
接口规约 PHP 实现核心代码执行结果源代码 Java 实现核心代码执行结果源代码 [现学现卖]图片内容审核接口 Python 实现核心代码执行结果源代码 Go 实现核心代码执行 ...

2.1 Html

一、Head中常用标签

1. 标题标签 title

2. 定义文档约束

3. 供有关页面的元信息 meta

二、 body中常用标签

1. 标题标签 h1到h6

2. 分割线标签 hr

3. 段落标签 p

4. 预文本标签 pre

5. 几个文本小标签（不会自动换行）

6. 字体标签 font

7. 列表标签

8. 跑马灯标签

9. 超链接标签 a

11. 表格标签

12. 表单标签 form

13. 框架标签

14. 区域标记 div

15. H5中表单增强标签

16. 音/视频标签

三、Html5中的其他标签

1. 对元素组合 figure

2. 定义元素细节 details

3. 刻度标签 meter

4. 进度条 progress

5. datalist

6. 画布标签 canvas

随机推荐

热门专题