你对力量一无所知！？
哈佛学习法
先听与看——>刻意练习——>分享
何为网页？
-
- 网站
网页的集合——{网页1,网页2,...}
-
- 网页
一页，本质为【.html】文件
何为元素？
文字、图片、声音、视频、链接等
HTML是什么？
HTML全称Hypertext Markup Language（超文本标记语言）——前端语言
常见浏览器
根据内核不同，做如下区分：
-
- Trident 内核
IE、猎豹、360、百度...
-
- Gecko 内核
Firefox（火狐）...
-
- Webkit 内核
Safari（苹果）...
-
- Blink 内核
Chrome、Opera...
W3C标准是什么？
开发人员——>W3C标准——>XXX浏览器——>展示同一内容
W3C定义：
-
- 结构（Structure）——网页元素（HMTL）
- 表现（Presentation）——外观样式（CSS）
- 行为（Behavior）——交互动作（JavaScript）
一般的开发顺序为：
HTML（定义页面）——>CSS（修饰页面）——>JavaScript（定义交互），这样一来可以做到“结构/表现/行为”的分离模式。
标签是什么？
标签由“<”和“>”构成，根据起止标签划分为：
-
- 单标签（空标签）
如：<br />
PS：但凡是单标签，推荐写法为<xxx />；不要问为什么，就显得很专业。
-
- 双标签
如：<html></html>
标签关系
-
- 包含关系（父子关系）——嵌入
- 并列关系
<html><!-- html和head、body属于包含关系 -->
<head></head><!-- head和body属于并列关系 -->
<body></body><!-- head和body属于并列关系 -->
</html>
骨架标签
<html><!-- 根标签 -->
<head><!-- 文档头部 -->
<title></title><!-- 文档标题 -->
</head>
<body></body><!-- 文档主体 -->
</html>
字符集
<meta charset="UTF-8">
-
- UTF-8：万国码
- GB2312：简体中文
- BIG5：繁体中文
- BGK：简体中文+繁体中文
HTML5基础格式
<!DOCTYPE html><!-- 定义文档类型 -->
<html lang="en"><!-- 定义语言类型，常用于网页翻译 -->
<head>
<meta charset="UTF-8"><!-- 定义字符集 -->
<title></title><!-- 定义文档标题 -->
</head>
<body>
</body>
</html>
HTML属性
-
- 一个标签可以有多个属性
- 属性之间属于并列关系（无顺序之分）
- 属性之间使用空格隔开
- 属性采用“Key-Value”格式书写
通用属性
-
- name：名字
- value：默认值
- checked：默认选中（刷新/首次加载时）
- maxlength：字符长度
- required：必选
- ...
特殊字符
<!-- 空格 --> <<!-- 小于 --> ><!-- 大于 --> ©<!-- 版权 --> ...
标题标签
<!-- 全称：header --> <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>
特点：
-
- 独占一行
- 加大（字体）
- 加粗（字体）
标题一共六级选，文字加粗一行显。
由大到小依次减，从重到轻随之变。
段落标签
<!-- 全称：paragraph --> <p></p>
特点：
-
- 自动换行
- 段与段之间存在较大空隙
换行标签
<!-- 全称：break --> <br />
特点：
-
- 自动换行
文本格式标签
<!-- 粗体 --> <strong></strong> <b></b><!-- 全称：bold --> <!-- 斜体 --> <em></em><!-- 全称：emphasized --> <i></i><!-- 全称：emphasized --> <!-- 删除线 --> <del></del><!-- 全称：deleted --> <s></s><!-- 全称：strike --> <!-- 下划线 --> <ins></ins><!-- 全称：inserted --> <u></u><!-- 全称：underline -->
布局标签
div标签
<!-- 全称：division --> <div></div>
特点：
-
- 一行一个
span标签
<!-- 全称：span --> <span></span>
特点：
-
- 一行多个
图像标签
<!-- 全称：image --> <img src="" alt="">
HTML属性：
-
- src：源文件地址
- alt：替换文本（当图像失效时显示）
- title：提示文本（当鼠标悬浮在图像上方时显示）
- width：图像宽度（单位：px，等比缩放height）
- height：图像高度（单位：px，等比缩放width）
- border：边框大小（单位：px）
PS：同时设置width和height属性，可能会造成图片失真，以及在图像失效时、图像会占位显示。
何为路径？
绝对路径
URL绝对路径（网络位置）
如：src="http://www.baidu.com/path/xxx.png"
相对路径
-
- 根路径
如：src="/Image/xxx.png"
-
- 同级路径
如：src="xxx.png"
-
- 下一级路径
如：src="Image/xxx.png"
-
- 上一级路径
如：src="../../Image/xxx.png"
链接标签
<!-- 全称：anchor --> <a href=""></a>
HTML属性：
-
- href：目标地址
- target（打开方式）
-
-
- __self：同页面打开（默认值）
- __blink：新窗口打开
-
链接分类
-
- 外部链接
如：<a href="http://www.baidu.com"></a>
-
- 内部链接
如：<a href="#index.html"></a>
-
- 空链接
如：<a href="#"></a>
-
- 下载链接
-
-
- 应用程序：.exe/.dmg...
- 文档类型：.doc/.xls/.ppt/.pdf/...
- 压缩文档：.zip/.7z/...
-
如：<a href="#xxx.exe"></a>
-
- 网页元素链接
-
-
- 多媒体：.png/.mp4/...
-
如：<a href="#xxx.png"></a>
-
- 跳转链接（锚点链接）
快速跳转至网页的某个位置
<a href="#跳转的ID名"></a><!-- 如果ID存在重名，则从上往下匹配最近的那个 --> <h2 id="跳转的ID名"></h2>
表格标签
作用：
显示/展示数据
特点：
整洁
<table>
<thead><!-- 全称：table header -->
<th></th><!-- 全称：table header cell -->
</thead>
<tbody><!-- 全称：table body -->
<tr> <!-- 全称：table row -->
<td></td><!-- 全称：table data cell -->
</tr>
</tbody>
</table>
HTML属性：
-
- align：对齐方式（left/center/right）
- border：边框（true/false）
- cellpadding：文本内容与边框的距离（px）
- cellspacing：单元格之间的空隙（px）
- width：表格宽度（px）
- height：表格高度（px）
合并单元格
-
- 跨行合并
如：<td rowspan="合并个数"></td>（最上侧单元格）
-
- 跨列合并
如：<td colspan="合并个数"></td>（最左侧单元格）
列表标签
作用：
用于布局页面，显示数据
特点：
整洁、灵活
无序列表
<ul><!-- 全称：unordered list -->
<li></li><!-- list item -->
<li></li>
</ul>
-
- 无顺序之分
- <ul></ul>只能嵌套<li></li>
- <li></li>中可以是任意元素
- 自带样式属性（●/...）
有序列表
<ol><!-- 全称：ordered list -->
<li></li><!-- list item -->
<li></li>
</ol>
-
- 有顺序之分
- <ol></ol>只能嵌套<li></li>
- <li></li>中可以是任意元素
- 自带样式属性（1./2./...）
自定义列表
常用于对术语或名称的解释。
<dl><!-- 全称：definition list -->
<dt></dt><!-- 全称：definition term -->
<dd></dd><!-- 全称：definition description -->
</dl>
-
- <dl></dl>只能嵌套<dt></dt>、<dd></dd>
- <dt></dt>之间属于并列关系
- <dd></dd>之间属于并列关系
- 自带样式属性（缩进）
表单属性
常用于收集用户信息，主要分为：
-
- 表单域
- 表单控件（元素）
- 表单提示信息
<form action="" method=""></form> <!-- action：URL --> <!-- method：GET/POS -->
何为表单域？
包含表单元素的区域，用于收集信息和传递信息，把<from></form>范围内的所有信息提交给服务器
input标签
<input type="text" />
Type（类型）：
-
- text：文本框
- password：文本框（密文）
- reset：重置按钮（清空该表单所有元的素内容）
- subit：提交按钮（提交该表单所有元素的内容）
- radio：单选（name区分）
- checkbox：多选（name区分）
- button：按钮（常与JavaScript搭配使用）
- file：文件上传
- image：图像上传
- hidden：隐藏
- number：数字输入框
- date：日期选择器
- ...
select标签
下拉列表，可节省网页空间
<select name="" id="">
<option value="">选项1</option>
<option value="">选项2</option>
</select>
-
- <select></select>至少有一个<option></option>
- selected="selected"：默认选中
textarea标签
常用于评价、介绍等场景
<textarea name="" id="" cols="30" rows="10"></textarea>
HTML属性：
-
- cols：列数（显示的）
- rows：行数（显示的）
label标签
常用于搭配<input /使用（绑定表单元素>；当点击<label></label>中的文本时，浏览器会自动将焦点转移到对应的表单元素上，增强UI体验效果
<input type="text" id="绑定的ID" /> <label for="绑定的ID"></label>