HTML5学习

编辑器

推荐： IDEA https://www.jetbrains.com/idea/

必要学习知识

1. HTML
2. XHTML
3. CSS
4. CSS3
5. JavaScript
6. JQuery
7. HTML5

HTML5新特征

1. canvas标签
2. video和audio
3. 本地离线存储的更好支持
4. 特殊内容元素 article footer header nav
5. 新的表单控件 calendar date time email
6. 浏览器支持

HTML样式

标签

<style>:样式定义
<link> :资源引用 

属性

rel = "stylesheet" :外部样式表
type = "text/css":引入文档的类型
margin-left :边距

三种样式插入方式

1. 外部样式表

<link rel="stylesheet" type="text/css" href="mystyle.css">

1. 内部样式表

<style type = "text/css">
body {backgroud-color:red}
p{margin-left:20px}
</style>

1. 内联样式表

<p stype="color:red">

HTML列表

1. 无序列表
   <ul> </ul> 效果:disc circle square
   <li> </li>
2. 有序列表
   <ol> </ol> 效果:Aa,I,i,start
   <li> </li>
3. 嵌套列表
   嵌套有序和无序列表
4. 自定义列表
   <dl> <dt> <dd>

HTML5表单

表单作用
获取不同类型的用户输入

常用的表单标签

<form>:表单
<input>:输入域
<textarea>:文本域
<label>:控制标签
<filedset>:定义域名 
<legend>:域的标题
<select>:选择列表
<optgroup>:选项组
<option>:下拉列表中的选项
<button>:按钮

常用表单

复选框

<input type = "checkbox">

单选按钮

<input type = "radio" name = "指定组">

下拉列表

<select>
        <option>选项一</option>
        <option>选项二</option>
</select>

文本域

<textarea cols="20" row="30">在此输入信息</textarea>

创建按钮

<input type = "button" value="按钮">