您的浏览器过于古老 & 陈旧。为了更好的访问体验, 请 升级你的浏览器
一纸荒年 发布于2019年12月02日 17:58

原创 了解HTML5和CSS3开发基础

22 次浏览 读完需要≈ 60 分钟 HTML5CSS

内容目录

前言

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

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

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

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

HTML5和HTML4的区别

字符编码的改变:

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

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

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

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

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类似,该元素不换行。

HTML5文本格式化元素

标签 描述
b 用于定义粗体文本
strong 用于定义粗体文本
small 用于定义小号字体文本
em 用于强调文本
i 用于定义斜体文本
sub 用于定义下标文本
sup 用于定义上标文本
abbr 用于定义一个缩写
address 用于定义一个地址
blockquote 用于定义块引用
q 用于定义一个短的引用
code 用于定义计算机代码文本
cite 用于表示对某个参考文献的引用
del 用于定义文档中被删除的文本
ins 用于定义文档中插入的文本
kbd 用于定义键盘文本
pre 用于定义预格式化的文本
samp 用于定义样本文本
var 用于定义变量

a标签超链接与锚点:

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

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

download和media:

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

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

HTML5列表元素

标签 描述
ul 用于定义无序列表
ol 用于定义有序列表
li 用于定义列表项目
dl 用于定义列表
dt 用于定义标题列表项
dd 用于定义定义列表项目
<div class="demo">
	<ul>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

HTML5表格元素

标签 描述
table 用于定义表格
caption 用于定义表格标题
tr 用于定义表格行
td 用于定义单元格
th 用于定义单元格
colspan 用于定义td元素横跨多少列
rowspan 用于定义td元素横跨多少行
tbody 用于定义表格主体
thead 用于定义表格表头
tfoot 用于定义表格页脚
col 用于表格中一个或者多个列定义属性值
colgroup 用于对表格中的列进行组合
<!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>

HTML5文档结构元素

标签 描述
header 用于定义文档或是节的页眉
footer 用于定义文档或是节的页脚
aside 用于定义文档内的文章
section 用于定义文档中的一个区域
nav 用于定义页面上的导航链接部分
figure 用于定义一段独立的引用
figcaption 用于表示与其相关联的引用的说明或是标题等
<html>
    <head>
        <title>文档结构元素</title>
    </head>
    <body>
        <article>
            <!--帖子的头部-->
           <header>
                <h1>标题<mark>重点</mark>名称</h1>
                <div>作者</div>
            </header>
            <p>
                帖子内容
            </p> 
            <!--帖子的回复部分-->
            <section>
                <article>
                    <header>
                        <h2>小标题</h2>
                        <div>楼主</div>
                    </header>
                    <p>
                        留言部分
                        <time datetime="20:50">留言时间</time>
                        <details>
                            <summary>详情</summary>
                            其他描述
                        </details>

                    </p>
					进度:<meter value="130" min="20" max="150"></meter>
                </article>
            </section>
            <!--脚注-->
            <footer>
                底部内容
            </footer>
            <!--添加边栏,将aside放在article内部,为文章添加边栏-->
        </article>
    </body>
</html>

HTML5多媒体元素

标签 描述
audio 定义音频<audio src="" controls="controls"></audio>
video video定义视频
src 定义目标的路径
controls 设置是否使用播放控制

HTML5通用属性

标签 描述
id 用于HTML元素中唯一的标识
style 用于为HTML元素指定css样式
class 用于匹配css样式的class选择器
dir 用于设置元素中内容排列的方向
hidden 设置属性是否隐藏
spellcheck 设置浏览器是否对用户输入的文本内容执行输入检查

HTML5表单相关元素和属性

标签 描述
form 用于生成输入表单
action 用于被提交到的地址
method 用于提交表单发送哪种类型的请求
enctype 用于指定表单内容编码使用的字符集
name 用于定义表单的唯一名称
target 用于定义哪种方式打开目标url
input标签type类型
button 定义可点击的按钮(通常与 JavaScript 一起使用来启动脚本)。
checkbox 定义复选框。
color 定义拾色器。
date 定义date控件(包括年、月、日,不包括时间)。
datetime 定义datetime控件(包括年、月、日、时、分、秒、几分之一秒,基于 UTC 时区)。
datetime-local 定义datetime控件(包括年、月、日、时、分、秒、几分之一秒,不带时区)。
email 定义用于e-mail地址的字段。
file 定义文件选择字段和 "浏览..." 按钮,供文件上传。
hidden 定义隐藏输入字段。
image 定义图像作为提交按钮。
month 定义monthyear控件(不带时区)。
number 定义用于输入数字的字段。
password 定义密码字段(字段中的字符会被遮蔽)。
radio 定义单选按钮。
range 定义用于精确值不重要的输入数字的控件(比如 slider 控件)。
reset 定义重置按钮(重置所有的表单值为默认值)。
search 定义用于输入搜索字符串的文本字段。
submit 定义提交按钮。
tel 定义用于输入电话号码的字段。
text 默认。定义一个单行的文本字段(默认宽度为 20 个字符)。
time 定义用于输入时间的控件(不带时区)。
url 定义用于输入 URL 的字段。
week 定义weekyear控件(不带时区)。
textarea 定义文本
select 定义下拉框

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

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

range类型生成一个拖动条:

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

css3选择器

选择器 例子 描述
element1~element2 p~ul 选择前面有 <p> 元素的每个 <ul> 元素。
[attribute^=value] a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素。
[attribute$=value] a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。
[attribute*=value] a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。
:first-of-type p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
:last-of-type p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
:only-of-type p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
:only-child p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:nth-last-child(n) p:nth-last-child(2) 同上,从最后一个子元素开始计数。
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。
:nth-last-of-type(n) p:nth-last-of-type(2) 同上,但是从最后一个子元素开始计数。
:last-child p:last-child 选择属于其父元素最后一个子元素每个 <p> 元素。
:root :root 选择文档的根元素。
:empty p:empty 选择没有子元素的每个 <p> 元素(包括文本节点)。
:target #news:target 选择当前活动的 #news 元素。
:enabled input:enabled 选择每个启用的 <input> 元素。
:disabled input:disabled 选择每个禁用的 <input> 元素
:checked input:checked 选择每个被选中的 <input> 元素。
:not(selector) :not(p) 选择非 <p> 元素的每个元素。
::selection ::selection 选择被用户选取的元素部分。

CSS3属性

类型 属性 描述
动画属性(Animation) animation-name 指定要绑定到选择器的关键帧的名称
animation-duration 动画指定需要多少秒或毫秒完成
animation-timing-function 设置动画将如何完成一个周期
animation-delay 设置动画在启动前的延迟间隔。
animation-iteration-count 定义动画的播放次数。
animation-direction 指定是否应该轮流反向播放动画。
animation-fill-mode 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
animation-play-state 指定动画是否正在运行或已暂停。
initial 设置属性为其默认值。
inherit 从父元素继承属性。
背景属性(Background) background-color 指定要使用的背景颜色
background-position 指定背景图像的位置
background-size 指定背景图片的大小
background-repeat 指定如何重复背景图像
background-origin 指定背景图像的定位区域
background-clip 指定背景图像的绘画区域
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
background-image 指定要使用的一个或多个背景图像
Border边框属性 border 简写属性,用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
border-width 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
border-color 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。
border-bottom 简写属性,用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性,用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性,用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性,用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。
Outline边框属性 outline 在一个声明中设置所有的轮廓属性
outline-color 设置轮廓的颜色
outline-style 设置轮廓的样式
outline-width 设置轮廓的宽度
Box 属性 overflow-x 如果内容溢出,是否对左右进行剪裁
overflow-y 如果内容溢出,是否对上下进行剪裁
overflow-style 内容溢出首选滚动方式
rotation 围绕rotation-poin定义的点对元素进行旋转
rotation-poin 偏移点
Color属性 color-profile 允许使用源的颜色配置文件的默认以外的规范
opacity 规定书签的级别
box-shadow阴影 h-shadow 阴影的水平方向偏移的距离
v-shadow 阴影的垂直方向偏移的距离
blur 模糊的半径距离
spread 阴影的额外增加的尺寸
color 阴影的颜色
inset 切换为内部阴影
text-overflow 设置当文本溢出元素框时的处理方式
ellipsis 显示省略号
word-break 自动换行的方式
word-wrap 单词的换行方式
transform属性 none 定义不进行转换。
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换,只是用 X 轴的值。
translateY(y) 定义转换,只是用 Y 轴的值。
translateZ(z) 定义 3D 转换,只是用 Z 轴的值。
scale(x[,y]?) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。
  • CodePlayer技术交流群1
  • CodePlayer技术交流群2

0 条评论

撰写评论