当前位置:首页 > Web开发 > 正文

(近万字)一篇文章带你了解HTML5和CSS3开发基础与应用

2024-03-31 Web开发

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://www.mamicode.com/"http.."></a> <a href=http://www.mamicode.com/"" download=http://www.mamicode.com/"">点击下载</a>

列表元素

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

表格元素

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

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

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/42104.html