一、认识WEB✍
1.1 前提知识
「网页」主要是由文字、图像 和 超链接等元素构成，当然除了这些元素，网页中还可以包括音频、视频以及Flash等。
「浏览器」是网页显示、运行的平台。
「浏览器内核」(排版引擎、解释引擎、渲染引擎)
负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。
| 浏览器 | 内核 | 备注 |
|---|---|---|
| IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 |
| firefox | Gecko | 可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。 |
| Safari | webkit | 现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了）。苹果感觉像被别人抢了媳妇，都哭晕在厕所里面了。 |
| chrome | Chromium/Blink | 在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发 |
| Opera | blink | 现在跟随chrome用blink内核。 |
1.2 Web标准
「构成」👉 结构标准，表现标准和行为标准
结构标准用于对网页元素进行整理和分类(HTML)表现标准用于设置网页元素的版式、颜色、大小等外观属性(CSS)行为标准用于对网页模型的定义及交互的编写(JavaScript)
「Web标准的优点」👇
易于维护：只需更改CSS文件，就可以改变整站的样式
页面响应快：HTML文档体积变小，响应时间短
可访问性：语义化的HTML（结构和表现相分离的HTML）编写的网页文件，更容易被屏幕阅读器识别
设备兼容性：不同的样式表可以让网页在不同的设备上呈现不同的样式
搜索引擎：语义化的HTML能更容易被搜索引擎解析，提升排名
二、HTML初识✍
2.1 HTML初识
「HTML」(Hyper Text Markup Language):超文本标记语言
「所谓超文本，有2层含义：」
- 因为它可以加入图片、声音、动画、多媒体等内容（
超越文本限制）- 不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（
超级链接文本）。
「HTML骨架格式」
<!-- 页面中最大的标签 根标签 --> <html> <!-- 头部标签 --> <head> <!-- 标题标签 --> <title></title> </head> <!-- 文档的主体 --> <body> </body> </html>
「团队约定大小写」
HTML标签名、类名、标签属性和大部分属性值统一用小写
「HTML元素标签分类」
- 常规元素(双标签)
- 空元素(单标签)
常规元素(双标签)
<标签名> 内容 </标签名> 比如<body>我是文字</body>
空元素(单标签)
<标签名 /> 比如 <br />或<br>
「HTML标签关系」
- 嵌套关系父子级包含关系
- 并列关系兄弟级并列关系
2.1 如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位（一个tab是4个空格）。如果是并列关系，最好上下对齐。
2.2 文档类型声明标签
<!DOCTYPE>文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。- 这句代码的意思是: 当前页面采取的是
HTML5版本来显示网页. - 注意：
<!DOCTYPE>声明位于文档中的最前面的位置，处于 标签之前。<!DOCTYPE>不是一个 HTML 标签，它就是文档类型声明标签。
2.3 lang语言种类
用来定义当前文档显示的语言
en 定义语言为英语
zh-CN 定义语言为中文
<html lang="en">
2.4 字符集
在<head>标签内，可以通过<meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。
<meta charset = "UTF-8" />
charset 常用的值有：：GB2312 、BIG5 、GBK 和 UTF-8，其中UTF-8 也被称为万国码，基本包含了全世界所有国家需要用到的字符
三、HTML常用标签✍
3.1、标题标签
加了标题的文字会变的加粗，字号也会依次变大
一个标题独占一行<body> <h1> 一级标题</h1> <h2> 二级标题</h2> <h3> 三级标题</h3> <h4> 四级标题</h4> <h5> 五级标题</h5> <h6> 六级标题</h6> </body>
3.2、段落标签
paragraph 的缩写
文本在一个段落这种会根据浏览器窗口的大小进行自动换行
段落和段落之间保有空隙<p>段落标签</p>
3.3、换行标签/水平线标签
<br /><hr/>是个单标签
<br />标签只是简单的开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
<hr/>水平下划线<br /> <hr/>
3.4、文本格式化标签
加粗
<strong></strong><b><b>
倾斜<em></em><i></i>
删除线<del></del><s></s>
下划线<ins></ins><u></u>
div和span标签:是没有语义的,是我们网页布局最主要的2个盒子。
3.5 图像标签
<img src="mc.jpg" alt="" width="300" height="300" border="3" title="这是个小蒲公英" />
3.6 链接标签(重点)
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
- target="
_self" 默认窗口弹出方式- target="
_blank" 新窗口弹出
href===> 用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target===> 用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。
src 和 href 的区别
src 是引入资源的 href 是跳转url的
- src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
- src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
- href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。如果我们在文档中添加那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。
锚点定位：通过创建锚点链接，用户能够快速定位到目标内容。1. 使用相应的id名标注跳转目标的位置。 (找目标) <h3 id="two">第2集</h3> 2. 使用<a href="#id名">链接文本</a>创建链接文本（被点击的） <a href="#two">
3.7 特殊字符
四、表格列表✍
4.1 表格标签
table用来定义表格的标签tr用来定义表格中的行，必须嵌套在<table></table>标签中td用来定义表格中的单元格，必须嵌套在<tr></tr>标签中th用来定义表格中的表头，表头单元格里面的内容加粗居中显示
<body>
<table>
<tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr>
<tr> <td>MC猴</td> <td>男</td> <td>18</td> </tr>
<tr> <td>MC猴</td> <td>男</td> <td>18</td> </tr>
<tr> <td>MC猴</td> <td>男</td> <td>18</td> </tr>
</table>
</body>
4.2 表格属性
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left,center,right | 规定表格相对周围元素的对齐方式 |
| border | 1或者’’ ‘’ | 规定表格单元是否拥有边框，默认为" "，表示没有边框 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认1像素 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认2像素 |
| width | 像素值或百分比 | 规定表格的宽度 |
| height | 像素值或百分比 | 规定表格的高度 |
实际开发这三个用的多：border cellpadding cellspacing
<table align=center border="0" cellpadding="0" cellspacing="0" width="600" height="600">
合并单元格合并的顺序我们按照 先上 后下 先左 后右 的顺序 ,合并完之后需要删除多余的单元格
① 跨行合并：rowspan=“合并单元格的个数”
② 跨列合并：colspan=“合并单元格的个数”
表格划分结构题头 thead、正文 tbody 和脚注 tfoot
①<thead></thead>：用于定义表格的头部。用来放标题之类的东西。 内部必须拥有 标签！
②<tbody></tbody>：用于定义表格的主体。放数据本体 。
③<tfoot></tfoot>放表格的脚注之类。
④以上标签都是放到table标签中。
4.3 列表
Ⅰ- 有序列表 <ul> <li></li> </ul>
Ⅱ - 无序列表 <ol> <li></li> </ol>
Ⅲ - 自定义列表 <dl> <dt></dt> <dd></dd> </dl>
五、表单✍
一个完整的表单通常由表单域，表单控件（表单元素）和提示信息3部分组成
form表单域
表单域是一个包含表单元素的区域
<form></from>标签用于定义表单域，会把它范围内的表单元素信息提交给服务器<form action="url地址" method="提交方式" name="表单名称"> 各种表单控件 </form>
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址。 |
| method | get/post | 用于设置表单数据的提交方式，其取值为get或post。 |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单。 |
GET 和 POST 的区别
- GET在浏览器回退时是无害的，而POST会再次提交请求。
- GET请求会被浏览器主动cache，而POST不会，除非手动设置。
- GET请求只能进行url编码，而POST支持多种编码方式。
- GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
- GET请求大小一般是(1024字节)，http协议并没有限制，而与服务器，操作系统有关，POST理论上来说没有大小限制，http协议规范也没有进行大小限制，但实际上post所能传递的数据量根据取决于服>务器的设置和内存大小。
- 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
- GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
input 控件
<input type="属性值" value="你好">
常见属性
文本框与密码框<form> 用户名：<input type="text"> <br/> 密码：<input type="password"> </form>
单选框和复选框type 属性设置为 radio 是单选框 type 属性设置为 checkbox 是复选框 name 是表单元素的名字，要求 单选框和复选框要有相同的name值 checked 打开页面自动选中状态 <form> 用户名：<input type="text"> <br> 密码：<input type="password"> <br> <!-- radio是单选框，可以多选一 --> 性别：男<input type="radio"> 女 <input type="radio"> <!-- checkbox是多选框，可以多选 --> 爱好：吃饭<input type="checkbox"> 睡觉<input type="checkbox"> 打游戏<input type="checkbox"> </form>
label标签
作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
第一种
<label> 用户名：
<input type="radio" name="usename" value="请输入用户名">
</label>
第二种
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
textarea控件(文本域)
通过textarea控件可以轻松地创建多行文本输入框.
cols=“每行中的字符数” rows=“显示的行数” 我们实际开发不用<textarea > 文本内容 </textarea>
select下拉列表
如果有多个选项让用户选择，为了节约空间，我们可以使用select控件定义下拉列表。
在option 中定义selected =" selected "时，当前项即为默认选中项。<select> <option>选项1</option> <option>选项2</option> <option>选项3</option> ... </select>
扩展知识 ✍
label的作用是什么？是怎么用的？
例子1: 点击" 用户名:" 就可以定位光标到输入框
<form> <label for="myid "> 用户名:</label> <input type="text" id="myid" /> </form>
例子2: 点击" 用户名:" 或按键alt+1, 都可以定位光标到输入框
<form> <label for="myid" accesskey="1"> 用户名:</label> .<input type="text" id="myid" tabindex="1" /> </form>
for 属性功能：
- 表示Label 标签要绑定的HTML 元素，你点击这个标签的时候，所绑定的元素将获取焦点。
acesskey 属性
- 功能：表示访问Label 标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。
- 局限性：accessKey 属性所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键。
什么是 HTML5 的基本构件（building block）？
- 语义 - 提供更准确地描述内容。
- 连接 - 提供新的方式与服务器通信。
- 离线和存储 - 允许网页在本地存储数据并有效地离线运行。
- 多媒体 - 在 Open Web 中，视频和音频被视为一等公民（first-class citizens）。
- 2D/3D 图形和特效 - 提供更多种演示选项。
- 性能和集成 - 提供更快的访问速度和性能更好的计算机硬件。
- 设备访问 - 允许使用各种输入、输出设备。
- 外观 - 可以开发丰富的主题。
link和@import的区别
- 从属关系区别：
link属于html标签，而@import是css提供的。- 加载顺序区别：
页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载。- 兼容性区别：
import只在IE5以上才能识别，而link是html标签，无兼容问题。- dom可操作性区别：
可以通过JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式- 权重区别：
如果已经存在相同样式，@import引入的这个样式将被该 CSS 文件本身的样式层叠掉，表现出link方式的样式权重高于@import的权重这样的直观效果。
（简而言之，link和@import，谁写在后面，谁的样式就被应用，后面的样式覆盖前面的样式。）
src与href的区别
- href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
- src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
扫一扫
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
