2021-01-30

HTML CSS
HTML
【第1章 初识HTML】
基本骨架

• !DOCTYPE：声明文档类型 供浏览器解读

• html：HTML标签

  • lang：语言，定义语言为英语：en，中文：zh-CN

• head：文档的头部

  • base
    可以统一添加属性

-### HTML总结 • 【第2章 标签】

//1.排版标签

标题：
，h1最大 h6最小
段落：
换行：
水平线：
分区：div
范围：span
//2.文本格式化标签

加粗：
倾斜：
文本删除线：
文本下划线：
缩小一号：
增大一号：
//3.预格式化标签

作用：保留编码时的格式

//4.&符号

空格：&nbsp
大于/小于：&gt/&lt
版权：&copy
&符号：&amp
//5.超链接标签

用法

文本或图像
锚点：页面内部跳转

给标签一个id和值
给a标签href值=#id名称

指定链接目标：href

本地html，或者远程url页面地址：跳转
资源文件：下载

图像、表格、音频、视频等都可以添加超链接

弹出方式：target

_self默认值
_blank新窗口打开

//6.图片标签

用法

指定图片目标：src

同一级：目标名称
进一级：文件名/

退一级：…/

绝对路径：绝对地址

属性

宽：width
高：height

边框：border

图片无法显示的提示：alt

鼠标移上去，显示的内容：title

拖动：draggable（true false）

如果只给一个宽或只给一个高，等比例缩放

//7.视频和音频标签

视频标签：video

兼容：MP4和WebM MP4和Ogg

如果浏览器不支持导致视频不能播放，video包裹的文字就会显示

音频标签：audio

兼容：MP3和WAV MP3和Ogg

如果浏览器不支持导致视频不能播放，audio包裹的文字就会显示

标签：多个资源：source

属性

显示控件：centrols
循环播放：loop

自动播放：autoplay

停止播放：paused

是否静音：muted

在播放：played

//8.emmet语法

作用

快捷生成html相关标签的一种语法，其他软件需要安装
用法

生成骨架：!+tab
生成一个标签：标签

生产多个标签：标签*数字

父子关系：父标签>子标签

兄弟关系：兄弟1+兄弟2

有id属性的标签：标签 #id名

有类属性的标签：标签 .类名

生成标签带内容：标签{内容}

计数器：标签名{$}*数字

指定标签的属性：标签[属性名=属性值]

//9.表格

分层

表格容器/行容器/单元格容器：table/tr/td
标签

表头单元格标签：th、文字会居中且加粗
表格标题标签：caption

题头：thead

正文：tbody

脚注：tfoot

属性

跨行合并：rowspan
跨列合并：colspan

边框：border

边框颜色：bordercolor

背景颜色：bgcolor

单元格之间的间距：cellspacing默认2像素

单元格内容与边框的间距：cellpadding默认1像素

表格宽度：width

表格高度：height

水平对齐：align=“left/center/right”

垂直对齐：valign=“top/middle/bottom”

//10.列表

无序列表：ul

实心圆(默认值)：disc
圆环：circle

方形：square

不显示标记：none

有序列表：ol

数字(默认值)：1
字母：a/A

罗马数字：i/I

自定义列表：dl/dt/dd

dt是小标题、dd是对dt的解释
//11.表单

基本表单结构

-     - 功能：提交数据
-     - 表单域：form
-     - 输入型控件必须要有name属性和value值
-     - 表单控件、位于表单域以内

1
2
3
4
表单控件：input

• 数据的提交去向：action
  1
  数据的提交方式：method：get/post

说明标签、用id产生关联：label

• 文本框：text
  1
  密码框：password

邮箱框：email

数字框：number，间隔属性：step

搜索框：search

• 文本域：textarea
  1
  文件域：file

选择域：select/optgroup/option

隐藏域：hidden

滑块：range

• 提交按钮：submit
  1
  单选按钮：radio

复选按钮：checkbox

图片按钮：image

普通按钮：button

清空按钮：reset

属性

• 名称：name
  1
  提交的值：value

显示宽度：size

控制输入的字符数：maxlength

最小：min

最大：max

输入为空显示的字符：placeholder

自动获得光标：autofocus

• 必填项：required
  1
  只读：readonly

禁用：disabled

单选/多选设置默认选中：checked

正则表达式：pattern

设置上传的文件类型：accept

下拉列表允许多选：multiple

文本域防止拖拽：resize：none;

• name会变成变量名
  1
  value会变成变量值

表单type类型

• 接收URL：url
  1
  接收电话号码：tel

表单属性

• 自动完成：autocomplete、取值 no 和 off
  1
  不进行内容验证：novalidate

//12.内嵌标签

用法

属性

引用地址：src
1
框架名：name
和超链接达成关联：target=“name”

边框：frameborder

页面滚动：scrolling

//13.嵌入对象：object

作用

是用来定义一个嵌入的对象，经常用来在页面中添加多媒体
（图像、音频、视频、Java applets、ActiveX、PDF、Flash等
属性

规定对象所属的表单：form（值：form_id）
指定供对象处理的数据文件的 URL：data（值：URL）
data属性中规定的数据的 MIME 类型：type
宽：width
高：height
名称：name
规定与对象一同使用的客户端图像映射的 URL：usemap
CSS
CSS总结 • 【第1章 CSS简介和选择器】
CSS简介

CSS是cascading Style Sheet的缩写
1
CSS全称为"级联样式表"，通常又称为“风格样式表"用于网页风格设计
CSS的三种引入方式

行内式：

1
内嵌式：内写样式
外链式：
插入图标：
JS里写样式：背景颜色style.backgroundColor=“red”
选择器
标签选择器：通过标签选择

标签名{ 样式属性:样式值; }
类选择器：通过class选择

.class值{ 样式属性:样式值; }
不能以数字开头

id选择器；通过id选择

#id名{ 样式属性:样式值; }
不能以数字开头，具有唯一性

通配选择器；通过*选择

交集选择器

从多个相同的元素中选择想选择的元素
用法：由两个选择器连接构成， span.类{} span#id{}

并集选择器

同时给各个选择器添加相同的部分样式
用法：通过逗号连接选择器， 选择器1,选择器2{}

层次选择器

后代：M N{}
父子：M>N{}

兄弟：M~N{}当前M下面的所有兄弟N

相邻：M+N{}当前M相邻的N标签

优先级

行内式>内嵌式>外链式
id选择器>类选择器>标签选择器>通配选择器

最优先：!important

伪类选择器