weblog_post_type: post
weblog_title: html入门(1)
weblog_categories: ["html"]
weblog_mt_keywords: "web前端,html"
---
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推荐标准 |
三.轻量级开发工具
sublime3
sublime text 3 用快捷键打开任意你想打开的默认浏览器
四.基础语法
1.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 |
| HTML5 中不支持。规定链接的形状。 |
| target |
| 规定在何处打开链接文档。 |
| 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 |
| 不赞成使用。请使用样式代替。 规定表格相对周围元素的对齐方式。 |
| bgcolor |
| 不赞成使用。请使用样式代替。 规定表格的背景颜色。 |
| border | pixels | 规定表格边框的宽度。 |
| cellpadding |
| 规定单元边沿与其内容之间的空白。 |
| cellspacing |
| 规定单元格之间的空白。 |
| frame |
| 规定外侧边框的哪个部分是可见的。 |
| rules |
| 规定内侧边框的哪个部分是可见的。 |
| summary | text | 规定表格的摘要。 |
| width |
| 规定表格的宽度。 |
tr的属性
| 属性 | 值 | 描述 |
|---|---|---|
| align |
| 定义表格行的内容对齐方式。 |
| bgcolor |
| 不赞成使用。请使用样式取而代之。 规定表格行的背景颜色。 |
| char | character | 规定根据哪个字符来进行文本对齐。注释：几乎没有浏览器支持 char 属性 |
| charoff | number | 规定第一个对齐字符的偏移量。 |
| valign |
| 规定表格行中内容的垂直对齐方式。 |
td的属性
| 属性 | 值 | 描述 |
|---|---|---|
| abbr | text | 规定单元格中内容的缩写版本。 |
| align |
| 规定单元格内容的水平对齐方式。 |
| axis | category_name | 对单元进行分类。 |
| bgcolor |
| 不赞成使用。请使用样式取而代之。 规定单元格的背景颜色。 |
| char | character | 规定根据哪个字符来进行内容的对齐。 |
| charoff | number | 规定对齐字符的偏移量。 |
| colspan | number | 规定单元格可横跨的列数。 |
| headers | header_cells'_id | 规定与单元格相关的表头。 |
| height |
| 不赞成使用。请使用样式取而代之。 规定表格单元格的高度。 |
| nowrap | nowrap | 不赞成使用。请使用样式取而代之。 规定单元格中的内容是否折行。 |
| rowspan | number | 规定单元格可横跨的行数。 |
| scope |
| 定义将表头数据与单元数据相关联的方法。 |
| valign |
| 规定单元格内容的垂直排列方式。 |
| width |
| 不赞成使用。请使用样式取而代之。 规定表格单元格的宽度。 |
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-表格布局
- 尽量少使用表格嵌套
- 尽量少使用表格跨行跨列
特殊符号
参见：