web客户端编程基础 – HTML、CSS

上一篇：php基础知识

主要参考：https://www.w3school.com.cn

思维导图

思维导图第一版

1、web编程基础-什么是HTML、CSS、Javascript

web网站可以说是互联网的基础。每个网站，可以比喻为一座座房子。宽带网络，就是房子门前的路。url地址，就是房子的门牌标志。HTML代码，就是建造房子的建筑材料（砖头、水泥、钢筋）；CSS代码，就是装修房子的装修材料；那么Javascript代码就是这房子的水电了？ JS代码则更像是未来世界可以让房子成为变形金刚的智能机器。因此，一些展示“老房子”的浏览器，可能并不支持Javascript。

定义：

HTML（Hyper Text Markup Language），是使用标记标签来描述网页的一种超文本标记语言。

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。HTML定义网页的内容。

CSS（Cascading Style Sheets），指层叠样式表。样式定义如何显示HTML元素，规定网页的布局。

Javascript 则是属于HTML和Web的编程语言，对网页进行编程。

Jquery 是一个Javascript函数库

2、环境配置

参考上一篇：php基础知识，安装-集成环境与编辑器

推荐使用 phpstudy + phpstorm

操作步骤：1、在phpstudy 安装目录下，把代码文件放大到根目录www/ 下。

2、浏览器直接访问 localhost/index.html即可看到效果。

3、HTML

HTML元素：是从开始标签（start tag）到结束标签（end tag）的所有代码。

例如：<p>前面这个是开始标签，中间文字是元素内容，后面这个是结束标签</p>

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性总是以名称/值对的形式出现，比如：name="value"。

属性总是在 HTML 元素的开始标签中规定。

常用HTML元素属性：

class ：规定元素的类名（classname），一个html文件里面多个标签可以拥有相同的类名。

id ：规定元素的唯一 id，一个html文件里面id不能相同。

style ：规定元素的行内样式（inline style）

3.1、常用HTML标签：

1、标题：标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。<h1> 定义最大的标题。<h6> 定义最小的标题。

2、段落：通过 <p> 标签定义。

3、注释标签  用于在 HTML 插入注释。

4、链接：<a href="http://www.yummuu.com/">www.yummuu.com</a> 。href 属性规定链接的目标。开始标签和结束标签之间的文字被作为超级链接来显示。

5、图像：<img src="yummuu.png" alt="Yummuu" /> 。src 图像源属性，alt替换文本属性。

6、表格标签：

7、列表标签

8、块级元素和内联元素

<div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

<span> 元素是内联元素，可用作文本的容器。

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

两者的区别：就是在显示时是否起新行。块级元素会起新行，而内联元素则不会。

9、框架与内联框架：frame，<iframe src=" " name=" "></iframe>

10、脚本：<script> 定义客户端脚本，如Javascript；<noscript> 为不支持客户端脚本的浏览器定义替代内容。

11、头部元素：

<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。

以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

<title>：在所有 HTML/XHTML 文档中都是必需的。它能够定义浏览器工具栏中的标题，提供页面被添加到收藏夹时显示的标题，显示在搜索引擎结果中的页面标题。

<base>：为页面上的所有链接规定默认地址或默认目标（target）

12、HTML实体

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。

13、表单元素：

<form> ：定义 HTML 表单。

<input> ：是最重要的表单元素。<input> 元素有很多形态，根据不同的 type 属性。

input的输入类型type有text、password、submit、radio、checkbox、button；（HTML5新增）number、date、color、range、month、week、time、datetime、datetime-local、email、search、tel、url。

input的常用属性：value、readonly、disabled、size、maxlength；（HTML5新增）required、multiple、pattern、min和max、list、height和width、autocomplete

<select> ：定义下拉列表 <option> 元素定义待选择的选项。列表通常会把首个选项显示为被选选项。您能够通过添加 selected 属性来定义预定义选项。

<textarea>：定义多行输入字段（文本域）

<button>：定义可点击的按钮

4、CSS

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

层叠次序

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

1、浏览器缺省设置

2、外部样式表

3、内部样式表（位于 <head> 标签内部）

4、内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

4.1、CSS语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

selector {property: value}

4.2、CSS选择器

1、派生选择器：

通过依据元素在其位置的上下文关系来定义样式，例如: h1 span{color:red;}

2、id选择器：

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。

3、类选择器：

以一个点号显示，例如： .className{text-align: center;}

4、属性选择器：

对带有指定属性的 HTML 元素设置样式。例如： div[rel=’mm’]{ color:’#000’;}

可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

5、后代选择器（包含选择器）：可以选择作为某元素后代的元素

6、子元素选择器：选择作为某元素子元素的元素。例如：h1>span{font-size:16px;}

7、相邻兄弟选择器：可选择紧接在另一元素后的元素，且二者有相同父元素。

例如：h1 + p {margin-top:50px;}

8、伪类：用于向某些选择器添加特殊的效果。

:active 向被激活的元素添加样式

:focus 向拥有键盘输入焦点的元素添加样式

:hover 当鼠标悬浮在元素上方时，向元素添加样式

:link 向未被访问的链接添加样式

:visited 向已被访问的链接添加样式

:first-child 向元素的第一个子元素添加样式（不建议使用）

:lang 向带有指定lang属性的元素添加样式

9、伪元素：用于向某些选择器设置特殊效果。

:first-letter 向文本的第一个字母添加样式

:first-line 向文本的首行添加样式

:before 在元素之前添加内容

:after 在元素之后添加内容

4.3、常用CSS属性

言

学习网页的概念和分类，了解静态网页和动态网页的不同；了解网页浏览器的工作原理。了解HTML,XHTML,HTML5的概念，制作简单的HTML页面的开发。

什么是网页

可以在internet上通过网页浏览信息，如新闻，图片等，还可发布信息，如招聘信息等，网页是在某个地方某一台计算机上的一个文件。

网页主要由3部分组成：结构，表现，行为。

静态网页的特点是不论在何时何地浏览这个网页，看到的形式和内容都相同，且只能浏览，用户无法与网站进行互动。静态页面由HTML编写，扩展名一般为.htm, .html, .shtml, .xml等。与动态页面相比，动态网页是以.asp, .jsp, .php, .perl, .cgi等形式为后缀。

动态网页指网页的内容可以根据某种条件而自动改变。

网页浏览器的工作原理

采用B/S结构，即浏览器/服务器结构，用户工作界面是通过www浏览器来实现的：

事务逻辑主要在服务器端实现，极少部分的事务逻辑在前端实现。
大大简化了客户端的计算机载荷。
减轻了系统维护与升级的成本和工作量。
降低了用户的总体成本。

浏览器的工作原理：

浏览器通过HTML表单或超链接请求指向一个应用程序的URL。
服务器收到用户的请求。
服务器执行已接收创建的指定应用程序。
应用程序通常基于用户输入的内容，执行所需要的操作。
应用程序把结果格式化为网络服务器和浏览器能够理解的文档，即通常所说的HTML网页。
网络服务器最后将结果返回到浏览器中。

www的基础是HTTP协议，web浏览器就是用于通过url来获取并显示web网页的一种软件工具，url用于指定要取得的Internet上资源的位置与方式。

HTML和HTML5

HTML是一种用来制作超文本文档的简单标记语言，用其编写的超文本文档称为HTML文档，它能独立于各种操作系统平台。

可扩展超文本标记语言XHTML：

XHTML是不需要编译，可以直接由浏览器执行，是一种增强了的HTML。它的可扩展性和灵活性将适应未来网络应用的更多需求，是基于XML的应用。开发者在HTML4.0的基础上，用XML的规则对其进行一些扩展，由此得到了XHTML，所以，建立XHTML的目的是为了实现HTML向xml的过渡。

HTML5简化了：<!DOCTYPE html>，简化了DOCTYPE,简化了字符集声明，以浏览器的原生能力替代脚本代码的实现，简单而强大的HTML5API。

HTML网页的结构

文件扩展名是操作系统用来标志文件格式的一种机制。扩展名如同文件的身份说明，区别了文件的类别和作用。

HTML网页的文件后缀名是.html或者.htm.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"xxx">
声明的作用，告诉浏览器所书写的HTML代码的版本。
复制代码

meta标签下name属性的使用：

<head>
 <meta name="keywords" content="nine, twenty-three">
 <meta name="description" content="...">
 <meta name="generator" content="Dreamweaver">
 <meta name="author" content="depp">
 <meta name="robots" content="all">
</head>
复制代码

keywords向搜索引擎说明页面的关键字，在content后输入供搜索的具体关键字。
description向搜索引擎描述页面的主要内容。
generator向页面描述生成的软件名，在content后面输入具体的软件名称。
author网页的设计者，在content后面输入设计者的具体姓名。
robots限制搜索的方式，在content后面通常可输入all,one,index,noindex,follow,nofollow其中之一，不同的属性分别有不同的作用，限制页面被搜索的方式。

meta标签下的另一个属性http-equiv,其作用是反馈给浏览器一些明确的信息，帮助浏览器更精确地展示页面。

<head>
 <meta http-equiv="content-type"  content="text/html; charset=gb2312"/>
</head>
复制代码

refresh 对属性的具体描述，说明是令页面自动跳转的效果。
content 后跟等待的时间，url后跟跳转的页面链接地址。

link标签，定义了一个外部文件的链接，经常被用于链接外部css样式。

base标签为整个页面定义了所有链接的基础定位，其主要的作用是确保文档中所有的相对url都可以被分解成确定的文档地址。

style标签用于定义css的样式。表明了在页面中引入一个.style的样式表。

script标签用于定义页面内的脚本。

titl标题标签，body体标签.

一个好的HTML文档应具备以下3个方面：

代码使用标准规范，不应该有错误的拼写
代码结构清晰，使人一目了然
没有错误或者多余不必要的代码出现

文本设计

<br>..</br>
<p>...</p>
复制代码

<p align=left>...</p>
<p align=center>...</p>
<p align=right>...</p>
复制代码

给文本加标注：<acronym title="">...</acronym>注释的内容放在title属性后的引号中，被注释的内容放在标签内。

无序列表：ul,li，有序列表：ol li

定义列表：

<dl>
 <dt>...</dt>
 <dd>...</dd>
 <dt>...</dt>
 <dd>...</dd>
</dl>
复制代码

网页中的图像设计

jepg格式的图像，该文件是常见的图像格式，.jpg后缀名，jpeg文件是经过压缩的一种图像。压缩的图像可以保持为8位，24位，32位深度的图像，压缩比率可以高达100:1.jpeg可以很好地处理大面积色调的图像。
png格式的图像，后缀名.png，这是一种能存储32位信息的位图图像，采用的是一种无损压缩的方式。支持透明信息，指图像以浮现在其他页面文件或页面图像之上。
gif格式的图像，是一种图像交互格式，后缀名.gif，只支持256色以内的图像，gif文件的图像效果是很差的。

所以总的来说：jepg可以压缩图像的容量，png的质量较好，gif可以做动画。

矢量图

说说矢量图和位图最大的区别：

无论是否对图像进行缩放，都不会影响矢量图的效果，但会影响图的质量。

设计者一般只愿意将logo,ui图标，标识符号等简单图像存为矢量图。

图像的分辨率

分辨率的单位是dpi即每英寸显示的线数。通常所指的分辨率有两种，屏幕分辨率和图片分辨率，屏幕分辨率即计算机显示器默认的分辨率。

一般目前大部分显示器的分辨率是1024px x 768px，图片分辨率定义是用于量度位图图像内数据量多少的一个参数。

分辨率越高的图像，包含的数据越多，图像的容量就越大，会消耗更多的计算机资源，需要更大的存储空间。

分辨率指的是每英寸的像素值，通过像素和分辨率的换算可以测算图片的长度。

页面中的图像

<img src=... alt=.../>
复制代码

使图像的顶部和同一行的文本对齐

<img style="vertial-align:text-top"/>
复制代码

使图像的中部和同一行的文本对齐

<img style="vertical-align:middle"/>
复制代码

使图像的底部和同一行的文本对齐

<img style="vertical-align:text-bottom"/>
复制代码

使图像的底部和文本的基线对齐

<img style="vertical-alignbaseline"/>
复制代码

hspace=30px表示图像左，右两边与页面其他内容隔30px的距离。vspace=30px表示图像上，下两边与页面的其他内容的间隔距离是30px。

<img src="" widht="" height="">

<img src="..." border=>

<hr align=".." width="..." size="...">

<a href="链接对象的路径">链接锚点对象</a>
复制代码

把邮箱留给需要联系你的人

<a href="mailto:邮箱地址">链接锚点对象</a>
复制代码

链接还未被访问：a:link{...}
链接被选中：a:active{...}
光标滑过链接：a:hover{...}
链接被访问后：a:visited{...}

dashed 虚线

double 双线

groove 槽线

inset 内陷

outset 外陷
复制代码

热点图像区域的链接

map标签：

<map id=...>
 <area shape="..." coords="..." href="...">
</map>
复制代码

shape属性，用于确定选区的形状，rect矩形，circle圆形，poly多边形。href属性，就是超链接。coords属性，用于控制形状的位置，通过坐标来找到这个位置。

网页中的表单

计算矩形的面积

<html>
<head>
<title>计算矩形的面积</title>
<style type="text/css">
 .result {font-weight:bold;}
</style>
<script language="JavaScript">
function calculate() {
 var length=document.data.length.value;
 var width=document.data.width.value;
 var height=document.data.height.value;
 var area=document.getElementById('area');
 area.innerHTML=length*widht;
 volume.innerHTML=length*widht*height;
 }
</script>
复制代码

创建表单

action属性，通过form标签定义的表单里必须有action属性才能将表单中的数据提交出去：

<form action="my.php"></form>
复制代码

它表明了这是一个表单，其作用是提交my.php页面中的数据。

method属性告诉浏览器数据是以何种方式提交出去的。method属性下可以有2个选择：post或者get。
name属性，为了令递交出去的表单数据能够被处理这些数据的程序识别。

<form name="data">
复制代码

编码方式,enctype代表HTML表单数据的编码方式。

表单的工作原理

原理：在客户端接收用户的信息，然后将数据递交给后台的程序来操控这些数据。

<script language="JavaScript">
复制代码

如果通过引用外部javascript程序，就像链接外联样式：

<script type="text/javascript" src="dada.js"></script>
复制代码

创建表单

action属性，有action属性才能将表单中的数据提交出去：

<form action="da.php"></form>
复制代码

method 属性，作用是告诉浏览器数据是以何种方式提交出去的。在method属性下可以有2个选择，post或get。

提交方式用get，表单域中输入的内容会添加在action指定的url中，当表单提交之后，用户会获取一个明确的url。get在安全性上较差，所有表单域的值直接呈现。post除了有可见的处理脚本程序，别的东西都可以隐藏。

name属性，添加name属性是为了令递交出去的表单数据能够被处理这些数据的程序识别。

<form name="dada">
复制代码

编码方式：enctype代表HTML表单数据的编码方式，application/x-www-form-urlencoded, multipart/form-data, text/plain三种方式。

application/x-www-form-urlencoded是标准的编码方式，提交的数据被编码为名称/值对。
multipart/form-data属性表示数据编码为一条消息，为表单定义mime编码方式，创建了一个与传统不同的post缓冲区，，页面上每个控件对应消息中的一个部分。
text/plain表示数据以纯文本的形式进行编码，这样在信息中将不包含控件或者格式字符。
multipart/form-data方式上传文件时，不能使用post属性。

目标显示方式，表示在何处打开目标url，可以设置4种方式。

_blank表示在新的页面中打开链接
_self表示在相同的窗口中打开页面
_parent表示在父级窗口中打开页面
_top表示将页面载入到包含该链接的窗口,取代任何当前在窗口中的页面。

<form action="mailto:da@qq.com" method="post" name="dada"
enctype="text/plain" target="_blank"></form>
复制代码

表单域

是指用户输入数据的地方，表单域可分为3个对象，input, textarea, select。

input对象下的多种表单的表现形式。

<input name="" type="" value="" size="" maxlength="">
复制代码

type表示所定义的是哪种类型的表单形式
size表示文本框字段的长度
maxlength表示可输入的最长的字符数量
value表示预先设置好的信息

text单行的文本框
password将文本替换*的文本框
checkbox只能做二选一的是或否选择
radio从多个选项中确定的一个文本框
submit确定命令文本框
hidden设定不可浏览用户修改的数据
image用图片表示的确定符号
file设置文件上传
button用来配合客户端脚本

<form action="" method="post">
<input name="name" type="text" size="20" maxlength="12">
</form>
<input name="secret" type="password" size="20" maxlength="20">

<input name="one" type="radio" value="one" checked="checked">
<input name="one" type="radio" value="two">

<input type="submit" value="确定">
<input type="reset" value="恢复">
复制代码

创建submit按钮或reset按钮时，name属性不是必需的。

hidden隐藏域的样式表单

使用hidden来记录页面的数据并将它隐藏起来，用户对这些数据通常并不关心，但是必须提交数据。

<form action=da.asp>
<input type=hidden name=somehidden value=dada>
<input type=submit value=下一页>
</form>
复制代码

image样式的表单

<input type="image" src="图片/小图标.jpg" alt="确定">
复制代码

src属性指定这张图像的路径
alt属性添加文本注释

file上传文件的样式表单

file样式表单允许用户上传自己的文件

<html>
<head>
<title>file样式的表单</title>
<style type="text/css">
body {font:120% 微软雅黑;}
input {font:100% 微软雅黑;}
</style>
</head>
上传我的文件：
<form action="..." method="post" enctype="multipart/form-data">
<input type="file" name="uploadfile" id="uploadfile"/>
</form>
</body>
</html>
复制代码

textarea对象的表单

textarea对象的表单

<html>
<head>
<title>file样式的表单</title>
<style type="text/css">
body{font:120% 微软雅黑;}
textarea{font:80% 微软雅黑;color:navy;}
</style>
</head>
<body>
留言板
<form action="..." method="post" enctype="multipart/form-data">
<textarea name="dada" rows="10" cols="50" value="dada">请说：</textarea>
</form>
</body>
</html>
复制代码

select对象的表单

select对象的表单

<form action="">
 地址:
 <select name="da1">
  <option>1</option>
 </select>
</form>
复制代码

使用optgroup标签配合label属性来给选项分类：

<select name="上海">
<optgroup label="da1">
<option>1</option>
</optgroup>
<optgroup label="da2">
<option>2</option>
</optgroup>
</select>
复制代码

在select标签中加入size属性即可，如size=6表示是一个能容纳6行文字的文本框，超出设置的行数时，将出现滚动条。

<select name="上海" size="6">
复制代码

表单域集合：表单域的代码由fieldset标签和legend标签组合而成。

<form action="..." method="post">
<fieldset>
<legend>注册信息：</legend>
输入用户名：<input name="name" type="text" size="20" maxlength="12">
</fieldset>
</form>
复制代码

表单输入类型

url类型的input元素是专门为输入url地址定义的文本框。

<input type="url" name="webUrl" id="webUrl" value="http://wwwxxx"/>
复制代码

email类型的input元素是专门为输入email地址定义的文本框。

<input type="email" name="dada" id="dada" value="23@qq.com"/>
复制代码

range类型的input元素用于把输入框显示为滑动条，可以作为某一特定范围内的数值选择器。

<input type="range" name="volume" id="volume" min="0" max="1" step="0.2"/>
复制代码

number类型的Input元素是专门为输入特定的数字而定义的文本框。

<input type="number" name="score" id="score" min="0" max="10" step="0.5"/>
复制代码

tel类型的input元素是专门为输入电话号码而定义的文本框，没有特殊的验证规则。
search类型的input元素是专门为输入搜索引擎关键词定义的文本框，没有特殊的验证规则。
color类型的input元素默认会提供一个颜色选择器。
date类型的Input元素是专门用于输入日期的文本框，默认为带日期选择器的输入框。
month提供一个月的选择器，week提供一个周选择器，time会提供时间选择器，datetime会提供完整的日期和时间选择器，datetime-local会提供完整的日期和时间选择器。

增加表单的特性以及元素

form特性：

<input name="name" type="text" form="form1" required/>
<form id="form1">
<input type="submit" value="提交"/>
</form>
复制代码

formaction特性，将表单提交至不同的页面。

<form id="form1" method="post">
<input name="name" type="text" form="form1"/>
<input type="submit" value="提交到page1" formaction="?page=1”/>
<input type="submit" value="提交到page2" formaction="?page=2"/>
<input type="submit" value="提交"/>
</form>
复制代码

formmethod特性可覆盖表单的method特性
formenctype特性可覆盖表单的enctype特性
formnovalidate特性可覆盖表单的novalidate特性
formtarget特性可覆盖表单的target特性

placeholder特性

<input name="name" type="text" placeholder="请输入关键词"/>
复制代码

autofocus特性：用于当页面加载完成时，可自动获取焦点，每个页面只允许出现一个有autofocus特性的input元素。

<input name="key" type="text" autofocus/>
复制代码

autocomplete特性用于form元素和输入型的Input元素，用于表单的自动完成。

input name="key" type="text" autocommplete="on"/>
复制代码

autocomplete特性有三个值，可以指定"on","off"和""不指定，不指定就将使用浏览器的默认设置。

<input name="email" type="email" list="emaillist"/>
<datalist id="emaillist">
<option value="23#qq.com">xxxx</option>
</datalist>
复制代码

keygen元素提供一个安全的方式来验证用户。

<form action="">
<input type="text" name="name"/><br>
<keygen name="security"/>
<br><input type="submit"/>
</form>
复制代码

keygen元素有密钥生成的功能，在提交表单时，会分别生成一个私人密钥和一个公共密钥。
私人密钥保存在客户端，公共密钥则通过网络传输至服务器。

output元素

output元素用于不同类型的输出，比如计算结果或脚本的输出等。
output元素必须从属于某个表单，即写在表单的内部。

<form oninput="x.value=dada.value">
<input type="range" name="volume" value="50"/>
<output name="x"></output>
</form>
复制代码

required

为某个表单内部的元素设置了required特性，那么这项的值不能为空，否则无法提交表单。

<input name="name" type="text" placeholder="dada" required/>
复制代码

pattern

pattern用于为Input元素定义一个验证模式。
该特性值是一个正则表达式，提交时会检查输入的内容是否符合给定的格式，如果不符合则不能提交。

<input name="code" type="text" value="" pattern="[0-9]{6}" placeholder="da"/>
复制代码

min,max,step

min表示允许范围内的最小值
max表示允许范围内的最大值
step表示合法数据的间隔步长

<input type="range" name="dada" id="dada" min="0" max="1" step="0.2"/>
复制代码

novalidate

用于指定表单或表单内在提交时不验证
如果在form元素应用novalidate特性，则表单中的所有元素在提交时都不需要再验证

<form action="dada.asp" novalidate="novalidate">
<input type="email" name="user_email"/>
<input type="submit"/>
</form>
复制代码

validity

获取表单元素的ValidityState对象，该对象包含8个方面的验证结果
ValidityState对象会持续存在，每次获取validity属性时，返回的是同一个ValidityState对象

var validityState=document.getElementById("username").validity;
复制代码

willValidate属性

用于获取一个布尔值，表示表单元素是否需要验证
如表单元素设置了required特性或pattern特性，则willValidate属性的值为true，即表单的验证将执行

var willValidate=document.getElementById("username").willValidate;
复制代码

validationMessage

获取当前表单元素的错误提示信息。

var validationMessage=document.getElementById("username").validationMessage;
复制代码

点关注，不迷路

好了各位，以上就是这篇文章的全部内容，能看到这里的人都是人才。我后面会不断更新技术相关的文章，如果觉得文章对你有用，欢迎给个“赞”，也欢迎分享，感谢大家！！

程序员HTML5培训教程-html和css的使用方法以及样式，很好的基础知识系列，内容都是干货知识点，适合收藏下来！

布局步骤

第一步：清除默认样式

第二步：划分模块

第三步：设置模块的大小以及位置

第四步：划分下一级模块

html和css

引入网页头像

css样式表的引入方式

1、外链式

2、嵌入式

3、行内样式

@import url('')

文件命名以及变量命名

命名规范

1、严格区分大小写

2、可以采用字母数字下划线$,数字不开头

3、命名语义化

4、可以采用驼峰命名法

清除默认样式

清楚边距

margin: 0;

padding: 0;

list-style: none;

}

a标签清楚下划线和颜色

color: black;

text-decoration: none;

}

css中颜色的表示方式

css中颜色的表示方式：

1.预定义的颜色【关键字颜色】 red pink blue yellow

2.#6位数的色值 #00-00-00 红绿蓝

3.rgb（红，绿，蓝）：rgb([0-255],[0-255],[0-255])

4.rgba（red，green，blue，透明度）：rgba([0-255],[0-255],[0-255]，[0-1])

0-1: 0全透明，1不透明

html中的标签和属性

html：

标签：

按照语法分类：

1.单标签：只有开始标签

meta img a

2.双标签：有开始标签和结束标签

3.属性的语法

语法：

属性名="属性值"

属性名="属性值1 属性值2"

注意:

1、标签名和属性名之间要有空格

2、多个属性之间要有空格

3、多个属性值之间要有空格

4.开始标签标签名后有空格

按照标签在页面中的呈现效果分类：

1、行内元素

行内元素定义:在一行内显示，只能设置左右间距，不可以设置上下间距。

举例：span del i em b strong a(title="鼠标移入时显示的文字";target=" "(新窗口打开的位置 _self:在本窗口打开;_blank:在新窗口打开) ...

2、块元素

块元素定义：可以设置宽高，独占一行。

举例：div 标题标签列表标签段落标签 ...

3、行内块元素

行内块元素定义：可以设置宽高，在一行显示。

举例：img 【title="鼠标移入时显示的文字" 】表单控件

元素的转换

块元素： display:block;

行内块元素：display:inline-block;

行内元素： display:inline;

元素的级别

块元素 > 行内块元素 > 行内元素

元素嵌套规范

1、同一级别可以相互嵌套

2、级别高的元素可以嵌套级别低的元素

3、段落标签只能嵌套行内元素

4、a标签不可以嵌套a标签；p不能嵌套p

盒子模型及其问题

四部构成：

1、margin 外间距盒子与盒子之间的距离

2、border 边框

3、padding 内填充（内间距）边框与内容之间的距离。

4、content 内容

margin-top margin-right margin-bottom margin-left

margin: 50px; 上右下左

margin: 50px 100px; 上下左右

margin:0 auto; auto自动

margin: 50px 100px 150px; 上左右下

margin: 50px 100px 150px 200px; 上右下左

border: 1px solid red;

border-top \ border-right \border-bottom \ border-left

border-top-width：上边框的宽度

padding:设置方法同margin

content: ;

width : 数值百分比 auto

height: 数值百分比 auto

盒子模型的问题：

1.大部分元素的margin和padding默认为0，但有一部分的margin和padding不为0，例如body 标题标签（h1-h6）（ul ol il等列表标签）段落标签

2.想领的两个块元素的margin会重合，值会取最大值

3.margin可以为[负数] ，padding不可以设置[负数]。

4.行内元素margin只有左右，没有上下

5.如果（1）发生嵌套关系的元素，（2）父元素没有上边框，（3）上padding ，（4）父元素与子元素之间没有别的内容，此时子元素margin-top就会作用到父元素身上

margin-top的解决方式：

1.用父元素的padding-top代替子元素的margin-top；

2.给父元素添加overflow：hidden；

宽高的设置和计算

height：auto / 百分比 / px；

width：auto / 百分比 / px；

height：auto；参照与父元素

width：auto；参照与内容

box-sizing：border-box；将边框算入盒子内；

一个元素实际的宽高

实际宽度=border-left + padding-left + width +paddint-right + border-right;

实际高度=border-top + padding-top + height + padding-bottom + border-bottom;

浮动

作用：让块元素横排排列

样式： float：left；从左往右排列

float：right；从右往左排列

原理：让元素脱离文档流，让元素从文档层浮动到浮动层。

引发的问题：父元素不设置高度，子元素都浮动，浮动的子元素撑不开父元素。（浮动的元素脱离文档流）

*解决方式一：给父元素添加 overflow：hidden；（超出部分隐藏）

*解决方式二：在父元素内容最后添加拥有清除浮动属性的元素。

clear：right/left/both ；别的浮动对它的影响清除掉

例：

.box：after{

content: "";

display:block;

width: 0;

height: 0;

clear:both;

}

*解决方式三：父元素能设置高度的尽量设置高度

浮动之后的块元素参照内容：属性值 auto

定位

定位的元素脱离文档层，到达定位层

定位的元素会多出5个样式：

top right bottom left z-index：999

上右下左层级（层级越高，离用户越近）【只能在有定位属性的元素上才能用】

层级：

z-index：整数；

定位的几种方式：

1.相对定位：

相对于自身来定位，在文档层中保留原来的位置

用法：

position：relative；

2.绝对定位：

相对于最近的定位的祖先元素来定位，完全脱离文档流（其他顶替其位置）

用法：

position：absolute；

+方向值

3.固定定位：

相对于浏览器的四条边，完全脱离文档流

用法：

position：fixed；

top与bottom同时定义，那个样式会作用到元素身上的判断关系：

top的权重比bottom的权重大

left的权重比right的权重大

元素作用时：

1.如果是

position：relative；

left：；

margin：；

先作用margin，在作用relative；

2.如果是

position：absolute；

left：；

margin：；

先作用absolute，在作用margin；

定位元素的居中方式：

方法一：

1.水平居中：

position：absolute；

left：50%；

margin-left：-自身长度的一半；

2.垂直居中：

position：absolute；

top：50%；

margin-top：-自身长度的一半；

3.绝对居中：

position：absolute；

left：50%；

top：50%；

margin-left：-自身长度的一半；

margin-top：-自身长度的一半；

方法二：

1.水平居中：

position：absolute；

left：0；

right：0

2D和3D

2D和3D属性：

1.平移样式

transform:translate(x,y); 向上为负，向下为正

transform:translateX(100px);

transform：rotate（180deg）；（1turn）转一圈

平移 transform:translate（）例子：translate（x，y） translateX（）

旋转 transform:rotate（）例子rotate（180deg）顺时针 -180deg 逆时针

transform：rotate（）空格translate（）；

transform-origin:px px;变换的中心点；

left center；

缩放 transform:scale（）例子：scale（2）放大为原来的2倍 scale（0.n）缩小为原来的0.n scale（m，n） x轴m，y轴n

斜切 transform:skew（）例子：skew（45peg）左拉伸45° skew（45peg，m）

过渡transition
transition：all 0.5s；

全部时间

3.过渡的属性样式： transition-property: ， ;

可以为：属性的全部样式

4.过度的总时间： transition-duration：；

5.过渡的时间函数： transition-timing-function：；

linear（匀速） ease（开头结尾慢，中间快）

cubic-bezier（1，0.07，0.54，0.21）贝塞尔曲线

6.延迟 transition-delay：；

3d效果：和2d的一样transition，transform；

prespective：给父元素加prespective（灭点的值）

prespective-origin：x y；灭点的位置调整观察的角度（大多数情况不设置）

transform：ratate3d（0-1的值,0-1的值,0-1的值,45deg）

transform：ratateY（45deg）

transform：translate3d（0-1，0-1，px）

父元素：transform-style：preserve-3d；

动画

动画规则：

@keyframes 动画名（随便给）{

（动画规则）

from{}

to{}

}

@keyframes 动画名（随便给）{

（动画规则）

0%{}

50%{}

100%{}

}

@keyframes animation1{

from{

background-color:red;

}

to{

background-color:blue;

}

挂载动画:将动画加到元素身上

.元素{

animation：animation1 时间步数时间函数延迟时间次数；

}

挂载多个动画：

.元素{

animation：animation1 时间,animation2 时间,animation1 时间；

其他动画的相同的可以附件通过animation属性；

}

animation的样式

动画名：animation-name

时间： animation-duration

步数：animation-steps：8；

时间函数：animation-timing-function

延迟： animation-delay

动画次数： animation-iteration-count：infinite（无限次）/2；

指定下一次动画是否逆向：animation-direction：alternate（逆向）/ normal（常规）；

最后的状态：animation-fill-mode：backwards（默认（保持一开始的状态））/forwards（保持当前的状态）；

状态即指定动画是否运动： animation-play-state: running（运行）/paused（静止）;

元素分类

按照在页面中的呈现效果：

1.行内元素：在一行内显示，不可以设置宽高：（存放文字）

span a b i strong del

2.行内块元素：在一行内显示，可以设置宽高：（有缝隙不常用）

img 表单控件

3.块元素：可以设置宽高，独占一行

div 标题标签（h1-h6）列表标签（ul-li ol-li dl>dt+dd 段落标签（p pre））

元素嵌套规范：

1.同一级别可以相互嵌套

2.级别高的可以嵌套级别低的元素

3.p标签只能嵌套行内元素

4.a链接不能相互嵌套

元素的转换：

1.块元素：display：block；

2.行内块元素：display：inline-block；

3.行内元素：display：inline；

背景图片以及浏览器内核

背景图

先设大小，在引background；

background: url('路径') no-repeat left bottom/contain；

//图片位置禁止重复位置（top bottom left right）

路径：background-image：url（“”），url（“”）；加载多张背景图
背景图大小： background-size：100px auto，100px auto；会重复
背景的图重复：

4. background-repeat：no-repeat，repeat；（无重复）

5. background-repeat：repeat-x（x方向重复）

background-repeat：repeat-y（y方向重复）

背景图的位置：

background-position：x y；（数值方位值（top/bottom left/rightcenter（可以省略）））

背景开始渲染的位置： background-origin: ;

8. padding-box；（默认）从padding位置开始渲染

9. border-box；从边框的位置开始渲染

content-box；从内容的位置开始渲染

图片结束渲染的位置：background-clip: ;

11. padding-box；（默认）从padding位置结束渲染

12. border-box；从边框的位置结束渲染

content-box；从内容的位置结束渲染

使得背景图加载到浏览器中
background-attachment: fixed;

8.可以简写：

background：空格隔开；

背景图渐变
background: linear-gradiend(top，颜色1，颜色2，颜色n)

//渐变开始的方向（默认top）类似25deg（25度）

10.浏览器内核//背景色渐变

1. /* 标准语法 */

例子：background: linear-gradient(top,#3bbcff,#47eaff);

2. /* 谷歌内核 -webkit- */

例子：background: -webkit-linear-gradient(top,#3bbcff,#47eaff);

3. /* 火狐内核 -moz- */

例子：background: -moz-linear-gradient(top,#3bbcff,#47eaff);

4. /* 欧鹏内核 -o- */

例子：background: -o-linear-gradient(top,#3bbcff,#47eaff);

5. /* IE内核 -ms- */

例子：background: -ms-linear-gradient(top,#3bbcff,#47eaff);

文件的读取方法路径

绝对路径：从盘符开始的一条完整路径

相对路径：两个文件的位置关系

边框的相关属性【圆角，边框形状】

border-radius：边框的半径设置圆角 n%或者num像素

border-style:dotted solid double dashed;

上边框是点状

右边框是实线

下边框是双线

左边框是虚线

透明度

透明性的选择：（整个容器都变）

opacity：；0-1之间的值；

字体

font-family=“ 字体” //字体样式可以被继承

鼠标移入样式

span标签

cursor：pointer；鼠标样式：手型

阴影

box-shadow：x轴偏移量 y轴偏移量阴影的模糊程度阴影的大小（0和本身一样大小）阴影的颜色；

引入字符图标

引入字符图标：

行内元素随意

span class=“iconfont 图标类名”

可调节样式：同文字

文档流

文档流：

标准情况下，页面元素从左往右从上往下依次排列

flex布局(规范的设计稿)-弹性布局

容器（父元素）的属性：【display:flex;】

*flex-direction: 决定主轴方向。

row 主轴在水平方向，从左向右（默认）。

row-reverse 主轴在水平方向，从右向左

column 主轴在垂直方向，从上到下

column-reverse 主轴在垂直方向，从下到上

*flex-wrap: 决定项目换行

wrap: 项目换行

nowrap: 项目不换行（默认值）

wrap-reverse：项目换行且反转

*justify-content: 决定项目在主轴的对齐方式

flex-start;主轴的起点

flex-end;主轴的终点

center;主轴的中心

space-between;两端对齐

space-around;项目两侧距离相等

*align-items：项目在交叉轴上的对齐方式（适用于一根轴线与多跟轴线）

flex-start:交叉轴的起点

flex-end：交叉轴的终点

Center：交叉轴的中心

baseline：基线对齐（文本底部）

*align-content:定义项目在交叉轴上的对齐方式（仅适用于多根轴线）

flex-start;交叉轴的起点

flex-end;交叉轴的终点

center;交叉轴的中心

space-between;两端对齐

space-around;两侧距离相等

子元素（项目）的属性：

*order：定义项目的排列顺序，数值越小，越靠前，默认值为0（可以取负值）。

*flex-grow:定义项目的放大比例。默认值为0，即使存在剩余空间，也不放大。

*flex-shrik：定义项目的缩小比例，默认值为1，空间不足，项目缩小;值为0时,空间不足,项目也不缩小.

*flex-basis: 定义项目占据的主轴空间.默认auto或者自己添加像素;

*align-self:定义单个项目在交叉轴的对齐方式.

flex-start:交叉轴的起点

flex-end：交叉轴的终点

Center：交叉轴的中心

滚动条

overflow-x：auto；超出部分在x轴的表现形式。

auto：自动；（如果超出，就自动以滚动条的形式显示）

去滚动条：加在具有overflow属性的元素身上

::-webkit-scrollbar{

height：0；

}

值描述测试

visible 不裁剪内容，可能会显示在内容框之外。测试

hidden 裁剪内容 - 不提供滚动机制。测试

scroll 裁剪内容 - 提供滚动机制。测试

auto 如果溢出框，则应该提供滚动机制。测试

no-display 如果内容不适合内容框，则删除整个框。测试

no-content 如果内容不适合内容框，则隐藏整个内容。测试

轮播图

swiper(.js).com

表格

[行] [列]

table身上的属性

table身上的属性：

border：表格边框 cellspacing：单元格间的间距

cellpadding：单元格的内容与其边框的内边距

bgcolor：表格的背景颜色 background：表格的背景图片

width：表格宽度 height：表格高度

border-collaspe：collaspe：边框合并，不叠加 cellspacing：0：边框合并，但合并之后的边框宽度等于前两个边框宽度之和

caption：表格标题

background:表格背景图

cellspacing:单元格之间的间隙宽度

align:表格的水平对齐方式，通常是left，center，right

表格的标题

单元格【tr】【td】

width：单元格宽度height：单元格高度

align：单元格内文本的对齐方式,通常是左，中，右 left，center，right

valign：单元格内文本的对齐方式,通常是上，中，下 top，middle，bottom

nowrap：在为设置单元格宽度时，当文本长度宽于单元格宽度，将要换行时，该标签会使其不换行

<td align="center" nowrap>手机空中免费充值</td>

</tr>

表格的跨行与跨列【td】

rowspan：跨行标签，表示跨了多少行

colspan：跨列标签，表示跨了多少列

表格标签拓展及其属性

thead：定义表格的表头。

tbody：定义表格主体（正文）。

tfoot：定义表格的页脚（脚注或表注）。

colgroup：标签用于对表格中的列进行组合，以便对其进行格式化。

注意：不管thead、tbody、tfoot的代码先后顺序如何，html显示时，始终是先显示thead，再显示tbody，最后显示tfoot。

1、<thead> 内部必须拥有 <tr> 标签！

2、<tfoot> 元素内部必须包含一个或者多个 <tr> 标签。

3、<tbody> 元素内部必须包含一个或者多个 <tr> 标签。

4、必须在 table 元素内部使用这些标签。

5、当不同行间的单元格合并时各单元格所在的行不要加tbody标签。

标题栏

《tr》<th></th>《/tr》用法和td相似知识自动将单元格内容以粗体显示

表单控件表单标签

action:表单信息提交的位置；

method：提交的方式

get：地址栏，信息量少，安全性低

post：信息量多，比较安全

1.输入文本【输入框】：

用户名：<input type="text" placeholder="请输入用户名" maxlength="10" value=" " name="username" class="">

placeholder：默认提示文本;

maxlength:规定输入的最大字符数

name:本文本框的名字，与后台进行数据交互用

class:定义本文本框的样式，相当于盒子

placeholder下的缩进

text-indent：2em；缩进

2.输入密码【密码框】：

密码：<input type="password" placeholder="请输入密码" maxlength="10" value=" " name="psw" class="">

3.单选按钮[name的值必须相同]：

请选择你的性别：

<label for="man"> [label实现点什么就选中，for中的值和id中的值相同]

男：<input type="radio" name="sex" id="man" checked> //checked默认选项

</label>

女：<input type="radio" name="sex" id="woman">

</label>

4.多选按钮[name的值必须相同]：

请选择你喜欢的音乐：

摇滚：<input type="checkbox" checked>

5.下拉列表【下拉框】：

选择你的学历：

</select>

6.上传文件：

选择你的照片：

7.留言文本空间：

</textarea>

8.用户是否允许重新设置textarea大小css属性：

resize: none/both/vertical/horizontal;不允许/上下允许拖动/只能在垂直方向拖动/只能在水平方向拖动

9.重置按钮：

10.提交按钮：

11.自定义按钮：

12.颜色：

13.时间日期：

年月：<input type="month">

年周：<input type="week">

时分：<input type="time">

年月日：<input type="date">

年月时分：<input type="datetime-local">

14.验证

<input type="email"> 邮箱验证

<input type="tel" autofocus> 电话

15. autofocus 自动获取焦点

</form>

文本模型

文本换行

使非中日韩文本换行

word-break: break-all ;

文本禁止换行

white-space:nowrap;

单行文本溢出部分以省略号显示

overflow: hidden;(放文本的容器)

text-overflow: ellipsis;

多行文本溢出

指定为弹性盒子
display: -webkit-box;
在弹性盒模型中指定元素的排列顺序
-webkit-box-orient: vertical;
指定文本显示（溢出）的行数;
-webkit-line-clamp: 3;
height要是line-height的倍数
line-height: 70px;
overflow：hidden；

音频视频标签

音频标签

controls 空间向用户显示：

loop 循环播放

autoplay当前页面加载完自动播放

视频标签

H5语义化标签

<section>页面中的某一部分</section>

meta标记【签】

name="关键字" cantent="内容"

<mate http-equiv="Refresh" content="10";url="跳转路径"> //每10s刷新一次并且跳转到跳转路径知识的文件

bgsound标签

body属性

bgcolor:背景颜色
background：背景图片
text：文档中文字的颜色
link：超链接的颜色
alink：正在访问的超链接的颜色
vlink：已访问过的超链接的颜色
leftmargin/rightmargin/topmargin/bottommargin：左/右/上/下边距的像素值

对文字操作的标签

<p></p>开始一个新段落，可单可双
换行标签，单独标记
<pre></pre>预格式化【敲什么样式，显示什么样式】
<font></font> 用来设置文字的字体大小颜色粗细等
文字样式标记[均成对出现]
b 粗体 i 斜体 u 下划线 tt 等宽
sup 上标体 sub 下表体 strike 删除线 big 大号字样
small 小号字样 blink 闪烁字样 em强调字样 strong着重字样 cite引用字样

列表标签

符号列表
<ul type="circlr(空心圆点)/disc（实心圆点）【默认】/square（实心方块）">

2. <li>

<li>

</ul>

排序列表
<ol type="1(数字) /a（a，b，c..）/ A(A,B,C...)/ i(i,ii,iii,...)/ I(I,II,III,...)">

4. <li>

<li>

</ol>

a标签

<a href="路径 " title="鼠标移入时显示的文字" target=" "(新窗口打开的位置 _self:在本窗口打开;_blank:在新窗口打开；_parent:在当前窗口的父窗口打开链接；_top:在整个浏览器窗口打开) ...

[字符实体]常用的转义字符

显示结果描述实体名称

空格

< 小于号

大于号

& 和号

" 引号

' 撇号 (IE不支持)

￠分（cent）

￡镑（pound）

￥元（yen）

 欧元（euro）

§ 小节

? 版权（copyright）

? 注册商标

? 商标

× 乘号

÷ 除号

选择器

分类

css选择器

1.通用选择器：

*｛｝//选择所有的标签

2.群组选择器：

E1,E2,E3..｛｝//选择E1 E2 E3

3.标签选择器

标签名｛｝

4.类名选择器：

.类名｛｝

5.后代选择器

.E1 .E2｛｝ //选择E1 的后代E2

6.交叉选择器

标签名.类名｛｝

7.id选择器

例如创建id

#id名｛｝ //选择页面中id为**的标签

8.伪类选择器：

鼠标移入状态

E：hover{ } E元素选择鼠标移入状态

E：hover .子类{ } 选择e元素下鼠标移入时子类的变化

获取焦点，用于表单的输入

E: focus{

outline: none;

}

9.伪结构选择器：

E：first-child｛｝作为子元素的第一个孩子的E标签

E：last-child｛｝作为子元素的最后第一个孩子的E标签

E: nth-child(n){} //作为子元素的第n个孩子的E标签

E: nth-last-child(n) 作为子元素的倒数第n个孩子的E标签

E：first-of-type｛｝作为子元素的同类型的第一元素

E：last-of-type｛｝作为子元素的同类型中的最后一个元素

E: nth-of-type（n）作为子元素的同类型中的第n个元素

E: nth-last-of-type(n) 作为子元素的同类型中的倒数第n个元素

（n）n可以以为num/even（偶数）/odd(奇数)/3n（3的倍数）

例子：5.15/伪结构选择器

10.伪元素选择器：

::after{} 在元素之后加入一个

::before{

content：“内容之前”；

color：；

} 在元素之前

属于行内元素

::after{} ::before{}伪元素 content：""；样式必须写

11.子类选择器

相邻兄弟选择器

E1+E2｛｝选择E1的下一个兄弟元素E2（不能选中上一个兄弟元素）

div.box>a+img a和img统计

子类选择器

E1>E2{} 选择E1的子类元素E2

例子：div.box>div.item{$}*20

div.box>a>img

12.属性选择器

[属性名]{} 选择所有拥有属性为属性名的元素

[属性名=“value”]｛｝选择拥有属性名的属性且属性值为value

E[属性名=“value”]{} 选择拥有属性名的属性且属性值为value的E元素

E[属性名~=“value”]{} 选择拥有属性名的属性并且属性值一个或者多个，其中一个属性值为value的E元素

E[value^=“1”]{} 选择拥有 value的属性并且属性值一个或者多个，其中一个属性值以 1 开头的E元素

E[value$=“1”]{} 选择拥有 value的属性并且属性值一个或者多个，其中一个属性值以 1 结尾的E元素

E[value*=“1”]{} 选择拥有 value的属性并且属性值一个或者多个，其中一个属性值包含 1 的E元素

例子：属性选择器

选择器的优先级

宗旨：越具体的优先级越高

id (100 ) > class( 10 )> 标签名( 1)

.box .son{ } 10+10=20

abcde优先级（e为个位）：

a:行内样式

b:id选择器

c:类名选择器伪类选择器（：hover）属性选择器

d:标签选择器伪元素选择器（：：after）

e:通用选择器有一个

选择有中有一个abcde在其位置+1

移动端布局步骤

修改视口
<meta name="viewport" content="width=device-width">

视口：视觉视口，布局视口，理想视口

em:当前字体的倍率 100px=10em

rem：html字体的倍率

移动端窗口 375*667

html{

font-size：0.5rem；

}

.box{

width： 750rem； //375px=750rem*0.5px ； 100px=1rem

height： 1334rem；

}

引入rem.js
<script src="路径"></script>
修改rem.js中设计稿的宽度
100px=1rem

未完待续，感谢关注好程序员前端教程分享！

在线咨询

上一篇：文本编辑器删除或替换TXT文本内容中的符号，提高工作
下一篇：可视化大屏的几种屏幕适配方案，总有一种是你需要的

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

web客户端编程基础 – HTML、CSS

1、web编程基础-什么是HTML、CSS、Javascript

2、环境配置

3、HTML

3.1、常用HTML标签：

4、CSS

4.1、CSS语法

4.2、CSS选择器

4.3、常用CSS属性

言

什么是网页

网页浏览器的工作原理

HTML和HTML5

HTML网页的结构

文本设计

网页中的图像设计

网页中的表单

创建表单

表单的工作原理

创建表单

表单域

hidden隐藏域的样式表单

output元素

required

pattern

min,max,step

novalidate

validity

willValidate属性

validationMessage

点关注，不迷路

您的项目需求