前端学习秘籍——HTML
一. WEB标准
自定义标题
- 一. WEB标准
- 1.认识网页
- 2.浏览器（显示代码）
- 3.浏览器的内核
- 4.WEB标准
- 二. HTMl
- 1.HTML骨架格式：
- 2.HTML常用标签
- 3.表格table的使用
- 4.列表的使用
- 5.表单的使用
1.认识网页
网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。
2.浏览器（显示代码）
浏览器是网页显示、运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。
3.浏览器的内核
| 浏览器 | 内核 |
|---|---|
| IE | Trident (读try dent) |
| firefox（没落了） | Gecko（读get ko） |
| Safari | webkit |
| chrome | Chromium/Blink |
| Opera | Blink |
移动端的浏览器内核主要说的是系统内置浏览器的内核。
Android手机而言，使用率最高的就是Webkit内核，大部分国产浏览器宣称的自己的内核，基本上也是属于webkit二次开发。
iOS以及WP7平台上，由于系统原因，系统大部分自带浏览器内核，一般是Safari或者IE内核Trident的。
4.WEB标准
Web标准不是某一个标准，而是由W3C组织和其他标准化组织制定的一系列标准的集合。
W3C 万维网联盟是国际最著名的标准化组织。
WEB标准的好处
遵循web标准可以让不同我们写的页面更标准更统一外，还有许多优点
1、让Web的发展前景更广阔
2、内容能被更广泛的设备访问
3、更容易被搜寻引擎搜索
4、降低网站流量费用
5、使网站更易于维护
6、提高页面浏览速度
WEB标准构成
主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。
结构：用于对网页元素进行整理和分类，咱们主要学的是HTML。
表现：用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
行为：是指网页模型的定义及交互的编写，咱们主要学的是 Javascript。
二. HTMl
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
html的作用：网页是由网页元素组成的 ， 这些元素是利用html标签描述出来，然后通过浏览器解析，就可以显示给用户了。
所谓超文本，有2层含义：
- 因为它可以加入图片、声音、动画、多媒体等内容（超越文本限制 ）
- 不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。
1.HTML骨架格式：
<!DOCTYPE html> <!--就是告诉浏览器按照HTML5 规范解析页面. -->
<html lang="en"> <!-- 指定该html标签 内容 所用的语言为英文 zh-CN为中文 -->
<head>
<meta charset="UTF-8"> <!-- 让 html 文件是以 UTF-8 编码保存的， 浏览器根据编码去解码对应的html内容 -->
<title>Document</title>
</head>
<body>
</body>
</html>
2.HTML常用标签
h：标题标签 h1-h6
<h1>标题标签</h1>
p：段落标签
<p>段落标签</p>
hr：水平线标签
**<hr /> 是单标签**
br：换行标签
**<br /> 单标签**
div span：没有语义的标签（重点）
- div标签 用来布局的，但是现在一行只能放一个div
- span标签 用来布局的，一行上可以放好多个span
<div> 这是头部 </div> <span>今日价格</span>
strong em del ins ：文本格式化标签(熟记)
img：图像标签（重点）
<img src="图像的地址" />
<img src="" alt="图像不见显示我" title=" 鼠标经过我就出现" width="图片的宽" height="图片的高">
引用路径的问题：
同一级路径：src=“baidu.jpg”
下一级路径：src=“images/baidu.jpg”
上一级路径：src=…/baidu.jpg
a：链接标签（重点）
<a href="跳转目标" target="目标窗口的弹出方式 _blank表示打开新窗口">文本或图像</a>
注意：
- 外部链接 需要添加 http:// www.baidu.com
- 内部链接 直接链接内部页面名称即可 比如 < a href=“index.html”> 首页
- 如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
- 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
base ：设置整体链接的打开状态
<base target="_blank" /><!-- 写在head里面 -->
特殊字符的代码
3.表格table的使用
表格的基本语法：
<table>
<tr> <!--行-->
<td>单元格内的文字</td> <!--单元格-->
</tr>
</table>
案例：
<table width="500" height="300" border="1" cellpadding="20" cellspacing="0" align="center">
<caption>表格标题</caption>
<th> <th>姓名</th> <th>性别</th> <th>年龄</th> </th>
<tr> <td>刘德华</td> <td>男</td> <td>55</td> </tr>
</table>
cellspacing 设置单元格与单元格之间的距离h
cellpadding 设置单元格内容与单元格边距的距离
caption：表格的标题，写在table里，文字会在表格的上方加粗和居中
th 为表头单元格标签，会加粗文本并居中
单元格合并的问题解决：
- 先确定是跨行（rowspan）还是跨列（colspan)合并
- 根据 先上 后下 先左 后右的原则找到目标单元格 然后写上 合并方式 还有 要合并的单元格数量 比如 ：
- 删除多余的单元格 单元格
表格划分结构（了解）
4.列表的使用
无序列表ul：
无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
有序列表ol：
有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
自定义列表dl：
定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
5.表单的使用
在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。
表单控件 input：（重点）
语法如下：
<input type="属性值" value="你好">
标签为单标签
常用的属性：
label标签----提供用户体验
当我们鼠标点击 label标签里面的文字时， 光标会定位到指定的表单里面
语法如下：
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
文本域标签textarea
<textarea> </textarea>
select 下拉列表
<select>
<option selected="selected">选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
form 表单域
<form action="服务器程序的url地址" method="提交方式get/post" name="表单名称">
各种表单控件
</form>
