html5常用基本标签

、Html的基本结构：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

网页的文本、图片等信息；

</body>

</html>

二、Head部分：用于表示网页的元数据即描述网页的基本信息

其常用标签及属性有：

1、title标签：浏览器标签页显示的标题

2、meta标签：其常用属性

①charset:设置文档的字符集编码格式。HTML5中设置字符集编码：<meta charset="UTF-8">

常见的字符集编码格式：

a.GB-2312:国标码，简体中文

b.GBK：扩展的国标码

c.UTF-8：万国码 Unicode 常用

②http-equiv属性:将我们的信息写给浏览器看，让浏览器按照这里面的要求执行，可选属性值：Content-Type(文档类型) refresh(网页定时刷新) set-cookie(设置浏览器cookie缓存) 需要配合content属性使用。（http-equiv属性只是表明需要设置哪一部分，具体的设置内容，放到content属性中）

③name属性：使用方法同“http-equiv”。将我们的信息写给搜索引擎看

常用且需要掌握的属性值：author（作者） keywords（网页关键字） description（网页描述）这两个属性设置，网页必不可少。

3、link标签：链接网页图标（title前的小logo），其常用属性有：

①rel属性：声明链接文件的类型，此处选icon

②type属性：可以省略

③href属性：表示图片的路径地址

三、body部分：网页的文本、图片等信息

标签的分类：

块级标签：显示为块，前后隔一行（自动换行）

行级标签：按行从左往右逐一显示。

1、常见的块级标签：

①<h1></h1>......<h6><h6>：标题标签，自动加粗，h1最大，h6最小。

②<hr/>：水平线标签，添加一条水平线。

③<p></p>:段落标签，

④<br/>:换行标签，

⑤<blockquote/></blockquote>:引用标签，cite属性，表明引用的来源，一般引用网址

浏览器默认首行缩进。

⑥<pre></pre>:预格式标签，用于重载代码。浏览器默认显示样式：1、显示为等宽字体。 2、代码中的换行、

空格等元素能在浏览器中显示。

【补充】html 文件中空格的表示：

2、基于布局的块级标签

列表：无序列表、有序列表、定义列表

①有序列表：<ol></ol> 列表项：<li></li>

②无序列表：<ul></ul> 列表项：<li></li>

③定义列表（实现图文混排）:<dl></dl>

列表标题：<dt>一般只有一项</dt>

列表描述项：<dd>可以有很多项</dd>

3、组合标签：<figure></figure>用于显示图片及图片标题

他有两个子标签：<img />图片

<figcaption></figcaption>图片的标题

例如：<figure>

<figcaption>探险家伊泽瑞尔</figcaption>

</figure>

4、分区标签：<div></div>

5、常见的行级标签

<1>span（文本）:无实际意义，用于包裹某部分文字，修改特定样式，例如：

这是<span style="color: red;font-size: 36px;">span</span>中的文字

img（图片）：其常用属性：①src:表示引用图片的地址。

路径地址的写法：相对路径：以当前文件为最准，去寻找图片地址

a、与文件处于同一层的图片，直接写图片名

b、图片在当前文件下一层：文件名/图片名

c、图片在当前文件上一层：../图片名

绝对路径:file:///盘符：/文件夹/图片名，但是严禁使用

图片网址：网络上的图片链接，但是一般不用

②height和width：图片的高度和宽度。可以用CSS样式代替

③title：图片标。当鼠标指上之后显示的文字

④alt:当图片无法显示的时候，显示的文字

<2>em（倾斜强调）

<3>strong（加粗强调）

<4>b（加粗）

<5>i（倾斜）

Strong、em、b、i的区别

1、Strong、em都表示强调，Strong为粗体，em为斜体，而Strong的强调程度逗比em高

2、Strong和b都能加粗，em和i都能倾斜，，但是Strong和em多了一层强调的语义。H5要求标签尽可能实现语义化。

<6>q（短引用）

<7>small/big（缩小/放大字体）：small和big分别是缩小和扩大字体，都可以多层嵌套直至上限或下限

<8>a（超链接）

1、href:超链接的路径，可以是网络链接，也可以是本地文件。

2、target:跳转页面打开的位置。_self自身页面，_blank新页面。

3、title:鼠标指在超链接上显示的名称。

4、Rel（被链接是当前的前/后一篇）:指定被链接文档与当前文档的关系,搜索引擎会利用该属性获取更多的有关链接的信息：

rel="prev"被链接文档是当前文档的前一篇文档，

rel="next"被链接文档是当前文档的后一篇文档,

rel="icon"被链接文档是当前文档的图标

rel="stylesheet"被链接文档是当前文档的样式表

5、Rev（当前是被链接的前/后一篇）

锚链接：

①本页面锚链接:a、设置锚点：<a name="top"></a>

b、跳转锚点：#name名

①页面间锚链接:a、在即将跳转页面的指定位置设置锚点

b、跳转锚点：页面地址.html#name名

<a href="02_常见的块级标签.html#Hbuilder">页面间锚链接</a><br/>

功能性链接： mailto用于给指定邮箱发送邮件

file：///e:/aaa.png打开本地文件

tencent://message/?uin=1315618220 给指定QQ发送息

<9>s标签，有误文本：删除线

<s>这是S标签中的文字</s><br />

<10>cite标签：浏览器显示为倾斜，常用于书、画作、作品的引用

<cite>这是cite中的文本</cite><br />

<11>code:计算机代码，不保留代码格式

<pre>

</pre>

<12>bdo:表示文本方向，属性：dir="ltr"表示从左往右，dir="rtl"表示从右往左

kbd:表示需要用户用键盘输入的内容，浏览器显示为等宽字体

请输入“<kbd>Esc</kbd>”推迟系统<br />

<13>sup:上标文本，sub:下标文本

x<sub>6</sub><br />

<14>u:下划线

<u>这是下划线</u><br />

mark:高亮或标记文本，浏览器显示为黄色背景

6、表格：表格的行：tr，每行中的列：td，表格的表头：th

表格的常用属性：

表格行列属性：[tr和td的属性]：

1、width/heigh：单元格的宽高

2、bgcolor:单元格的背景颜色

3、align:left center right 单元格中的文字水平对齐方式

4、valign:top center bottom 单元格中的文字垂直对其方式

5、nowrap:单元格中文字不换行

【注意】当表格属性与行列属性冲突时，行列属性优先级高

7、表单（form）

【两个重要属性】：action-表单提交的服务器地址 method-表单提交数据的方法（get/post）

get/post区别:

1>get使用URL传参：http://服务器地址?name1=value1&name2=value2

（?表示传递参数，?后面采用name=value的形式传递，多个参数之间用&连接） ① URL传参不安全，所有信息可在地址栏看到，并且别人可以很容易url注入，来攻击自己的数据库。

② URL传参数据量有限，只能传递少量数据。

2>post:使用http请求传递数据。URL地址看不到数据信息，安全且传递信息量没有限制

综上所述：大部分使用post传参，但是get传参比Post快

【input标签及属性】

①type：input输入框的类型，可选值有：

②name：input输入框的别名，必填，因为传参的时候采用name=value的形式传递。

③value：input输入框的默认值

④placeholder:提示内容，当输入框有value时，提示内容消失。

【input特殊属性值】

① checked="checked"默认选中

② disabled="disabled"设置控制不能使用，按钮上不能点击，输入框上不能修改，而且如果

输入框时disabled，则输入框信息不传递到后台

③hidden=“hidden”隐藏。等同于<input type="hidden" name="username"value="1234" />

等同于配合disabled或根据其他需要，使用隐藏域传递信息.

【input-type属性详解】

①text：文本输入框

②password：密码输入框，内容不对外显示

③radio：单选按钮

checkbox:复选按钮

a、单选按钮，name和value属性需同时存在，提交时，提交的是value中的属性值

例如：<input type="radio" name="sex" value="男"/>提交显示为"sex=男"

b、radio凭借name属性区分是否为同一组，name相同为同组，且只能选择一个

c、checked="checked"默认选中，（radio只可以选一个，checkbox可以选多个）

④submit：提交按钮，提交表单数据

⑤reset：重置按钮，重置为默认状态

⑥file：文件上传按钮

⑦image：图片提交按钮，功能同submit，可以提交数据

⑧button：普通按钮，没什么软用

⑨其他常用属性值：见下图

【select标签】下拉选择标签

写法：

</select>

常用属性

①name属性：写在select里，所有选项只有一个name

②multiple属性：multiple="multiple"设置select为多选，一般不用

③option常用属性：value=""属性，当option没有value属性时，往后台传递的是<option></option>中间的文字，

当有value属性时，传递的是value的属性值。

title=""属性,鼠标之上后现实的文字

select="select"默认属性值

④optgroup属性：用于option属性分组，用lable属性表示分组名。

</optgroup>

【textarea】:文本域，其常用属性：

①设置宽度高度 style="width: 150px;height: 200px;

②readonly="readonly"：只读模式，不允许修改编辑

③style="resize: none;"设置为宽度高度不允许修改

④style="overflow:;"设置文字超出区域时，如何处置，常用属性值有：

hidden 超出区域的文字，隐藏无法显示

scroll 无论文字多少，均显示滚动

auto 自动，根据文字多少自动决定是否会显示为滚动条

【fieldset 、legend】表单的边框与标题

<fieldset> //边框

<legend> //标题

</legend>

</fieldset>

如果想让标题嵌入到边框中，需将标题标签写到边框标签里面

一个表单可以有多组标题加边框组合

【h5智能表单】

1、H5新增input的form属性，用于指定特form表单的id，实现input无需放在form标签之中，即可通过表单进行提交

……

</form>

2、 input元素的新增属性：

Autocomplete：自动完成功能，记录用户之前输入的内容，并在用户下次输入时提示用户输入

》》》属性值：on/off

》》》可以再form表单使用，对整个表单的所有控件进行自动完成的开关也可以在input上使用，

对特定输入框进行修改

》》》绝大部分浏览器默认开启

Autofocus：自动获得焦点，autofocus="autofocus"只能获得一个焦点

Form：所属表单，通过id确认属于哪个表单

Required：必填,required="required",设置必填，否则停止提交

Pattern：使用正则表达式验证input的模式

Placeholder：提示，当有value时取消提示。

.1 HTML简介

1.1.1 HTML：Hyper Text Markup Language（超文本标记语言）

在学习使用HTML之前，大家经常会问，什么是HTML？HTML是用来描述页面的一种语言，它是一种超文本标记语言，也就是说，HTML不是一种编程语言，仅是一种标记语言。 HTML由一套标记标签组成，在制作网页时，HTML使用标记标签来描述网页。

1.1.2 发展史

1.1.3 HTML5的优势

HTML5自正式推出以来，就以一种惊人的速度被迅速推广着，各主流浏览器对于HTML5表现出来的热烈欢迎、积极支持。

1、世界知名浏览器厂商对HTML5的支持

通过对Internet、Explorer、Google、Firefox、Safari、Opera等主要的web浏览器发展策略调查，发现它们都在支持HTML5上采取了措施

- 微软：2010年3月16日，微软与拉斯维加斯市举行的MIX10技术大会上宣布已推出InternetExplorer(IE)9浏览器开发者预览版。

- Google：2010年2月19日，GoogleGears项目经理伊安~费特通过博客宣布，谷歌将放弃对Gears浏览器插件项目支持、重点开发HTML5项目

- 苹果：2010年6月7日，苹果开发者大会的会后发布了Safari5。这款浏览器支持10个以上HTML5的新技术，包括全屏播放、HTML5地理位置、HTML5的形式验证等功能

- Opera：2010年5月5日，Opera软件公司首席技术官Hakon Wium Lie先生在访华之际，接受了中国软件资讯网等少数几家媒体采访，他认为HTML5和CSS3将是全球互联网发展的未来趋势

- Mozilla：2010年7月，Mozilla基金会发布了Firefox4浏览器的第一个测试版，从官方文档看，它对HTML5是完全级别的支持

2、市场的需求

现在的市场已经迫不及待地要求有一个统一的互联网通用标准。HTML5之前的情况是，由于各浏览器之间不统一，仅修改web浏览器之间的由于兼容性而引起的bug就浪费了大量的时间。而HTML5的目标就是将web带入一个成熟的应用平台，在HTML5平台上，视频，音频，图像，动画及同计算器的交互都被标准化。

3、跨平台

HTML5可以做到跨平台开发，用户只用打开浏览器即可访问应用，PC网站、各种移动设备，插件等核心代码就可以不需要重复编写，极大地减少了开发人员的工作量。

1.1.4 W3C标准

发明HTML的初衷是实现信息资料的网络传播和共享，希望HTML文档具有平台无关性，即同一个HTML文件，在不同的浏览器上看到同样的页面内容和效果。但是遗憾的是，随着浏览器市场的激烈竞争，各大浏览器厂商为了吸引用户，都在早期HTML版本的基础上扩展各类标签，各浏览器之间互不兼容，导致HTML编码规则混乱，违背了HTML发明的初衷，因此需要一个组织来指定和维护统一的国际化web开发标准，确保多个浏览器都兼容，HTML内容结构都是语义化的。

W3C标准不是某一个标准，而是一系列的标准集合，一个网页主要有三部分组成，即结构、表现、行为。

对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3CDOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。

1.1.5 网页编辑工具

1、开发工具：

记事本、Dreamweaver、UltraEdit、Sublime、WebStorm等
你可以从以上软件的官网中下载对应的软件，按步骤安装即可。
接下来我们将为大家演示如何使用 WebStorm来创建 HTML 文件。

2、使用WebStorm编辑HTML文档如下：

打开WebStorm编辑器后，选择File->New->HTML File命令，打开“HTML File”对话框;
在“Name”文本框中输入HTML的文件名为“my_firstPage”在“Kind”下拉列表框中选择HTML5 file选项后OK按钮即可创建一个HTML5页面的模板;
在body元素和title元素中添加网页内容;
网页内容添加完成后，鼠标移动到编辑器的右上方，会出现几个常见的浏览器图标，单击Chrome浏览器附表即可打开页面;
在Chrome浏览器中可以显示出结果。

2.1 HTML基础

2.1.1 HTML5的基本结构

<html>
    <head>
             <title>我的第一个网页</title>
    </head>
    <body>
             我的第一个网页
    </body>
</html>

标签都是成对出现的。有一个开头标记就应该有一个对应的结束标记记，“<>”开始，以“</>”结束，要求成对出现，标签之间有缩进，提现层次感，方便阅读。

HTML5的基本结构分为两部分。整个HTML包括头部｛head｝和主体｛body｝两部分，头部包括网页标题｛title｝等基本信息，主体包括页面的内容信息，如图片、文字等。

2.1.2 网页的基本信息

1、DOCTYPE 声明在这个HTML5文件最上面有一行关于DOCTYPE文档类型的声明，约束HTML文档结构。检查是否符合相关WEB标准，同时告诉浏览器使用那中规范来解释这个文档中的代码。DOCTYPE声明必须位于HTML文档的第一行。

HTML5:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>

HTML4：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://wwww.w3.org/TR/xhtml1-transitional.dtd">

2、<title>标签 使用<title>标签描述页面的标签，类似一个文档的标题，为一个简介的主题，并能使读者有兴趣。

<title>搜狐-中国最大的门户网站</title>

3、<meta>标签 使用<meta>标签描述网页的摘要信息，包括文档内容类型、字符编码信息，搜索关键字、网站提供的功能和服务的详细描述等。<meta>标签的内容并不显示，其目的是方便浏览器解析或利于搜索引擎搜索，它采用“名称/值”对的方式描述摘要信息。

meta标签可分为两大部分：http-equiv和name变量。

http-equiv相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助浏览器正确地显示网页内容。

name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

1.文档内容类型，字符编码信息书写如下：

HTML5:

<meta charset="UTF-8">

HTML4:

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

属性：charset表示字符集编码，常用的编码有以下几种。

1.gb2312：简体中文，一般用于包含中文和英文的页面；

2.ISO-885901：纯英文，一般用于只包含英文的页面；

3.big5：繁体，用于带有繁体字的页面；

4.UTF-8：国际性通用的编码，同样适用于中文和英文的页面。和gb2312编码相比，国际通用性更好。

2.搜索关键字和内容描述信息书写如下：

<meta name="keywords" content="云图智联">
<meta name="description"content="云图智联是国内的IT教育集团，致力于为中国培养优秀的IT技术人才">

网站示例：

<!--京东-->
 <meta name="description"
          content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>
    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>

<!--淘宝-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="renderer" content="webkit" />
  <title>淘宝网 - 淘！我喜欢</title>
  <meta name="spm-id" content="a21bo" />
  <meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！" />
  <meta name="aplus-xplug" content="NONE">
  <meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" />

2.1.3 HTML5的基本标签

1、标题标签

<h1>…</h1>
<h2>…</h2>
<h3>…</h3>
<h4>…</h4>
<h5>…</h5>
<h6>…</h6>

标题标签表示一段文字和标题或主题，并且支持多层的内容结构。例如，一级标题采用h1，二级标题采用h2，其他级别标题以此类推。HTML共提供了六级标题h1~h6，并赋予了标题一定的外观，所有标题字体加粗，h1字号最大，h6字号最小。

2、段落标签、换行标签和水平线标签

<p>段落标签</p>
<br/><!--换行标签-->
<hr><!--水平线标签-->

3、字体样式标签

<!--加粗-->
<strong></strong>
<b></b>
<!--倾斜-->
<em></em>
<i></i>
<!--字体缩小-->
<small></small>
<!--删除线-->
<s></s>
<!--下划线-->
<u></u>

4、图像标签

（1）常见的图像格式

1.JPG格式

JPG格式图像是在Internet上被广泛支持的图像格式，它是联合图像专家组格式的英文缩写。JPG格式采用的是有损压缩，会造成图像画面的失真，不过压缩之后的体积很小，而且比较清晰，所以比较适合在网页中应用此格式最适合用于排和或连续取色调图像的高级格式，这事因为JPG文件可以包含数百万种颜色。随着JPG格式文件品格式质的提高，文件的大小和下载时间也会随着增加。通常可以通过压缩JPG格式文件在图像品质和文件大小之间达到良好的平衡。

2.GIF格式

GIF格式图像是网页中使用最广泛，最普通的一种图像格式，它是图像交换格式的英文缩写。GIF格式文件支持透明色，使得GIF格式在网页的背景和一些多层特效的显示上用得非常多；还支持动画，这是它最突出的一个特点，因此GIF格式图像在网页中应用非常广泛。

3.BMP格式

BMP格式图像在Windows操作系统中使用得比较多，它是位图的英文缩写。BMP格式图像格式与其他Microsoft Windows程序兼容。它不支持文件压缩，也不是用于Web页。

4.PNG格式

PNG格式是20世纪90年代中期开始开发的图像文件储存格式，它兼有GIF和JPG格式的优势，同时具备GIF格式不具备的特性。

（2）图像标签

<img src="path" alt="text" title="text"  width="x"  height="y" />

src属性表示图片路径，alt属性指定图像的代替文本，表示图像无法显示时（如图片路径错误或网速太慢等）替代先是文本，这样，即使当图像无法显示时，用户还可以看到网页丢失的信息内容。

title属性可以提供额外的提示或帮助信息，当鼠标移至图片上时显示提示信息，方便用户使用。

width和height两个属性分别表示图片的宽度和高度，如果不设置，那么图片默认显示原始大小。

5、超链接标签

（1）超链接包含两部分内容，一是链接地址，即链接的目标，可以是某个网站或文件路径，对应a标签的href属性；二是链接文本或图像，点击该文本或图像，将跳转到href属性指定的链接地址。

<a href="path" target="目标窗口位置">链接文本或图像</a>

href：链接地址的路径;

target：指定链接在哪个窗口打开，常用的取值有_self（自身窗口）、_blank（新建窗口）。超链接即可以是文本超链接，也可以使图片超链接

（2）常用的超链接

1>页面间链接

从一个页面链接到另一个页面

2>锚链接

锚链接也称锚点链接，命名锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页，通过点击命名锚点，自动跳转到我们设置锚点的位置，类似于我们阅读书籍时的目录页码或章回提示。

锚点链接可以跳转到页面的任何位置。一般用于在页面下面的时候，点击回到最上面。锚点链接的名称可以随意取，只起到标记作用。

1.从A页面的甲位置跳转到本页中的乙位置

示例：

    <a href="#a1">a1</a>
    <a href="#a2">a2</a>
    <a href="#a3">a3</a>
    <a href="#a4">a4</a>

    <div id="a1">a1</div>
    <div id="a2">a2</div>
    <div id="a3">a3</div>
    <div id="a4">a4</div>

2.从A页面的甲位置跳转到B页面中的乙位置

示例：

<!--A页面-->
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
<title>锚链接</title>
</head>
<body>
<p>
    [<a href="help.html#register">A位置</a>] 
    [<a href="help.html#login">B位置</a>]
</p>
</body>
</html>

<!--B页面-->
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>锚链接</title>
    <style>
        div{
            width: 100%;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<h4><a name="register">A位置</a></h4>
<div>
    <h2>A位置</h2>
</div>
<h4><a name="login">B位置</a></h4>
<div>
    <h2>B位置</h2>
</div>
</body>
</html>

3>功能性链接

<!--下载图片-->
<a href="img/qq.jpg">点击下载图片</a>

<!--发送邮件-->
<a href="mailto:Webmaster@ytzl.cn">联系我们</a>

<!--引用脚本语言-->
<a href="javascript：alert('哈哈哈哈')"></a>

6、注释和特殊符号

<!--注释符号-->

当页面的HTML结构复杂或内容较多时，需要添加必要的注释方便代码阅读和维护。同时，有时为了调试，需要暂时注释掉一些不必要的HTML代码。特殊符号一般以"&"符号开头，";"结尾。

3.1 练习

3.1.1 制作《悟空》歌词

需求：

1、标题使用标题标签，文字使用p标签标题与正文之间的分隔线使用水平线标签；歌词词结束后使用换行标签换行

2、人名加粗显示，时间斜体显示

3、制作页面版权部分

<html>
    <head>
             <title>我的第一个网页</title>
    </head>
    <body>
             我的第一个网页
    </body>
</html>

3.1.2 制作图书简介页面

使用学过的图像标签、标题标签、水平线标签、斜体标签、加粗标签、段落标签等制作京东读书新闻资讯页面，主标题使用一级标题标签，副标题使用二级标题标签，二级标题与图片之间使用水平线分隔。

<h1>HTML5+CSS3从入门到精通（标准版）</h1>
<h2>作者：未来科技</h2>
<hr/>
<p><img src="images/book.jpg" alt="图书" width="200"/></p>
<p><em>HTML 5 CSS 3 JavaScript从入门到精通（标准版）</em></p>
<p><em>  以基础知识、示例、实战案例相结合的方式详尽讲述了HTML  CSS  JavaScript及目前*的前端技术html5移动开发 html5实战 html5 canvas html5 app html5入门 html5 动画  html5揭秘 html 游戏 html5权威指南 的基本知识都有涉及。</em></p>
<p><strong>全书分两大部分，共12章</strong></p>
<p>介绍了HTML5入门和CSS3实战入门内容：使用HTML标签标识网页内容，使用CSS设计网页基本样式，如使用并美化文本、图像、超链接、列表、表单和表格等</p>
<p>第二部分为CSS3布局部分，主要讲解使用CSS3设计完整网页的方法和技巧，以及CSS3中的各种新技术应用；</p>
<p>© 2015-2025 云图智联</p>

3.1.3 锚链接的应用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        a{
            display: block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            font-size: 18px;
        }
        div{
            width: 400px;
            height: 400px;
            margin-top: 20px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<a href="#a1">a1</a><a href="#a2">a2</a><a href="#a3">a3</a><a href="#a4">a4</a>
<div id="a1">a1</div>
<div id="a2">a2</div>
<div id="a3">a3</div>
<div id="a4">a4</div>
</body>
</html>

免费学习视频欢迎关注云图智联：https://e.yuntuzhilian.com/

单

1 ：表单标签

<form></form>
属性：
action = '接口地址'
method = 'get / post'
name = '表单名称'

2 ：表单控件

<input>
属性：
type = '控件类型'
name：属性标识表单域的名称；
Value：属性定义表单域的默认值，其他属性根据type的不同而有所变化。
maxlength：控制最多输入的字符数，
Size：控制框的宽度（以字符为单位）
1）文本框
<input type="text" value="默认值"/>
2)密码框
<input type="password" />
3)提交按钮
<input type="submit" value="按钮内容" />
4)重置按钮
<input type="reset" value="按钮内容" />
5)空按钮
<input type="button" value="按钮内容" />

3：表单补充

1）单选按钮组
<input type=“radio” name=“ral” />男
<input type=“radio” name=“ral”
checked=“checked”/>(默认选中)女
2）复选框组
<input type="checkbox" name="" />
<input type="checkbox" name="" disabled="disabled" />
* disabled="disabled" (禁用)
* checked="checked" (默认选中)
3）下拉列表（菜单）：
<select >
<option>下拉选项1</option>
<option>下拉选项2</option>
…………
</select>
表示下拉列表，name属性不是必须的
默认选择项用selected属性；
4）表单域多行文本定义：
语法: <textarea name="" cols="" rows="" ></textarea>
多行文本。rows属性和cols属性用来设置文本输入窗口的高度和宽度，单位是字符。
阻止浏览器对窗口的拖动设置:{resize:none;}（css属性）
5)上传文件：
语法：<input type="file">

4：表单标签补充

1）表单字段集
语法：<fieldset></fieldset>

说明：相当于一个方框，在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象。disabled定义空间禁制可用；

2）字段级标题：
语法：<legend align="left/center/right/justify"></legend>
说明：legend元素可以在fieldset对象绘制的方框内插入一个标题。legend元素必须是fieldset内的唯一个元素。
3)提示信息标签：
语法：<label for="绑定控件id名"></label>

说明：label元素用来定义标签，为页面上的其他元素指定提示信息。要将label元素绑定到其他的控件上，可以将label元素的for属性设置为与该控件的id属性值相同。

拓展：post/get

(1). 从功能上讲，GET一般用来从服务器上获取资源，POST一般用来更新服务器上的资源；
(2). 从REST服务角度上说，GET是幂等的，即读取同一个资源，总是得到相同的数据，而POST不是幂等的，因为每次请求对资源的改变并不是相同的；进一步地，GET不会改变服务器上的资源，而POST会对服务器资源进行改变；
(3). 从请求参数形式上看，GET请求的数据会附在URL之后，即将请求数据放置在HTTP报文的请求头中，以?分割URL和传输数据，参数之间以&相连。特别地，如果数据是英文字母/数字，原样发送；否则，会将其编码为 application/x-www-form-urlencoded MIME 字符串(如果是空格，转换为+，如果是中文/其他字符，则直接把字符串用BASE64加密，得出如：%E4%BD%A0%E5%A5%BD，其中％XX中的XX为该符号以16进制表示的ASCII)；而POST请求会把提交的数据则放置在是HTTP请求报文的请求体中。
(4). 就安全性而言，POST的安全性要比GET的安全性高，因为GET请求提交的数据将明文出现在URL上，而且POST请求参数则被包装到请求体中，相对更安全。
(5). 从请求的大小看，GET请求的长度受限于浏览器或服务器对URL长度的限制，允许发送的数据量比较小，而POST请求则是没有大小限制的。

转自：知乎Eric

在线咨询

上一篇：详解网络请求Axios
下一篇：关于Css的所有讲解内容

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商