HTML入门 学习笔记1
概念
学习html首先了解客户端和服务器端，文件名和扩展名，同时了解打开网页的执行过程、站点、什么是HTML。
客户端和服务器端
客户端：浏览者使用的计算机。
- 注意：管理员其实也是浏览者，所以管理员使用的也是客户端（在服务器上直接操作除外）。
服务器端：存放网页文件的计算机。
打开网页的执行过程：
- 客户端给服务器端发送一个请求，服务器响应将页面代码发送给客户端，这些代码通过浏览器解析执行就生成了我们看到的页面。
文件名、基本名、扩展名
文件名：由基本名和扩展名组成。
- 比如：demo.txt 其中demo是基本名，txt是扩展名。
扩展名：用于区分文件类型。
- 网页的扩展名包括：
- 静态网页的扩展名：html、htm
- （其他知识点：asp、aspx、php、jsp）
资源文件和站点
一个网站中包括HTML页面，css，JS，图片，flash动画或gif动画等，这些都属于资源文件。
为了便于管理，我么将这些这些静态资源放置到一个文件夹下。这个文件夹称为站点。
- 做网站的第一步要先建站点。
什么是HTML
HTML（HyperText Mark-up Language 超文本标记语言）
HTML语言的规则：
- 命令都要放到<>
- 大部分标记都是成对出现
- 标签大部分都是
<tag>开始</tag>结束 - HTML语言不区分大小写
网页的基本框架
一个页面必须具备如下框架：
通过记事本写网页
在站点文件夹新建一个txt文件，在文件中输入如下代码
<html>
<head>
<title>
欢迎进入html世界
</title>
</head>
<body>
这是我的第一个网页
</body>
</html>
更改文件扩展名为html或htm，保存并双击网页，通过浏览器打开，打开时可能出现乱码。
字符编码
- 关于查看时的乱码问题：记事本默认编码方式是ANSI，而ANSI编码与操作系统有关，如果出现乱码一般是与中文编码有关。浏览器打开时默认会用UTF-8编码方式打开，遇到中文会出现乱码。
- 在查看时解决中文乱码：设置浏览器查看的字符编码为GB2312。
常用字符编码：gb2312 简体中文、gbk 简体中文、utf-8 通用编码（推荐使用）
- 在head中插入
<meta charset="UTF-8">
charset作用：用来告诉浏览器用什么编码解析页面代码，这个编码要和文件编码一致。
标记(标签)
常用标记
常用标记-1
<p></p>：段落<br>：换行
- 注意：换段区别于换行，换段的间距大于换行的间距。
<hr>：水平线
常用标记-2
<b></b>：粗体<i></i>：斜体<u></u>：下划线
- 注意：成对的标记要注意内外嵌套关系。即使嵌套出现问题也不报错。因为HTML语言具有宽容性。
<strong></strong>：（通过加粗）强调<em></em>：（通过倾斜）强调
- 对比： 从外观上来看
<b>和<strong>、<i>和<em>是一样的，但是对SEO（搜索引擎优化）影响很大。<b>和<i>仅仅是字体，没有强调的作用，在实际工作中建议使用强调标记。
<sup></sup>：top 上标<sub></sub>：bottom 下标
- 常用标记的应用代码如下：
<html>
<head>
<title>
欢迎进入html世界
</title>
</head>
<body>
<p>
<b>锄禾日当午，</b><br>
<i>汗滴禾下土。</i><br>
<u>谁知盘中餐，</u><br>
<b><u><i>粒粒皆辛苦。</i></u></b>
</p>
<hr>
<strong>床前明月光，疑是地上霜。</strong>
<em>举头望明月，低头思故乡。</em>
<hr>
x<sup>2</sup>+y<sup>2</sup>=z<sup>3<sup> <br>
Fe<sub>3</sub>O<sub>4</sub> <br>
</body>
</html>
- 效果如下：
锄禾日当午，
汗滴禾下土。
谁知盘中餐，
粒粒皆辛苦。
床前明月光，疑是地上霜。 举头望明月，低头思故乡。
x 2+y 2=z 3
Fe3O4
标记的分类
标记分为两类：容器标记 和 空标记。
容器标记：成对出现的标记
- 比如：
<p></p>
空标记：不成对出现的标记
- 比如：
</br>
标记的属性
每个标记就是一个对象，每个对象都有属性。
一个对象有多个属性，属性和属性之间的关系是无序的。
格式：<元素 属性1=“值” 属性2=“值” …>
- 比如：
<hr width="300" color="#FF0000" size="15">
其他标记例子
滚动文字的设置
标记：<marquee></marquee>
属性：
- width 宽度
- direction 滚动方向：left向左(默认)
- scrollamount 滚动数量：用于控制滚动速度
- onmouseover 当鼠标移上时：设置鼠标经过时的动作，当取值为stop() 设置为鼠标经过时停止滚动。
- onmouseout 当鼠标移开时：设置鼠标离开时的动作，当取值为start() 设置为鼠标离开时开始滚动。
- behavior 行为：scroll滚动(默认) alternate交替 slide单次
<!DOCTYPE>标签
详细资料查询：http://www.w3school.com.cn/tags/tag_doctype.asp
- 声明必须是 HTML 文档的第一行，位于 标签之前。
- 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
关于W3C
W3C world wide web consortium 万维网协会
W3C的规范
W3C的规范有很多，重要的规范如下：
- 一个页面只能有一个根元素
- 标记必须成对出现（不允许空标记）
- 空标记有时带斜杠是为了遵循W3C定义的规范 比如：
<br />
关于路径
在学习链接前，首先了解有关路径的知识点。
路径分为两种，分别是绝对路径和相对路径。
绝对路径：从盘符开始的路径。
- 比如：
F:/web/test.html
相对路径：以自身文件为准的路径。
- 比如：
web/test.html - 注意：
../代表上一级目录./代表当前目录（可忽略不写）
链接
标记：<a></a>
属性：
- href ：指定超链接目标的 URL
- target：指定超链接目标使用的浏览器 取值:
_blank表示在新窗口打开
分类
内部链接：网页内部页面和页面之间的链接，参照路径知识。
外部链接：链接到其他网站。
- 注意：外部链接的地址要写全
空链接
空链接： <a href="#">空链接</a>
下载链接
对于链接的文件，浏览器无法打开则自动出现下载文件。
锚链接
锚链接：用id表示唯一编号，连接到指定锚点处。例如：
<a href="#no1">锚1</a><br>
<a id="no1">锚1</a>
- 跳到其他页面的锚点语法：
<a href="其他页面.html#no2">锚2</a><br>
标题
<h1></h1>：一级标题
<h2></h2>：二级标题
<h3></h3>：三级标题
<h4></h4>：四级标题
<h5></h5>：五级标题
<h6></h6>：六级标题
- h1到h6，标题也是有权重的。
列表
有序列表
- order list
标记：
<ol>
<li>有序列表内容1</li>
<li>有序列表内容2</li>
</ol>
- 有序列表标签是
<ol>，每一项是<li>标签
属性：
- type类别 取值：1、a、A、i、I
- start开始 表示该列表从第几个值开始 取值：1、2、3…
无序列表
- unorder list
标记：
<ul>
<li>无序列表内容1</li>
<li>无序列表内容2</li>
</ul>
- 无序列表标签是
<ul>，每一项是<li>标签
属性：
- type类别 表示无序列表前的 取值：circle圆圈、disc圆点（默认）、square小 方格
自定义列表
- define list
标记：
<dl>
<dt>自定义列表内容1</dt>
<dd>自定义列表内容2</dd>
<dt>自定义列表内容3</dt>
<dd>自定义列表内容4</dd>
</dl>
- 自定义列表标签是
<dl>，每项是<dt>和<dd>标签