HTML5学习笔记
2019-04-24 本文已影响0人
ClementCJ
HTML是一种描述网页的超文本标记（不是编程）语言。
学习流程建议：
- HTML
- XHTML
- Css
- Css3
- JavaScript
- JQuery
- HTML5
HTML5新特性
- 用于绘画的canvas标签；
- 用于媒介回放的video和audio元素；
- 对本地离线存储的更好支持；
- 新的特殊内容元素：article、footer、header、nav、section等；
- 新的表单控件： calendar、date、time、email、url、search等；
- 浏览器支持：Safari、Chrome、Firefox、IE。
HTML5语法
>声明
<!DOCTYPE html>
>基础标签
head、body：这两个标签都被定义在<html> </html>中
>标题
h1...h6：标记内容的大小和粗细
>段落
p：定义段落，定义一段话，不在p标签内的文字都会另起一行显示
>超链接
a：定义超链接
>图像
img：定义图像
>换行
br
<!DOCTYPE html>
<html>
<head lang="zh"> <!--lang定义文字的显示形式，en-英文，ch-中文-->
<meta charset="utf-8"> <!--编码格式-->
<title>HTML基础标签</title>
</head>
<body>
<h1>h1标题</h1>
<h2>h2标题</h2>
<h3>h3标题</h3>
<h4>h4标题</h4>
<h5>h5标题</h5>
<h6>h6标题</h6>
<p>你好，中国</p>
<a href="www.search.space.wehack">搜索引擎</a>
<img src="image path">
学习HTML5<br/> 需要学习样式和JS脚本
</body>
</html>
HTML属性
- 标签可以拥有属性为元素提供更多信息；
- 属性以键值对出现；
>常用标签属性
- <h1>: align对其方式，left、right、center
- <body>: bgcolor背景颜色
- <a>: target在何处打开链接，_blank，_self，_parent，_top
>通用属性
- class:声明元素类名
- id:声明元素唯一ID
- style:声明元素的样式，使用CSS
- title:声明元素的额外信息
<!DOCTYPE html>
<html>
<head lang="zh"> <!--lang定义文字的显示形式，en-英文，ch-中文-->
<meta charset="utf-8"> <!--编码格式-->
<title>HTML属性</title>
</head>
<body>
<h1 align="center">h1标题</h1>
<h2 class="h2ID">h2</h2>
<p>你好，中国</p>
<a href="www.search.space.wehack">搜索引擎</a>
</body>
</html>
定义字体
- b：定义加粗文字
- em：定义斜体文字
- i：定义斜体文字
- small：定义小号字
- strong：定义加重语气
- sub：定义下标字
- sup：定义上标字
- ins：定义插入字
- del：定义删除字
HTML样式
>标签
- style：样式定义
- link：资源引用
>属性
- rel="sytlesheet"：外部样式表
- type="text/css"：引入文档类型
- margin-left、margin-right：边距
>三种样式表插入方法
- 外部样式表
<link rel="stylesheet" type="text/css" href="mystyle.css"> - 内部样式表
<style type="text/css">
body {background-color: res}
p {margin-left: 20px}
</style> - 内联样式表
<p style="color: red;"> </p>
HTML链接
>链接数据
- 文本链接
- 图片链接
>属性
- href：指向另一个文档的链接
- name：创建文本内的链接
>img标签属性
- alt：替换文本属性
- waith：宽
- height：高
HTML表格
- table：定义表格
- caption：定义表格标题
- th：定义表格的表头
- tr：定义表格的行
- td：定义表格的单元
- thead：定义表格的页眉
- tbody：定义表格主体
- tfoot：定义表格页脚
- col：定义表格的页属性
HTML列表
- ol：有序列表
- ul：无序列表
- li：列表向
- dl：列表
- dt：列表项
- dd：描述
<!DOCTYPE html>
<html>
<head lang="zh"> <!--lang定义文字的显示形式，en-英文，ch-中文-->
<meta charset="utf-8"> <!--编码格式-->
<title>HTML列表</title>
</head>
<body>
<ul type="cycle"> <!-- type:discycle cycle square-->
<li>html</li>
<li>css</li>
<li>javsscript</li>
</ul>
<ol type="cycle"> <!-- type: A, a, 1 -->
<li>html</li>
<li>css</li>
<li>javsscript</li>
</ol>
<dl>
<dt>banana</dt>
<dd>it's food</dd>
<dt>cat</dt>
<dd>it's a anmianl</dd>
</dl>
</body>
</html>
HTML块
- 块元素：在显示时通常会以新的行开始，如h1、p、ul
- 内联元素：通常不会以新行开始，如b、a、img
- div元素：配合CSS样式使用，通常作为组合成HTML的容器
- span：内联元素，可作为文本的容器
<!DOCTYPE html>
<html>
<head lang="zh"> <!--lang定义文字的显示形式，en-英文，ch-中文-->
<meta charset="utf-8"> <!--编码格式-->
<title>HTML块</title>
<style>
#dd{
color:blue;
}
span{
color:red;
}
</style>
</head>
<body>
<p>这是一段话</p>
<b>这是一个加重标签</b><a>这是一个超链接标签</a>
<div id="dd">
这是div标签中的内容
<p><span>这是span标签中的内容</span>这是span标签外的内容</p>
</div>
<span>
</span>
</body>
</html>
HTML布局
>div布局
<!DOCTYPE html>
<html>
<head lang="zh"> <!--lang定义文字的显示形式，en-英文，ch-中文-->
<meta charset="utf-8"> <!--编码格式-->
<title>div布局</title>
<style type="text/css">
body{
margin:0px;
}
#container{
width:100%;
height:950px;
background-color:darkgray;
}
div#head{
width:100%;
height:10%;
background-color:aqua;
}
#content_menu{
width:30%;
height:80%;
background-color:aquamarine;
float:left; /*设置浮动，从左到右*/
}
#content_body{
width:70%;
height:80%;
background-color:blueviolet;
float:left; /*设置浮动，从左到右*/
}
#foot{
width:100%;
height:10%;
background-color:black;
clear:both; /*清楚浮动*/
}
</style>
</head>
<body>
<div id="container">
<div id="head">头部</div>
<div id="content_menu">内容菜单</div>
<div id="content_body">内容主体</div>
<div id="foot">底部</div>
</div>
</body>
</html>
>table布局
<!DOCTYPE html>
<html>
<head lang="zh"> <!--lang定义文字的显示形式，en-英文，ch-中文-->
<meta charset="utf-8"> <!--编码格式-->
<title>table布局</title>
<style type="text/css">
</style>
</head>
<body marginwidth="0px" marginheight="0px">
<table width="100%" height="950px" style="background-color: darkgray">
<tr>
<td colspan="3" width="100%" height="10%" style="background-color: aqua">头部</td>
</tr>
<tr>
<td width="20%" height="80%" style="background-color: blue">左菜单</td>
<td width="60%" height="80%" style="background-color: blueviolet">内容</td>
<td width="20%" height="80%" style="background-color: deeppink">右菜单</td>
</tr>
<tr>
<td colspan="3" width="100%" height="10%" style="background-color: darkcyan">底部</td>
</tr>
</table>
</body>
</html>
HTML表单
表单用于获取不同类型的用户输入
>常用表单标签
- form：表单
- input：输入域
- textarea：文本域
- label：控制标签
- fieldset：定义域
- legend：域的标题
- select：选择列表
- optgroup：选项组
- option：下拉列表中的选项
- button：按钮
<!DOCTYPE html>
<html>
<head lang="zh"> <!--lang定义文字的显示形式，en-英文，ch-中文-->
<meta charset="utf-8"> <!--编码格式-->
<title>HTML表单</title>
<style type="text/css">
</style>
</head>
<body>
<form>
用户名：
<input type="text">
<br />
密码：
<input type="text">
<br />
你去过那里？
台湾<input type="checkbox">
新疆<input type="checkbox">
香港<input type="checkbox">
<br />
你是哪里人？
安徽<input type="radio" name="addr">
吉林<input type="radio" name="addr">
北京<input type="radio" name="addr">
<br />
你的性别？
<select>
<option>man</option>
<option>woman</option>
</select>
<br />
<input type="button" value="按钮">
<input type="submit" value="提交">
</form>
<textarea cols="30" rows="30">输入个人信息</textarea>
</body>
</html>
