浏览器
作用：Http请求的发起、接收，都是由浏览器来完成的。
浏览器有很多厂商提供，全球五大浏览器：
- IE（Internet Explorer）：Trident内核（IE Edge的内核为斯巴达）
- 火狐（Firefox）：gecko内核
- 苹果（Safari）：webkit内核
- 谷歌（Chrome）：Blink内核
- 欧朋（Opera）：谷歌blink内核
Http请求
Http：Hypertext Transfer Protocol，超文本传输协议。
Http协议包含了请求和响应两个部分。都是要依赖浏览器。
请求：request，浏览器根据网址对对应的服务器发送请求。
响应：response，服务器根据请求响应文件，将页面传输给客户端，在浏览器中进行网页的渲染。
发送Http请求的方法：直接输入网址，点击超级链接
访问页面时，会同时发出多个Http请求，包括网页的图片、视频、音频等文件。
HTML框架
DocType Defination：文档类型定义（DTD），用来定义文档的规范。可以内部声明也可以外部声明。
- 内部声明：
<!DOCTYPE 根元素[元素声明]>例如：<!DOCTYPE html>
外部声明 :<!DOCTYPE 根元素 类型 文件名>例如：<!DOCTYPE HTML PUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
作用：规定了HTML使用的是哪个版本的HTML书写规范
html、css、js规范维护更新的组织 W3C组织
注：HTML5不基于SGML规范，因此不需要引用DTD
HTML标签、元素和属性
- 元素:网页实际上就是由许许多多各种各样的HTML元素构成的文本文件,所以说,HTML元素就是构成HTML文件的基本对象,HTML元素是一个统称。HTML元素就是通过使用HTML标签进行定义的。
- 标签:标签就是
<head>、<body>、<title>等被尖括号“<”和“>”包起来的对象,绝大部分的标签都是成对出现的,如<title></title>、<body></body>当然还有少部版分不是成对出现的,如<br>、<img>等。
标签就是用来标记HTML元素的。位于起始标签和结束标签之间的文本就是HTML元素的内容。
注意:元素是实体,标签是名称(标记)
HTML标签分类- 容器级标签： h1-h6 pre div
- 文本级标签：p code span
- 文本级标签一般不能或不建议嵌套容器级标签，但是容器级可以嵌套文本级标签
- 属性:为HTML元素提供各种附加信息的就是HTML属性,它总是以属性名=属性值这种名值对的形式出现,而且属性总是在HTML元素的开始标签中进行定义。
属性分类：- 必须属性：img图片标签中的src alt
- 可选属性：img图片标签 width heigh
- 标准（全局）属性: id class style lang
- 事件属性: onclick onmouseover onmouseout
字符集
定义了当前使用的字库
- 中文字库：UTF-8：国际标准字库。包含了人类所有语言的文字。一个汉字三个字节
- GBK/gb2312：中国字库，国家标准。包含所有的简体中文，大部分为繁体，一些特殊字符，片假名。一个汉字2个字节。
ps：分情况使用
网页是外文网站。使用UTF-8字库。有大量的中文，要求网页加载速度快，用gbk字库。
注意：必须保证设置的字符集和软件保存的字符集类型一致。
HTML常用标签
<head>标签
<head>标签用于定义文档的头部，它是所有头部元素的容器。<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。文档的头部描述了文档的各种属性和信息，包括文档的标题、在Web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容呈现给读者。
下面这些标签可以用在head部分：<base><link><script><style>以及<title>
- base标签为页面上的所有链接规定默认地址和默认目标
- href：规定页面中所有相对链接的基准url
- target:在何处打开页面中所有的链接(_blank,_parent,_self,_top,framename)
- title:标签内部放的是网页的名字，里面的内容可以帮我们提高搜索引擎优化（SEO)
- 其他头部标签：
- link 定义文档与外部资源的关系。如引入外部样式：shortcut icon
- style 定义内嵌样式
- script 引入外部脚本，或定义内嵌脚本
- meta 提供页面相关的元信息（meta-information），标签位于文档的头部，不包含任何内容
- content 定义与http-equiv或name属性相关的元信息
- http-equiv 把content属性关联到HTTP头部（content-type，expires，refresh，set-cookie），如
<meta http-equiv="Refresh" content="5;url=https://www.baidu.com" /> - name 把content属性关联到一个名称（author，description，keywords(SEO优化）等）
<img>标签
img标签是一个单标签，单标签在标签内使用/结束。
img标签的属性：
- src 添加资源文件的路径
- alt 图片加载失败后的文本提示
- title 文本提示信息（鼠标悬停）
- width 设置图片的宽度
- heigth 设置图片的高度
- border 设置图片的边框厚度（默认黑色实线，且不可修改）
路径： - 绝对路径：目标文件所在的完整的路径（带盘符）
- 本地文件的绝对路径 D:\素材\其他\a.jpg
- 服务器的绝对路径：http://www.baidu.com/demo.jpg
- 相对路径：目标文件相对于引用文件所在的位置
- / 根目录 （绝对路径）
- ./ 当前目录 （绝对路径）
- …/ 退出当前目录 （绝对路径）
<a>标签
一个网站中有很多的页面，页面之间通过超链接进行跳转，超链接可以看做是网页的灵魂。
a标签是一个双标签，有开始标记和结束标记 <a href="#" >点我跳转</a>
属性：
- href 设置超链接的地址 # 代表链接到当前页面或者页面的某个位置
- title 文本提示信息
- rel 规定当前文档与被链接文档之间的关系
- download 规定被下载的超链接目标
- media 规定被链接文档是为何种媒介/设备优化的
- type 规定被链接的文档的MIME类型
- arget 页面的打开方式
- _self 当前页面中打开新的页面（新页面覆盖当前页面）
- _blank 在新的页面中打开（会创建一个新的窗口来打开新的页面）
- _parent 页面的父窗口或父框架中打开
- _top 将页面在整个浏览器窗口打开
- framename 在指定的框架中打开页面
<!-- 外部的页面 -->
<a href="https://www.baidu.com" target="_blank" title="百度网站">百度</a>
<!-- 只写a，代表打开当前的页面 -->
<a href="#">当前页面</a>
<!-- 打开本地文件 -->
<a href="../demo2/hello.txt">本地页面</a>
锚点
锚点的设置：给标签设置id属性（要求id是唯一的）,通过另一个a标签href属性去链接这个锚点
还可以链接到当前页面中的指定位置，还可以链接到其他页面的指定部分。例如：
<a href="day2.html#middle">跳转到中间位置</a>
<a href="#top">返回顶部</a>
div和span标签
- div：容器级标签，（division 范围、区域、分割）用来划分独立的逻辑块。是一个容器（大的区域），本身在网页中没有任何的默认样式，可以放置任何标签和内容。里面可以存放一些相近、相同功能的标签。div会把页面分割成一个小的区域
- span：文本级标签，只能放文字、图片、表单元素等，用来修饰部分文本的效果（小的跨度范围）
div作为容器，如果没有内容撑起，或者不设置宽高，是没有默认效果
通常大的内容放在div中，小的内容放在span
div盒子内容会独占一行，span的内容会写在一行
无序列表
无序列表：给文本添加无序的列表语义。项与项之间没有顺序的先后之分（没有先后顺序）
- ul unordered list无序列表
- li list item列表项
ul和li这两个标签必须同时出现，不能单独书写
ul里可以嵌套一个或者多个li标签，但ul里面只能放li标签，不能放其他内容
li标签是一个典型的容器级标签，可以放置任何的内容标签，甚至可以放置子级ul和li
ul和li只能添加无序列表的语义，默认li的前面小圆点的样式。我们可以通过type属性修改：
disc 默认实心圆 Circle 空心圆 square 实心方块
有序列表
有序列表：给文本添加有序列表的语义。
- ol ordered list有序列表
- li list item列表项
ol和li 也是一组标签，必须同时出现
ol里只能嵌套li标签。li不能脱离ol自己出现。ol里可以嵌套多个li标签
li是一个容器级标签，里面可以放置任何内容，甚至ol、ul.
虽然现实会有阿拉伯数字排序，但是我们ol的作用仅仅是添加有序列表的语义。数字样式不是ol的作用。
ol元素属性
- type 属性设置有序列表的项目符号（ol有且只有5个）
A 大写英文字母 a 小写英文字母 1 阿拉伯数字 I 大写罗马数字 i 小写罗马数字 - start 设置列表符号从第几个开始排列，属性值只能是阿拉伯数字
- reversed 设置有序列表符号的倒序（html5新增）这是一个布尔型的属性，关于这类型的 属性有两种写法：reversed或reversed=“reversed”
注：ul、ol项目符号不能互相使用，但是li标签可以使用它们任何一个
列表
dl定义列表给我们的文本添加定义列表语义。
- dl defination list 定义列表
- dt defination title 定义标题
- dd defination description 定义描述
dl里面嵌套了dt和dd。dt和dd是同一级的标签。dd是对dt的解释、说明、定义。
dl里面只能放置dt、dd。dt和dd都是容器级标签，里面的内容是不限制的。
dl里面可以放置多组的dt和dd。dt后面的dd可以有多个。这些dd都是在解释上面的dt。
dt后面可以没有dd，表示没有解释说明。
实际工作中，经常将每一组dt和dd单独放在一个dl标签内部。
form标签
表单用来收集用户数据，并将其提交到对应的地址。
我们所有的表单元素都要写在一个form标签内部，form标签是一个功能性的标签，不是结构性。
form：是表单的语义化标签，属性如下
- name 定义表单的名称
- action 设置数据提交的地址
- method 设置数据提交的方式，如：GET提交、POST提交
- target 页面打开的方式，如_self，_blank，_parent，_top，framename
表单中的控件：textarea文本域 select 下拉列表 input 输入框 button按钮
在表单提交的数据中，=前面代表数据的名称(name)，=后面代表数据值(value)
?是数据的开始，&链接的是两组数据
表单控件通用属性：
- name 规定文本区的名称
- value 定义送往服务器的选项值（表单控件的值）
- autofocus 规定在页面加载后文本区域自动获得焦点（html5新增）
- form 规定文本区域所属的一个或多个表单（html5新增）
- placeholder 规定描述文本区域预期值的简短提示（HTML5新增）
- disabled 规定禁用该文本区
- readonly 规定文本区为只读
- maxlength|minlength 规定文本区域的最大|最小字符数（textarea和input）
- required 规定文本区域是必填的（textarea和input）（HTML5新增）
textarea与label标签
textarea多行文本域，又可以称为多行文本输入框，属性如下：
- rows 设置行高，属性值是数字
- cols 设置列宽，属性值是数字
- label标签为表单控件（textarea，input）定义标注：
for 规定label绑定到哪个表单控件 id
我们还可以将表单控件写在label内，实现联动
<!-- 表单 -->
<!-- action 提交数据的地址
method 提交数据的方式
target 在哪里查看结果 -->
<form action="./create" method="get" target="_blank">
<!-- 对表单控件的标注 -->
<label for="description">商品描述</label>
<!-- 多行文本框 -->
<!-- cols和rows代表的是字节 -->
<textarea id="description" cols="30" rows="10"></textarea>
<!-- 第二种方式引起触发 -->
<label >
简介
<textarea cols="30" rows="10"></textarea>
</label>
</form>
select标签
select标签可以创建单选或多选菜单，属性：
- multiple 设置多选
- size 设置显示在页面上的列表的项数
option标签用来定义下拉列表中的一个选项（一个条目），属性：
- selected 设置默认被选中的列表项（布尔型属性）
注意：内容只能是文本，不能出现标签
optgroup标签定义选项组
- label 为选项组规定描述
input标签
input：用于输入的语义标签。用于搜集用户信息。input是一个单标签，也叫做自封闭标签
控件的类型由type属性确定：
- text 单行文本框，文本输入框（默认的输入框类型）
- pattern 规定输入字段的值的模式或格式（html5新增）
- password 密码输入框
- radio 单选框
- checkbox 复选框，多选框
单选和复选框name的值必须一致，这样才能保证是同一个题干下面的不同选项 - checked属性，设置默认被选中；布尔值属性
- image 图像
- src设置图片的路径 width和height设置图片的宽度和高度
- file 文件
- hidden 隐藏文件
- button 普通按钮
- submit 提交按钮
- reset 重置按钮
button标签
button标签定义一个按钮，属性：
- type 规定按钮的类型（button，reset，submit）
button空间与input type="button"控件相比：
button标签之间的所有内容都是按钮的内容，比如文本或多媒体内容
兼容性：IE的默认类型是“button”，而其他浏览器中（包括W3C规范）的默认值是“submit”
<form action="">
<!-- 文本框 -->
<input type="text" name="username" value="hello">
<!-- input按钮如果不设置type，ie低版本行为与button一样，标准行为和submit一样 -->
<!-- button控件与input比较 -->
<!-- 1 button在标签之间设置内容，input在value属性中设置内容 -->
<!-- 2 button内容中可以包含其他的标签，input不能渲染其他的标签 -->
<button>
<!-- 可以跳转 -->
<a href="http://www.baidu.com">百度</a>
</button>
<!-- 不能跳转 -->
<input type="button" value="<a href='http://www.baidu.com'></a>">
</form>
其他标签
- pre 预格式化原样输出，不会像普通的p标签那样只显示一个空格
- code 单行代码
- strong 强调标签，加粗效果
- em 强调标签，斜体效果
- ins 下划线
- del 删除线
- abbr 定义缩写
- br 换行
- hr 分割线
- address 定义地址
- iframe 内联框架，嵌套页面，例如在网页中嵌套百度页面可以用：
<iframe src="https://www.baidu.com" height="300" width="600"></iframe>
废弃标签
- font 字体标签
- frame 定义框架
- b 加粗
- i 斜体字
- u 下划线
- s 删除线
扫一扫
422
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
