# HTML入门
### C/S与B/S架构
- C/S架构
- client：客户端
- server：服务器
- B/S架构
- browser：浏览器
- server：服务器
### WEB工作原理
- 浏览器 => 服务器：发送请求，索取相关数据。
- 服务器 => 浏览器：接收请求并解析，处理业务，返回数据(响应)
- 页面组成：HTML、CSS、JS
### 开发工具
- 编辑工具：notepad++
- 测试工具：chrome
### HTML简介
- 说明：超文本标记语言，所见即所得的文本
- 后缀：.html或.htm，现在统一使用.html
### 标签格式
- 格式：
- 双边：`<标签名 属性1="值1" 属性2='值2' 属性3=值3>内容</标签名>`
- 单边：`<标签名 属性1="值1" 属性2='值2' 属性3=值3 />`
- 特点：
- 成对出现
- 容错性强
- 标签名已预定义
- 全部小写，注意格式
- 属性使用双引号包括
- 说明：标签就是HTML的骨架，最重要的组成部分。
### 全局架构标签
- 示例：
```html
<html>
<!--注释-->
<head>
<title>网页标题</title>
</head>
<body text="red" bgcolor="#0000ff">
这是页面的内容
</body>
</html>
```
- 说明：
- html：是文档中最大的标签，所有标签都要放在该标签内部
- head：头部，存放页面显示以外的内容，如：标题、字符集等
- body：身体，存放页面要显示的内容，其中的内容会显示在页面中。
- 属性：
- text：字体颜色
- bgcolor：背景色
- 几乎每个标签都有的属性：
- class、id、name、style
- 后面集合CSS与JS经常使用
### 常用标签(文本修饰)
- 标题：h1~h6，字体从大到小；h1一个页面中最多一个，不要为了调整字体大小而使用。
- 加粗：`<b></b>、<strong></strong>`
- 斜体：`<i></i>、<cite></cite>、<em></em>`
- 下划线：`<u></u>`
- 删除线：`<s></s>`
- 上标：`<sup></sup>`
- 下标：`<sub></sub>`
- 字体：`<font></font>`
- size：大小
- color：颜色
- face：脸型(字体类型)
### 常用标签(格式控制)
- 换行：`<br />`，对于任意多个空格或回车，浏览器都解析为一个空格
- 段落：`<p></p>`，表示一个段落
- 横线：`<hr />`，水平的直线
- 滚动：`<marquee></marquee>`
- 原样：`<pre></pre>`，浏览中显示的内容与文档中的格式一样
- 无序列表：`<ul></ul>`，其中的每个元素都是一个`<li></li>`
- type：disc(实心圆，默认)，circle(空心圆)，square(实心方框)
- 有序列表：`<ol></ol>`
- type：1、a、A、I
- start：序号的其实位置
### 字符实体
- 说明：HTML 中的预留字符必须被替换为字符实体，否则无法显示。
- 提醒：不用刻意记录字符实体，用的时候查一下就可以了。
- 示例：
```
< 小于 <
> 大于 >
空格
& &
```
- 参考：http://www.w3school.com.cn
### URL(重点)
- 说明：统一资源定位符，是URI的一种，可以唯一的标识一个网络资源。
- 组成：协议://主机:端口/文件?参数1=值1&参数2=值2
- http：80端口，会自动省略
- https：443端口
- 例子：http://www.baidu.com:80/index.html?page=3&wd=python
### 超链接(a)
- 名称：`<a></a>`
- 说明：超链接，可以完成页面的跳转
- 属性：
- href：指定跳转地址
- title：光标放上去的提示信息
- target：新页面的打开目标
- _self：当前标签栏
- _blank：新的空白标签栏
- _parent：覆盖父级页面
- _top：覆盖最外层页面
- name：设置锚点，可以用于跳转定位
- 设置该属性后，可以根据其值进行跳转定位(设置a标签的href属性)
- 如：`<a name="p5"></a>`，使用：`<a href="xxx#p5"></a>`
- 说明：不但可以在一个页面内部跳转，也可以在不同页面间跳转。
