HTML CSS整理笔记(一)

作者: web 发布时间: 2019-11-08 浏览: 1819 次 编辑

不断学习,后期的新增笔记会继续加到文章上方

完成笔记链接:https://www.niwoxuexi.com/blog/web/article/1245

点击链接后退页面:

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

——修改placeholder提示的样式:

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)为搜索引擎定义关键词:

<meta name="keywords" content="HTML,CSS,XML,XHTML,JavaScript">

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

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

(4)定义网页作者:

<meta name="author" content="Hege Refsnes">

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

<meta http-equiv="refresh" content="30">

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

9.注释 <!--内容-->

10.特殊符号:空格&nbsp; >大于号&gt; <小于号&lt; "引号&quot; 版权符号&copy;

11.常用图片格式:JPG、GIF、PNG、BMP

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

<img src="图片地址" alt="图片的替代文字" title="鼠标悬停提示文字" width="图片宽度" height="图片高度" />

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

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

14.链接地址

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

百度)、

(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)


HTML CSS整理笔记更多笔记

HTML CSS整理笔记(一)HTML5基础

HTML CSS整理笔记(二)列表、表格、媒体元素

HTML CSS整理笔记 (三)表单

HTML CSS整理笔记(四)CSS3基础

HTML CSS整理笔记(五) CSS3美化网页

HTML CSS整理笔记(六)盒子模型

HTML CSS整理笔记 (七) 浮动

HTML CSS整理笔记 (八) 定位网页元素

HTML CSS整理笔记 (九) CSS3做网页动画

HTML CSS整理笔记 (十)HTML部分