HTML CSS整理笔记(路过不要错过,你无法记住的笔记,建议收藏)

核心提示点击链接后退页面:回到上一个网页——修改placeholder提示的样式:1.除IE外通用写法类名或标签名::placeholder {color: red;}2.加兼容前缀写法css超出一行显示省略号:给定宽度、超出隐藏(overflow

点击链接后退页面:

回到上一个网页

——修改placeholder提示的样式:

1.除IE外通用写法

类名或标签名::placeholder {color: red;}

2.加兼容前缀写法

css超出一行显示省略号:

给定宽度、

超出隐藏(overflow:hidden)、

强制在同一行显示(white-space: nowrap)、

省略号(text-overflow:ellipsis)

——常见字体单位——

1.em

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

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.ta>标签:用于方便浏览器解析或搜索引擎搜索,一般放置于中,用"名称/值"方式:

表示文档内容类型、字符串编码信息 如:ta charset="UTF-8">

为搜索引擎定义关键词:

ta name="keywords" content="HTML,CSS,XML,XHTML,Javascript">

为网页定义描述内容:

ta name="description" content="Free Web tutorials on HTML and CSS">

定义网页作者:

ta name="author" content="Hege Refsnes">

每30秒中刷新当前页面:

ta http-equiv="refresh" content="30">

8.字体样式标签:

字体变粗、字体倾斜

9.注释

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

片格式:JPG、GIF、PNG、BMP

12.图片标签,必须要有src和alt属性:

13.超链接标签

附连接的文本或图像

14.链接地址

绝对路径、

相对路径

相对路径中"../"表示当前目录的上级目录,"../../"表示上上级目录

15.超链接的应用场合:

页面间链接:如为您跳转到登录页

锚链接:

先在目标位置B设置标记如:这里是目标位置,

然后在A位置设置链接路径href属性值为"#标记名"如:

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

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

16.元素分类

块元素:如

无论内容有多少,该元素都独占一行。

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

行内元素:如

显示宽度由自己的内容决定,其他元素可以排在它后面。

16.元素类型转换:

块状元素转为内联元素:display: inline;

内联元素转为块状元素:display: block;

把元素设为内联块状元素: display: inline-block;

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

17.三种列表:

有序列表

  1. 无序列表

    • ul中只能嵌套li,而li可以嵌套任意标签。

      定义列表

      是标题及列表项的结合。

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

      跨行:

      ,两者都要删除被合并的其他单元格。

      表格特点:同行单元格高度一致且水平对齐,同列单元格宽度一致且垂直对齐。

      19.视频元素:

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

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

      2.优酷解决方案

      如果要在网页中播放视频,可把视频上传到优酷等视频网站,然后在你的网页中插入 HTML代码即可播放视频:

      3.使用超链接

      如果网页包含指向媒体文件的超链接,大多数浏览器会使用"辅助应用程序"来播放文件。

      以下代码指向 AVI文件的链接。如果用户点击该链接,浏览器会启动"辅助应用程序"如 Windows Media Player 来播放该 AVI 文件:

      播放该视频

      HTML中如何键入空格?

      1.用空格占位符 

      但 有不间断的特性。即连续的 会在同一行内显示。即使有100个连续的 ,浏览器也不会把它们回车拆行。

      2.段落间距

      、换行

      3.用JS动态给HTML添加空格:

      例为照顾CSS样式或照顾特殊效果的实现。如果你不单单想让p之间是null,而是想动态添加空格的话,这样:

      $.innerHTML += " ";——display: none; 元素不显示也不会占位visibility: hidden; 元素只是隐藏但仍然占位置visibility: collapse; 隐藏但不占空间,类似display:none;——clip 剪辑一个绝对定位的元素。clip : rect;

      CSS 伪类:

      1.Anchor伪类

      在支持 CSS 的浏览器中,链接的不同状态可用不同的方式显示:

      • a:link {color:#FF0000;}
      • a:visited {color:#00FF00;}
      • a:hover {color:#FF00FF;}
      • a:active {color:#0000FF;}

      2.CSS类和伪类配合使用:

      • p : first-child{ } 匹配父级中第一个

        子元素

      • p > i:first-child{ } 匹配所有

        元素的第一个 子元素

      • p:first-child i{ } 匹配第一个

        元素中的所有 元素

      • ——
      • White-space属性:设置如何处理元素内的空白。
      • normal 默认。空白会被浏览器忽略。
      • pre 空白会被浏览器保留。其行为方式类似
        标签。
      • nowrap 文本不会换行,文本在同一行上继续,直到遇到
        为止。
      • pre-wrap 保留空白符序列,但是正常地进行换行。
      • pre-line 合并空白符序列,但是保留换行符。
      • inherit 从父元素继承 white-space 属性的值。

      ——

      浏览器兼容前缀:

      • -moz- 火狐等使用 Mozilla内核的浏览器
      • -webkit- 谷歌、Safari等使用 Webkit内核的浏览器
      • -o- Opera浏览器,使用Blink内核
      • -ms- IE,使用 Trident内核

      ——viewport 是用户网页的可视区域。

       
      友情链接

      HTML5中已废除table的border属性,用css控制边框宽度。

      跨列:

      内容内容