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>声明（下面网页有详细说明）

http://www.w3school.com.cn/tags/tag_doctype.asp

http://blog.****.net/jeofey/article/details/46328947

解决中文编码乱码问题:

在头部将字符声明为 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学习总结

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教程

http://www.runoob.com/html/html-tutorial.html

HTML5教程

http://www.runoob.com/html/html5-intro.html

HTML5开发开发知识体系图

http://www.jikexueyuan.com/path/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）