html概念、特点、发展、基本结构、注释、编码、标签、html特殊符号。

(这儿针对html4,html5的新特性以后介绍)

一.HTML概念及特点

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网.
无需编译，直接由浏览器执行
必须用.html或.htm作为后缀
大小写不敏感

二.HTML发展历史

HTML版本	时间及描述
HTML 1.0	超文本标记语言（第一版）——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）
HTML 2.0	1995年11月作为RFC 1866(由w3c)发布，在RFC 2854于2000年6月发布之后被宣布已经过时
HTML 3.2	1997年1月14日，W3C推荐标准
HTML 4.0	1997年12月18日，W3C推荐标准
HTML 4.01（微小改进）	1999年12月24日，W3C推荐标准
XHTML 1.0	2000年W3C发布
XHTML 1.1	2001年W3C发布
XHTML 2.0	?
\	2004. WHATWG HTML5草案
\	2008(合并). HTML5正式版
HTML 5(定稿)	2014年10月28日，W3C推荐标准

HTML 5合并

三.轻量级开发工具

sublime3
sublime text 3 用快捷键打开任意你想打开的默认浏览器

四.基础语法

1.HTML基本结构：

HTML标签
HTML元素
HTML属性
HTML注释

HTML基本结构图示

<!DOCTYPE html> 声明必须放在html文件开头，表明文件的类型为html，其不是html标签。

2.html注释

包含2种：无条件、有条件(注释)

无条件注释

 可注释行 or 块.
有条件注释

<!--[if IE 8]>
    .... some HTML here ....
<![endif]-->

3.html属性

语法1：<标签名属性1="" 属性2="" ... 属性n=""> 内容 </标签名>
语法2：<标签名属性1="" 属性2="" ... 属性n="" />

4.html页面编码设置

<head>
    <title> </title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>>

遇到的问题

chrome浏览器5.5版本后删去了鼠标右键设置当前网页编码的 "编码"菜单项。

可通过安装Chrome-Charset —— 用于在Google Chrome浏览器下修改网站默认编码的扩展程序)，其为github上开源项目。
下载地址：https://github.com/jinliming2/Chrome-Charset/releases

五.常用标签

1.文字和段落标签

1.1-标题标签：

<h1></h1> ~ <h6></h6>

<hr /> 标签在 HTML 页面中创建水平线。

1.2-段落标签：

<p> </p>

注释：浏览器会自动地在段落的前后添加空行。（<p> 是块级元素）.

提示：使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它！（但是不要用 <br /> 标签去创建列表。）

p标签的属性：align(文本的对齐方式)

属性值：left、right、center、justify(对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）).

p标签的align属性不建议使用，建议用css属性text-align代替。

1.3-换行标签

<br />

1.4-加粗标签 strong

2.列表标签

2.1-无序列表

<ul>
  <li> xxx </li>
  <li> yyy </li>
  <li> zzz </li>
</ul>

2.2-有序列表

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

HTML 与 XHTML 之间的差异

在 HTML 4.01 中，ol 元素的 "compact"、"start" 以及 "type" 属性是不被赞成使用的。

在 XHTML 1.0 Strict DTD 中，ol 元素的 "compact"、"start" 以及 "type" 属性是不被支持的。

提示：请使用 CSS 来定义列表的类型。

2.3-定义标签列表

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

<dl> 标签定义了定义列表（definition list）。

<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。

定义列表时：dl、dt、dd3个标签同时存在，dt、dd包含于dl,dt与dd为同级关系，不能互相包含。

3.图像和超链接标签

3.1-图像

注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。

<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" />

alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。

假设由于下列原因用户无法查看图像，alt 属性可以为图像提供替代的信息：

网速太慢
src 属性中的错误
浏览器禁用图像
用户使用的是屏幕阅读器

<img> 标签的 alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。

强烈推荐在文档的每个图像中都使用这个属性。这样即使图像无法显示，用户还是可以看到关于丢失了什么东西的一些信息.

关于src路径的问题

绝对 URL - 指向其他站点（比如 src="http://www.example.com/"）
相对 URL - 指向站点内的文件（比如 src="/i/image.gif"）

3.2-超链接

<a href=""> content </a>

在 HTML 4.01 中，<a> 标签可以是超链接或锚。在 HTML5 中，<a> 标签始终是超链接，但是如果未设置 href 属性，则只是超链接的占位符。

HTML5 提供了一些新属性，同时不再支持一些 HTML 4.01 属性。


<a href="#锚名1"> 目录1 </a>
<a href="#锚名2"> 目录2 </a>

<a href="..." name="锚名1"> 内容1 </a>
<a href="..." name="锚名2"> 内容2 </a>

属性	值	描述
charset	char_encoding	HTML5 中不支持。规定被链接文档的字符集。
coords	coordinates	HTML5 中不支持。规定链接的坐标。
download	filename	规定被下载的超链接目标。
href	URL	规定链接指向的页面的 URL。
hreflang	language_code	规定被链接文档的语言。
media	media_query	规定被链接文档是为何种媒介/设备优化的。
name	section_name	HTML5 中不支持。规定锚的名称。
rel	text	规定当前文档与被链接文档之间的关系。
rev	text	HTML5 中不支持。规定被链接文档与当前文档之间的关系。
shape	default rect circle poly	HTML5 中不支持。规定链接的形状。
target	_blank _parent _self _top framename	规定在何处打开链接文档。
type	MIME type	规定被链接文档的的 MIME 类型。

4.表格

表格的应用场景
表格的基本结构
表格的操作
表格的属性
表格跨行跨列
表格嵌套

表格的基本结构

<table border="1" align="center" bgcolor="red" cellpadding="10" cellspacing="20">
    <tr>
        <th>Month</th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$100</td>
    </tr>
</table>

table的属性

属性	值	描述
align	left center right	不赞成使用。请使用样式代替。规定表格相对周围元素的对齐方式。
bgcolor	rgb(x,x,x) #xxxxxx colorname	不赞成使用。请使用样式代替。规定表格的背景颜色。
border	pixels	规定表格边框的宽度。
cellpadding	pixels %	规定单元边沿与其内容之间的空白。
cellspacing	pixels %	规定单元格之间的空白。
frame	void above below hsides lhs rhs vsides box border	规定外侧边框的哪个部分是可见的。
rules	none groups rows cols all	规定内侧边框的哪个部分是可见的。
summary	text	规定表格的摘要。
width	% pixels	规定表格的宽度。

tr的属性

属性	值	描述
align	right left center justify char	定义表格行的内容对齐方式。
bgcolor	rgb(x,x,x) #xxxxxx colorname	不赞成使用。请使用样式取而代之。规定表格行的背景颜色。
char	character	规定根据哪个字符来进行文本对齐。注释：几乎没有浏览器支持 char 属性
charoff	number	规定第一个对齐字符的偏移量。
valign	top middle bottom baseline	规定表格行中内容的垂直对齐方式。

td的属性

属性	值	描述
abbr	text	规定单元格中内容的缩写版本。
align	left right center justify char	规定单元格内容的水平对齐方式。
axis	category_name	对单元进行分类。
bgcolor	rgb(x,x,x) #xxxxxx colorname	不赞成使用。请使用样式取而代之。规定单元格的背景颜色。
char	character	规定根据哪个字符来进行内容的对齐。
charoff	number	规定对齐字符的偏移量。
colspan	number	规定单元格可横跨的列数。
headers	header_cells'_id	规定与单元格相关的表头。
height	pixels %	不赞成使用。请使用样式取而代之。规定表格单元格的高度。
nowrap	nowrap	不赞成使用。请使用样式取而代之。规定单元格中的内容是否折行。
rowspan	number	规定单元格可横跨的行数。
scope	col colgroup row rowgroup	定义将表头数据与单元数据相关联的方法。
valign	top middle bottom baseline	规定单元格内容的垂直排列方式。
width	pixels %	不赞成使用。请使用样式取而代之。规定表格单元格的宽度。

4.1-带结构的表格

表格划分为4部分：表格标题(caption)、表头(thead)、主体(tbody)、脚注(tfoot)

<table border="1">
<caption>我的标题</caption>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

4.2-表格布局

尽量少使用表格嵌套
尽量少使用表格跨行跨列

特殊符号

参见：

原文地址：https://www.cnblogs.com/jsword/p/11348427.html

chtml入门(1)