工具的使用
显示
浏览器介绍
浏览器是网页显示、运行的平台客户端,常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera等。我们平时称为五大浏览器。
浏览器内核
浏览器内核又可以分成两部分:渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。
渲染引擎 它负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机。
JS 引擎 则是解析 Javascript 语言,执行 javascript语言来实现网页的动态效果。
常见的浏览器内核可以分这四种:Trident、Gecko、Blink、Webkit。
(1)Trident(IE内核)
国内很多的双核浏览器的其中一核便是 Trident,美其名曰 “兼容模式”。
代表: IE、傲游、世界之窗浏览器、Avant、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等。
Window10 发布后,IE 将其内置浏览器命名为 Edge,Edge 最显著的特点就是新内核 EdgeHTML。
(2)Gecko(firefox)
Gecko(Firefox 内核): Mozilla FireFox(火狐浏览器) 采用该内核,Gecko 的特点是代码完全公开,因此,其可开发程度很高,全世界的程序员都可以为其编写代码,增加功能。
(3) webkit(Safari)
Safari 是苹果公司开发的浏览器,所用浏览器内核的名称是大名鼎鼎的 WebKit。
代表浏览器:傲游浏览器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器,
(4) Chromium/Blink(chrome)
在 Chromium 项目中研发 Blink 渲染引擎(即浏览器核心),内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。
大部分国产浏览器最新版都采用Blink内核。二次开发
(5) Presto(Opera)
Presto(已经废弃) 是挪威产浏览器 opera 的 “前任” 内核,为何说是 “前任”,因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了。
了解:移动端的浏览器内核主要说的是系统内置浏览器的内核。
目前移动设备浏览器上常用的内核有 Webkit,Blink,Trident,Gecko 等,其中 iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit,Android 4.4 之前的 Android 系统浏览器内核是 WebKit,Android4.4 系统浏览器切换到了Chromium,内核是 Webkit 的分支 Blink,Windows Phone 8 系统浏览器内核是 Trident。iOS由于系统原因,系统大部分自带浏览器内核,一般是Safari。
web标准
浏览器的内核不同,它们的工作原理、解析肯定不同,显示就会有差别。
Web 标准构成
Web标准不是某一个标准,而是由W3C和其他标准化组织制定的一系列标准的集合。
主要包括**结构(Structure)、表现(Presentation)和行为(Behavior)**三个方面。
- 结构标准:结构用于对网页元素进行整理和分类,主要包括XML和XHTML,咱们主要学的是HTML。
- 表现标准:表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS。
- 行为标准:行为是指网页模型的定义及交互的编写,主要包括DOM和ECMAScript两个部分
理想状态我们的源码: .html .css .js
HTML基本结构
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)。
- HTML 不是一种编程语言,而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
声明文档类型<!doctype html>
这句话就是告诉我们使用哪个html版本。
###字符集
utf-8是目前最常用的字符集编码方式,常用的字符集编码方式还有gbk和gb2312。
- gb2312 简单中文 包括6763个汉字
- BIG5 繁体中文 港澳台等用
- GBK包含全部中文字符 是GB2312的扩展,加入对繁体字的支持,兼容GB2312
- UTF-8则包含全世界所有国家需要用到的字符
统统使用UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了。
HTML标签分类
双标签
<标签名> 内容 </标签名>
单标签
<标签名 />
<标签名>
HTML标签关系
嵌套(包含)关系
<head>
<title> </title>
</head>
并列(兄弟)关系
<head></head>
<body></body>
如果两个标签之间的关系是嵌套关系,子元素最好缩进一个tab键的身位。如果是并列关系,最好上下对齐。
HTML常用标签
注释标签
<!-- 注释语句 -->
快捷键:ctrl + / 或者 ctrl +shift + /
标题标签
<h1>、<h2>、<h3>、<h4>、<h5>和<h6>
<hn> 标题文本 </hn>
注意: h1 标签因为重要,尽量少用,不要动不动就向你扔了一个h1。 一般h1 都是给logo使用。
段落标签
<p> 文本内容 </p>
默认情况下,文本在一个段落中会根据浏览器窗口的大小自动换行。独占一行,上下出现空白行。
水平线
<hr>
换行标签
<br>
浏览器忽略空白字符(空格,enter,tab等),文字会从左到右依次排列,直到浏览器窗口的右端,然后自动换行。如果希望某段文本强制换行显示,就需要使用换行标签。
文本格式化标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P5cX56TQ-1603728296151)(images/tab-4334135.png)]
- b i s u 只有使用 没有 强调的意思
- strong em del ins 语义更强烈
标签属性
<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
例:
<hr size="50px" color="red">
图像标签img
<img src="图像url" />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GlO2Y0Js-1603728296155)(images/img.png)]
链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
- href:用于指定链接目标的url地址,当为标签应用href属性时,它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用
- target:用于指定链接页面的打开方式,其取值有self和_blank两种,其中_self为默认值,_blank为在新窗口中打开方式。
锚点定位
通过创建锚点链接,用户能够快速定位到目标内容。
1.使用相应的id名标注跳转目标的位置。
<h3 id="two">目标点</h3>
2.使用“a href=”#id名“链接文本"创建链接文本(被点击的)
<a href="#two">点我去目标点</a>
base 标签
base 可以设置整体链接的打开状态
base 写到 之间
把所有的连接都默认添加 target="_blank"
特殊字符标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2s0kFyyJ-1603728296157)(images/zifu.png)]
div span标签
<div> 我独占一行 </div>
<span> 我很随和 </span>
div和span是没有语义的,是我们网页布局主要的2个盒子。
HTML标签的语义化
所谓标签语义化,就是指标签的含义。
- 方便代码的阅读和维护
- 同时让浏览器或是网络爬虫可以很好地解析,从而更好分析其中的内容
- 使用语义化标签会具有更好地搜索引擎优化
核心:合适的地方给一个最为合理的标签。
语义是否良好: 当我们去掉CSS之后,网页结构依然组织有序,并且有良好的可读性。
白话,一眼看去,就知道那个是重点,结构是什么,知道每块的内容是干啥的。
遵循的原则:先确定语义的HTML ,再选合适的CSS。
路径
相对路径
以引用文件之网页所在位置为参考基础,而建立出的目录路径。因此,当保存于不同目录的网页引用同一个文件时,所使用的路径将不相同,故称之为相对路径。
-
同级寻找
<img src="logo.gif" >
-
向下寻找
<img src="img/img01/logo.gif" >
-
向上寻找
<img src="../logo.gif" >
绝对路径
绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对,意指当所有网页引用同一个文件时,所使用的路径都是一样的。
“D:\web\img\logo.gif”,或完整的网络地址,例如“http://www.baidu.con/images/logo.gif”。
列表
无序列表 ul
<ul>
<li>无序列表列表1</li>
<li>无序列表列表2</li>
<li>无序列表列表3</li>
......
</ul>
无序列表的各个列表项之间没有顺序级别之分,是并列的。
注意:
- <ul></ul>中只能嵌套<li>
- ,直接在<ul>标签中输入其他标签或者文字的做法是不被允许的。
- <li>与
- 之间相当于一个容器,可以容纳所有元素。
- 无序列表会带有自己样式属性
有序列表 ol
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
......
</ol>
有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义。
自定义列表
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。
表格table
存在即是合理的。 表格的现在还是较为常用的一种标签,但不是用来布局,常见处理、显示表格式数据。
- 表格提供了HTML 中定义表格式数据的方法。
- 表格中由行中的单元格组成。
- 表格中没有列元素,列的个数取决于行的单元格个数。
- 表格不要纠结于外观,那是CSS 的作用。
创建表格
<table>
<tr>
<td>内容</td>
...
</tr>
...
</table>
- table用于定义一个表格。
- tr 用于定义表格中的一行,必须嵌套在 table /table标签中,在 table /table中包含几对 tr /tr,就有几行表格。
- td /td:用于定义表格中的单元格,必须嵌套在标签中,一对 中包含几对,就表示该行中有多少列(或多少个单元格)。
注意:
- 中只能嵌套
- 标签,他就像一个容器,可以容纳所有的元素
表格属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3hZbfsR9-1603728296159)(images/tt.png)]
表头标签
<th> </th>
表头一般位于表格的第一行或第一列,其文本加粗居中,
表格标准结构
- :用于定义表格的头部。位于
标签中,一般包含网页的logo和导航等头部信息。
- :用于定义表格的主体。位于
标签中,一般包含网页中除头部和底部之外的其他内容。
合并单元格
跨行合并:rowspan 跨列合并:colspan
合并单元格的思想:
将多个内容合并的时候,就会有多余的东西,把它删除。 例如 把 3个 td 合并成一个, 那就多余了2个,需要删除。
公式: 删除的个数 = 合并的个数 - 1
表单和表单控件
表单域
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
form标签被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。
常用属性:
- action
在表单收集到信息后,需要将信息传递给服务器进行处理,action属性用于指定接收并处理表单数据的服务器程序的url地址。 - method
用于设置表单数据的提交方式,其取值为get或post。 - name
用于指定表单的名称,以区分同一个页面中的多个表单。
注意: 每个表单都应该有自己表单域。
input 控件
<input>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8ovScGsg-1603728296160)(images/input.png)]
<input>标签为单标签,type属性为其最基本的属性,其取值有多种,用于指定不同的控件类型。
label标签
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">
label 标签为 input 元素定义标注(标签)
作用: 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
for 属性规定 label 与哪个表单元素绑定
textarea控件
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
下拉菜单
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
注意:
- <select></select>中至少应包含一对<option></option>。
- 在option 中定义selected =" selected "时,当前项即为默认选中项。
- multiple开启多选
H5新增与新特性
文档类型设定
document 文档区域
- HTML
- XHTML是更严谨更纯净的 HTML 版本。
- HTML5
字符设定
- <meta http-equiv=“charset” content=“utf-8”>:HTML与XHTML中建议这样去写
- <meta charset=“utf-8”>:HTML5的标签中建议这样去写
新标签
- header:定义文档的页眉
- nav:定义导航链接的部分
- footer:定义文档或节的页脚
- article:标签规定独立的自包含内容
- section:定义文档中的节(section、区段)
- aside:定义其所处内容之外的内容
新属性
属性 | 用法 | 含义 |
---|---|---|
placeholder | 占位符提供可描述输入字段预期值的提示信息 | |
autofocus | 规定当页面加载时 input 元素应该自动获得焦点 | |
multiple | 多文件上传 | |
autocomplete | 规定表单是否应该启用自动完成功能 | |
required | 必填项 | |
accesskey | 规定激活(使元素获得焦点)元素的快捷键alt+shift+___ |
type属性值
类型 | 使用示例 | 含义 |
---|---|---|
输入邮箱格式 | ||
tel | 输入手机号码格式 | |
url | 输入url格式 | |
number | 输入数字格式 | |
search | 搜索框(体现语义化) | |
range | 自由拖动滑块 | |
time | ||
date | ||
datetime | ||
month | ||
week |
多媒体标签
- embed:标签定义嵌入的内容
- audio:播放音频
- video:播放视频
embed
<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
embed可以用来插入各种多媒体,格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径,可以是相对路径或绝对路径。
多媒体 audio
<audio src="./music/See You Again.mp3"></audio>
音频播放
附加属性:
-
autoplay 自动播放
-
controls 是否显示默认播放控件
-
loop 循环播放
由于版权等原因,不同的浏览器可支持播放的格式是不一样的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-faIMoaUv-1603728296162)(images/支持格式.png)]
多浏览器支持的方案:
<audio controls>
<source src="./music/See You Again.mp3">
<source src="./music/See You Again.wav">
<source src="./music/See You Again.ogg">
Sorry,您当前的浏览器不支持此文件格式,无法播放
</audio>
多媒体 video
<video src="./video/movie.mp4" controls="controls"></video>
视频播放
附加属性:
-
autoplay 自动播放
-
controls 是否显示默认播放控件
-
loop 循环播放
-
width 设置播放窗口宽度
-
height 设置播放窗口的高度
由于版权等原因,不同的浏览器可支持播放的格式是不一样的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c8iqO4RM-1603728296163)(images/video支持格式.png)]
多浏览器支持的方案:
<video controls="controls">
<source src="./video/movie.ogg">
<source src="./video/movie.mp4">
</video>