HTML个人总结

最新推荐文章于 2022-10-15 23:00:23 发布

松鸟

最新推荐文章于 2022-10-15 23:00:23 发布

阅读量665

点赞数

分类专栏：编程语言文章标签： HTML

本文链接：https://blog.csdn.net/sx5273/article/details/41971351

版权

编程语言专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1、<!DOCTYPE> 声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

HTML 提示：使用小写标签

HTML 提示：使用小写属性

2、HTML 文本格式化标签
  
  标签 描述
<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字

标签	描述
<b>	定义粗体文本
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字
<del>	定义删除字

3、HTML <link> 元素
<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表:
  
  
   
   
    
    <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

4、HTML样式 
1、背景色属性（background-color）定义一个元素的背景颜色
<p style="background-color:green;">This is a paragraph.</p>

2、font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式

3、使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式

5、HTML 区块元素
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>, <p>, <ul>, <table>

6、HTML 内联元素
内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>

7、HTML 表单标签
New : HTML5新标签
  
  标签 描述
<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域
 (一个多行的输入控件)
<label> 定义了
 <input> 元素的标签，一般为输入标题
<fieldset> 定义了一组相关的表单元素，并使用外框包含起来
<legend> 定义了
 <fieldset> 元素的标题
<select> 定义了下拉选项列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个点击按钮
<datalist>New 指定一个预先定义的输入控件选项列表
<keygen>New 定义了表单的密钥对生成器字段
<output>New 定义一个计算结果

标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义了 <input> 元素的标签，一般为输入标题
<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了 <fieldset> 元素的标题
<select>	定义了下拉选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮
<datalist>New	指定一个预先定义的输入控件选项列表
<keygen>New	定义了表单的密钥对生成器字段
<output>New	定义一个计算结果

8、HTML <iframe> 标签属性

New ：HTML5 中的新属性。

属性	值	描述
align	left right top middle bottom	HTML5 不支持。HTML 4.01 已废弃。规定如何根据周围的元素来对齐 <iframe>。
frameborder	1 0	HTML5 不支持。规定是否显示 <iframe> 周围的边框。
height	pixels	规定 <iframe> 的高度。
longdesc	URL	HTML5 不支持。规定一个页面，该页面包含了有关 <iframe> 的较长描述。
marginheight	pixels	HTML5 不支持。规定 <iframe> 的顶部和底部的边距。
marginwidth	pixels	HTML5 不支持。规定 <iframe> 的左侧和右侧的边距。
name	name	规定 <iframe> 的名称。
sandboxNew	"" allow-forms allow-same-origin allow-scripts allow-top-navigation	对 <iframe> 的内容定义一系列额外的限制。
scrolling	yes no auto	HTML5 不支持。规定是否在 <iframe> 中显示滚动条。
seamlessNew	seamless	规定 <iframe> 看起来像是父文档中的一部分。
src	URL	规定在 <iframe> 中显示的文档的 URL。
srcdocNew	HTML_code	规定页面中的 HTML 内容显示在 <iframe> 中。
width	pixels	规定 <iframe> 的宽度。

9、HTML 事件属性
  
  
   
   

  
  
  
  
   
   1）窗口事件属性（Window Event Attributes）
   
   由窗口触发该事件 (适用于 <body> 标签):
   
   属性 值 描述
onafterprintNew script 在打印文档之后运行脚本
onbeforeprintNew script 在文档打印之前运行脚本
onbeforeonloadNew script 在文档加载之前运行脚本
onblur script 当窗口失去焦点时运行脚本
onerrorNew script 当错误发生时运行脚本
onfocus script 当窗口获得焦点时运行脚本
onhaschangeNew script 当文档改变时运行脚本
onload script 当文档加载时运行脚本
onmessageNew script 当触发消息时运行脚本
onofflineNew script 当文档离线时运行脚本
ononlineNew script 当文档上线时运行脚本
onpagehideNew script 当窗口隐藏时运行脚本
onpageshowNew script 当窗口可见时运行脚本
onpopstateNew script 当窗口历史记录改变时运行脚本
onredoNew script 当文档执行再执行操作（redo）时运行脚本
onresizeNew script 当调整窗口大小时运行脚本
onstorageNew script 当
 Web Storage 区域更新时（存储空间中的数据发生变化时）运行脚本
onundoNew script 当文档执行撤销时运行脚本
onunloadNew script 当用户离开文档时运行脚本

属性	值	描述
onafterprintNew	script	在打印文档之后运行脚本
onbeforeprintNew	script	在文档打印之前运行脚本
onbeforeonloadNew	script	在文档加载之前运行脚本
onblur	script	当窗口失去焦点时运行脚本
onerrorNew	script	当错误发生时运行脚本
onfocus	script	当窗口获得焦点时运行脚本
onhaschangeNew	script	当文档改变时运行脚本
onload	script	当文档加载时运行脚本
onmessageNew	script	当触发消息时运行脚本
onofflineNew	script	当文档离线时运行脚本
ononlineNew	script	当文档上线时运行脚本
onpagehideNew	script	当窗口隐藏时运行脚本
onpageshowNew	script	当窗口可见时运行脚本
onpopstateNew	script	当窗口历史记录改变时运行脚本
onredoNew	script	当文档执行再执行操作（redo）时运行脚本
onresizeNew	script	当调整窗口大小时运行脚本
onstorageNew	script	当 Web Storage 区域更新时（存储空间中的数据发生变化时）运行脚本
onundoNew	script	当文档执行撤销时运行脚本
onunloadNew	script	当用户离开文档时运行脚本

2）表单事件(Form Events)

表单事件在HTML表单中触发 (适用于所有 HTML 元素, 但该HTML元素需在form表单内):

属性	值	描述
onblur	script	当元素失去焦点时运行脚本
onchange	script	当元素改变时运行脚本
oncontextmenuNew	script	当触发上下文菜单时运行脚本
onfocus	script	当元素获得焦点时运行脚本
onformchangeNew	script	当表单改变时运行脚本
onforminputNew	script	当表单获得用户输入时运行脚本
oninputNew	script	当元素获得用户输入时运行脚本
oninvalidNew	script	当元素无效时运行脚本
onreset	script	当表单重置时运行脚本。HTML 5 不支持。
onselect	script	当选取元素时运行脚本
onsubmit	script	当提交表单时运行脚本

3）键盘事件（Keyboard Events）

属性	值	描述
onkeydown	script	当按下按键时运行脚本
onkeypress	script	当按下并松开按键时运行脚本
onkeyup	script	当松开按键时运行脚本

4）鼠标事件（Mouse Events）

通过鼠标触发事件, 类似用户的行为:

属性	值	描述
onclick	script	当单击鼠标时运行脚本
ondblclick	script	当双击鼠标时运行脚本
ondragNew	script	当拖动元素时运行脚本
ondragendNew	script	当拖动操作结束时运行脚本
ondragenterNew	script	当元素被拖动至有效的拖放目标时运行脚本
ondragleaveNew	script	当元素离开有效拖放目标时运行脚本
ondragoverNew	script	当元素被拖动至有效拖放目标上方时运行脚本
ondragstartNew	script	当拖动操作开始时运行脚本
ondropNew	script	当被拖动元素正在被拖放时运行脚本
onmousedown	script	当按下鼠标按钮时运行脚本
onmousemove	script	当鼠标指针移动时运行脚本
onmouseout	script	当鼠标指针移出元素时运行脚本
onmouseover	script	当鼠标指针移至元素之上时运行脚本
onmouseup	script	当松开鼠标按钮时运行脚本
onmousewheelNew	script	当转动鼠标滚轮时运行脚本
onscrollNew	script	当滚动元素的滚动条时运行脚本

比较 GET 与 POST

下面的表格比较了两种 HTTP 方法：GET 和 POST。

	GET	POST
后退按钮/刷新	无害	数据会被重新提交（浏览器应该告知用户数据会被重新提交）。
书签	可收藏为书签	不可收藏为书签
缓存	能被缓存	不能缓存
编码类型	application/x-www-form-urlencoded	application/x-www-form-urlencoded or multipart/form-data。为二进制数据使用多重编码。
历史	参数保留在浏览器历史中。	参数不会保存在浏览器历史中。
对数据长度的限制	是的。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。	无限制。
对数据类型的限制	只允许 ASCII 字符。	没有限制。也允许二进制数据。
安全性	与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET ！	POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。
可见性	数据在 URL 中对所有人都是可见的。	数据不会显示在 URL 中。