HTML＆CSS日常知识点总结

HTML

meta
- 标签永远位于文档的头部,即head元素内部
- 可提供有关页面的元信息,如针对搜索引擎和更新频度的描述和关键词
charset
- 这个属性规定在外部脚本文件中使用的字符编码
- 如果外部文件中的字符编码与主文件中的编码方式不同,就要用到charset属性
- 默认的字符编码是 ISO-8859-1
- 标记了一个段落
- p元素会自动在其前后创建一些空白.浏览器会自动添加这些空间

input

用于搜集用户信息

// 规定input元素的值

<input value="请输入姓名...">

一般鼠标放到一个页面显示小手的时候,绝对有a标签
用于定义超链接,用于从一张页面链接到另一张页面
这个元素最重要的属性是href属性,它指示链接的目标
target = "_blank"

// _blank 在新窗口中打开链接

<a href="http://baidu.com" target="_blank">百度一下,你就知道</a>

    <br>

// _parent 在父窗体中打开链接

<a href="http://baidu.com" target="_parent">百度一下,你就知道</a>

    <br>

// _self 在当前窗体中打开链接,此为默认值

<a href="http://baidu.com" target="_self">lalala</a>

    <br>

// _top 在当前窗体打开链接,并替换当前的整个窗体(框架页),一个对应的框架页的名称,在对应框架页中打开

<a href="http://baidu.com" target="_top">百度一下,你就知道</a>

p
- 标签定义段落
- p元素会自动在其前后创建一些空白,浏览器会自动添加这些空间,您也可以在样式表中规定
section
- 标签定义文档中的节(section,区段).比如章节,页眉,页脚,或文档中的其他部分
- 属性
  - cite
    - 值
    - section的URL,假如section摘自web的话
src
- src属性规定外部脚本文件的URL
  - URL
    - 外部脚本的URL.可能的值有
      - 绝对URL - 指向其他站点(如 src="www.example.com/example.js")
      - 相对URL - 指向站点内的文件(如src="/scripts/example.js")
src和href的区别
- href是引用,相当于iOS中的import,不是必须的
- src是引入,是必须的,没有这个资源,标签就用不起来
- 给#表示跳转到当前界面
border: 5px dashed purple
- 边框5px 边框为虚线,颜色紫色
border: 5px solid purple
- 边框5px 边框为实线,颜色紫色
line-height
- 这个属性设置行间的距离 (行高)
- 不允许使用负值
- 该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。
- line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
- 原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值。
text-align: right
- 右对齐
class
- 这个属性用来规定元素的类名
- 大多数时候用于指向样式表中的类. 不过,也可以利用它通过JavaScript来改变带有指定class的HTML元素
- class 属性不能在以下 HTML 元素中使用：base, head, html, meta, param, script, style 以及 title。
- 可以给 HTML 元素赋予多个 class，例如：。这么做可以把若干个 CSS 类合并到一个 HTML 元素。
- 类名不能以数字开头！只有 Internet Explorer 支持这种做法。
box-shadow: 0 0 2px orangered
float: right;
font-family
- 规定元素的字体系列
- font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。
- 有两种类型的字体系列名称：
  - 指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。
    
    通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"
  - 提示：使用逗号分割每个值，并始终提供一个类族名称作为最后的选择。
  - 注意：使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路。
ul
- 大的,是列表的盒子
- 无序列表,ul里面放li
ol
- 大的,是列表的盒子
- 有序列表,ol里面放li
- 有个属性type,可以改变序列号的值
hr
- 分割线
li
- 标签定义列表项目
- 标签可用在有序列表<ol>和无序列表<ul>中
display
- 该属性规定元素应该生成的框的类型
- 这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。
响应式布局
- 它是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.
- 这个概念是为解决移动互联网浏览而诞生的
相对路径
- 资源在当前的项目中
- ./ ../ ././
绝对路径
- 资源不在当前的项目中网络上本地
- http:// https:// ftp:// file://
div
- 优势: 可以自定义
- div本身很纯洁

HTML5新增标签

HTML5新增了27个标签元素,废弃了16个标签元素
主要包括如下:
结构性标签
- article 文章主题内容(博客,帖子,..)
- header 标记头部区域内容
- footer 标记脚部区域内容
- section 区域章节表述
- nav 菜单导航,链接导航
级块性标签(很少用)
行内语义性标签
- meter 特定范围内的数值,如工资,数量,百分比
- time 时间值
- progress 进度条,可用max,min,step进行控制,完成对进度的表示和监听
- video 视频元素,用于视频播放,支持缓冲预载和多种视频媒体格式
- audio 音频元素,用于音频播放,支持缓冲预载和多种音频媒体格式
交互性标签

CSS

Cascading Style Sheets, 层叠样式表
美化网页
编写格式
- 键值对的
```
// 左边属性,右边值

color: red
```
CSS的3种书写形式
- 第一种: 行内样式(也叫内联样式)
  - 直接在标签的style属性中书写
```
<body style="color: red;">
```
- 第二种: 页内样式
  - 在本网页的style标签中书写
```
<style>

	body {

		color: red

	}

<style>
```
- 第三种: 外部样式
  - 在单独的CSS文件中书写,然后在网页中用link标签引用
```
<link rel="stylesheet" href="index.css">
```
CSS的规律
- 就近原则
  - 网页从上到下依次执行
- 叠加原则
网站
- N个网页
- 服务器
- 数据库
- ...
CSS的两大重点
- 属性
  - 通过属性的复杂叠加才能做出漂亮的网页
- 选择器
  - 通过选择器找到对应的标签设置样式

CSS中的选择器

选择器的作用
- 选择对应的标签,为之添加样式

标签选择器 - 关键字标签

根据标签名找到标签

<div>div1</div>

<div>div2</div>

// 注意:这里不一定是div,也可能是别的标签

div {

	color: red

}

类选择器 - 关键字class, "."加上"类名"

<p class="high">第一段文件</p>

<p>第二段文字</p>

<div class="high">div1</div>

<div>div2</div>

.high {

	color: red

}

id选择器 - "#"加上"id名称"

<p id="first">第一段文件</p>

<p>第二段文字</p>

#first {

	color: red;

}

并列选择器 - ","隔开

<p class="high">第一段文件</p>

<p>第二段文字</p>

<div class="high">div1</div>

<div>div2</div>

div , .high {

	color: red;

}

复合选择器 - 精准定位: "标签名" + "." + "class名", 中间不是用的","

<p class="high">第一段文件</p>

<p>第二段文字</p>

<div class="high">div1</div>

<div>div2</div>

div.high {

	color: red;

}

后代选择器

<div>

	<p>div里面的p</p>

	<span>

		<p>div里面的span里面的p</p>

	</span>

</div>

<p>外面的p</p>

div p {

	color: red;

}

相邻兄弟选择器

<div>

	<p>div里面的p</p>

	<span>

		<p>div里面的span里面的p</p>

	</span>

<div>

<p>与div相邻的p</p>

<p>与p相邻的p</p>

div + p {

	color: red;

}

属性选择器

// 第一种写法

<div name="jack">1111</div>

<div name="rose">2222</div>

<div>3333</div>

// 第一种写法

div[name] {

	color: red;

}

<!--第二种写法-->

<div name="jack">1111</div>

<div name="rose" age="20">2222</div>

<div age="10">3333</div>

<!--第二种写法-->

div[name][age] {

	color: red;

}

伪类 - 触发某些操作的时候
- :active
  - 向被激活的元素添加样式
- :focus(掌握)
  - 向拥有键盘输入焦点的元素添加样式
  - 一般用在input上
- :hover(掌握)
  - 当鼠标悬浮在元素上方时,向元素添加样式
- :link
  - 向未被访问的链接添加样式
- :visited
  - 向已被访问的链接添加样式
- :first-child
  - 向元素的第一个子元素添加样式
- :lang
  - 向带有指定lang属性的元素添加样式
伪元素
- :first-letter
  - 向文本的第一个字母添加特殊样式
- :first-line
  - 向文本的首行添加特殊样式
- :before
  - 在元素之前添加内容
- :after
  - 在元素之后添加内容

选择器的优先级别

通配符

<!--通配符:

1.优先级别非常低

2.性能比较差-->

<style>

	* {

	}

<style>

css样式遵循的规律

1.相同类型的选择器遵循: a.就近原则  b.叠加原则

2.不同类型的选择器遵循:

a.选择器的针对性越强,它的优先级就越高

b.选择器的权值加到一起,大的优先;如果权值相同,后定义的优先

c.important(1000) > 内联 > id选择器(100) > 类选择器(10) | 伪类(10) | 属性选择(10) | 伪元素(10)   > 标签选择器(1) > 通配符(0) > 继承

标签的类型
- 块级标签
  - 独占一行
  - 能随时设置宽度和高度
  - 如: div, p, h1, h2, ul, li
- 行内标签(内联标签)
  - 多个行内标签能同时显示在一行
  - 宽度和高度取决于内容的尺寸
  - 如: span, a, label
- 行内-块级标签(内联-块级标签)
  - 多个行内-块级标签可以显示在同一行
  - 能随时设置宽度和高度
  - 如: input, button
修改标签的显示类型
- CSS中有个display属性,能修改标签的显示类型
  - none: 隐藏标签
  - block: 让标签变为块级标签
  - inline: 让标签变为行内标签
  - inline-block: 让标签变为行内-块级标签(内联-块级标签)

CSS属性

可继承属性

父标签的属性值会传递给子标签
一般是文字控制属性

如:

/// 1.这两个-所有标签都可继承

// 属性规定元素是否可见

visibility: hidden

// 规定要显示的光标的类型(形状)

cursor: move

/// 2.内联标签可继承(w3school查询,太多了)

line-height: 行高,用来做垂直居中

text-decoration: none  去掉下划线

/// 3.块级标签可继承

text-indent: 首行缩进

text-align: 水平居中

/// 4.列表标签可继承

list-style: 声明列表的属性,就是列表前面那个小圆点

不可继承属性

父标签的属性值不能传递给子标签
一般是区块控制属性
如

1.display:

2.background: 可设置背景图片和背景颜色

3.overflow: 处理超出的内容

4.盒子模型

盒子模型

content(内容)

盒子里装的东西
网页中通常指文字和图片
属性如下:

1.height: 设置元素高度

2.max-height: 设置元素的最大高度

3.max-width: 设置元素的最大宽度

4.min-height: 设置元素的最小高度

5.min-width: 设置元素的最小宽度

6.width: 设置元素的宽度

padding(填充,内边距)

属性

1.padding: 在一个声明中设置所有内边距属性

2.padding-bottom: 设置元素的下内边距

3.padding-left: 左内边距

4.padding-right: 右内边距

5.padding-top: 上内边距

// 上, 右, 下, 左

padding: 10px 5px 15px 20px;

// 上, 右＆左, 下

padding: 10px 5px 15px;

// 上＆下, 右＆左

padding: 10px 5px

// 所有的4个内边距都是10px

padding: 10px

border(边框)

p {

	// 实线边框5px

	borde: 5px solid red;

}

// 设置边框圆角

border-radius

margin(外边距)

CSS3新增特性

RGBA透明度
- RGB取值: 从0_{255(OC中是0}1)

块阴影和圆角阴影

1.box-shadow:

h-shadow: [必须].水平阴影的位置,允许负值

v-shadow: [必须].垂直阴影的位置,允许负值

blur: [可选]. 模糊距离

spread: [可选].阴影的尺寸

color: [可选].阴影的颜色.请参阅CSS颜色值

inset: [可选].将外部阴影(outset)改为内部阴影

2.text-shadow

圆角
```
1.border-radius
```

CSS布局

默认,所有网页布局都是在 标准流中
- 标准流: 从上到下,从左到右

脱离标准流

任何标签,一旦脱离标准流,就会被强制转换为行内块级标签

float属性

常用取值:

1.left: 浮动到父标签的最左边

2.right: 浮动到父标签的最右边

position属性

// 子绝父相

常用取值:

1.absolute: 绝对定位, 相对于static定位以外的第一个父元素进行定位

2.fixed: 绝对定位, 相对于浏览器窗口进行定位

3.relative: 相对定位, 相对于其正常位置进行定位

4.static: 默认值. 没有定位,元素出现在正常的流中

5.inherit: 规定应该从父元素继承position属性的值

内容居中

所有标签水平居中

1.行内标签 和 行内-块级标签: 在父标签中设置

text-align: center;

2.块级标签: 在自身设置

margin: 0 auto;

所有标签垂直居中

1.行内标签 和 行内-块级标签: 在父标签中设置

line-height

2.块级标签:

position: absolute;

left: 50%

top: 50%;

transform: translate(-50%, -50%);

box-sizing
- 以特定的方式定义匹配某个区域的特定元素,默认值content-box
- 将box-sizing设置为border-box,可以把边框和内边距放入框中

HTML＆CSS日常知识点总结的更多相关文章

HTML和CSS的知识点
HTML的知识点 HTML的结构: <!DOCTYPE html>: 文档类型性为HTML5文件文档声明:在HTML的文档中必不可少,且必须在文档的第一行文档声明的编码格式<!- ...
Web前端-CSS必备知识点
Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: ...
CSS 基础知识点样式选择器伪类
CSS 基础知识点汇集版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...
css入门知识点整理
css入门知识点整理不要嘲笑我这个蒟蒻..例子来源:w3school css其实就分为两个东西,一个是选择器,另外一个是声明.声明定义了某个对象的属性的值,这都是html的内容.重点要关注的是选择器 ...
HTML&&CSS基础知识点整理
HTML&&CSS基础知识点整理一.WEB标准:一系列标准的集合 1. 结构(Structure):html 语言:XHTML[可扩展超文本标识语言]和XML[可扩展标记语言] 2. ...
CSS基本知识点——带你走进CSS的新世界
CSS基本知识点我们在学习HTML之后,前端三件套第二件便是CSS,但CSS内容较多,我们分几部分讲解: (如果没有学习HTML,请参考之前文章:HTML知识点概括--一篇文章带你完全掌握HTML& ...
前端知识点-CSS相关知识点
1.解释一下CSS的盒子模型? 回答一: a.标准的css盒子模型:宽度=内容的宽度+边框的宽度+加上内边具的宽度 b.网页设计中常听的属性名:内容(content).填充(padding).边框(b ...
[总结]WEB前端开发常用的CSS/CSS3知识点
css3新单位vw.vh.vmin.vmax vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw; vmax: 相对于视窗的宽度或高度 ...
css相关知识点
一.CSS的引入方式 1.1 css的介绍 HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 ...

随机推荐

redux-amrc：用更少的代码发起异步 action
很多人说 Redux 代码多,开发效率低.其实 Redux 是可以灵活使用以及拓展的,经过充分定制的 Redux 其实写不了几行代码.今天先介绍一个很好用的 Redux 拓展-- redux-amrc ...
【组织级项目管理】P2 MSP P3O
组织级项目管理--有你,有我,有大家在过去的2年,无论对于企业来讲,还是对于我们个人都有很多大脑的冲击,有几个词大家应该特别耳熟能详:转型,变革,敏捷,互联网+,组织的项目化管理等.就是这些让我们的 ...
旺财速啃H5框架之Bootstrap（二）
突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续上一篇的已经把bootstrap了解个大概了,接 ...
如何远程关闭一个ASP.NET Core应用？
在<历数依赖注入的N种玩法>演示系统自动注册服务的实例中,我们会发现输出的列表包含两个特殊的服务,它们的对应的服务接口分别是IApplicationLifetime和IHostingEnv ...
Coroutine in Java - Quasar Fiber实现--转载
转自 https://segmentfault.com/a/1190000006079389?from=groupmessage&isappinstalled=0 简介说到协程(Corout ...
Android -- 真正的高仿微信打开网页的进度条效果
(本博客为原创,http://www.cnblogs.com/linguanh/) 目录: 一,为什么说是真正的高仿? 二,为什么要搞缓慢效果? 三,我的实现思路四,代码,内含注释五,使用方法与截 ...
最好的.NET开源免费ZIP库DotNetZip（.NET组件介绍之三）
在项目开发中,除了对数据的展示更多的就是对文件的相关操作,例如文件的创建和删除,以及文件的压缩和解压.文件压缩的好处有很多,主要就是在文件传输的方面,文件压缩的好处就不需要赘述,因为无论是开发者,还是 ...
MongoDB集群配置
本文演示:(一个主服务器,一个备份服务器,三个仲裁服务器) 官方推荐副本集的成员数量为奇数,最多12个副本集节点,最多7个节点参与选举. 本文演示基于本机,用端口区分服务(每个服务器下新建db文件夹用 ...
创建ABPboilerplate模版项目
本文是根据角落的白板报的<通过ABPboilerplate模版创建项目>一文的学习总结,感谢原文作者角落的白板报. 1 准备开发环境: Visual Studio 2015 update ...
iosselect：一个js picker项目，在H5中实现IOS的select下拉框效果
具体文档和demo可以访问github:https://github.com/zhoushengmufc/iosselect 移动端浏览器对于select的展示样式是不一致的,ios下是类似原生的pi ...

HTML＆CSS日常知识点总结

HTML

标签

HTML5新增标签

CSS

HTML＆CSS日常知识点总结的更多相关文章

随机推荐

热门专题