web标准

  • 结构：html
  • 表现：css
  • 行为：JavaScript

一、HTML

1.1 HTML骨架

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        
    </body>
</html>

1.1.1 VsCode创建HTML骨架

  • html文件中输入：!后按下回车键

1.2 标签

  • 以<meta>开始，以</meta>结束
  • 加粗：<strong/>

1.2.1 标签分类

  • 双标签
  • 单标签
    • 例如：<br>、<hr>

1.2.2 常用标签

标题标签：

<h1>~<h6>

段落标签：

<p>
   
</p>

格式化标签：

<b>加粗</b> strong
<u>下划线</u> ins
<i>倾斜</i> em
<s>删除线</s> del
<!--突出重要性，强调语境-->

图片标签：

<img src="" alt="" title="" />
  • alt：替换文本
  • title：悬停显示

1.2.3 路径

相对路径：

  • ./+目标文件：当前路径下文件
  • 目标文件：同上
  • ../：上级文件

绝对路径：

  • 盘符:/...

1.2.4 音频标签

音频标签：

<autdio src="" controls autoplay loop></autdio>
  • autoplay：自动播放
  • loop：循环播放
  • controls：显示播放组件

视频标签：

<video src="" controls></video>

1.2.5 链接标签

<a href="#" target="_self" ></a>
  • href：跳转地址，#为空链接
  • target：跳转方式，_self和_blank
  • iframe框架可用a的href导入到iframe中

1.2.6 列表标签

无序标签：

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

有序标签：

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

自定义标签：

<dl>
    <dt></dt>
    <dd></dd>
</dl>
  • <dt>标签为标题标签
  • <dd>标签相当于li标签，具备缩进

属性：

  • type：设置头类型
  • list-style-type：设置类型
  • list-style:none：常用此样式

1.2.7 table表格

<table>
    <caption></caption>
    <tr>
    	<th></th>
        <td></td>
    </tr>
</table>

合并：

  • rowspan
  • colspan

表结构标签：

  • thead
  • tbody
  • tfoot

1.2.8 input系列标签

<input type="" name="" value="" />
  • type：text、password、radio、checkbox、file、submit、reset、button
  • value：值会发送给后端
  • name：发送到后端的属性名
  • 后端接收内容：name=value

label绑定：

① 表单id+label属性

<label for="username">用户名</label>
<input type="text" id="username" name="name"/>

② label套壳

<label>
    用户名<input type="text" id="username" name="name"/>
</label>

1.2.9 form表单

<form action="">
    <input .../>
</form>

button标签：

<button></button>

select标签：

<select>
    <option selected></option>
    <option></option>
</select>

textarea标签：

<textarea cols="" rows=""></textarea>

1.2.10 语义化标签

  • div
  • span

适合做网页布局

1.2.11 语义化标签【手机端】

  • header
  • nav
  • footer
  • aside
  • section
  • article

1.3 常用字符实体

1.3.1 空格规范

html对所有空格都将进行合并为一个空格

1.3.2 字符实体

&nbsp;

&lt;

&gt;

&amp;

&copy;

二、CSS

2.1 书写规范

#id {
    font-size:16px;
}

2.2 引用方式

2.2.1 外部样式表【推荐】

<link rel="stylesheet" type="text/css" href="mystyle.css">

2.2.2 内联样式

<h1 style=""></h1>

2.2.3 内部样式表

<head>
	<style>
		hr {color:sienna;}
		p {margin-left:20px;}
		body {background-image:url("images/back40.gif");}
	</style>
</head>

2.3 选择器

2.3.1 标签选择器

标签名 {}

2.3.2 类选择器

.类名 {}
  • class="cl1 cl2 cl3"：可多类名，使用空格间隔
  • 规范：数字，字母，下划线，中划线组成

2.3.3 id选择器

#id {}

2.3.4 通配选择器

* {
    margin:0;
    padding:0;
}

2.4 文字样式

  • font-size：默认16px
  • font-weight：normal，bold
  • font-style：normal italic
  • font-family
  • font:style weight size family

2.5 文本样式

  • text-indent：文本缩进
    • px为像素单位
    • em为文字大小的长度，常用2em
  • text-align：所有内容都可修改
    • left，center，right
  • text-decoration
    • underline
    • line-through
    • none
  • line-height：控制上下间距
    • px
    • 倍数
  • font: style weight size/line-height family

2.6 组合选择器

在 CSS3 中包含了四种组合方式:

  • 后代选择器(以空格 分隔)
  • 子元素选择器(以大于 > 号分隔）
  • 相邻兄弟选择器（以加号 + 分隔）
  • 普通兄弟选择器（以波浪号 ～ 分隔）

2.6.1 后代选择器

后代选择器用于选取某元素的后代元素。

div p {  background-color:yellow; }

2.6.2 子代选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素。

div>p
{
  background-color:yellow;
}

2.6.3 相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

div+p
{
  background-color:yellow;
}

2.6.4 普通兄弟选择器

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

div~p
{
  background-color:yellow;
}

2.7 背景样式

  • background-color
    • rgba：可透明，0~1
  • background-image
    • url(‘路径’)
  • background-repeat
    • repeat
    • no-repeat
    • repeat-x
    • repeat-y
  • background-position
    • 方向名词：left、center、right、top、center、bottom
    • 数字px：(0,0)原点，x轴，y轴
  • background：符合样式
    • color image repeat position，按顺序

2.8 元素显示样式

块级元素：独占一行

div,p,h系列,ul,li,dl,dt,dd

行内元素：不换行，不设置宽高

span,a,b,u,i,s

行内块元素：一行显示多个，可设置宽高

input,textarea,button,img

修改级别：

  • display
    • block,inline-block,inline

2.9 盒模型div

结构：

  • content：内容
  • padding
  • border
  • margin

border边框线：solid【实线】 dashed【虚线】 dotted【点线】

自动内减：

box-sizing:border-box：固定宽高后设置属性，加padding或border时不会撑大

消除默认内外边距：

*{
    margin: 0;
    padding: 0;
}

2.10 解决方案

2.10.1 外边距折叠

overflow:hidden;

2.10.2 隐藏元素

display:none;

visibility:hidden /*占位隐藏*/

2.10.3 垂直居中

① 使用 padding 和 text-align: center

.center {
    padding: 70px 0;
    border: 3px solid green;
    text-align: center;
}

② 使用 line-height

.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}
 
/* 如果文本有多行，添加以下代码: */
.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

③ 使用 position 和 transform

.center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}
 
.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

④ 使用 margin 让 div 居中对齐

div {
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    background-color: #b0e0e6;
}

2.10.4 垂直对齐

  • vertical-align:middle

2.11 结构伪类选择器

语法：

selector:pseudo-class {property:value;}

2.11.1 CSS :first-child 伪类

使用 :first-child 伪类来选择父元素的第一个子元素。

p:first-child
{
    color:blue;
}

2.11.2 所有CSS伪类/元素

选择器 示例 示例说明
:checked input:checked 选择所有选中的表单元素
:disabled input:disabled 选择所有禁用的表单元素
:empty p:empty 选择所有没有子元素的p元素
:enabled input:enabled 选择所有启用的表单元素
:first-of-type p:first-of-type 选择的每个 p 元素是其父元素的第一个 p 元素
:in-range input:in-range 选择元素指定范围内的值
:invalid input:invalid 选择所有无效的元素
:last-child p:last-child 选择所有p元素的最后一个子元素
:last-of-type p:last-of-type 选择每个p元素是其母元素的最后一个p元素
:not(selector) :not(p) 选择所有p以外的元素
:nth-child(n) p:nth-child(2) 选择所有 p 元素的父元素的第二个子元素
:nth-last-child(n) p:nth-last-child(2) 选择所有p元素倒数的第二个子元素
:nth-last-of-type(n) p:nth-last-of-type(2) 选择所有p元素倒数的第二个为p的子元素
:nth-of-type(n) p:nth-of-type(2) 选择所有p元素第二个为p的子元素
:only-of-type p:only-of-type 选择所有仅有一个子元素为p的元素
:only-child p:only-child 选择所有仅有一个子元素的p元素
:optional input:optional 选择没有”required”的元素属性
:out-of-range input:out-of-range 选择指定范围以外的值的元素属性
:read-only input:read-only 选择只读属性的元素属性
:read-write input:read-write 选择没有只读属性的元素属性
:required input:required 选择有”required”属性指定的元素属性
:root root 选择文档的根元素
:target #news:target 选择当前活动#news元素(点击URL包含锚的名字)
:valid input:valid 选择所有有效值的属性
:link a:link 选择所有未访问链接
:visited a:visited 选择所有访问过的链接
:active a:active 选择正在活动链接
:hover a:hover 把鼠标放在链接上的状态
:focus input:focus 选择元素输入后具有焦点
:first-letter p:first-letter 选择每个

元素的第一个字母
:first-line p:first-line 选择每个

元素的第一行
:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的

元素
:before p:before 在每个

元素之前插入内容
:after p:after 在每个

元素之后插入内容
:lang(language) p:lang(it) 为

元素的lang属性选择一个开始值

2.12 position定位

position属性：

  • static：默认
  • fixed：相对于浏览器窗口，固定不动
  • relative：相对于正常位
    • 与absolute联合，作为绝对位的相对子位
  • absolute：绝对于父元素，相对于非static的父元素定位
    • top
    • left
    • right
    • button
    • 决定偏移值

2.12.1 z-index

z-index：数值，决定层次优先级

2.12.2 overflow

控制溢出

  • visible
  • scroll
  • hidden
  • auto

2.12.3 float

  • left
  • right

清除浮动：clear:both;

2.13 cusor光标

  • pointer
  • text
  • move

2.14 opacity透明

  • 0~1

2.15 推荐工具

2.15.1 PxCook