HTML
一、文档声明
DOCTYPE是html5标准⽹⻚声明,且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个文档,不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript 脚本的解析。
⽂档解析类型有:
1.BackCompat:怪异模式,浏览器使⽤⾃⼰的怪异模式解析渲染⻚⾯。(如果没有声明DOCTYPE,默认就是这个模式)
2.CSS1Compat:标准模式,浏览器使⽤W3C的标准解析渲染⻚⾯。
3.IE8还有⼀种介乎于上述两者之间的近乎标准的模式,但是基本淘汰了
1.标准模式(standards mode):⻚⾯按照 HTML 与 CSS 的定义渲染 。
2.怪异模式(quirks mode)模式: 会模拟更旧的浏览器的⾏为 。
3.近乎标准(almost standards)模式: 会实施了⼀种表单元格尺⼨的怪异⾏为(与IE7之前的单元格布局⽅式⼀致), 除此之外符合标准定义
二、实体
虽然 html 不区分大小写,但实体字符对大小写敏感。
空格  
< 小于号 <
> 大于号 >
在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格
在HTML中有些时候,我们不能直接书写一些特殊符号
比如:多个连续的空格,比如字母两侧的大于和小于号
如果我们需要在网页中书写这些特殊的符号,则需要使用html中的实体(转义字符)
实体的语法:
&实体的名字;
空格
> 大于号
< 小于号
© 版权符号
三、meta标签和title标签
meta标签主要用于设置网页中的一些元数据,元数据不是给用户看
charset 指定网页的字符集
name 指定的数据的名称
content 指定的数据的内容
keywords 表示网站的关键字,可以同时指定多个关键字,关键字间使用,隔开
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>
description 用于指定网站的描述
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!"/>
网站的描述会显示在搜索引擎的搜索的结果中
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">
//3秒后重定向
title标签的内容会作为搜索结果的超链接(标题)上的文字显示
四、语义化标签
块元素(block element)
- 在网页中一般通过块元素来对页面进行布局
行内元素(inline element)
- 行内元素主要用来包裹文字
- 一般情况下会在块元素中放行内元素,而不会在行内元素中放块元素
- 块元素中基本上什么都能放
- p元素中不能放任何的块元素
浏览器在解析网页时,会自动对网页中不符合规范的内容进行修正
比如:
标签写在了根元素的外部
p元素中嵌套了块元素
根元素中出现了除head和body以外的子元素
标题标签:
h1 ~ h6 一共有六级标题
从h1~h6重要性递减,h1最重要,h6最不重要
h1在网页中的重要性仅次于title标签,一般情况下一个页面中只会有一个h1
一般情况下标题标签只会使用到h1 h3,h4~h6很少用
标题标签都是块元素
hgroup标签用来为标题分组,可以将一组相关的标题同时放入到hgroup
p标签表示页面中的一个段落
p也是一个块元素
em用于表示语音语调的一个加重
strong表示强调,重要内容!
blockquote 表示一个长引用
q表示一个短引用
br标签表示页面中的换行
header 表示网页的头部
main 表示网页的主体部分(一个页面中只会有一个main)
footer 表示网页的底部
nav 表示网页中的导航
aside 和主体相关的其他内容(侧边栏)
article 表示一个独立的文章
section 表示一个独立的区块,上边的标签都不能表示时使用section
div 没有语义,就用来表示一个区块,目前来讲div还是我们主要的布局元素
span 行内元素,没有任何的语义,一般用于在网页中选中文字
五、列表
在html中也可以创建列表,html列表一共有三种:
1、有序列表
2、无序列表
3、定义列表
无序列表,使用ul标签来创建无序列表
使用li表示列表项
有序列表,使用ol标签来创建有序列表
使用li表示列表项
定义列表,使用dl标签来创建一个定义列表
使用dt来表示定义的内容
使用dd来对内容进行解释说明
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
浏览器显示如下:
-
Coffee
- black hot drink
-
Milk
- white cold drink
六、超链接
超链接可以让我们从一个页面跳转到其他页面,
或者是当前页面的其他的位置
使用 a 标签来定义超链接
属性:
href 指定跳转的目标路径
- 值可以是一个外部网站的地址
- 也可以写一个内部页面的地址
可以直接将超链接的href属性设置为#,这样点击超链接以后
页面不会发生跳转,而是转到当前页面的顶部的位置
可以跳转到页面的指定位置,只需将href属性设置 #目标元素的id属性值
target属性,用来指定超链接打开的位置
可选值:
_self 默认值 在当前页面中打开超链接
_blank 在一个新的页面中打开超链接
超链接是也是一个行内元素,在a标签中可以嵌套除它自身外的任何元素
相对路径
./表示当前文件所在目录 …/当前文件所在目录的上一级目录
七、图片标签
图片标签用于向当前页面中引入一个外部图片
使用img标签来引入外部图片,img标签是一个自结束标签
img这种元素属于替换元素(块和行内元素之间,具有两种元素的特点)
属性:
src 属性指定的是外部图片的路径(路径规则和超链接是一样的)
alt 图片的描述,这个描述默认情况下不会显示,有些浏览器在图片无法加载时显示
搜索引擎会根据alt中的内容来识别图片,如果不写alt属性则图片不会被搜索引擎所收录
width 图片的宽度 (单位是像素)
height 图片的高度
- 宽度和高度中如果只修改了一个,则另一个会等比例缩放
图片格式
jpeg(jpg)
- 支持的颜色比较丰富,不支持透明效果,不支持动图
- 一般用来显示照片
gif
- 支持的颜色比较少,支持简单透明,支持动图
- 颜色单一的图片,动图
png
- 支持的颜色丰富,支持复杂透明,不支持动图
- 颜色丰富,复杂透明图片(专为网页而生)
webp
- 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
- 它具备其他图片格式的所有优点,而且文件还特别的小
- 缺点:兼容性不好
base64
- 将图片使用base64编码,这样可以将图片转换为字符,通过字符的形式来引入图片
- 一般都是一些需要和网页一起加载的图片才会使用base64
效果一样,用小的
效果不一样,用效果好的
八、内联框架
内联框架,用于向当前页面中引入一个其他页面
src 指定要引入的网页的路径
frameborder 指定内联框架的边框(inline)
九、音视频
audio 标签用来向页面中引入一个外部的音频文件的
音视频文件引入时,默认情况下不允许用户自己控制播放停止
属性:
controls 是否允许用户控制播放
autoplay 音频文件是否自动播放
- 如果设置了autoplay 则音乐在打开页面时会自动播放
但是目前来讲大部分浏览器都不会自动对音乐进行播放
loop 音乐是否循环播放
//HTML5 <audio> 元素会尝试以 mp3 或 ogg 来播放音频。如果失败,代码将回退尝试 <embed> 元素
<audio controls height="100" width="100">
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
<embed height="50" width="100" src="horse.mp3">
</audio>
//HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败,则回退到 <embed> 元素。
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
</object>
</video>
十、表格
table标签来创建一个表格 仅支持boder属性 border=1 或“”
在table中使用tr表示表格中的一行,有几个tr就有几行
td属性:rowspan 纵向的合并单元格 colspan 横向的合并单元格
可以将一个表格分成三个部分:
头部 thead
主体 tbody
底部 tfoot
th 表示头部的单元格
表格样式CSS
border-spacing: 指定边框之间的距离
border-spacing: 0px;
border-collapse: collapse; 设置边框的合并
如果表格中没有使用tbody而是直接使用tr,
那么浏览器会自动创建一个tbody,并且将tr全都放到tbody中
tr不是table的子元素
tbody > tr:nth-child(odd) //选择属于tbody元素的第奇数个的子元素tr元素
先选第几个,在判断是不是该元素
tbody > tr:nth-type(N) //选择属于tbody元素的tr元素的第N个
先选元素,在判断第几个
十一、表单
表单:
- 在现实生活中表单用于提交数据
- 在网页中也可以使用表单,网页中的表单用于将本地的数据提交给远程的服务器
- 使用form标签来创建一个表单
form的属性
action 表单要提交的服务器的地址
数据要提交到服务器中,必须要为input元素指定一个name属性值
文本框 <input type="text" name="username">
密码框 <input type="password" name="password">
单选按钮
- 像这种选择框,必须要指定一个value属性,value属性最终会作为用户的填写的值传递给服务器
- checked 可以将单选按钮设置为默认选中
单选按钮
<input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>
多选框
<input type="checkbox" name="test" value="1">
<input type="checkbox" name="test" value="2">
<input type="checkbox" name="test" value="3" checked>
下拉列表
<select name="haha">
<option value="i">选项一</option>
<option selected value="ii">选项二</option>
<option value="iii">选项三</option>
</select>
autocomplete=“off” 关闭自动补全
readonly 将表单项设置为只读,数据会提交
disabled 将表单项设置为禁用,数据不会提交
autofocus 设置表单项自动获取焦点