HTML CSS整理笔记(一）

今天跟大家说一下HTML CSS整理笔记吧
一起来学习复习下吧，一起加油吧！
小常说一下：
只为成功想办法,不为失败找理由

从这里往下是分类整理，一下子可能总结不完成，我会连续总结完的，那么接下来跟小常一起学习吧！

1.除IE外通用写法
类名或标签名::placeholder {color: red;}
2.加兼容前缀写法

css超出一行显示省略号：
给定宽度(width:100px)、
超出隐藏（overflow:hidden）、
强制在同一行显示（white-space: nowrap）、
省略号（text-overflow:ellipsis）

——常见字体单位——
1.em
移动端常用的字体尺寸单位，相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5。
但当div进行嵌套时，em始终按当前div继承的字体大小来缩放。

2.rem
r是root的意思，即相对于根节点html的font-size进行缩放，当有嵌套关系时，嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。

3.vh
vh就是当前屏幕可见高度的1%，即 height:100vh == height:100%;
它的好处是当元素没有内容时候，设置height:100%该元素不会被撑开，
但设置height:100vh，该元素会被撑开屏幕高度一致。

4.vw
viewpoint width，视窗宽度，1vw = 视窗宽度的1%。
vw就是当前屏幕宽度的1%，
当设置width:100%，被设置元素的宽度是按照父元素的宽度来设置，
但100vw是相对于屏幕可见宽度来设置，所以会出现50vw 比50%大的情况。

——1.HTML5基础——
5.在网页中，HTML决定结构和内容，CSS设定网页的表现样式，JavaScript控制网页的行为。
6.必须位于HTML文档第一行。
7.标签：用于方便浏览器解析或搜索引擎搜索，一般放置于中，用"名称/值"方式：
(1)表示文档内容类型、字符串编码信息 如：
(2)为搜索引擎定义关键词:

(3)为网页定义描述内容: (4)定义网页作者: (5)每30秒中刷新当前页面:

8.字体样式标签：字体变粗、字体倾斜
9.注释
10.特殊符号：空格  >大于号> <小于号< “引号” 版权符号©

11.常用图片格式：JPG、GIF、PNG、BMP
12.图片标签，必须要有src和alt属性：

13.超链接标签(target指定在哪个窗口打开 值有_self自身窗口、_blank新建窗口)
附连接的文本或图像
14.链接地址
(1)绝对路径(指向目标地址的完整描述 多指向本站点外的文件
如百度)、
(2)相对路径(一般指向本站点内的文件,如登陆)
(3)相对路径中"…/“表示当前目录的上级目录，”…/…/“表示上上级目录
15.超链接的应用场合：
(1)页面间链接：如<a href=“login.html target=”_blank”>为您跳转到登录页
(2)锚链接：
先在目标位置B设置标记如：这里是目标位置，
然后在A位置设置链接路径href属性值为"#标记名"如：<a href="#marker"当前位置A
(3)功能性链接：单击时启动本机自带的应用程序如QQ、电子邮箱等
如电子邮件链接：“mailto:电子邮件地址”

16.元素分类
(1)块元素：如

无论内容有多少，该元素都独占一行(一块)。
块状元素特点：如果没有设置自身宽度，则显示为父容器的100%。
(2)行内元素：如 显示宽度由自己的内容决定，其他元素可以排在它后面。

16.元素类型转换：
(1)块状元素转为内联元素：display: inline;
(2)内联元素转为块状元素：display: block;
(3)把元素设为内联块状元素： display: inline-block;
(就是同时具备内联元素、块状元素特点，如img、input)

——2 列表、表格、媒体元素——
17.三种列表：
(1)有序列表

1. 
   (2)无序列表
   • ul中只能嵌套li，而li可以嵌套任意标签。
     (3)定义列表

     是标题及列表项的结合。
     18.表格基本结构：单元格、行、列
     (1)
     跨行(竖跨)：，两者都要删除被合并的其他单元格。
     (4)表格特点：同行单元格高度一致且水平对齐，同列单元格宽度一致且垂直对齐。

     	(2)HTML5中已废除table的border属性，用css控制边框宽度。 (3)跨列(横跨)：	内容	内容

19.视频元素：
(1)controls属性提供播放暂停和音量控件、autoplay属性自动播放、loop属性循环播放
你的浏览器不支持video标签
(2)source元素链接不同的视频文件，浏览器会自动选择第一个可识别的格式：

你的浏览器不支持video标签 20.音频元素：使用语法和视频元素一样，只要把video换成audio即可。

21.HTML5的结构元素(先划分结构再写内容)：
header(头部)、footer(脚部)、
section(独立区域)、article(独立文章内容)、
aside(相关内容或应用,常用于侧边栏)、nav(导航类辅助内容)

22.框架:方便在页面中引用站外的页面内容。

23.和锚链接的结合：使锚链接的内容在iframe框架中打开 点击在框架中打开

——3 表单——
24.表单标签form：

表单内容 (1)action="url"属性意为把表单提交到某个页面,method=get|post意为向服务器发送数据的方式。 (2)提交方法：get提交,表单数据会在地址栏url中显示；而post提交不会显示，所以post提交更安全。 (3)enctype="text/plain"指enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。text/plain 空格转换为加号+，但不对特殊字符编码。

24.表单元素：
(1)表单元素标签的属性：
type(默认text,其他password,email,checkbox,radio,button,submit,reset,file,image,url,hidden,number,range,search等)、name、value(可选,该元素的初始值)、size(该元素的初始宽度)、maxlength(可输入的最大字符数)、checked(按钮被选中)
(2)列表框标签：
中至少包含一个。在有多行选项需滚动查看时，size属性设置可提示看到的行数，selected属性默认选中该列表项。
(3)按钮：button普通(要和事件如onclick关联使用),submit(提交表单到action指定的url并传递表单数据),reset重置。要求美观可使用图片按钮如
(4)多行文本域：不能用value属性赋初始值

自我评价

(5)数字number：限制输入的数据为数字，设定最大值最小值、合法的数据间隔step或默认值等

(6)滑块range：作用和数字number一样，只是外观显示为用滑动条选择数值

(7)search搜索框:在任意页面中用于输入搜索关键词的文本框

(8)文件域：多用于文件上传


(9)当表单数据包含普通数据、文件数据等多部分内容时，要设置表单的enctype编码属性为 multipart/form-data,表示把表单数据分为多部分提交。
(10)表单隐藏域hidden：数据不会页面中显示，但会随表单一同提交。

(11)表单元素 只读属性readonly、禁用disabled
(12)W3CHTML5标准中，规定对布尔类型的属性，属性值可以省略。
(13)表单元素的标注label：当鼠标单击标注的文本时，浏览器会自动对焦关联的表单元素，for属性规定label与哪个表单元素绑定。name和id属性必需。
女

24.HTML5表单新标签

供用户输入的表单 输入域 文本域 (多行输入) 定义 元素的标签，一般为输入标题 定义一组相关的表单元素，并使用外框包含起来 定义 元素的标题 下拉选项列表 选项组 下拉列表中的选项 点击按钮 指定一个预先定义的输入控件选项列表 定义了表单的密钥对生成器字段 计算结果

25.表单验证
(1)好处：减轻服务器的压力；保证数据的可行性和安全性。
(2)placeholder:为文本框提示用户输入

(3)required：规定文本框不能为空

(4)pattern：输入的内容必须符合正则表达式自定义的规则
规定以13、15开头的11位数字

——4 CSS3基础——
26.CSS：Cascading Style Sheet层叠样式表,又称风格样式表Style Sheet，用于设计网页风格。
27.CSS3的基本语法结构：
(1)CSS中注释为 /内容/
(2)CSS规则由选择器、声明组成。
(3)声明必须放在大括号{}中，声明可以是一或多条。
(4)每条声明由一个属性和值组成，属性和值用冒号:分开，每条语句以分号;结尾如

28.在HTML中引入CSS样式的方式：
(1)行内样式：直接在标签中用style属性设置CSS样式。

字体大小

(2)内部样式表：把css代码写在的 29.样式优先级："就近原则"，行内样式>内部样式表>外部样式表 当有很多样式时，用 !important 可以为某一个样式覆盖掉其他所有样式。 如 #textcolor{ clor:pink !important;}

30.CSS选择器命名规范：驼峰命名法，用语义化单词命名且不能和ID选择器同名.
31.CSS3的基本选择器
(1)标签选择器：以标签名作选择器的名称如 h1{color:red;}
(2)类选择器：选择器名可自定义如 .red{color:red;}同时要设置<标签 class=“red”>内容</标签>
(3)ID选择器：选择器名可自定义如 #red{color:red;}同时要设置<标签 id=“red”>内容</标签>，但同一个id属性的选择器在页面中只能用一次。

32.基本选择器的优先级：ID选择器>类选择器>标签选择器
31.CSS3的高级选择器
1.层次选择器：
(1)后代选择器A B{ }：中间用空格隔开，只要是A的后代元素都会被选中。
(2)子选择器A>B{ }：只能选择A的子元素。
(3)相邻兄弟选择器A+B{ }：只用于A后面一个同级元素
(4)通用兄弟选择器A~B{ }：用于A后面所有的同级元素

2.结构伪类选择器：根据文档对象模型DOM的节点(元素级别)来操作。
(1)B:first-child 作为父元素的第一个子元素B，作用和(3)相似
(2)B:last-child 作为父元素的最后一个子元素B
(3)A B:nth-child(n) 在父级中查第n个子元素是不是B，不分类型
(4)B:first-of-type 选择父元素内B类型的第一个元素B
(5)B:last-of-type 选择父元素内B类型的最后一个元素B
(6)A B:nth-of-type(n) 在父级里先是不是B类型，再看位置n

3.属性选择器：
(1)A[arrt] 选择包含属性arrt的A标签(也可写多个属性，但要同时存在)
(2)A[arrt = val] 选择包含属性arrt,且属性值=val(区分大小写)的A标签
(3)A[arrt ^= val] 选择包含属性arrt,且属性值以val开头的任意字符串
(4)A[arrt $= val] 选择包含属性arrt,且属性值以val结尾的任意字符串
(5)A[arrt *= val] 选择包含属性arrt,且属性值包含val字符串的A标签

今天就到这里吧！明天继续呦！嘿嘿加油！

来源：CSDN

作者：轻松熊也不轻松

链接：https://blog.csdn.net/weixin_44799645/article/details/103196304