（近万字）一篇文章带你了解HTML5和CSS3开发基础与应用-适合前端面试必备

作者 | Jeskson
来源 | 达达前端小酒馆

HTML5和CSS3开发基础与应用，详细说明HTML5的新特性和新增加元素，CSS3的新特性，新增加的选择器，新的布局，盒子模型，文本，边框，渐变，变形，动画效果等。HTML5的介绍，常用的元素和属性，表单相关元素和属性，CSS3新添加的选择器，CSS3新的属性。

了解HTML5，和现在主流的浏览器的，与基本语法。

在使用HTML5之前，w3c希望用XHTML来替代HTML，因为HTML与XHTML相比，XHTML是一种更加严格，更加规范的HTML代码，这是因为XHTML要求HTML必须是一种XML文档格式，XML文档是一种结构化文档。

在XML文档中有且只能有一个根元素，文档中的元素必须由开始标签和结束标签组成，除了是单标签，即为空元素语法，标签之间不能交叉使用，属性值必须用“”括起来。

当时的HTML文档因为存在大量的不规范，所以文档的编写按照XHTM编写规范进行编写HTML文档，但是由于互联网上存在大量这些不规范的页面，所以就有了一个新的HTML标准，就是HTML5.

在HTML5中其实并没有那么多的严格要求，但是作为一名程序员要强烈要求自己的书写规范。

HTML5和HTML4的区别

HTML4与HTML5的区别

字符编码的改变：

HTML4：

<meta http-equiv="content-type" content="text/html;charset=utf-8">

HTML5：

<meta charset="utf-8">

HTML5的语法出现就是为了兼容各种不规范的HTML文档，HTML5文档有时可以写成不是一个严格规范的XML文档，但是，还是要强烈要求自己的书写规范。

HTML5中，某些元素可以省略结束标签，有的元素可以将开始标签和结束标签一起省略，有的元素绝对没有结束标签，标签不再区分大小写，某些标准性的属性可以省略属性值。

HTML5的好处是，可以解决跨浏览器，跨平台的问题，支持市面上大多浏览器的支持，对前端开发者来说，开发
HTML+CSS+JavaScript会更加便利，增强了web的应用程序。

HTML5常用元素和属性

HTML5保留的常用元素，新增加的常用元素，通用的属性，已经被废弃的元素和属性。

HTML5保留的常用元素主要的：

HTML的注解，注解是不会在浏览器中显示的，可以对代码进行解释，有助于其他开发者了解该代码的具体内容。

html是HTML5的根元素，告诉浏览器自身是一个HTML文档。

head是用于定义HTML5文档的页面头部分，在head内部的标签主要有base,link,meta,script,styple,title。

title用于定义文档的页面标题。

style用于定义文档引入的样式。

meta用于定义文档的元信息。

base用于定义文档中所有链接规定的默认地址或者默认目标。

body用于定义文档的页面主题部分。

h1~h6用于定义标题。

p用于定义段落。

hr用于插入一条水平线。

br用于插入一个换行符。

div用于定义文档中的分区或者节，是一个块级元素。

span与div类似，该元素不换行。

文本格式化元素

b用于定义粗体文本，strong用于定义粗体文本，small用于定义小号字体文本，em用于强调文本，i用于定义斜体文本，sub用于定义下标文本，sup用于定义上标文本。

abbr用于定义一个缩写，是abreviation的缩写，address是用于定义一个地址，blockquote用于定义块引用，q用于定义一个短的引用，code用于定义计算机代码文本，cite用于表示对某个参考文献的引用，del用于定义文档中被删除的文本，ins用于定义文档中插入的文本，kbd用于定义键盘文本，pre用于定义预格式化的文本，samp用于定义样本文本，var用于定义变量。

超链接与锚点

HTML5保留了超链接，a标签元素，用于从一个页面跳转到另一个页面，a标签的重要属性为href，它是指向链接的目标。

在HTML4.01中，a元素可以是超链接，或是锚点，但是在HTML5中，a元素就是超链接，如果没有href属性，那么就只是超链接的占位符。

介绍两个HTML5新增的属性，为download和media：

download元素指示浏览器下载URL而不是去导航到它，media规定目标URL是为什么类型的媒介或是设备进行进化的。

<a href="http.."></a>
<a href="" download="">点击下载</a>

列表元素

ul用于定义无序列表，ol用于定义有序列表，li用于定义列表项目，dl用于定义列表，子元素有dl和dd两种。dt是用于定义标题列表项，dd是用于定义定义列表项目。

表格元素

table用于定义表格，caption用于定义表格标题，tr用于定义表格行，子元素用于定义td和th两种，td用于定义单元格，th用于定义单元格，是用于表格的页眉。

在td元素中是由两个属性的：colspan属性和rowspan属性，表示该单元格横跨多少列和该单元格纵跨多少行。

tbody用于定义表格主体，子元素有td和th两种，thead用于定义表格表头，子元素有td和th两种，tfoot用于定义表格页脚，子元素有td和th两种。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>HTML5</title>
 </head>
 <body>
  <table border="1">
   <thead>
    <tr>
     <th>da</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>da</td>
    </tr>
   </tbody>
   <tfoot>
    <tr>
     <td>da</td>
    </tr>
   </tfoot>
  </table>
 </body>
</html>

col用于表格中一个或者多个列定义属性值，colgroup用于对表格中的列进行组合，以便对其进行格式化。

mark用于定义高亮文本，time用于显示被标注内容是日期或是时间，24小时时间制，属性有datetime表示此元素的时间和日期，pubtime指示time元素中的日期时间是文档的发布日期。

文档结构元素，header用于定义文档或是节的页眉，footer用于定义文档或是节的页脚，HTML5新增的结构header，footer除外，还有aside是用于定义文档内的文章，section用于定义文档中的一个区域，nav用于定义页面上的导航链接部分，figure用于定义一段独立的引用，与figcaption配合使用，figcaption用于表示与其相关联的引用的说明或是标题等，是为了提高代码的可阅读性。

<figure>
 <figcaption></figcaption>
</figures>

meter表示一个已知最大值和最小值的计数器，form指定meter元素所属的一个或者多个表单，value指定meter元素的当前值，min指定meter元素的最小值，max指定meter元素的最大值，low指定meter元素指定范围的最小值，high指定meter元素范围的最大值，optimum指定meter元素最优值。

progress表示一个进度条，max指定任务总工资量，value指定已完成的任务量。

多媒体元素

audio定义音频，video定义视频

<audio src="" controls="controls"></audio>

src为设置歌曲的路径

controls为设置是否使用播放控制

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

src为设置视频的路径

controls为设置是否使用播放控制

通用属性

id用于HTML元素中唯一的标识，style用于为HTML元素指定css样式，class用于匹配css样式的class选择器，dir用于设置元素中内容排列的方向，有ltr和rtl两个属性。

重点属性：

hidden属性，属性值为true时显示，属性值为false隐藏，display:none等于hidden="true"

spellcheck属性，设置spellcheck="true"，浏览器会对用户输入的文本内容执行输入检查，检查不通过，浏览器会对拼错的单词进行提示。

表单相关元素和属性

form元素用于生成输入表单，action用于被提交到的地址，method用于提交表单发送哪种类型的请求，属性值为get或是post，enctype用于指定表单内容编码使用的字符集：

application/x-www-form-urlencoded
默认编码方式

multipart/form-data

text/plain

name用于定义表单的唯一名称，target用于定义哪种方式打开目标url，属性值_blank，_self，_top中的一个。

表单控件：

type="text"单行文本输入框
type="password"密码输入框
type="hidden"隐藏域
type="radio"单选框
type="checkbox"复选框
type="file"文本域
type="image"图像域
type="submit"提交按钮
type="reset"重置按钮
type="button"按钮

<body>
 <form action="" method="post">
  <label for="username">用户名：</label>
  <input id="username" type="text"/><br/>
  <label>密码：
  <input type="password"/>
  </label>
  <br/>
 </form>
</body>

select,option,optgroup下拉列表框

size显示select元素同时显示多少个列表项，multiple是否允许多选，optgroup中的属性，label选取该选项组的标签。

// button
<body>
 <form action="" method="post">
  <button type="submit">提交</button><br/>
  <button type="reset">重置</button><br/>
  <button type="button"><img src=""></button>
 </form>
</body>

表单控件textarea

textarea属性：cols用于表示文本域的宽度，rows用于表示文本域的高度，readonly用于表示该文本域只能读取。

<body>
 <form action="" method="get">
  <input type="color" name="color" id="" value="#ff000"/><br/>
  <input type="submit" id="" name="" />
 </form>
</body>

<body>
 <form action="" method="get">
  <input type="time" name="time" id="" value=""/><br/>
  <input type="submit" id="" name=""/>
 </form>
</body>

<body>
 <form action="" method="get">
  <input type="data" name="date" id="" value="" max="205-02-01" min="2019-03-03"/>
  <br/>
  <input type="submit" id="" name=""/>
 </form>
</body>

<body>
 <form action="" method="get">
  <input type="month" name="month" id="" value="" min="1002-02" max="2303-23"/>
  <br/>
  <input type="submit" id="" name="" />
 </form>
</body>

<body>
 <form action="" method="get">
  <input type="week" name="week" id="" value="" min="2322-W01"
  max="3444-w12"/>
  <br/>
  <input type="submit" id="" name="" />
 </form>
</body>

<body>
 <form action="" method="get">
  <input type="email" name="email" id="" value="" multiple="multiple"/>
  <br/>
  <input type="submit" id="" name=""/>
 </form>
</body>

<body>
 <form action="" method="get">
  <input type="number" name="number" id="" value="" max="100" min="0" step="10"/>
  <br/>
  <input type="submit" id="" name="" />
 </form>
</body>

range类型生成一个拖动条：

<body>
 <form action="" method="get">
  <input type="range" name="range" id="" value="" max="100" min="0" step="10"/>
  <br/>
  <input type="submit" id="" name=""/>
 </form>
</body>

<body>
 <form action="" method="get">
  <input type="search"/>
  <input type="submit" id="" name="" />
 </form>
</body>

tel类型只能输入电话号码的文本框

<body>
 <form action="" method="get">
  <input type="tel" name="tel">
 </form>
</body>

// url类型，如果输入框中不是url格式，会提示用户
<body>
 <form action="" method="get">
  <input type="url" name="url">
  <input type="submit" id="" name="" />
 </form>
</body>

登录用户列表

<body>
 <form id="login" action="" method="get">
  <label for="username">
  用户名：
  </label>
  <input id="username" type="text" name="username"/>
 </form>
 <label>密码：
 <input from="login" type="password" name="password"/>
 </label>
 <br/>
 <input form="login" type="submit"/>
</body>

form表单中，一个action属性，另一个formaction属性，method属性和formmethod属性，enctype属性和formenctype属性，formtarget属性和target属性。

<body>
 <form id="login" action="" method="get">
  <label for="username"></label>
  <input id="username" type="text" name="username" placeholder="请输入用户名"/>
  <br/>
  <label><input type="password" name="password" autofocus="autofocus" placeholder="请输入密码"/>
  </label>
  <br/>
  <input type="submit" formaction="login"/>
  <button type="submit" formaction="regist">注册</button>
  <br/>
 </form>
</body>

<body>
 <form id="login" action="login"  method="get">
  <label for="username"></label>
  <input id="username" type="text" name="username" palceholder="请输入用户名"/>
  <br/>
  <label><input type="password" name="password" autofocus="autofocus" placeholder="请输入密码"/>
  </label>
  <br/>
  <input type="submit" formmethod="get"/>
  <input type="submit" formmethod="post"/>
 </form>
</body>

autocomplete属性用于快速输入表单，一篇浏览器提供了自动补全的功能。HTML5中autocomplete默认值为on，所以当有时候需要关掉的请输入属性值autocomplete="off"。

autofocus属性自动获取焦点，pattern属性用于验证表单输入的内容，相反novalidate属性提交表单时不对其进行验证，required属性规定必须在提交之前必须填入输入的值。

<body>
 <form action="" method="get">
  <textarea name="text" rows="5" cols="5" wrap="hard">
  </textarea>
  <input type="submit" id="" name=""/>
 </form>
</body>

maxlength用于规定文本区域的最大字符数，
warp默认值为soft，在表单中提交时，textarea中文本不换行，
当提交表单时，如果wrap="hard",则提交的文本会包含换行符

css3选择器

兄弟选择器，2.新增的属性选择器，3.新增的伪类选择器，4.新增的伪元素选择器。

兄弟选择器：

格式：

元素1~元素2 

{ property1: value1; property2: value2 }

E[attribute^=value]
选择带有以指定开头的属性值的元素

E[attribute$=value]
选择带有以指定结尾的属性值的元素

E[attribute*=value]
选择属性值中包含值的元素，位置不限，不限制整个单词

伪类选择器

:root 选择文档的根元素
向元素添加样式
:last-child 该元素是它的父元素的最后一个子元素
:nth-child(n) 该元素是它的父元素的第n个子元素
:nth-last-child(n) 该元素是它的父元素的倒数第n个子元素
:noly-child 该元素是它的父元素的唯一子元素
:first-of-type 该元素是同级同类型元素中第一个元素
:last-of-type 该元素是同级同类型元素中最后一个元素
:nth-last-of-type(n)该元素是同级同类型元素中倒数第n个元素
:only-of-type 该元素hi同级同类型元素中唯一的元素
:empty 向没有子元素的元素添加样式

CSS3新增属性：

background-clip 设置背景覆盖范围
border-box/padding-box/content-box
border-box背景显示区域到边框
padding-box背景显示区域到内边距框
content-box背景显示区域到内容框

background-origin 设置背景覆盖的起点
border-box/padding-box/content-box
border-box:背景起点在边框的左上角
padding-box:背景起点在内边距框的左上角
content-box:背景起点在内容框的左上角

background-size 设置背景的大小
cover/contain

text-overflow
设置当文本溢出元素框时的处理方式
clip/ellipsis
clip：裁剪文本内容
ellipsis：显示省略号

word-break
自动换行的方式
normal/break-all/keep-all

word-wrap
单词的换行方式
normal/break-word

盒子模型

border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

圆角边框

box-shadow阴影

h-shadow
阴影的水平方向偏移的距离

v-shadow
阴影的垂直方向偏移的距离

blur
模糊的半径距离

spread
阴影的额外增加的尺寸

color
阴影的颜色

inset
切换为内部阴影

outline-offset轮廓可以增加一个属性，设置轮廓的偏移量

变形属性，transform和transform-origin

3D变形属性，transform属性：

rotateX: 表示元素沿着x轴旋转
rotateY：表示元素沿着y轴旋转
rotateZ：表示元素沿着z轴旋转

transform-style用于设置嵌套的子元素在3D空间中显示的效果，默认值flat，preserve-3d，perspective，设置成透视效果，backface-visibility用于设置当元素背面面向屏幕时是否可见，通常用于设置不希望用户看到旋转元素的背面。

column-count
设置元素应该被分隔的列数

column-width
设置列的宽度

columns
一条声明设置列宽和列数

column-gap
设置列之间的间隔

column-span
设置元素应该横跨的列数

column-rule-style
设置列之间间隔的样式

column-rule-color
设置列之间间隔的颜色

column-rule-width
设置列之间间隔的宽度

column-rule
一条声明设置列之间间隔所有属性

?? 不要忘记留下你学习的脚印 [点赞收藏评论]

作者Info：

【作者】：Jeskson

【原创公众号】：达达前端小酒馆。

【转载说明】：转载请说明出处，谢谢合作！~

关于目前文章内容即涉及前端，PHP知识点，如果有兴趣即可关注，很荣幸，能被您发现，真是慧眼识英！也感谢您的关注，在未来的日子里，希望能够一直默默的支持我，我也会努力写出更多优秀的作品。我们一起成长，从零基础学编程，将 Web前端领域、数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯。

若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

请点赞！因为你们的赞同/鼓励是我写作的最大动力！

欢迎关注达达的CSDN！

这是一个有质量，有态度的博客

原文地址：https://www.cnblogs.com/dashucoding/p/11964793.html

时间： 2024-10-14 19:43:10

（近万字）一篇文章带你了解HTML5和CSS3开发基础与应用-适合前端面试必备

?? 不要忘记留下你学习的脚印 [点赞收藏评论]

请点赞！因为你们的赞同/鼓励是我写作的最大动力！

欢迎关注达达的CSDN！