网络名词解释

www

翻译为万维网。是一种服务——网络浏览服务

URL

统一资源定位符。Web的地址俗称 “网址” 。

DNS

域名解析系统。将好记的域名转换成IP地址。

Web

网。Web是一系列技术的复合总称，包括网站前台的布局、后台的程序、美工、数据库开发等。

W3C

万维网联盟。国际化标准组织。W3C工作是发展Web规范。

HTML 结构

 1.<!DOCTYPE>
 文档声明
 
 2.<html>
 根标签
     
 3.<head>
 头部信息。包括<title>、<mate>、<link>、<style>
     
 4.body
 所显示的内容。

标签分类

双标签

<> </>

比如 body,body,h1,/h1

单标签

</>

比如 img,hr

特殊标签注释

<!– –>

文档头部相关标签

<title>

设置网页的标题

<meat>

用于定义页面元素

name :

keywords 网页关键字，供搜索使用
description 网页的描述信息
author 网页的作者

src	URL
alt	图片不能显示时替换文本
title	鼠标指针停留时显示文字
width	宽度
height	高度
border	边宽宽度
vspace	垂直边距
hspace	水平边距
align	left、right、top、middle、bottom

CSS

语法

 <style type = "text/css">
     标签名{
         属性1:属性值1;
         属性2:属性值2;
     }
 </style>

引入CSS

行内式

 <标签名 style = "属性1:属性值1; 属性2:属性值2; " > ...</标签名>

内嵌式

外链式

导入式

导入式慢

 <style type = "text/css">
     @import "URL"
 </style>

CSS 属性

设置文字样式

font-size：字号大小

相对长度
em	倍率，相对当前对象内文字的大小
px	像素，常用
绝对长度
in	英寸
cm	厘米
mm	毫米
pt	点

font-family ：字体

英文字体必须在中文的前面。

中文字体需要双引号

font-weight：字体粗细

normal	默认大小，标准
bold	粗体
bolder	更粗
lighter	更细
100~900	400 = normal 700 = bold

常用 normal 和 bold

font-style : 字体风格

normal 默认值
italic 斜体
oblique 倾斜

italic 和 oblilque 没有本质区别，italic 用字体的斜体，oblique可以让没有倾斜属性的文字，倾斜。

常用 italic 和normal

font 综合设置

.dd{

font : font-style font-weight font-size/font-height font-family ;

}

@font-face 规则

 <style>
     @font-family{
         font-family:字体名字;
         src:url();              
     }
 
 </style>

font-family 字体名字
src URL

自定义文字的字体

color：文字的颜色

red 、green 、blue
16进制 #ff0000
RGB代码 rgb(200,0,0)

letter-spacing:字间距

word-spacing：单词间距

line-height:行间距

text-transform:文本转换

none 默认值
capitalize 首字母大写
uppercase 全转换大写
lowercase 全换小写

text-decoration ：文本装饰

none 默认值
underline 下划线
overline 上划线
line-through 删除线

可以多复制比如有上划线也有下划线

text-align ：对齐方式

left
right
center

text-indent ：首行缩进

text-indent :2em 首行缩进2字符

while-space :空白处理

normal 吃空格
pre 原样式
nowrap 空格空行无效，强制文本不能换行，除非遇到 br

text-shadow ：阴影效果

 text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必需，水平阴影的位置。允许为负值
v-shadow	必须，垂直阴影的位置。允许为负值
blur	可选，模糊半径，只能是正值
color	可选

text-overflow：对象溢出文本

clip 默认值裁剪文本
ellipsis 显示省略号来代替裁剪文本
string 使用给定字串代替裁剪文本

overflow

属性值：

visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容看不见。
scroll 内容会被修剪，浏览器会显示滚动条
auto 如果内容被修剪，则浏览器会显示滚动条
inherit 继承父亲的 overflow 的值

word-wrap

允许长单词换行到下一行：

normal 默认，
break-word 在长单词或url地址内部进行换行。

CSS的优先级

继承 0

标签选择器 1

类选择器 10

id选择器 100

CSS 选择器

E 为标签名

att 为 class id 名

前缀：

E[att^=value]

后缀:

E[att$=value]

只要包含:

E[att*=value]

结构化伪类选择器

:root

定义的样式对所有页面标签生效

 :root{
 
 }

:not

排除某个不想要的子结构元素

 :root :not(p){
 
 }

:only-child

当它的父亲只有它一个孩子时候，显示样式。

:first-child 和 :last-child

当自已是兄弟中第一或最后时。显示样式。

:nth-child(n) 和 :nth-last-child(n)

当自己是孩子中正数第 n 个时，或倒数第n个时显示样式。

匹配父元素中的第 n 个子元素，元素类型没有限制。

odd 奇数 even 偶数

:nth-of-type(n) 和 nth-last-of-type(n)

匹配同类型中的第n个同级兄弟元素。

需要是同一种标签

:empty()

没有子元素或文本内容为空的所有元素

伪类元素

::before

::after

 <元素>::before{
     content:文字 / url();
 }

盒子模型

边框属性

书写：S-H-U

S	H	U
border	top	style
border	bottom	width
border	left	color
border	right

如: border-left-style: 设置左边框的样式

border-left-style: 上右下左

border-left-style: 上左右下

border-left-style: 上下左右

一个值为四边两个值为上下/左右 三个值为上/左右/下

border : border-width border-style border-color

border: 粗细样式颜色;

border-style : 边框样式

border-style :

可以加 top bottom left right

例如： border-top-style:

none	（默认值）没有边框
solid	单实线
dashed	虚线
dotted	点线
double	双实线

border-width: 边框宽度

可以加 top bottom left right

例如： border-top-width:

border-color: 边框颜色

可以加 top bottom left right

例如： border-top-color:

注：设置边框颜色必须设置边框样式

padding ：内边距

可以加 top bottom left right

例如： padding-top:

margin : 外边距

可以加 top bottom left right

例如： padding-top:

margin: 0 auto; 居中

背景设置

line-height: inherit; orphans: 4; margin: 0.8em 0px; white-space: pre-wrap; position: relative; color: rgb(51, 51, 51); font-family: “Open Sans”, “Clear Sans”, “Helvetica Neue”, Helvetica, Arial, “Segoe UI Emoji”, sans-serif; font-size: 16px;”>默认值为 transform 透明色

value 可以是 rgb() 十六进制之前预先设置的

background-image：背景图像

value : URL

background-repeat: 设置背景图像平铺

value	explain(说明)
repeat	默认值 ,水平垂直都平铺
no-repeat	不平铺,只显示一次在左上角
repeat-x	只水平平铺
repeat-y	只垂直平铺

background-position: 设置背景图像位置

background-position: Xpx Ypx;

value 也可使用预定关键字

X : left center right

Y: top center right

百分数也行例如 :background-position: 50% 50%;

background-attachment: 设置背景图像固定

value	explain(说明)
scroll	默认值 , 随着页面一起滚动
fixed	固定在屏幕上,不随着页面一起滚动

background 综合设置

background: 背景颜色 url 平铺定位固定

盒子的宽高

盒子的总宽度 = width + 左右内边距 + 左右外边距 + 左右边框

盒子的总高度 = height + 上下内边距 + 上下外边距 + 上下边框

CSS 3 新增盒子模型属性

颜色透明度

rgba（r，g，b，alpha）alpha 是 0.0 到1.0 之间的值。0.0为完全透明
opacity：0.0~1.0 可以使任何元素变透明

border-radius 圆角

border-radius : 水平半径参数1 水平半径参数2 水平半径参数3 水平半径参数4/垂直半径参数1 垂直半径参数2 垂直半径参数3 垂直半径参数4;

border-radius : 50% ; 为圆形

border-image :图片边框

border-image: border-image-source border-image-slice / border-image-width border-image-outset border-image-repeat

需要提前设置边框

例如 : border-image: url(./images/index_107.jpg) 10%/10px repeat;

border-image-source: 图片路径

border-image-slice ：偏移量

border-image-width ：边框的宽度

border-image-outset：边框背景向盒子外延伸的距离

border-image-repeat：指定图片的平铺方式

box-shadow : 阴影

box-shadow: h-shadow v-shadow blur spread color outset/inset

box-shadow: 水平阴影垂直阴影模糊半径阴影扩展半径颜色外阴影还是内阴影

h-shadow : 水平阴影

v-shadow: 垂直阴影

blur: 模糊半径

spread : 阴影扩展半径

color : 颜色

outset/inset : 外阴影还是内阴影(外阴影不用填写)

例如 : box-shadow:0px 0px 100px 10px red ;

background-image:linear-gradient : 线性渐变

角度单位 deg

background-image: linear-gradient(渐变角度，颜色1 ，颜色2 ，。。。。。)；

0deg 为 6 点钟方向，顺时针增加。

background-image: radial-gradient ：径向渐变

background-image: radial-gradient(ellipse , #af3333 5% ,#fff234);

元素类型和转换

块级元素

div、h1-h6、form、p、li、ol、li、dl、dt、dd、address、caption、table、tbody、td、tfoot、th、thead、tr

行级元素

span、a 、lable、 <strong>、 <b>、 <small> 、<abbr>、 <button> 、<input> 、<textarea>、 <select> 、<code> 、<img>、 <q> 、<i> <cite> <var> <kbd> <sub> <bdo>

display : 转换

inline : 行内元素
block : 块级元素
inline-block : 行内块级元素 (可以设置宽高 )
none: 隐藏该元素

上下两个块级元素的 margin-bottom 和 margin-top

并不是他们两个相加，，而是他们当中的大值！

镶嵌块元素垂直外边距合并

两个镶嵌关系的元素，如果父标签没有设置上内边距和边框的话。

则父标签上外边距为他们当中大值。

注：父标签为 0 px 也会发生。

列表和超级链接

ul 无序列表 ol 有序列表

 
 <ul>
     <li></li>
 </ul>
 <ol>
     <li></li>
 </ol>

type ：

disc 默认值实心圆点
circle 空心圆点
square 实心正方形
ol：
1 数字
a 或 A 字母
i 或 I 罗马数字

CSS 下列是对 list-style-type 属性的常见属性值的描述：
- none：不使用项目符号
- disc：实心圆
- circle：空心圆
- square：实心方块
- decimal：阿拉伯数字
- lower-alpha：小写英文字母
- upper-alpha：大写英文字母
- lower-roman：小写罗马数字
- upper-roman：大写罗马数字

定义列表

 <dl>
     <dt></dt>
     <dd></dd>
 </dl>

本文链接：https://www.cnblogs.com/Snode/p/16202871.html

HTML5

网络名词解释

www

URL

DNS

Web

W3C

HTML 结构

标签分类

双标签

单标签

特殊标签 注释

文档头部相关标签

<title>

<meat>

标签

h1 ~ h6 标题标签

p 段落标签

hr 水平线标签

br 换行

font 文本样式标签

img 图片标签

a 超链接标签

小Note

CSS

语法

引入CSS

行内式

内嵌式

外链式

导入式

CSS 属性

设置文字样式

font-size：字号大小

font-family ：字体

font-weight：字体粗细

font-style : 字体风格

font 综合设置

@font-face 规则

color：文字的颜色

letter-spacing:字间距

word-spacing：单词间距

line-height:行间距

text-transform:文本转换

text-decoration ：文本装饰

text-align ：对齐方式

text-indent ：首行缩进

while-space :空白处理

text-shadow ： 阴影效果

text-overflow：对象溢出文本

overflow

word-wrap

CSS的优先级

CSS 选择器

结构化伪类选择器

:root

:not

:only-child

:first-child 和 :last-child

:nth-child(n) 和 :nth-last-child(n)

:nth-of-type(n) 和 nth-last-of-type(n)

:empty()

伪类元素

::before

::after

盒子模型

边框属性

border-style : 边框样式

border-width: 边框宽度

border-color: 边框颜色

padding ：内边距

margin : 外边距

背景设置

line-height: inherit; orphans: 4; margin: 0.8em 0px; white-space: pre-wrap; position: relative; color: rgb(51, 51, 51); font-family: “Open Sans”, “Clear Sans”, “Helvetica Neue”, Helvetica, Arial, “Segoe UI Emoji”, sans-serif; font-size: 16px;”>默认值为 transform 透明色

background-image：背景图像

background-repeat: 设置背景图像平铺

background-position: 设置背景图像位置

background-attachment: 设置背景图像固定

background 综合设置

盒子的宽高

特殊标签注释

text-shadow ：阴影效果

background-image: radial-gradient ：径向渐变

上下两个块级元素的 margin-bottom 和 margin-top