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

随机推荐

Zabbix监控disk performance
概述 zabbix获取/sys里面的磁盘信息并分析来监控disk performance sysfs是Linux内核中设计较新的一种虚拟的基于内存的文件系统,它的作用与 proc 有些类似(默认挂载在 ...
2013/11/22工作随笔-缓存是放在Model层还是放在Controller层
web网站的典型代码框架就是MVC架构,Model层负责数据获取,Controller层负责逻辑控制,View层则负责展示. 一般数据获取是去mysql中获取数据但是这里有个问题,我们不会每次请求都 ...
使用PHPExcel导入导出excel格式文件
使用PHPExcel导入导出excel格式文件作者:zccst 因为导出使用较多,以下是导出实现过程. 第一步,将PHPExcel的源码拷贝到项目的lib下文件包含:PHPExcel.ph ...
织梦dedecms|文章页通用标签
当前位置: {dede:field name='position'/}上一页: {dede:prenext get='pre'/}下一页: {dede:prenext get='next'/}收 ...
jQuery遍历节点方法汇总
1.children()方法:$('div').children()---遍历查找div元素的所有子元素节点 <p>Hello</p> <div> <span ...
maven的安装配置以及在IDEA中配置
一.下载maven: 1.maven官网:http://maven.apache.org/download.cgi 二.安装配置 1.下载后解压到本地目录,如图 2.配置环境变量:我的电脑右键-&gt ...
discuz7&period;2 faq&period;php 注入漏洞分析
写在前面的话:分析完整个漏洞,不得不感叹,发现漏洞的人真的好细心呀. 在分析整个漏洞之前,没看poc,然后就直接看faq.php 准备试试自己发现漏洞的能力,但是分析完一整个php,也是卡在 in() ...
2-sat-总结+例题
https://www.cnblogs.com/31415926535x/p/10644419.html 从寒假就开始准备学2sat,,然后当时了解了一下模板就溜了,,,一直到上个星期,,三月底才好好 ...
[Tensorflow] RNN - 01&period; Spam Prediction with BasicRNNCell
Ref: http://blog.csdn.net/mebiuw/article/details/60780813 Ref: https://medium.com/@erikhallstrm/hell ...
docker容器下tomcat 不向catalina&period;out输出日志解决以及支持中文字符集
docker容器下tomcat 不向catalina.out输出日志解决去掉 & 符号,直接使用 ENTRYPOINT ["/data/tomcat/bin/startup.sh ...

秒客网

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

随机推荐

相关文章