一、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. 【iCore4 双核心板_ARM】例程三十一：HTTP_IAP_FPGA实验——更新升级FPGA

    实验现象: 核心代码: int main(void) { GPIO_InitTypeDef GPIO_InitStruct; __HAL_RCC_GPIOI_CLK_ENABLE(); __HAL_R ...

  2. HTML Table to Json

    HTML 表格输出JSON <table class="table table-striped table-bordered table-hover dataTable no-foot ...

  3. [爬虫]采用Go语言爬取天猫商品页面

    最近工作中有一个需求,需要爬取天猫商品的信息,整个需求的过程如下: 修改后端广告交易平台的代码,从阿里上传的素材中解析url,该url格式如下: https://handycam.alicdn.com ...

  4. Vue 创建组件的方式

    Vue 创建组件的方式 2018年08月07日 11:10:56 虔诚带着决然 阅读数:1015   版权声明:本文为博主原创文章,未经博主允许不得用做其他商业活动. https://blog.csd ...

  5. CentOS7搭建以太坊私有链

    1. 环境准备:Win10 64位安装 VM VirtualBox,操作系统版本: CentOS-7-x86_64-Everything-1611.iso(7.71G). 切换root账号,方便安装程 ...

  6. 一文弄懂神经网络中的反向传播法(Backpropagation algorithm)

    最近在看深度学习的东西,一开始看的吴恩达的UFLDL教程,有中文版就直接看了,后来发现有些地方总是不是很明确,又去看英文版,然后又找了些资料看,才发现,中文版的译者在翻译的时候会对省略的公式推导过程进 ...

  7. springboot-aop面向切面编程

    需求: 项目中需要记录用户操作信息,例如用户登陆系统后做了那些操作,需要有具体的日志记录. 解决办法: 1.编写操作记录日志业务类,在使用的方法中调用(一般记录方式). 2.使用面向切面方式记录日志, ...

  8. 抖音圈圈乐 系统搭建H5微信小游戏圈圈乐系统介绍

    网红线下游戏抖音圈圈乐改造而来 一.搭建此系统需要准备如下资料: 1. 认证微信服务号 2. 微信支付商户号 3. 备案域名及云服务器 二.系统功能简介: 1. 游戏闯关 2. 每个商品闯关难度后台自 ...

  9. ux.form.field.GridDate 支持快速选择日期的日期控件

    效果如图,亲测6.2.1版本可用 /** *支持快速选择日期的日期控件 */ Ext.define('ux.form.field.GridDate', { extend: 'Ext.form.fiel ...

  10. 【CF471E】MUH and Lots and Lots of Segments 扫描线+并查集+线段树+set

    [CF471E]MUH and Lots and Lots of Segments 题意:给你平面上n条水平或竖直的,端点在整点处的线段.你需要去掉一些线段的一些部分,使得剩下的图形:1.连通,2.无 ...