最全HTML笔记总结二

**笔记及代码来源：**https://www.bilibili.com/video/BV1Mx411m7fd**HTML表单**
1、表单用于获取不同类型的用户输入
2、常用表单标签：
<form> 表单
<input> 输入域
<textarea> 文本域
<label> 控制标签
<fieldset> 定义域
<legend> 域的标题
<select> 选择列表
<optgroup> 选项组
<option> 下拉列表中的选项
<button> 按钮<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>表单</title></head><body><form>用户名:<input type="text"><br/>你喜欢的水果有？<br/>苹果<input type="checkbox" />香蕉<input type="checkbox" />芒果<input type="checkbox" />橘子<input type="checkbox" /><br/>请选择你的性别：男<input type="radio" name="sex"/>女<input type="radio" name="sex"/><br/>请选择你喜好：<select><option>睡觉</option><option>逛街</option><option>吃货</option><option>想你</option></select><input type="button" value="按钮" /><input type="submit" value="确定"/></form><textarea cols="30" rows="30">请在此填写你的个人信息</textarea></body>
</html><!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>表单与PHP交互</title></head><body><form action="http://localhost/ch01/recommend.php" method="post">用户名：<input type="text"name="name" />密码：<input type="password"name="password" /><br/><input type="submit"value="确定" /></form><textarea cols="30" rows="30">请在此填写你的个人信息</textarea></body>
</html>**HTML框架**
1、框架标签(frame):
框架对于页面的设计有着很大的作用
2、框架集标签(<frameset>)：
框架集标签定义如何将窗口分割为框架
每一个frameset定义一系列行或列
rows/cols的值规定了每行或每列占据屏幕的面积
3、常用标签：
noresize：固定框架大小
cols:列
rows:行
4、内联框架
iframe**HTML背景**
1、背景标签：
Background
2、背景颜色：
Bgcolor
3、颜色：
颜色是由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成(RGB)
颜色值最小值：0(#00)
颜色值最大值：255(#FF)
红色：#FF0000
绿色：#0OFF0O，
蓝色：#0000FF1. 文件标签：构成html最基本的标签* html:html文档的根标签* head：头标签。用于指定html文档的一些属性。引入外部的资源* title：标题标签。* body：体标签* <!DOCTYPE html>：html5中定义该文档是html文档
2. 文本标签：和文本有关的标签* 注释：<!-- 注释内容 -->* <h1> to <h6>：标题标签* h1~h6:字体大小逐渐递减* <p>：段落标签* <br>：换行标签* <hr>：展示一条水平线* 属性：* color：颜色* width：宽度* size：高度* align：对其方式* center：居中* left：左对齐* right：右对齐* <b>：字体加粗* <i>：字体斜体* <font>:字体标签* <center>:文本居中* 属性：* color：颜色* size：大小* face：字体* 属性定义：* color：1. 英文单词：red,green,blue2. rgb(值1，值2，值3)：值的范围：0~255  如  rgb(0,0,255)3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF* width：1. 数值：width='20' ,数值的单位，默认是 px(像素)2. 数值%：占比相对于父元素的比例3. 图片标签：* img：展示图片* 属性：* src：指定图片的位置4. 列表标签：* 有序列表：* ol:* li:* 无序列表：* ul:* li:5. 链接标签：* a:定义一个超链接* 属性：* href：指定访问资源的URL(统一资源定位符)* target：指定打开资源的方式* _self:默认值，在当前页面打开* _blank：在空白页面打开    6. 表格标签：* table：定义表格* width：宽度* border：边框* cellpadding：定义内容和单元格的距离* cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、* bgcolor：背景色* align：对齐方式* tr：定义行* bgcolor：背景色* align：对齐方式* td：定义单元格* colspan：合并列* rowspan：合并行* th：定义表头单元格`contentEditable属性
designMode属性
hidden属性
spellcheck属性
tabindex属性**article元素**
article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的
内容。它可以是一篇博客或者报刊中的文章，一篇论坛帖子、一段用户评论或独立
的插件，或其他任何独立的内容。
article元素是可以嵌套使用的。
article元素可以用来表示插件<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>artical元素</title></head><body><article><header><h1>极客学院</h1><p>hello ,欢迎来到极客学院</p></header><p>hello</p><footer><p>这是底部</p></footer></article></body>
</html>**section元素**
section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通
常由内容及其标题组成。但section元素并非一个普通的容器元素；当一个容器需
要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>artical元素</title></head><body><section><h1>p苹果</h1><p>这是一种水果</p></section><article><section><h2>香蕉</h2><p>这也是一种水果</p></section><section><h2>芒果</h2><p>这也是一种水果</p></section></article></body>
</html>、**nav元素**
nav元素是一个可以用作页面导航的连接组，其中的导航元素链接到其他页面或当
前页面的其他部分。并不是所有的连接组都要被放进nav元素，只需要将主要的、
基本的连接组放进nav元素即可。
nav元素应用场景：
·传统导航条
•侧边栏导航
·页内导航
翻页操作<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>nav元素</title></head><body><nav><ul><li><a href="#">主页</a></li><li><a href="#">开发文档</a></li></ul></nav><article><header><h1>html和css3的历史</h1><nav><ul><li><a href="#">html历史</a></li><li><a href="#">css3历史</a></li></ul></nav></header><section><h1>html5的历史</h1><p>....</p></section><section><h1>css3的历史</h1><p>....</p></section></article></body>
</html>**aside元素**
aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主
要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有区别于主要内容的
部分。<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>aside元素</title></head><body><header><h1>js入门</h1></header><article><h1>语法</h1><p>文章的正文。。。</p><aside><h1>名词解释</h1><p>语法：这是语法的解释</p></aside></article><aside><nav><h2>评论</h2><ul><li><a href="#">2015-3-4</a></li><li><a href="#">2015-3-5</a></li><li><a href="#">2015-3-6</a></li></ul></nav></aside></body>
</html><!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>time元素</title></head><body><time datetime="2015-2-3">2015-2-3</time><time datetime="2015-2-3T20:00">2015-2-3</time><time datetime="2015-2-3T20:00Z">2015-2-3</time><time datetime="2015-2-3T20:00+09:00">2015-2-3</time></body>
</html>header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页
面内的一个内容区块的标题，但是也可以包含其他内容，例如数据表格、搜索表单
或相关的logo图片。footer元素
footer元素可以作为其上层父级内容区块或是一个根区块的脚注。footer
通常包括其相关区块的脚注信息，如作者、相关阅读链接及版权信息等。<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>hgroup元素</title></head><body><article><header><hgroup><h1>这是文章标题</h1><h2>这是一个子标题</h2></hgroup><p><time datetime="2015-10-10">2015-10-10</time></p></header><div>这是内容</div><footer>这是底部</footer></article></body>
</html>address元素
address元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、他
们的网站链接、电子邮箱、真实地址、电话号码等。address应该不只用来呈现电
子邮箱或真实地址，还用来展示跟文档相关的联系人的所有联系信息。<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>网页编程实例</title></head><body><header><ul><li><a href="#">首页</a></li><li><a href="#">帮助</a></li></ul></header><article><hgroup><h1>文章主标题</h1><h2>文章副标题</h2></hgroup><p>文章正文</p><section><div><article><h1>评论标题</h1></article></div></section></article></body>
</html>表单内元素的formmethod属性
在HTML4中，一个表单内只能有一个action属性用来对表单内所有元素统一指定提
交页面，所以每个表单内页只有一个method属性来统一指定提交方法。在HTML5
中，可以使用formmethod属性来对每一个表单元素分别指定不同的提交方法。表单内元素的formenctype属性
在HTML4中，表单元素具有一个enctype属性，该属性用于指定在表单发送到服务
器之前应该如何对表单内的数据进行编码。
在HTML5中，可以使用formenctype属性对表单元素分别指定不同的编码方式。<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>网页编程实例</title></head><body><form><input type="text" formenctype="text/plain" /><input type="text" formenctype="multipart/form-data" /><input type="text" formenctype="application/x-www-form-urlencoded" /></form></body>
</html>表单内元素的formtarget属性
在HTML4中，表单元素具有一个target属性，该属性用于指定在何处打开表单提交
后所需要加载的页面。
在HTML5中，可以对多个提交按钮分别使用formtarget属性来指定提交后在何处打
开所需加载的页面。表单内元素的autofocus属性
为文本框、选择框或按钮控件加上autofocus属性，当画面打开时，该控件自动获
得光标焦点。表单内元素的required属性
HTML5中新增的required属性可以应用在大多数输入元素上，在提交时，如果元素
中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字。<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>网页编程实例</title></head><body><form action="http://localhost/phpmyadmin/"><input type="text" required="required"/><button type="submit">提交</button></form></body>
</html>表单内元素的labels属性
在HTML5中，为所有可使用标签的表单元素、button、select元素等，定义一个
labels属性，属性值为一个NodeList对象，代表该元素所绑定的标签元素所构成的
集合。<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>网页编程实例</title></head><body><script>function validata(){var textName=document.getElementById("txt_name");var button=document.getElementById("btnValidata");var form=document.getElementById("textfrom");if(textName.value.trim()==""){var label=document.createElement("label");label.setAttribute("for","txt_name");form.insertBefore(label,button);textName.label[1].innerHTML="请输入姓名"；textName.label[1].setAttribute("style","font-size: 9px;color: red;");}}</script><form id="textform"><label id="label" for="txt_name">姓名：</label><input id="txt_name" /><input type="button" id="btnValidata" value="验证" onclick="validata()"/></form></body>
</html>标签的control属性 js动态创建
在HTML5中，可以再标签内部放置一个表单元素，并且通过该标签的control属性
来访问该表单元素。<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>网页编程实例</title></head><body><script>function setValue(){var label=document.getElementById("label");var taxtbox=label.control;textbox.value="010010";}</script><form><label id="label">邮编：<input id="txt_zip" maxlength="6" /><small>请输入六位数字</small></label><input type="button" value="设置默认值" onclick="setValue()" /></form></body>
</html><!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>网页编程实例</title></head><body><input type="text" placeholder="请输入用户名" /></body>
</html>文本框的list属性
在HTML5中，为单行文本框增加了一个list属性，该属性的值为某个datalist元素的
id。datalist元素也是HTML5中新增的元素，该元素类似于选择框，但是当用户想
要设定的值不在选择列表之内时，允许自行输入。datalist元素本身并不显示，而
是当文本框获得焦点时以提示输入的方式显示。<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>网页编程实例</title></head><body><form><input type="text" name="greeting" list="greeting" /><datalist id="greeting" style="display: none;"><option value="htnl5">html5</option><option value="html4">html4</option><option value="html3">html3</option><option value="html2">html2</option><option value="html1">html1</option></datalist></form></body>
</html>文本框的autocomplete属性
帮助输入所用的自动完成功能，是一个既节省输入时间又十分方便的功能。在
HTML5之前，因为谁都可以看见输入的值，所有在安全方面存在缺陷，只要使用
AutoComplete属性，安全性方面也可以得到很好的控制。文本框的pattern属性
在HTML5中，对input元素使用pattern属性，并且将属性值设为某个格式的正则表
达式，在提交时会针对这些进行检查，检查其内容是否符合给定格式。当输入的内
容不符合给定格式时，则不允许提交，同时在浏览器中显示信息提示文字，提示输
入的内容必须符合给定格式。文本框的SelectionDirection属性
这对input元素与textarea元素，HTML5增加了SelectionDirection属性。当用户在
这两个元素中用鼠标选取部分文字时，可以使用该属性来获取选取方向。当用户正
向选取文字时，改属性值为“forward”，当用户反向选取文字时，该属性值为
“backward”。当用户没有选取任何文字时，该属性值为“forward”。复选框的indeterminate属性
对于复选框checkbox元素来说，过去只是选取与非选取这两种状态。在HTML5
中，可以在JavaScript脚本代码中对该元素使用indeterminate属性，以说明复选
框处于“尚未明确是否选取”状态。image提交按钮的height属性与width属性
针对类型为image的input元素，HTML5新增了两个属性，height、width分别用
来指定图片按钮的高度和宽度。<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>网页编程实例</title></head><body><form action="test.jsp" method="post">姓名：<input type="text"name="name" /><input type="image" src="../img/img02.jpg" alt="编辑" width="200" height="500" /></form></body>
</html>

最全HTML笔记总结二相关推荐

『矩阵论笔记』线性判别分析(LDA)最全解读+python实战二分类代码+补充：矩阵求导可以参考
线性判别分析(LDA)最全解读+python实战二分类代码! 文章目录一.主要思想! 二.具体处理流程! 三.补充二中的公式的证明! 四.目标函数的求解过程! 4.1.优化问题的转化 4.2.拉格朗 ...
Programming C# 学习笔记（二）出发：“Hello World”
小序: 准备写这章的学习笔记了,啊,Hello World!多么亲切的语句,呵呵,当初学C语言的第一个程序就是输出它, 还记得费了好大劲终于把它输出来时候的那种兴奋感觉,真是让我怀念哦!(然 ...
响应式编程笔记（二）：代码编写
2019独角兽企业重金招聘Python工程师标准>>> 响应式编程笔记(二):代码编写博客分类: 架构原文:Notes on Reactive Programming Part ...
TensorFlow学习笔记（二）：快速理解Tutorial第一个例子-MNIST机器学习入门标签：机器学习SoftmaxTensorFlow教程 2016-08-02 22:12 3729人阅
TensorFlow学习笔记(二):快速理解Tutorial第一个例子-MNIST机器学习入门标签: 机器学习SoftmaxTensorFlow教程 2016-08-02 22:12 3729人阅读 ...
setup.s 分析—— Linux-0.11 学习笔记（二）
更新记录版本时间修订内容 1.0 2018-4-14 增加了"获取显示模式"这一节,AL取值的表格标题: setup.s 分析-- Linux-0.11 学习笔记(二) 老 ...
Deep Learning（深度学习）学习笔记整理(二）
本文整理了网上几位大牛的博客,详细地讲解了CNN的基础结构与核心思想,欢迎交流 [1]Deep learning简介 [2]Deep Learning训练过程 [3]Deep Learning模型之: ...
Flowable学习笔记（二、BPMN 2.0-基础）
转载自 Flowable学习笔记(二.BPMN 2.0-基础 ) 1.BPMN简介业务流程模型和标记法(BPMN, Business Process Model and Notation)是一套图 ...
《运营之光》-- 学习笔记（二）
11,不同类型产品和公司运营工作内容差异 1,工具类产品注重效率,通常产品大于运营,运营的关注点是用户增长,主要手段包括渠道推广.BD和部分活动等,运营和数据打交道更多点 2,社交类产品注重社交氛 ...
《C++游戏开发》笔记十二战争迷雾：初步实现
本系列文章由七十一雾央编写,转载请注明出处. http://blog.csdn.net/u011371356/article/details/9475979 作者:七十一雾央新浪微博:http:// ...

最全HTML笔记总结二

最全HTML笔记总结二相关推荐

最新文章

热门文章