html特点

HTML不是编程语言，而是一种标记语言，就是用来描述网页内容的特定符号；
用该语言编写的文件，以.html 或者.htm 为后缀；
由浏览器解释运行；
HTML是一种扩展性很强的语言，可以嵌套脚本语言，如：JavaScript；

版本信息

在文档的起始用DOCTYPE声明指定的版本和风格，让浏览器清楚文档的版本和风格。版本信息分为三种：严格型（不包含弃用的元素（比如 font），不允许frameset）、传统型（包含弃用的元素（比如 font），不允许frameset）、框架型（包含弃用的元素（比如 font），允许frameset）；而目前html5统一使用<!DOCTYPE html>
注：<!DOCTYPE> 声明必须在HTML文档的第一行，位于<html>标签之前；DOCTYPE声明是必不可少的,<!DOCTYPE> 声明不是 HTML 标签；它告诉浏览器该页面是使用哪个 HTML 版本编写的；
注：HTML 4.01 与 HTML5 之间的差异：在 HTML 4.01 中有三种 <!DOCTYPE> 声明；而在 HTML5 中只有一种：<!DOCTYPE html>

html标记的语法

标记分为两种：单标记、双标记
<标记符>没有结束的标记 — 单标记
<开始标记符></结束标记符> — 双标记
注：在xhtml中规定，所有html标记都要小写，所有的标记都要有关闭符号。如：<hr /> 

meta标记

meta标记是对网页文件的说明，便于搜索引擎查找，放置于<head></head>之间。
设置关键字：<meta name = "keywords" content = "关键字">多个关键字之间用“,”分隔
设置描述： <meta name = "description" content = "对关键字的扩展说明">
设置页面定时跳转：<meta http-equiv = "refresh" content = "2;URL = http://www.baidu.com"/>其中2代表2秒

语义标记

普通加粗标记：文字内容 普通倾斜标记：文字内容，二者都没有在语义上突出重点的意思
语义加强加粗标记：文本内容 语义加强的倾斜标记：文本内容，二者都告诉了浏览器，加粗或倾斜的是重点
下划线文本 删除线<s>文本</s> 上标文本 下标文本 换行标记
段落标记
注：用适合的html标记，去描述网页内容，这才是网页优化的核心

标题

<hn>标题内容<hn> ，标题标记，n的取值范围是1 – 6，标题标记内的文本会以加粗方式显示。

换行标记

 在一个段落内换行。

水平分割线

主要属性：
size属性，像素值和百分比，数值越大，线越粗；
width属性，像素值和百分比，决定线的长度。其中，像素值是一个绝对的值，不会随着窗体大小的改变而改变；

xhtml中的属性值

在xhtml中，所有的标签都必须有属性值，如果没有就用属性名，例如：<input checked = "checked" />

特殊标记

居中：<center>……</center> (在xhtml中已被废弃)；
预格式化：<pre></pre>

特殊字符（转义符）的输入

空格： 或者&emsp;
"："
＆：&
＜：<
＞：>

列表

无序列表<ul>...</ul> [Unordered List]
语法：

<ul type = "符号类型">
    <li>列表内容1</li>
</ul>

说明：符号类型有三种，disc是实心圆圈，circle是空心圆○，square是正方形

有序列表<ol>...</ol> [Order List]
语法：

<ol type = "符号类型">
    <li>列表内容1</li>
</ol>

说明： type属性的值有：1、a、A、i、I。
1 表示编号从阿拉伯数字1开始依次往后
a 表示小写英文字母 a、b、c、d
A 表示大写英文字母 A、B、C、D
i 表示小写的罗马数字 i、ii、iii、iv
I 表示大写的罗马数字 I、II、III、IV

图片

语法：<img src = "图片路径" />
属性：

src：图片的路径，URL
alt：图片的替代文本（图片无法显示时）
title：鼠标悬停时显示的内容

网页布局思想

传统的table标记，发展到DIV+CSS；
从左到右，从上到下；

table标记

【1】基本结构：
    ●<table>...</table>定义表格
    ●<tr>...</tr>定义表行
    ●<td>...</td>定义单元格
    ●<th>...</th>定义标题栏（文字加粗）
【2】属性：
    ●<table cellpadding = "">，单元格边框与内容之间距离的大小，默认为2，内填充。
    ●<table cellspacing = "">，设置单元格之间空间的大小（单元格间距），外填充。
【3】列（单元格）<td>的属性：
    ●<td rowspan = "">，设置行合并的数目（垂直合并）。
    ●<td colspan = "">,设置列合并的数目（水平合并）。

注：当<td></td>之间没有内容时，默认是不显示边框的，如果想看到，可以加上

表格的标题

<caption>...</caption>

表格的结构化

    <table>
        <thead>...</thead>，表头区。
        <tbody>...</tbody>，表体区。
        <tfoot>...</tfoot>，表尾区。
    </table>

表格案例

实现下图效果：

<tr>
    <th colspan="2">a</th><th rowspan="2">b</th>
</tr>
<tr>
    <th rowspan="2">c</th><th>d</th>
</tr>
<tr>
    <th colspan="2">e</th>
</tr>

超链接

语法：

<a href = 链接到的地址 target = "打开窗口的形式">显示内容</a>

_self在自身窗口中打开（默认值）
_blank在新窗口中打开
超链接的分类：

内部链接：
当前文档与目标文档在同一站点内。<a href = "目标文档路径及文件名"></a>
外部链接：
当前文档与目标文档不再同一站点内。<a href = URL></a>
局部链接（锚点）：
跳转到同一网页或其他文档中的指定位置。用法：
创建锚点：<a name = "锚点名称">显示内容</a>
链接锚点：<a href = "#锚点名称">显示内容</a>
脚本链接：
是一种特殊的链接，当单击设置脚本的文本或图像时，就会执行相应的javascript语句。

<a href = javascript:window.open("www.sina.com.cn")>新浪</a>
关闭窗口：<a href = javascript:window.close()>关闭窗口</a>
打开窗口：<a href = javascript:window.open('文件名')>打开窗口</a>
执行自定义函数<a href="javascript:myF()">弹出一句话</a>

HTML表单

    【1】form（表单）标记用于创建一个表单，定义表单的开始与结束。所有表单元素必须在<form></form>标记中才有作用。
    【2】语法：
        <form action = URL method = GET/POST 默认提交方式为GET >
            表单元素
        </form>
    【3】表单元素标记：
        ●单行文本框：
            <input name = "文本框名称" type = "text" placeholder="提示信息" readonly = "readonly"(设置为只读) />
        ●密码框：type = "password"
        ●单选框：
            <input name = "单选框名称" type = "radio" value = "提交值" checked = "checked"(被选中) />
            注意：单选框的name属性要一样，否则无法单选，即可以使用name属性分组
        ●复选框：
            <input name = "复选框名称" type = "checkbox" value = "提交值" checked = "checked" />
        ●提交按钮：submit
        ●重置按钮：<input type = "reset" value = "取消" />，重置按钮会清除表单中的所有数据
        ●列表框：
            下拉菜单式：  
                    <select name = "名称">
                        <option selected = "selected"(定义初始选择) value = "提交值">列表1</option>
                        <option value = "提交值">列表2</option>
                    </select>
            列表式：    
                    <select name = "名称" size = "显示的行数" multiple="multiple"(写上代表允许多选)>
                        <option value = "提交值">列表1</option>
                        <option value = "提交值">列表2</option>
                    </select>
            注：只要加上size属性并且size大于1，即可实现下拉菜单式到列表式的转换。
        ●文件浏览框：file
        ●按钮：<input type = "按钮类型（reset重置表单、submit提交表单、button普通按钮、）"  value = "按钮显示内容">
        ●图形按钮：<input type = "image" src = "图片路径" />
        ●多行文本框：
            <textarea name = "文本框名称" cols = "每行中的字符数" rows = "显示的行数">
                初始内容
            </textarea>
        ●隐藏域：<input type = "hidden" value = "提交值" />
    【4】input标注<label>...</label>：
        <label>标注内容</lable>标签为input元素定义标注。lable元素的for属性应与相关元素的id属性相同。
     eg: <input type = "radio" name = "sex" value = "男" id = "man"><label for = "man">男</label>
        label标记，可以点击里面的“男”而达到选中单选框的效果，改善用户体验度。

html与xhtml 1.0的区别

xhtml 标签必须被正确的关闭；
标签名必须用小写字母；
属性名必须小写，必须有值；

HTML4.01