HTML CSS整理笔记（建议收藏）

最新推荐文章于 2024-03-14 16:59:07 发布

程序员的生活1

最新推荐文章于 2024-03-14 16:59:07 发布

阅读量1k

点赞数 1

分类专栏： js web前端 html+css 文章标签： css javascript html css3

本文链接：https://blog.csdn.net/lin123_00/article/details/105710826

版权

本文详细介绍了HTML与CSS的基础知识，包括HTML标签、样式表的使用、表单元素、CSS选择器及布局模型。通过示例展示了如何设置文本样式、创建链接、处理图片和视频，以及实现页面布局。此外，还讨论了CSS3的新特性，如伪类、单位和颜色值。内容涵盖HTML5的新元素和表单验证，以及CSS3的美化网页技巧，为前端开发者提供了全面的学习指南。

摘要由CSDN通过智能技术生成

点击链接后退页面：

<a href="javascript:history.go(-1)">回到上一个网页</a>

——修改placeholder提示的样式：

打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）

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.<!DOCTYPE html>必须位于HTML文档第一行。

7.<meta>标签：用于方便浏览器解析或搜索引擎搜索，一般放置于<head>中，用"名称/值"方式：

(1)表示文档内容类型、字符串编码信息如：<meta charset="UTF-8">

(2)为搜索引擎定义关键词:

(3)为网页定义描述内容:

(4)定义网页作者:

(5)每30秒中刷新当前页面:

8.字体样式标签：<strong>字体变粗、<em>字体倾斜

9.注释 

10.特殊符号：空格  >大于号> <小于号< "引号" 版权符号©

片格式：JPG、GIF、PNG、BMP

12.图片标签，必须要有src和alt属性：

13.超链接标签(target指定在哪个窗口打开值有_self自身窗口、_blank新建窗口)

<a href="链接地址" target="目标打开窗口位置">附连接的文本或图像</a>

14.链接地址

(1)绝对路径(指向目标地址的完整描述多指向本站点外的文件

如百度一下，你就知道" rel="nofollow">百度)、

(2)相对路径(一般指向本站点内的文件,如<a href="login/login.html">登陆<a>)

(3)相对路径中"../"表示当前目录的上级目录，"../../"表示上上级目录

15.超链接的应用场合：

(1)页面间链接：如<a href="login.html target="_blank">为您跳转到登录页</a>

(2)锚链接：

先在目标位置B设置标记如：<a name="new">这里是目标位置</a>，

然后在A位置设置链接路径href属性值为"#标记名"如：<a href="#marker"当前位置A</a>

(3)功能性链接：单击时启动本机自带的应用程序如QQ、电子邮箱等

如电子邮件链接："mailto:电子邮件地址"

16.元素分类

(1)块元素：如<p><h1><div>无论内容有多少，该元素都独占一行(一块)。

块状元素特点：如果没有设置自身宽度，则显示为父容器的100%。

(2)行内元素：如<strong><a> 显示宽度由自己的内容决定，其他元素可以排在它后面。

16.元素类型转换：

(1)块状元素转为内联元素：display: inline;

(2)内联元素转为块状元素：display: block;

(3)把元素设为内联块状元素： display: inline-block;

(就是同时具备内联元素、块状元素特点，如img、input)

——2 列表、表格、媒体元素——

17.三种列表：

(1)有序列表<ol><li>

(2)无序列表<ul><li> ul中只能嵌套li，而li可以嵌套任意标签。

(3)定义列表<dl><dt><dd> 是标题及列表项的结合。

18.表格基本结构：单元格、行、列

(1)<table><tr><th><td>

(2)HTML5中已废除table的border属性，用css控制边框宽度。

(3)跨列(横跨)：<td colspan="所跨的列数">内容</td>

跨行(竖跨)：<td rowspan="所跨行数">内容</td>，两者都要删除被合并的其他单元格。

(4)表格特点：同行单元格高度一致且水平对齐，同列单元格宽度一致且垂直对齐。

19.视频元素：

(1)controls属性提供播放暂停和音量控件、autoplay属性自动播放、loop属性循环播放

<video src="视频路径" controls="controls">你的浏览器不支持video标签</video>

(2)source元素链接不同的视频文件，浏览器会自动选择第一个可识别的格式：

<source src="video/video.mp4" />你的浏览器不支持video标签

<video>

20.音频元素：使用语法和视频元素一样，只要把video换成audio即可。

21.HTML5的结构元素(先划分结构再写内容)：

header(头部)、footer(脚部)、

section(独立区域)、article(独立文章内容)、

aside(相关内容或应用,常用于侧边栏)、nav(导航类辅助内容)

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

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

<a href="链接路径" target="mainFrame">点击在框架中打开</a>

——3 表单——

24.表单标签form：

表单内容

</form>

(1)action="url"属性意为把表单提交到某个页面,method=get|post意为向服务器发送数据的方式。

(2)提交方法：get提交,表单数据会在地址栏url中显示；而post提交不会显示，所以post提交更安全。

(3)enctype="text/plain"指enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。text/plain 空格转换为加号+，但不对特殊字符编码。

24.表单元素：

(1)表单元素<input>标签的属性：

type(默认text,其他password,email,checkbox,radio,button,submit,reset,file,image,url,hidden,number,range,search等)、name、value(可选,该元素的初始值)、size(该元素的初始宽度)、maxlength(可输入的最大字符数)、checked(按钮被选中)

(2)列表框<select><option>标签：

<select>中至少包含一个<option>。在<option>有多行选项需滚动查看时，size属性设置可提示看到的行数，selected属性默认选中该列表项。

(3)按钮：button普通(要和事件如onclick关联使用),submit(提交表单到action指定的url并传递表单数据),reset重置。要求美观可使用图片按钮如<input type="image" src="图片路径"/>

(4)多行文本域：不能用value属性赋初始值

自我评价

</textarea>

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

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

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

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

(9)当表单数据包含普通数据、文件数据等多部分内容时，要设置表单的enctype编码属性为 multipart/form-data,表示把表单数据分为多部分提交。

(10)表单隐藏域hidden：数据不会页面中显示，但会随表单一同提交。