HTML学习笔记

*基础学习路线

1. HTML 5基础 占比 20%
2. CSS3 基础 50%
3. H5C3提高 10% （未来发展趋势）
4. 品优购 占比20% 重点

HTML 5基础

1. 什么是网页 ?

图片，文字，视频，歌曲 等 元素组成的

2. 常用浏览器

firefox chrome/ Opera Safari ie
内核: Gecko Blink(webkit分支) Webkit Trident

3. Web标准的构成

结构(structure)，表现（presentation），行为 (Behavior)。分别对应着 HTML,CSS 和JavaScript(交互);

结构相当于小鸟的躯体，至关重要

4. 标签的分类

标题标签和段落标签 ，换行便签 ，文本格式化标签(粗体，斜体，删除，下划线)，div 和 span标签

4.1. p标签

特点:

1. 是段落与段落之间有空隙
2. 就是文本会根据浏览器大小来换行
3. p标签里面可以包含span标签，可以包含img标签

4.2. br强制换行，另起一行显示

注意的一点，两者的区别 p是块级元素，而且段落和段落之间有空隙，br换行之后两行文字之间的距离小

4.3. 文本格式化标签 (粗体，斜体，删除，下划线)

加粗：strong | b 推荐 strong
斜体：em | i 推荐em
删除线：del | s 推荐 del
下划线：ins | u 推荐ins

4.4. div和span

div(division) 大盒子 占一行
span 小盒子，一行可以有多个span 两者都是用来布局的

5. 图像标签 img ，路径(相对路径，绝对路径) 重点

行内元素的时候: width和height 是可以不加单位px的 默认就是px。但是外链的方式就必须要加px了

6. 路径(相对路径/绝对路径)

• 根目录（打开文件夹第一层就是根目录）
• 相对路径
  

7. 超链接便签a

<a href="" target="_blank"> </a> href 是必须的 (_blank 是新窗口打开 _self 当前窗口打开页面)[外链图片转存失败

8. 锚点标签

<a href="#two">第二季</a>`
<h3 id="two">第二季</h3>

9. 注释和特殊字符

注释标签 快捷键 ctrl + /

表格标签/列表标签/表单标签 表格是用来显示和展示数据的

table/ tr/td (table date 单元格的内容)

table --> tr(行) --> td(单元格) 嵌套关系

th(table head 居中且加粗)/

thead(表格头部区域),tbody（表格主体区域）有利于分清表格结构，thead里面必须要有tr标签

常用属性：
align(left,center,right), cellpadding(文字距离边框的距离/像素值), cellspacing(两个单元格之间的距离/像素值), border(1或者""), width(表格宽度/像素值或百分比)

10. 合并单元格

跨行合并
rowspan = "合并单元格的个数";

跨列合并
colspan = "合并单元格个数";

合并步骤：重点

1. 先确定是跨行合并还是跨列合并

2. 找到目标单元格。写上合并方式 = 合并单元格数量 比如 <td clospan= ”2“> </td>

3. 删除多于单元格

特点：整齐整洁有序，布局更加自由方便

11. 列表(有序列表/无序列表/自定义列表)

11.1. 无序列表,使用场景(小米的首页测导航栏，无序，整齐)

ul里面只能放li ，li里面可以放任何元素，没有顺序之分

11.2. 有序列表

ol里面只能嵌套li, li是一个容器 可以放任何的东西，容纳任何元素

11.3. 自定义列表，使用场景(小米官网的底部，帮助中心，服务支持，线下门店)

不允许出现其他的标签了，dt和dd没有限制，通常是一个dt和多个dd
dt和dd里面可以放任何标签

12. 网页的表单(表单域/表单控件/提示信息)

作用: 收集用户数据，一般就是注册表单
组成: 表单域，表单控件(表单元素)，提示信息

12.1. 表单域 form表单域区域内部的元素会返回到服务器，返送到服务器

//form里面嵌套table
<form action="url,指定接收并处理表单数据的服务器程序的url" method="提交方法" name="表单名称">
各种控件
</form> 

12.2. 表单控件 input(输入表单元素/单标签),select(下拉表单元素),textarea(文本域)

password(密码框)，
radio(单选按钮) —> checked
checkbox(多选按钮，复选框)，
submit(提交按钮)
reset(重置按钮)
button(多用于Javascript)
file(文件域，上传文件)
lable标签
caption标签定义表格标题，只能放在table标签后，居中显示
placeholder 默认填充文字
name 属性，表单元素的名字，相同的名字才能实现多选1的效果

maxlength 输入的最大长度

12.2.1 lable标签

语法：

<label for="sex">用户名</label>
<input type="text" name="sex" id="sex" value="输入用户名">

12.2.2. select下拉表单 selected = "selected"

// 下拉列表中的<select>标记属性只有
<select>
	<option> </option>
</select>

12.2.3. 文本域 textarea

<textarea cols="每行显示的字数" rows="可以写几行">
这里放一些文字
</textarea>

13. 查阅文档

百度
w3cschool
MDN