HTML基础知识

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 不区分大小写，但实体字符对大小写敏感。

空格 &nbsp

< 小于号 &lt

> 大于号 &gt

​ 在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格

​ 在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 设置表单项自动获取焦点