HTML学习总结
HTML学习
HTML是用来描述网页的一种语言。
HTML指的是超文本标记语言:HyperTextMarkupLanguage。HTML不是一种编程语言，而是一种标记语言;标记语言是一套标记标签(markup tag);HTML使用标记标签来描述网页;HTML文档包含了HTML标签及文本内容;
HTML文档也叫做web页面
HTML5.0，2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成
<!DOCTYPE> 声明（用来让浏览器辨别目前处理的文件时HTML5文件）
<!DOCTYPE>声明有助于浏览器中正确显示网页。网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
doctype声明是不区分大小写的
HTML<!DOCTYPE>声明（下面网页有详细说明）
解决中文编码乱码问题:
在头部将字符声明为 UTF-8
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
HTML编辑器推荐
可以使用专业的 HTML 编辑器来编辑 HTML，为大家推荐几款常用的编辑器：
Notepad++：https://notepad-plus-plus.org/
Sublime Text：http://www.sublimetext.com/
HBuilder：http://www.dcloud.io/
HTML元素语法
HTML元素以开始标签起始,HTML元素以结束标签终止,元素的内容是开始标签与结束标签之间的内容,某些 HTML元素具有空内容（empty content）;
空元素在开始标签中进行关闭（以开始标签的结束而结束）;大多数 HTML元素可拥有属性
HTML提示：使用小写标签
HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。W3CSchool使用的是小写标签，因为万维网联盟（W3C）在 HTML 4中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写
HTML超链接（链接）
在标签<a> 中使用了href属性来描述链接的地址。默认情况下，链接将以以下形式出现在浏览器中：
一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。
使用target属性，你可以定义被链接的文档在何处显示
HTML<head>元素
<head>元素包含了所有的头部标签元素。在<head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。可以添加在头部区域的元素标签为:
<title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>
如何使用CSS
CSS是在 HTML4开始使用的,是为了更好的渲染HTML元素而引入的。
CSS可以通过以下方式添加到HTML中:
内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head> 区域使用<style>元素来包含CSS
外部引用 - 使用外部CSS文件
最好的方式是通过外部引用CSS文件
HTML图像-图像标签（<img>）和源属性（src）
src 指 "source"
源属性的值是图像的URL地址;alt属性用来为图像定义一串预备的可替换的文本;height（高度）与width（宽度）属性用于设置图像的高度与宽度
注意: 假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。
注意: 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。
HTML表单
表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：
文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等
HTML框架
iframe语法:
<iframe src="URL"></iframe>，该URL指向不同的网页。
HTML脚本
JavaScript使HTML页面具有更强的动态和交互性
<script>标签用于定义客户端脚本，比如JavaScript。<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。JavaScript最常用于图片操作、表单验证以及内容动态更新。
URL-统一资源定位器
scheme://host.domain:port/path/filename
说明:
scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3cschool.cc
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称
HTML速查表：
http://www.runoob.com/html/html-quicklist.html
XHTML是以 XML 格式编写的 HTML。
xhtml，可扩展超文本标记语言。HTML是一种基本的WEB网页设计语言，XHTML是一个基于可扩展标记语言的标记语言，看起来与HTML有些相象，只有一些小的但重要的区别，XHTML就是一个扮演着类似HTML的角色的可扩展标记语言（XML），所以，本质上说，XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。
什么是 XHTML?
XHTML 指的是可扩展超文本标记语言；XHTML 与 HTML 4.01 几乎是相同的；XHTML 是更严格更纯净的 HTML 版本；XHTML 是以 XML 应用的方式定义的 HTML；XHTML 是2001年1月发布的W3C推荐标准；XHTML 得到所有主流浏览器的支持。
HTML教程
HTML5教程
HTML5开发开发知识体系图
HTML技术
静态网页是网站技术的基础
网页头部包括：
文档类型（doctype定义当前页面使用的标记语言）
编码类型（context charset设置正文中字符的格式GB2312、UTF-8、HZ）页面标题（title设置当前网页的标题）。
正文是整个网页的核心，显示的主要内容和显示格式，标记“<body>…</body>”，常用属性：background/bgcolor/text/link/clink/alink。
注释：方便用户对代码的理解、对系统程序的后续维护（<!—注释内容-->）
标题文字：<hn align=对齐方式>标题文字</hn>，n为1-6的整数值，取1时最大，6最小。align的属性值为left,center,right。
文本文字：<font size= face= color= >被设置的文字</font>
字型设置：<B></B><I></I><U></U>等。
段落标记：<p align = 对齐方式></p>。
<br>换行、<strong>文字</strong>加粗、<hr color= size= width=>画线
链接：页面链接（内部和外部）：<a href = 地址 name = 字符串 target = 打开窗口方式>热点</a>
href为超文本引用，取值为URL，资源在自己的服务器上，写相对路径，否则写绝对路径，href与name不能同时使用。
“_blank new _parent _slef _top 框架名称”。
还有Telnet链接、E-mail链接、FTP链接、新闻组链接、WAIS链接。
<a href=”Telnet:地址”>热点</a>
<a href=”mailto:邮箱地址”>热点</a>
<a href =”FTP:目标地址”>热点</a>
<a href = “news:目标地址”>热点</a>
<a href = “WAIS:目标地址”>热点</a>
图片：通常有GIF<Graphics Interchange Format>图形交换格式和JPEG<Joint Photographic Expets Group>有损压缩格式，
<body background = 图片文件名>相对路径和绝对路径。
<img src = alt = width = height = border = hspace= vspace align = >，
设置图片链接：<a href = 地址><img src = 图片文件名></a>
无序列表<UL><LI>，有序列表<OL><LI>
HTML页面布局
表格标记
<table>创建表格，<tr>创建行，<td>创建表项；表格标题<CAPTION align= valign>标题</CAPTION>；
表格设置和处理：跨列和跨行-colspan、rowspan，表格页眉,<th scope=”col/row”></th>，表格对齐，单元格大小。thead tbody tfoot
align水平方向的对齐方式，vlign垂直方向的对齐方式。Justify左右调整。
框架标记
<FRAMESET>、<FRAME>，<FRAMESET>与<BODY>作用相同、不能同时出现。分帧，分成的窗体是相互独立的。
HTML中有一张图片，两次请求，两次响应；HTML中有十张图片（都不同），十一次请求，十一次响应。若有相同的，请求次数减少。
层标记
div-division区分、对称双标记，使用div标签可以创建CSS布局块。<div align= ></div>AP元素是绝对定位元素。
处理表单
实现动态网页效果的基础。
表单标记：数据交互、Textarea Select Input
form标记
<form action= method= enctype= name= target= >
数据传送方式
post直接传输数据和get附加到URL的尾部
区别：数据在数据包中的位置不同，get方式将数据放在数据包的头部，post方式将数据放在数据包的身体中；get提交数据，地址栏发生变化，post方式提交数据地址没有变化；字节和字符，get方式提交数据时只有以字符提交，post两者都可使用，默认情况下使用字符；get方式提交数据，数据的长度有上限，post方式提交数据理论上没有上限。
文本域
收集页面的信息，<label><input type = name= id= ></label>，使用文本域，<label><textarea name= id= cols= rows= ></textarea></label>
按钮
<label><input type= name = id= value=></label>（button通用表示方法 submit提交按钮 reset重设按钮）
单选按钮：<label><input type= “radio” name = id= value=></label>
复选按钮：<label><input type= “checkbox” name = id= value=></label>，列表菜单：<label><select name= id=><option value=></option><option value= ></option></label>
文件域：<label><input name= type=”file” id= size= maxlength=></label>，图像域：<label><input name= type=”image” id= src= alt= align= height= width=></label>
隐藏域：<label><input name= type=”hidden” id= value=></label>。要使标签一个组，name属性 相同即可。
特效和多媒体处理
滚动效果：<marquee bgcolor= behavior= direction= scrollamout= scrolldelay= height= width= truespeed=></marquee>
背景音乐：代码指定方式<bgsound src= loop= delay= volume= balance=> 媒体插件：<embed src= autostart= controls= loop= ></embed>
插入Flash：<object classid= codebase= width= height=><param name= value=><param name= value=><embed src= type= ></embed></object>
使用ActiveX控件：<object> </object>
XML与HTML的区别
XML是用来存储数据的，重在数据本身；HTML是用来定义数据的，重在数据的显示模式。未来的WEB开发中：XML用来描述数据，HTML用来格式化和显示数据（XML和HTML的结合）。
HTML中实现空格：键盘、<p></p>、 、域格式化命令<PRE></PRE>、CSS实现。
网站内部链接优化：网站导航、面包屑导航、相关性导航、网站地图。<SEO优化-搜索引擎优化>外部链接。
HTML(Hyper Text Markup Language)超文本标记（置标）语言，元数据，HTML标签：展示数据的标签和收集数据的标签。
头部文件<Doctype，在所有代码和标签之前>：严格型（标签成对、小写，双引号）、过渡型（规范松一些）。
构成Web页面（page），表示Web页面的符号标签语言。最早源于SGML（Standard General Markup Language，标准通用化置标语言），90年于Tim Berners-Lee创立。HTML4.0于97年12月被W3C推荐为正式标准。
HTML5元素：内嵌、流、标题、交互、元数据、短语、片段7类。
结构：html head body
head中有title（显示在浏览器标题中） meta link style script；
块级元素：body hr p div br独占一行；
内联元素；注意：HTML中使用标签时要考虑浏览器支持该标签。单标签、双标签。并不是所有的标签都有属性、属性之间没有顺序、注意小写、属性值要用双引号括起来。
静态资源：HTML、CSS、JS、图片、声音、、、
动态资源：程序（Java、C#、PHP）
注意：
全球资讯网（World Wide Web，WWW）,WWW的主要目的就是资源共享
浏览器网址栏中输入的网址，又称URL（Uniform Resource Locator）
浏览器会到指定的网址取得网页，工作原理：浏览器通过HTTP通讯协议，向指定网址的服务器提出请求（Request），向服务器请求指定的网页（资源）
HTML文件中仅包含文字，标记文件结构的语言
前端与后端，用户端与服务端技术
<meta>元素没有结束标签，只有单一的起始标签，此元素称为空元素
文字强调：
b元素：粗体字
i元素：斜体字
u元素：给文字加上底线
特殊符号：
<:表示小于
>:表示大于
:表示空格
HTML实体
目前通行的URL Scheme不止百种
列表元素ul/ol，可以设置start属性
表格table，colspan:表示单元格要横向跨过多少列，rowspan:表示单元格要纵向跨过多少行
form中不能再加入另一个form元素，也就是不能创建嵌入式的表单
表单的URL中，后面先接“？”，再接表单信息，“框名称=信息”，中间配合&
表单提交中的两种方式
Get：默认方式，将表单信息附在URL后面直接送出，
Post：将表单信息附加在HTTP通讯包中送出，在需要上传大量数据（上传文件）或不想让用户在地址栏看到内容信息的情况（隐藏表单信息）
优化表单的元素：
Fieldset:将多个输入框组合在一起，legend:说明文字，label：用于表示输入框前的相关文字
利用元素的属性改变输入框的操作行为：
Autofocus:网页载入时，自动获取输入焦点
Placeholder：设定显示在输入框中的提示信息
Autocomplete=“off”:关闭自动输入的功能
Required：表示此框为必填框，若未输入，浏览器将不会提交表单