HTML5基本内容分享,来看看!

html-css011

HTML5基本内容分享,来看看!,第1张

HTML5是什么?

一般广义而言的HTML5则包含了HTML、CSS和JavaScript三个部分,而不只是第一印象仅仅HTML部分而已,在CSS 3和JavaScript层面也有许多的创新,让整个网页从布局到处理都更加给力,新囊括的技术让之前实现相当困难且安全性危机重重的功能变为了现实。

为什么要用HTML5?

THML5在布局上更得体,记得以前的主流table过渡到主流div今的布局对搜索引擎更加友好,比如内总是会包含文章内容,而nav是导航信息HTML5的移动手机支持也日趋完善,兼容移动端可是一个简单概念。

虽然多网合一,兼容问题永远存在,布局适配也是一门技术活另外在Pad等其他客户端也发挥着越来越重要的优势。

HTML5的基本结构

HTML 用来组织网页的结构,就像人类的骨架一样。首先你要做的是学习它的语法以及与它相关的所有内容。重点要学习的内容如下:

学习基础知识及如何编写语义化的HTML,了解页面的各个部分,并且学会如何正确地构建 DOM。任务——学习完 HTML 的基础知识后,请至少动手编写 5 个 HTML 页面。我的建议是可以选择任何网站的页面,例如可以尝试去编写任何一个 Github 配置页面或者 Twitter 的登录页面,而且要确保结构是正确的。虽然完成的页面看起来很丑,但是暂时还不用着急,现阶段的重点是学会编写正确的结构。

目前而言,主流的网页浏览器Firefox 5、Chrome 12和Safari 5都已经支援了许多的HTML5标准,而且目前最新版的IE 9也支援了许多HTML5标准。随着使用者陆续升级到新版的浏览器,开发者应该在现在就可以着手开发,兼容性问题会随着时间的推移而越来越少。

以上就是青藤小编关于HTML5基本内容的相关分享,希望对大家有所帮助,想要了解更多相关内容,欢迎大家及时在本平台进行查看哦!

表单是用来收集用户信息的

(1)表单框

<form name="表单名称" method="post//get" action="路径" ></form>

(2) 表单控件

<input type=""/>

语法:

<input type="" name="" value="" size="" maxlength="" />

input 标签可以创建按钮,文本输入框,选择框等各种类型的输入字段

name 属性标识表单域的名称

type 属性标识表单控件的类型,大概有十几种

value 属性定义表单域的默认值,其他属性根据type的不同而有所变化

maxlength 控制最多输入的字符数

size 控制框的宽度(以字符为单位)

type类型

 文本框 <input type="text" value="默认值"/>

密码框 <input type="password" />

提交按钮 <input type="submit" value="按钮内容" />

重置按钮 <input type="reset" value="按钮内容" />

空按钮 <input type="button" value="按钮内容" />

单选按钮组

<input type=“radio” name=“ral” />男

<input type=“radio” name=“ral” checked=“checked”/>(默认选中)女

复选框组

<input type="checkbox" name="" /><input type="checkbox" name="" disabled="disabled" />

*disabled="disabled" (禁用) *  checked="checked"  (默认选中)

层叠样式表 优化网页

每个CSS样式分为两部分:选择符和声明,声明又分为属性和属性值

属性必须放在花括号中,属性与属性值用冒号连接。每条声明用分号结束。

当一个属性有多个属性值的时候,属性值与属性值不分先后顺序。

在书写样式过程中,空格、换行等操作不影响属性显示。

(1)行内样式

语法:<标签 style=“属性:属性值属性:属性值”></标签>

例如:<div style="width:100px"></div>

(2)内部样式

语法:

    <style type="text/css">

        css语句

      </style>

注:使用style标记创建样式时,最好将该标记写在<head></head>

(3)外部样式

语法: <link rel="stylesheet" type="text/css" href="目标文件的路径及文件名全称" />

说明:使用link元素导入外部样式表时,需将该元素写在文  档头部,即<head>与</head>之间。

rel:用于定义文档关联,表示关联样式表;      type:定义文档类型。

行内样式优先级最高,内部样式与外部样式越靠后优先级越高(就近原则)

(1)标签选择器

语法:标签名{属性1:属性值1;属性2:属性值2;}

HTML的所有标签都可以作为选择器

(2)ID选择器

语法:#id名{属性1:属性值1;属性2:属性值2;}

1、当我们使用id选择符时,应该为每个元素定义一个id属性; 如:<div id="top"></div>

2、id选择符的语法格式是“#”加上自定义的id名;  如:#box{width:300pxheight:300px} 

3、起名时要取英文名,不能用关键字:(所有的标记和属性都是关键字) 

4、一个id名称只能对应文档中一个具体的元素对象,因为id只能定义页面中某一个唯一的元素 对象。 

5、最大的用处:创建网页的外围结构

(3)class选择器

语法:.class名{属性:属性值}

当我们使用类选择符时,应先为每个元素定义一个类名称,

类选择符的语法格式是:如:<div class="top"></div>

用法:class选择符更适合定义一类样式;

(4)群组选择器

语法:选择符1,选择符2,选择符3......{属性:属性值}

说明:当有多个选择符应用相同的声明时,可以将选择符用“,”分隔的方式,合并为一组。

实例:.top, #nav, p{width:100px}

(5)包含选择器

语法:选择符1(父) 选择符2(子){属性:属性值}

说明:选择符1和选择符2用空格隔开,含义就是选择符1中包含的所有选择符2

实例: div  ul  li{height:200px}

(6)通配符

语法:*{属性:属性值;}

说明:通配选择符的写法是“*”,其含义就是所有元素。

用法:常用来重置样式。建议放在样式表最上方。