简介：HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体

第一章 FirstHtml

注释书写

快捷键为：
ctrl + /

元素

  • 整体：element(元素)
    起始标记 + 结束标记 + 元素内容 + 元素属性
1
<a href="http://bilibili.com" title="鼠标指着我有提示哦">bilibili</a>
  • 属性的分类：
    • 局部属性：某些元素特有的属性
    • 全局属性：所有元素通用

有些元素没有结束标记，这样的元素叫 空元素

1
<meta charset="UTF-8">

元素不能相互嵌套

标准的文档结构

1
<!DOCTYPE html> <!-- 文档声明，说明当前文档使用的HTML标准是H5-->

不写文档声明，将导致浏览器进入怪异渲染模式

1
<html lang="en">

根元素，一个页面最多只能一个，并且该元素是所有其他元素的父元素或者祖先元素(可以不写)

第二章 语义化

  1. 每一个HTML元素都有具体的含义
  • a元素：超链接
  • p元素：段落
  • h1元素：一级标题
  1. 所有元素与展示效果无关
  • 元素展示到页面中的效果，应当由css决定

第三章 HTML实体

  • 实体字符，HTML Entity

  • 实体字符通常用于在页面中显示一些特殊符号

  1. &单词;
  2. &#数字;
  • 小于符号：<
  • 大于符号: >
  • 空格符号： 
  • 版权符号：©
  • &符号本身：&

第四章 文本元素

HTML5中支持的元素：HTML5的元素周期表

h

  • h1-h6:表示1-6级标题(head)

p

  • 段落(paragraphs)
  • 乱数假文(lorem)：没有任何实际含义的文字

span [无语义]

  • 没有语义，仅仅用于设置样式

  • 某些元素在显示时会独占一行(块级元素)，而某些元素(行级元素)不会

  • 到了HTML5已经弃用这种说法

pre [无语义]

  • 预格式化文本元素

  • 空白折叠：在源代码中的连续空白字符(空格、换行、制表)，在页面显示时会被折叠成一个。

    • 例外：在pre元素中的内容不会出现空白折叠

  • 在pre元素内部出现的内容，会按照源代码格式显示在页面上

  • 该元素通常用于在网页中显示一些代码

  • pre元素的本质是有一个默认的css属性，故可以改变其他元素的css也能达到效果

显示代码时，通常外面套code元素，code表示代码区域

第五章 a元素

  • 超链接

herf属性

  • hyper reference:通常表示跳转地址
  1. 跳转地址
  2. 跳转某个锚点(自跳转)
  • id属性：全局属性，表示元素在文档中的唯一编号

第六章 路径的写法

站内资源和站外资源

  • 站内资源：当前网站的资源
  • 站外资源：非当前网站的资源

绝对路径和相对路径

推荐：

  • 站外资源：绝对路径(不可以使用相对路径)
  • 站内资源：相对路径(也可以使用绝对路径)
  1. 绝对路径
  • 绝对路径的基本格式：(url地址)
1
2
协议名://主机名:端口号/路径
schema://host:port/path

  • 当跳转目标和当前页面的协议相同时，可以省略协议

  • 协议名:http、https、file

  • 主机名：域名、ip地址

  • 端口号：如果协议是http协议，默认端口号80；如果为https协议

  • 端口号为443

  1. 相对路径
  • 以./开头，./表示当前资源所在的目录
  • 可以书写../表示返回上一级目录

第七章 图片元素

img元素

  • img缩写，空元素

  • src属性：source(资源)

  • alt属性：当图片资源失效时，将该使用的属性的文字替换成图片

和a元素连用

直接在里面使用就好

和map元素

点不同的区域就有不同的跳转
使用map标签命名，使用img内的usemap联系

  • map的子元素：area

  • area：

    • shape：圆形、矩形、多边形
    • coords：坐标
    • href：形状的链接地址
    • alt：无法显示时显示的文字内容
    • ltarget：是否是新窗口

  • 衡量坐标时，为了避免衡量误差，需要使用专业的衡量工具

和figure元素

指定义，通常用于把图图片标题、描述包裹起来。

第八章 多媒体元素

  • video 视频
  • audio 音频

video

  • 显示播放控件：controls：控制控件的显示，取值只能为controls。

  • 某些属性只有两种状态：1.不写 2.取值为属性名，这种属性叫做布尔属性

  • 布尔属性在h5中不需要书写属性值，书写了就是有该属性值

    • autoplay:布尔属性，表示自动播放。
    • muted:布尔属性，表示静音播放。
    • loop:布尔属性，表示循环播放。

audio

  • 和视频的完全一致。

兼容性

  1. 旧版本的浏览器不支持这两个元素
  2. 不同的浏览器支持的音视频格式可能不一致

mp4、webm

第九章 列表元素

有序列表

  • ol：ordered list
  • li：list item

type属性应避免使用，要尽量使用CSS来工作：list-style-type:
reversed:倒序

无序列表

把ol改成ul

  • ul：unordered list

decimal可以将无序列表看起来像有序列表

无序列表常常用于制作菜单或者新闻列表

定义列表

通常用于属于的定义

  • dl：definition list

  • dt：definition title 标题

  • dd：definition description 描述内容

第十章 容器元素

容器元素：该元素代表一个块区域，内部用于放置其他元素

div元素

没有语义，只用于划分区域，区域的属性全靠css来控制
优点：纯净，没有乱七八糟的样式
缺点：浏览器无法识别该区域的意思

语义化容器元素

  • header：通常用于表示页头，也可以用于表示文章头部

  • footer:通常用于表示页脚，也可以用于表示文章的尾部

  • artcile:用于表示文章

  • section：通常用于表示文章的章节

  • aside：通常用于表示附加的信息（侧边栏）

第十一章 元素包含关系

以前，块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外

元素的包含关系由元素的内容类别决定

eg：查看h1元素中是否包含p元素（不可以）

总结：

  1. 容器元素可以包含任何元素
  2. a元素几乎可以包含任何元素
  3. 某些元素有固定的子元素(ul>li,ol>li,dl>dt+dd)
  4. 标题元素和段落元素不能相互嵌套，并且不能包含容器元素（h1和p）

第十二章 添加样式

术语解释

1
2
3
4
5
.cnt{
    color:red;
    background-color: lightblue;
    text-align: center;
}

css规则 = 选择器 + 声明块

选择器

选择器：用于选中元素(选中h1)
同一标签的所有元素都会被选中

  1. ID选择器：选中的是对应ID值的元素，通常用于只使同一标签的其中一个元素选中
    格式：#+idName{…}
  2. 元素选择器：直接给标签声明css，这样使整个相同标签全部被赋予css
    格式示例：p{…}
  3. 类选择器：将ID选择器和元素选择器的功能结合起来了，能使相同class名称的所有元素被赋予css
    格式：.+className{…}
    注意，一个标签里面可以出现多个类，因此多个类选择器都可以出现在一个标签，并且还会有这些类选择器的css格式结合，有相同的元素类型时，后面覆盖前面

声明块

出现在大括号中

声明块包含很多声明(属性)，每一个声明表达了某一方面的样式

color:字体颜色
background-color:字体背景颜色
text-align:字体对齐方式

CSS代码书写位置

  1. 内部样式表：书写在style元素里面

一般style元素书写到head里面，这样浏览器阅读代码的时候先会注意到CSS并预先加载
style元素也可以书写到body里，不过不推荐
好处：少读一个文件，第一次读取可以提高读取速度

  1. 内联样式表(元素样式表)：直接书写在要改变样式的标签里面，这样不需要选择器了
    eg：

    …

  2. 外部样式表[推荐]：将样式直接书写在独立的css文件里面
    通常用标签填写url地址来引入css文件
    rel=”stylesheet”连接样式表
    ctrl+click=新页面打开

推荐原因：

  1. 外部样式表可以解决多页面样式重复的问题
  2. 有利于浏览器缓存，提高页面响应速度(下一次读取页面不需要重新读取css了)
  3. 有利于代码分离(HTML和CSS)，更容易阅读和维护