[个人学习]HTML知识点汇总

0.总计划

（1）Photoshop

（2）HTML/HTML5

（3）CSS/CSS3

（4）布局知识(Photoshop+HTML/HTML5+CSS/CSS3)

（5）Bootstrap

（6）JavaScript

（7）jQuery

（8）Ajax

（9）node.js

（10）vue

（11）react

（12）常用框架

1.HTML标签及规范

1.1 认识HTML

HTML 是 HyperText Mark-up Language 的首字母简写。HTML不是一种编程语言（因为HTML中没有变量，流程控制等），它是一种标记语言 (Markup Language)。

HTML 1.0——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）。

HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时。

HTML 3.2——1996年1月14日，W3C推荐标准。

HTML 4.0——1997年12月18日，W3C推荐标准。

HTML 4.01——1999年12月24日，是在HTML4.0基础上的微小改进W3C推荐标准。

XHTML 可扩展/*待补充*/

HTML 5.0——2014年10月28日，W3C推荐标准。

1.2 浏览器内核

五大主流浏览器：Internet Explorer (IE)，FireFox(火狐)，Chrome（谷歌），Opera（欧朋），Safari（苹果）。

Trident内核：代表产品IE,又称为IE内核。是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器有:IE、遨游、世界之窗浏览器、腾讯TT等等。
Gecko内核：代表产品Mozilla FirefoxGecko是一套开源的，C++编写的排版引擎。使用它最著名的浏览器有Firefox,Netscape 6至9。
WebKit内核：代表产品有Safari，主要用于Mac OS系统。使用它的浏览器是Safari和谷歌浏览器Chrome。
Presto内核：代表产品OperaPresto是由Opera Software开发的浏览器排版引擎，它是世界公认最快的渲染速度的引擎。在13年之后，Opera宣布加入谷歌阵营，弃用了。
Blink内核：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。现在Chrome和Opera内核是Blink。

内核：Trident(IE),Gecko(FireFox),Webkit(safari/chrome),Blink(chrome/opera)
国内大多数浏览器采用的双核驱动（Trident&Webkit或Trident&Blink）
移动端：iphoe/ipad采用的是webkit内核，android4.4以下版本采用的webkit内核，而4.4以上版本采用是blink内核。

1.3 基本结构

<!DOCTYPE html><!--!:表申明的意思。这一行代码的意思是：下面的文档标签将以html5规范去解析-->
<html>
<!--1.头部，主要用来完成一个网页的相关设置的。-->
<head>
    <meta charset="utf-8"><!--汉字编码--> <!--meta:元，主要用来完成对应设置的-->
    <meta name="keywords" content=""><!--设置一个网站的搜索关键字-->
    <meta name="description" content=""><!--网站的描述内容-->
    <title>我的第一个网页</title><!--标题-->
    <!--设置网站小图标-->
    <link rel="shortcut icon" href="https://img.alicdn.com/tps/i3/T1OjaVFl4dXXa.JOZB-114-114.png" type="image/png">
    <style>
        /*书写样式的地方*/
    </style>
    <link rel="stylesheet" href="style.css"><!--用来引入外部样式文件-->
</head>
<!--2.主体部分-->
<body>
    <p>这是一个段落</p>
</body>
<script>
    // 放脚本代码的地方
</script>
</html>

<html></html> 称为根元素，所有的网页元素都在 <html></html> 中；

<head></head> 元素用于定义文档的头部；

头部元素含有有: <meta> <title> <link> <script> <style> 。

<title> 标签定义文档的标题。

<meta charset="UTF-8"><!--网页编码-->
<meta name="Generator" content="EditPlus®"><!--用以说明生成工具-->
<meta name="Author" content="Harrison"><!--文档的作者-->
<meta name="Keywords" content="HTML,CSS,HTML5,CSS3,jQuery"><!--关键字-->
<meta name="Description" content="辛苦一阵子，幸福一辈子(学编程口号)"><!--描述-->

<!-- 可以通过以下代码引入图标 -->
<link rel="shortcut icon " type="images/x-icon" href="http://www.jd.com/favicon.ico">

<body></body> 元素用于定义网页显示的内容。

1.3 基本标签

<div>

div 标签它是可用于组合其他HTML元素的容器。可用于对大的内容块设置样式属性;文档布局。它取代了使用表格定义布局的老式方法。

<hx>

hx HTML标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。 html提供的标题有六种分别是 h1 h2 h3 h4 h5 h6 。

<h1>

定义字号最大的标题,代表大标题,一般一个页面只用一次。

<h6>

定义字号最小的标题。

<p>

p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间。

<br>

br 元素会在浏览器插入一个简单的换行符。

<hr>

hr 标签定义 HTML 页面中的主题变化（比如话题的转移），并显示为一条水平线。

<a>

a标签用来设置超文本链接。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
href属性：描述了链接的目标URL；
target属性：设置链接跳转方式。
有 4 个保留的目标名称用作特殊的文档重定向操作：

<img>

img 标签用来申明图像的插入。
src属性：规定显示图像的 URL。URL为图片的相对路径或者绝对路径均可；
alt属性：规定图像的替代文本；
title属性：定义图片的标题，鼠标移动到图片出现。

<span>

span 用来组合文档中的行内元素,可用作文本的容器。 span 元素没有固定的格式表现，当对它应用样式时，它才会产生视觉上的变化。

<ul>

ul 标签作为无序列表，它是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记，无序列表始于 <ul> 标签，每个列表项始于 <li> 标签。

<ol>

有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签，每个列表项始于<li> 标签。

<ul>
  <li>无序列表一</li>
  <li>无序列表二</li> 
</ul>
<ol>
  <li>有序列表一</li>
  <li>有序列表二</li> 
</ol>

注释标签用于在源代码中插入注释。注释不会显示在浏览器中。可使用注释对代码进行解释，这样做有助于在以后的时间对代码的修改，当编写了大量代码时尤其有用。

<!--按!+tab或html:5+tab会自动生成文档结构-->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--移动端开发设置-->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!--1.div:用来布局的，没有具体含义。层-->
    <div>
        abc
        <div>dbe</div>
    </div>

    <!--2.hx:标题，从1级到6级，1级标题最大，6级最小，会自动加粗，有默认字号-->
    <h1>前端课程内容</h1>
    <h2>Java开发</h2>
    <h6>大前端开发</h6>

    <!--3.p:表示段落。相当于一个回车。-->

    <p>根据国家卫健委最新数据显示，全国除湖北以外地区每日新增的新冠肺炎确诊病例，
        已连续多天呈下降态势，经过艰苦努力，疫情形势出现积极变化，防控工作取得积极成效。然而，
        爬坡过坎之际，还远未到喘口气、歇一歇的时候。我们必须坚持底线思维，把困难想得再充分些，
        把形势估计得再严峻些，把措施定得再周密些，坚决打赢疫情防控阻击战。</p>

    <p>根据国家卫健委最新数据显示，全国除湖北以外地区每日新增的新冠肺炎确诊病例，</p>
    已连续多天呈下降态势，经过艰苦努力，疫情形势出现积极变化，防控工作取得积极成效。
    然而，爬坡过坎之际，还远未到喘口气、歇一歇的时候。我们必须坚持底线思维，
    把困难想得再充分些，把形势估计得再严峻些，把措施定得再周密些，
    坚决打赢疫情防控阻击战。

    <!-- 4.br:生成一个换行符。单标签-->
    <p>根据国家卫健委最新数据显示，全国除湖北以外地区每日新增的新冠肺炎确诊病例，<br />
        已连续多天呈下降态势，经过艰苦努力，疫情形势出现积极变化，防控工作取得积极成效。然而，<br />
        爬坡过坎之际，还远未到喘口气、歇一歇的时候。我们必须坚持底线思维，把困难想得再充分些，<br />
        把形势估计得再严峻些，把措施定得再周密些，坚决打赢疫情防控阻击战。</p>
    <!--5.hr:生成一条水平线，主要起装饰作用。单标签-->
    <hr />
    <hr width="80%" align="center" color="red" height="2px" />

    <!--6.a:实现链接跳转。target:_blank/_self/_parent/_top-->
    <a href="http://baidu.com" title="百度">百度</a>
    <a href="01 HTML文档结构.html" target="_blank">文档结构</a>
    <a href="01 HTML文档结构.html" target="_self">文档结构</a>

    <!--7.img:用来加载外部图片、图像。src:用来设定加载的图片或图像的路径,alt:当图像加载不成功时，将显示其内容，否则将不会显示。-->
    <img src="https://img.alicdn.com/imgextra/i4/785200401/TB2BB3HbeuSBuNjSsplXXbe8pXa_!!785200401-0-beehive-scenes.jpg_250x250xz.jpg" title="test" alt="商品" />
    <img src="http://imgs.alicdn.com/imgextra/i4/785200401/TB2BB3HbeuSBuNjSsplXXbe8pXa_!!785200401-0-beehive-scenes.jpg_250x250xz.jpg" alt="商品" />

    <!-- 8.span:作用与div一样，都是用来布局的，不同的是div会单独占一行，而span不会;span用于行内布局。-->
    <div>div1</div>
    <div>div2</div>

    <span>span1</span>
    <span>span2</span>

    <!--9.ul/ol:列表，前者是无序列表，后者是有序列表，它们的列表内容都用的是li标签。-->
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
    <!--复制的快捷键：Ctrl+D-->
    <ol>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ol>
    <!--注释的快捷键：Ctrl+Shift+/-->
    <!-- 注意：浏览器不会解析注释内容的 -->
    <!--
       ejfds
       dfdfd

       -->
    <br><br><br><br><br>
</body>
</html>

1.4 文本格式化标签

<b>

b 标签表示以粗体字体形式展现内容。

strong标签与b标签都表示粗体。但strong表示强调。例如，一个单词或短语需要显示得更高调、更响亮......，总之要比一般文本更加突出。这里我们就使用strong标签在SEO中的应用，告知搜索引擎我们内容强调的是什么。

<i>

i 标签表示以斜体字体形式展现内容。

<em>

em 标签告诉浏览器把其中的文本表示为强调的内容并以斜体形式展现。

<pre>

pre 标签可定义预格式化的文本。被包围在 pre 标签元素中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。

<small>

small标签定义小型文本。

<sub>

sub 标签定义下标文本。下标文本将会显示在当前文本流中字符高度的一半为基准线的下方。

<sup>

sup 标签定义上标文本。上标文本将会显示在当前文本流中字符高度的一半为基准线的上方。

<body>
    <!--文本格式化标签：就是通过标签来美化文本外观。-->
    <!--1.b和strong:都有加粗作用，且都是行级标签（不会自动换行），但strong除了加粗还有强调作用。注：强调主要用于SEO时，便于提取对应的关键字。-->
    <b>加粗</b>
    <strong>加粗且强调</strong>

    <!--2.i和em:使文字倾斜，且都是行级标签，em具有强调作用。如果只是简单的倾斜效果，用i标签就可以，比如添加图标等。-->
    <i>文字倾斜</i>
    <em>文字倾斜且强调</em>

    <!--3.pre:预格式化文本，保留换行和空格及宽度，文字的字号会小一号（块级标签（在浏览器中会独占一行）。-->
    <pre>预格式化文本，保留
               换行和空格
及宽度。</pre>

    <!--4.small和big:分别让文字缩小一号或放大一号（行级标签（不会独占一行，且不识别宽高））。big在HTML5中淘汰了，但并没有删除，在开发中尽量不要使用淘汰了的标签。-->
    <!--浏览器支持的最小字号为12px字，如果要显示比12px还小的文字效果，需要做处理。-->
    <p>我是正常大小的文字</p>
    <small>我是小一号的文字</small>
    <big>我是大一号的文字</big>

    <!--5.sub和sup:设置文本为下标和上标，用来调整文本正常显示的基线，且文字会自动小一号（行级标签）。-->
    <p>正常显示：X1+X2=Y</p>
    <p>下标：X<sub>1</sub>+X<sub>2</sub>=Y</p>
    <p>上标：X<sup>2</sup>+Y<sup>2</sup>=Z</p>
</body>

1.5 HTML单双标记的区别

单标记指的是由一个标签组成。比如：

换行符： <br/>
水平线： <hr/>
图片标签: <img/>
文本标签: <input/>
link标签： <link/>
元信息标签： <meta/>

双标记由“ 开始标签 ”和“ 结束标签 ”两部分构成，必须成对使用。如：

<p></p> 段落标签，其中 <p> 是开始标签表示一个段落的开始， </p> 是结束标签，表示一个段落的结束。常见的双标记标签的有：

<html> 、 <head> 、 <title> 、 <body> 、 <table> 、 <span> 、 <div> 、 <p> 、 <h1> 等等。

1.6 HTML实体转义

在HTML中，内容编辑时，如果是通过空格键编辑的多个空格，网页只会显示成一个，而小于号（<）和大于号（>），网站则会认为是标签而无法直接显示在页面中。而这些都可以通过实体字符来解决。

1.7 标签属性

HTML 元素可以通过设置属性，实现某些特定的效果。

属性可以在元素中添加附加信息；
属性一般描述于开始标签；
属性总是以名称/值对的形式出现，比如：name="value"。

<body>
    <!--标签属性：
            1.通常由属性名="属性值"组成。
            2.起附加信息的作用。
            3.不是所有标签都有属性，比如br标签-->
    <p title="段落" class="content" id="content">这是一个测试段落</p>

</body>

<p class="container">
   这是一个带有class属性且值为container的段落$lt;p$gt;标签
</p>

1.8 HTML块级元素和行内元素

根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为block，成为“块级”元素(block-level)；而span元素的默认display属性值为inline，称为“行内”元素。

块状元素

块级元素会独占一行，其宽度自动填满其父元素宽度，一般情况下，块级元素可以设置 width, height属性一般用来搭建网站架构、布局、承载内容……它包括以下这些标签：
address、dir、div、dl、dt、dd、fieldset、form、h1~h6、hr、menu、noframes、ol、p、pre、table、ul等。

行内元素

行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下才会换行，其宽度随元素的内容而变化，行内元素设置width和height无效。一般用在网站内容之中的某些细节或部位，用以“强调、区分样式、上标、下标、锚点”等等。
下面这些标签都属于内嵌元素：
a、b、bdo、big、small、br、cite、em、font、i、img、input、kbd、label、select、span、strong、sub、 sup、textarea等。

区别：

块级元素
1.总是从新的一行开始
2.高度、宽度都是可控的
3.宽度没有设置时，默认为100%
4.块级元素中可以包含块级元素和行内元素
行内元素
1.和其他元素都在一行
2.高度、宽度以及内边距都是不可控的
3.宽高就是内容的高度，不可以改变
4.行内元素只能行内元素，不能包含块级元素

块级独占一行，识别宽高，如果不设置，宽度为整行宽度，高度为内容实际的高度；
行级不独占一行，不能设置宽高，宽高分别为内容实际的宽高；
块级标签可以通过设置样式：display:inline;转换为行级标签，而行级标签可以通过设置样式：display:block;转换为块级标签

    <!--块级元素（相当执行了display:block;操作）：
            1）独占一行
            2）宽度和高度是可控的，如果没有设置其宽度，将默认铺满整行
            3）其内可以包含块级和行级元素
        行级元素（相当执行了display:inline;操作）：
            1）不会独占一行，与相邻的行级元素占同一行，直到行占满，会自动掉到下一行
            2）宽度和高度是不可控的
            3）其内只有包含行级元素
    -->
    <div>div</div>
    <p>p</p>
    <p style="width:300px;height:50px;background:gray;">p</p>

    <strong>strong</strong>
    <span>span</span>
    <span style="width:300px;height:50px;background:gray;">span</span>

    <!--1.块级标签转为行级标签-->
    <p style="width:300px;height:50px;background:gray;display:inline;">块级标签转为行级标签</p>
    <!--1.行级标签转为块级标签-->
    <span style="width:300px;height:50px;background:blue;display:block;">行级标签转为块级标签</span>

1.9 W3C规范

什么是W3C

万维网联盟(World Wide Web)。

简单的说就是一个国际性的中立组织，专门负责统一web相关的各项标准。

W3C规范由结构、表现和形为三部分组成。

W3C中的标签嵌套规则

块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素。

<div><h1></h1><p></p></div> —— 对
<a href=”#”><span></span></a> —— 对
<span><div></div></span> —— 错

块级元素不能放在<p>里面。

<p><ol><li></li></ol></p> —— 错
<p><div></div></p> —— 错

有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：

h1、h2、h3、h4、h5、h6、p、dt

块级元素与块级元素并列、内嵌元素与内嵌元素并列。

<div><h2></h2><p></p></div> —— 对
<div><a href=”#”></a><span></span></div> —— 对
<div><h2></h2><span></span></div> —— 错

1.10 HTML语义化标签

1. 什么是语义化标签

语义化，通俗地说就是：明白每个标签的用途（在什么情况下我可以使用这个标签才合理）。

2. 为啥使用语义化标签

更容易被搜索引擎收录；
更容易让屏幕阅读器读出网页内容；
能够更好的体现页面的主题；
兼容性更好，支持更多的网络设备。

3. HTML语义化标签
1） <a> 标签：实现超链接。

强调:title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很
大，主要方便搜索引擎了解链接地址的内容（语义化更友好）。

2） <p> 标签：文章段落放到<p> 标签中。

3） <hx> 标签：文章标题，栏目标题用<hx> 表示。

标题标签一共有6个， h1、h2、h3、h4、h5、h6 分别为一级标题、二级标题、三级标题、四级标题、
五级标题、六级标题，并且依据重要性递减， <h1> 是最高的等级。

4） <strong> 和<em> 标签：特别强调某几个文字。
但两者在强调的语气上有区别: <em> 表示强调， <strong> 表示更强烈的强调。并且在浏览器中<em>
默认用斜体表示， <strong> 用粗体表示。
两个标签相比，目前国内前端程序员更喜欢使用<strong> 表示强调。

5） <q> 标签：短文本引用。
注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。

6） <address> 标签：为网页加入地址信息。

7） <ul> 标签：无序列表。

8） <ol> 标签：有序列表。

9） <caption> 标签：为表格添加标题和摘要。
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读
懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

<table summary="表格简介文本">
标题用以描述表格内容，标题的显示位置：表格上方。
**语法**：
```
<caption>标题文本</caption>

1.11 企业官网文件命名规范

2.HTML标签属性

1.标签由标签名、标签属性和文本内容三部分组成（注意：单标签没有文本内容）。
2.标签属性是对标签的一种描述方式。
3.标签属性分通用属性、自有属性和自定义属性。

2.1 通用属性

通用属性指的是所有标签都拥有的属性。

id 规定元素的唯一 id。
class 规定元素的类名。
style 规定元素的行内样式。
title 规定元素的额外信息，当鼠标放在元素上，提示的文本内容

<!--以下代码是实际开发的案例-->
<div class="wrapper" id="wrapper" style="background:red;" title="此处鼠标悬停显示此段信息"></div>

2.2 自定义属性

HTML5规范中指定如果需要使用自定义属性，需要用 data-* 的方式，比如 data-src data-index 。通常用来传值或用于图片懒加载等方面。

<!--以下代码是实际开发的案例，img标签显示的是缩略图，而data-src的值为点击显示原图的地址-->
<img src='./img/1.jpg' data-src='./img/big_1.jpg'>

<img data-src="图片名" alt="提示文本"/>
<p data-id="goodsid">...</p>

2.3 table表格

在Html中 <table> 标签表示一个表格，每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。

表格属性

border ：设置表格边框，默认单位是像素
width ：设置表格宽度，默认单位是像素
align ：设置表格对齐（left（默认）/center/right）
cellpadding ：设置单元格间距
cellspacing ：设置像素间隙

常见表格展示

    <!--table>tr*2>td{内容$}*3-->
    <table border="1" width="400" cellspacing="0" cellpadding="10" align="center">
        <tr>
            <th>学号</th><!--th:表头，主要对下面的内容起说明作用。th的内容会自动加粗和居中显示-->
            <th>姓名</th>
            <th>住址</th>
        </tr>
        <tr>
            <td>007</td>
            <td>张三</td>
            <td>北京</td>
        </tr>
        <tr>
            <td>008</td>
            <td>李四</td>
            <td>上海</td>
        </tr>
    </table>

rowspan 属性定义单元格应该纵跨的行数。

    <!--Emmet语法：table[border=1 width=500 align=center]>tr*3>td{内容区$$}*3-->
    <table border="1" width="500" align="center">
        <tr>
            <td rowspan="2" align="center" valign="middle">内容区01</td><!--valign:垂直对齐（top/middle/bottom)-->
            <td>内容区02</td>
            <td rowspan="3">内容区03</td>
        </tr>
        <tr>
            <td>内容区02</td>
        </tr>
        <tr align="center">
            <td>内容区01</td>
            <td>内容区02</td>
        </tr>
    </table>

colspan 属性定义单元格应该横跨的列数

<!-- 单元格横跨两格 -->
<table border="1">
　　<tr>
　　　　<th>Name</th>
　　　　<th colspan="2">Telephone</th>
　　</tr>
　　<tr>
　　　　<td>Bill Gates</td>
　　　　<td>555 77 854</td>
　　　　<td>555 77 855</td>
　　</tr>
</table>

一个完整table表格一般包含 <thead> 、 <tbody> 、和 <tfoot> 元素结合，用来规定表格的各个部分（表头、主体、页脚）。

完整表格组成：caption（标题)、thead（表头）、tbody（表体）和tfoot（表尾）四部分组成。

<thead> 标签用于组合 HTML 表格的表头内容。
<tbody> 标签用于组合 HTML 表格的主体内容。
<tfoot> 标签用于组合 HTML 表格的页脚内容。

 <!--table[border=1 width=600 align=center]>(caption{学生信息表})+(thead>tr>th*4)+(tbody>tr*3>td*4)+(tfoot>tr>td[colspan=1])-->
    <table border="1" width="600" align="center">
        <caption>学生信息表</caption>
        <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>家庭住址</th>
            <th>备注</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td align="center">001</td>
            <td>Tom*</td>
            <td>aaaaaaaaaaa</td>
            <td>该生为“三好学生”</td>
        </tr>
        <tr>
            <td align="center">002</td>
            <td>Mickle</td>
            <td>bbbbbbbbb</td>
            <td></td>
        </tr>
        <tr>
            <td align="center">003</td>
            <td>Mary*</td>
            <td>cccccccc</td>
            <td></td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td colspan="4">附注：*为优秀学生。</td>
        </tr>
        </tfoot>
    </table>

2.4 form 表单标签

<form>表单是一个包含表单元素的区域，允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素

　　表单常用属性

　　name 属性：规定表单的名称。
　　action 属性：规定当提交表单时，向何处发送表单数据。表单数据提交的地方(通常是一个后台文件名(.jsp/.php/.asp/.aspx/.py等），或网址）。如果是#，表示提交到当前文件下。
　　method 属性：规定如何发送表单数据（表单数据发送到 action 属性所规定的页面）,常见的有post，get方式请求，默认的是get。

    <form name="stuInfo" action="test.jsp" method="post">
        <input type="text" name="userName" placeholder="请输入您的姓名">
        <input type="submit">
    </form>

HTML 表单元素的有： <input> 、 <textarea> 、 <button> 、 <select>

<input> 标签：根据不同的 type 属性，可以变化为多种状态输入方式

1. <input type="text" /> : 定义供文本输入的单行输入字段
  1. 单行文本输入框 type="text"可以不写，默认值。
    属性：placeholder(提示）/name（命名）/minlength和maxlength（最少/多输入的字符个数）/disabled（失效）/readonly（只读）
    value（默认值）/pattern（正则匹配）
2. <input type="password" /> ：定义密码字段
3. <input type="submit" /> ：定义提交表单数据至表单处理程序的按钮
  　　1.用来将表单数据提交到后台。
  　　2.常用属性有：value（按钮的标题）/disabled（失效）
4. <input type="image" /> ：定义图片提交按钮
  1. 有一个特殊属性：src(用来加载提示图片，用它替换了value)
    它有提交功能，与submit功能一样。
5. <input type="radio" /> ：定义单选按钮，通常是两项以上。
  1. 常用属性有：name（必须要有）/value/checked（选中）/disabled（失效）/readonly（只读）
6. checked {boolean} :属性为选中状态，true为选中，false 为未选中
7. <input type="checkbox" /> ：定义复选框
  1. name（必须要有）/value/checked（默认选中）/disabled（失效）/readonly（只读）
  2. checked {boolean} :属性为选中状态，true为选中，false 为未选中
8. <input type="button" /> ：定义普通按钮
  1. 常用属性有：value（按钮的标题）/disabled（失效）
9. <input type="reset" /> ：定义重置按钮
10. <input type="file" /> ：定义文件框

    <form action="demo.php">
        <!--1.文本框-->
        <!--<input type="text" name="test" placeholder="请输入一个数字" value="100" disabled="disabled"> <br>-->
       <!-- <input type="text" name="test" placeholder="请输入一个数字" value="100" readonly="readonly"> <br>-->
        <!--<input type="text" name="test" placeholder="请输入一个数字" value="100" minlength="3" maxlength="6"> <br>
        <input>-->
        
        <!--2.密码框-->
        <input type="password"> <br>

        <!--3.单选钮-->
        <input type="radio" name="sex" checked="checked">男
        <input type="radio" name="sex">女

        <input type="radio" name="num">1
        <input type="radio" name="num">2
        <input type="radio" name="num" checked>3 <br>

        <!--4.复选框/检查框-->
        <input type="checkbox" name="hobby" checked>听音乐
        <input type="checkbox" name="hobby" checked>码代码
        <input type="checkbox" name="hobby">其它 <br>
        
        <!--5.文件上传按钮-->
        <input type="file"> <br>

        <!--6.普通按钮-->
        <input type="button" value="登录"> <br>
       <!-- <input type="button" value="登录" disabled> <br>-->

        <!--7.图片按钮-->
        <input type="image" src="img/btn.png" title="刷新">

        <!--8.提交按钮-->
        <input type="submit">

        <!--9.重置按钮-->
        <input type="reset" value="取消">
    </form>

<textarea> 标签：定义多行的文本输入控件。主要用于输入大批量的文本内容。

1. 常用属性：name/id/cols(列数)/rows(行数)/placeholder/minlength/maxlength/required(必须输入)/value

<form action="">
    <textarea name="memo" id="memo" cols="30" rows="10">备注：</textarea>
</form>

<button> 标签：定义一个按钮，根据不同的 type 属性展示不同按钮类型。

1. button:定义普通按钮。
2. reset:定义重置按钮。
3. submit：定义提交按钮。

    <button id="btnOk">确认</button><!--这里的button主要用来调用js代码-->
    <form action="test.aspx">
        <input type="text" name="info">
        <button>提交</button><!--这里的button的功能与input中的submit按钮功能一样-->
    </form>

<select> 标签：定义可单选或多选下拉菜单，包含若干个可选项( <option> )

1. 下拉列表框，默认用于单项选择。用option呈现每个选项。
2. multiple属性：表示可以多选，这时的下拉列表框变成了列表框
3. size:最多显示的行数

<form action="">
    <label for="sex">性别：</label>
    <select id="sex">
        <option value="male">男</option>
        <option value="female">女</option>
    </select>
    <br>
    <label for="course">选课：</label>
    <select id="course" multiple size="10">
        <option value="语文">语文</option>
        <option value="数学">数学</option>
        <option value="计算机">计算机</option>
        <option value="其它">其它</option>
    </select>
</form>

2.5 表单通用属性

表单通用属性的有： name 、 value 、 readonly 、 disabled 。

name 属性：规定输入字段名称
value 属性：规定输入字段的初始值
readonly 属性：规定输入字段为只读
disabled 属性：规定输入字段是禁用的

2.6 iframe 框架标签

name:框架名
src:引入的外部html文件
scrolling:滚动条(yes/no/auto)
width:宽度(%/px)
height:高度(%/px)
frameborder:是否有边框(1/0)
marginheight:框架离顶部和底端的距离(%/px)
marginwidth:框架离左右的距离(%/px)

注意：
在实际开发，尽量减少使用iframe，因为它破坏了前进和后退功能，且不利于SEO。

<!-- 此处是一个内嵌框架：地址为百度，宽度1200 高度500 无滚动条 框架边框为0 -->
<iframe src="http://www.baidu.com"
　　name="baiduIframe"
　　width="1200"
　　height="500"
　　frameborder="0"
　　scrolling="no">
</iframe>

<!-页面布局->
<body>
    <!--banner-->
    <iframe src="iframe/banner.html" marginheight="0" scrolling="no" width="100%" frameborder="0"></iframe>
    <!--导航-->
    <iframe src="iframe/nav.html" scrolling="auto" width="20%" height="300px" frameborder="0"></iframe>
    <!--核心内容区-->
    <iframe src="iframe/content1.html" name="main" scrolling="no" width="70%"  height="300px" frameborder="0"></iframe>
</body>

posted @ 2020-05-17 11:16 FLAGLEE 阅读(509) 评论(0) 收藏举报

刷新页面返回顶部

FLAGLEE