HTML初识
认识网页
-
网页的组成部分
- 文字、图片、音频、视频、超链接
-
网页的本质是什么？
- 代码
-
通过什么软件将代码变成用户眼中的网页？
- 浏览器
五大浏览器
-
有哪五大浏览器？
- IE浏览器
- 谷歌浏览器
- 火狐浏览器
- 苹果浏览器
- Opera浏览器
-
浏览器的引擎分别是什么？
浏览器 内核 介绍 IE Trident内核，也是俗称的IE内核 元老级内核之一，由微软开发，并于1997年10月首次在ie 4.0中使用，凭借其windows垄断优势，Trident市场占有率一直很高。然而垄断并非，没有竞争就没有进步，长期以往，Trident内核一度停滞不前，更新缓慢，甚至一度与W3C标准脱节。2011年，从ie 9开始，Trident开始支持HTML5和CSS 3，因此我们也经常会看到有些网站在浏览时会提示用户（在Internet Explorer 9.0+以上浏览效果最佳）。前端程序员做浏览器兼容一般也不再会考虑ie 8之前的浏览器了。 Firefox Gecko内核，俗称Firefox内核 Firefox浏览器使Mozilla公司旗下浏览器，也是刚才提到的网景公司后来的浏览器。网景被收购后，网景人员创办了Mozilla基金会，这是一个非盈利组织，他们在2004年推出自己的浏览器Firefox。Firefox采用Gecko作为内核。Gecko是一个开源的项目，代码完全公开，因此受到很多人的青睐。Firefox的问世加快了第二次浏览器大战的开始。第二次浏览器大战与第一次二元鼎力的局面不同，这一次的特点就是百家争鸣，也自此打破了IE浏览器从98年网景被收购后独步浏览器市场的局面。 谷歌 & Opera Blink 这是由Google和Opera Software开发的浏览器排版引擎，Google计算将这个渲染引擎作为Chromium计划的一部分，并且在2013年4月公布了这一消息。这一渲染引擎是开源引擎Webkit中WebCore组件的一个分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）浏览器中使用。Chrome浏览器至发布以来一直讲究简洁、快速、安全，所以Chrome浏览器到现在一直受人追捧。最开始Chrome采用webkit作为浏览器内核，直到2013年，google宣布不再使用苹果的webkit内核，开始使用webkit的分支内核Blink。
思维导图
音频
-
基本语法
<audio src="音频的路径" autoplay controls loop></audio> -
属性
src要播放音频的路径autoplay自动播放controls播放控件loop循环播放
视频
-
基本语法
<video src="音频的路径" autoplay controls loop muted></video> -
属性
src要播放音频的路径autoplay自动播放controls播放控件loop循环播放muted静音播放
超级链接
可以从一个网页跳转到另外一个页面
-
基本语法
<a href="" target>文字或者图片</a> -
属性
-
href要跳转的链接地址 -
要跳转到互联网的上地址 记得
http:// 或者 https:// -
要跳转到自己电脑上面的某个文件，直接写文件路径即可
-
target链接地址的打开方式_self表示在本页面打开链接地址_blank表示在新页面打开链接地址
-
无序列表
表示一组没有先后顺序的列表项
-
基本语法
<ul> <li>内容</li> <li>内容</li> <li>内容</li> <li>内容</li> </ul> -
注意事项
- ul标签里面只能li标签
- li标签里面可以放任何内容
有序列表
表示一组有先后顺序的列表项
-
基本语法
<ol> <li>内容</li> <li>内容</li> <li>内容</li> <li>内容</li> </ol> -
注意事项
- ul标签里面只能li标签
- li标签里面可以放任何内容
自定义列表
一般用于网页底部的导航
-
基本语法
<dl> <dt>定义标题</dt> <dd>内容</dd> <dd>内容</dd> <dd>内容</dd> </dl> -
注意事件
- dl里面只能包含 dt与dd
- dt表示定义的标题
- dd表示是对标题的解析说明
表格
表格主要是用于展示数据
-
基本语法
<table> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table> -
标签说明
table表示是表格tr表示的是行td表示的是单元格
-
table标签的属性
-
border设置表格的边框 -
width设置表格的宽度 -
height设置表格的高度 -
align设置表格的水平位置- left 居左
- center 居中
- right 居右
-
表格的结构标签
<thead></thead>表格的头部<tbody></tbody>表格的身体<tfoot></tfoot>表格的底部
-
表格的大标题与小标题
<caption></caption>设置大标题<th></th>设置小标题 主要是在第一行里面使用 将第一行里面的td换成th
-
合并单元格
rowspan- 跨列
colspan
表单
-
表单的目的：收集用户的信息
input 系列
快速生在 input 系列的标签：
input:text
-
文本框
<input type="text" />-
属性
属性名 作用 placeholder 占位符 提示信息 当光标在输入内容时 提示信息会消失
-
-
密码框
<input type="password" />-
属性
属性名 作用 placeholder 占位符 提示信息 当光标在输入内容时 提示信息会消失
-
-
单选框
<input type="radio" />-
属性
属性名 作用 name 有相同 name属性值的单选框为一组，表示一次只能有一个被选中checked 默认选中
-
-
多选框
<input type="checkbox" />-
属性
属性名 作用 checked 默认选中
-
-
文件选择框
<input type="file" />-
属性
属性名 作用 multiple 可以选择多个文件
-
-
提交按钮
<input type="submit" /> -
重置按钮
<input type="reset" /> -
普通按钮
<input type="button" value="值" />
button 标签系列
应用场景：在网页中显示用户点击的按钮
-
普通按钮
<button type="button">普通按钮</button> -
提交按钮
<button type="submit">提交按钮</button> -
重置按钮
<button type="reset">重置按钮</button> -
注意事项：
- 谷歌浏览器中 button 默认是提交按钮
- button 标签是双标签，更便于包裹其他内容：文字、图片等
select 标签
应用场景：在网页中提供多个选择项的下拉菜单表单控件
-
基本语法
<select> <option></option> <option></option> <option></option> <option></option> </select> -
标签说明
- select 标签：下拉菜单的整体
- option 标签：下拉菜单的每一项
-
常见属性
selected表示某一个option选项能够被默认被选中
textarea
应用场景：在网页中提供可输入多行文本的表单控件
-
基本语法
<textarea></textarea> -
常见属性
- cols：规定了文本域内可见宽度
- rows：规定了文本域内可见行数
-
注意点：
- 右下角可以拖拽改变大小
- 实际开发时针对于样式效果推荐用 CSS 设置
lable 标签
应用场景：可以将内容与表单标签进行关联，提高用户的体验性
-
方式一
- 将内容放在
label标签里面 - 给表单标签设置
id属性 label里面的for属性的值要与关联的表单标签的id属性值一样
- 将内容放在
-
方式二
- 将内容与表单的标签放入到
<label>里面 - 将
<label>标签里面的for属性删除
- 将内容与表单的标签放入到
无语义的布局标签
div独占一行span一行可以放多个
有语义的布局标签
应用场景：在 HTML5 新版本中，推出了一些有语义的布局标签供开发者使用
| 标签名 | 语义 |
|---|---|
| header | 网页头部 |
| nav | 网页导航 |
| footer | 网页底部 |
| aside | 网页侧边栏 |
| section | 网页区块 |
| article | 网页文章 |
-
注意点：
- 以上标签显示特点和 div 一致，但是比 div 多了不同的语义
字符实体
应用场景：在网页中展示特殊符号效果时，需要使用字符实体替代
-
常见的字符实体
显示结果 描述 实体名称 英文空格 大于号 >< 小于号 <中文空格  
