<html>
<head>
<title> </title> //标题
</head>
<body>
<h1></h1> //表示主标题
<p></p> //表示段落
<h2></h2> //h1的子标题
<h2></h2> //h1的子标题
</body>
</html>
元素包括起始标签、结束标签、内容
特性
<p lang="en-us"></p> lang为语言特性，en-us表示美式英语
html有6个级别的标签
即：<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
粗体：<b></b>
<h1>今天开始学习<b>HTML和CSS</b></h1> //即HTML和CSS为粗体
斜体：<i></i>
上标：x<sup>2</sup> //相当于x的平方
下标：y<sub>2</sub> //相当于y2
换行：<br />
水平线：<hr />
通常用一个标签来包含 <h1><hr /></h1>
加粗：<strong> </strong>
强调：<em> </em> 起强调作用，通常浏览器以斜体显示
引用：<blockquote> </blockquote> 标记引用 通常在浏览器中，文本会以前后缩进来表示
较短引用： <q> </q> 文本前后会加双引号显示，IE浏览器不支持
<cite></cite>同样也是引用
缩写词和首字母缩写词：<abbr> </abbr>
如： <abbr title="Professor">Prof</abbr> //表示Prof是由Professor缩写的
<abbr title="Kuang Zeng Xiong">KZX</abbr> //表示KZX是由Kuang Zeng Xiong缩写的
定义：<dfn> </dfn> 用来表示一个新术语定义或行业用语
如： <dfn> MySQL </dfn>
设计者详细信息：<address><a href="mailto:homer@example.org">homer@example.org</a></address>
增加、插入：<ins>worst</ins> worst下会出现下划线
删除：<del>Best</del> Best会有删除线 表示已经从文档中删除的文本
不准确：<s>here</s> here会有删除线 表示不准确却并不予以删除的内容
有序列表： 会有序号出现在每一行
<ol>
<li>我们</li> //结果：1.我们
<li>他们</li> 2.他们
</ol>
无序列表： 每一行前会有点号
<ul>
<li>我们</li> //结果: 我们
<li>他们</li> 他们
</ul>
定义列表：
<dl>
<dt>first</dt> //结果： first
<dd>我们的时光</dd> 我们的时光
<dt>second</dt> second
<dd>清澈晶莹</dd> 清澈晶莹
</dl>
<a> 标签定义超链接，用于从一张页面链接到另一张页面。
<a> 元素最重要的属性是 href 属性，它指示链接的目标。
编写链接
<a href="https://www.baidu.com">百度一下</a>
建立email链接：mailto
<a href="mailto:4546456@qq.com">邮箱</a> href特性值mailto:开始
在新窗口中打开链接：target
<a href="http://www.baidu.com" target="_blank"> 用到target特性，把特性值设置为：_blank
链接到当前网页的特定位置：
<a href="#top">top</a> 跳转的按钮
<h2 id="top"> </h2> 要跳转到的位置
id必须以字母或者下划线开头
添加图像：<img />
<img src="C:\Users\Hope\Desktop\timg.jpg" alt="星空图" title="仰望的人" width="200" height="200" />
src:图片的地址
alt:搜索引擎的关键字
title：放在图片上显示的字
width:宽
height：高
旧代码：HTML5不在支持
图像的水平对齐：align="left"左对齐，使文本显示在图片的右方
align="right"右对齐，使文本显示在图片的左方
图像的垂直对齐：align="top" 将文本的第一行置于靠近图片的顶端位置
align="middle"将文本的第一行置于靠近图片的中间位置
align="buttom"将文本呢的第一行置于靠近图片的底端位置
保存图片的格式：jpeg png gif
当图片包含多种不同的颜色时，应保存为jpeg格式
当图片包含少量的颜色或大面积的同色区域时，应保存为GIF或PNG格式
图形和图形的说明：
<figure>
<img src="……" />
<br />
<figcaption>图像的说明</figcaption>
</figure>
即图片与图片说明相关联
表格结构
<table> //结果：11 22
<tr>行
<td>11</td>列
<td>22</td>
</tr>
</table>
表格标题：<th></th> 和<td>用法一样
<th scope="col"></th> 列标题
<th scope="row"></th> 行标题
跨列：<td colspan="2"></td> 单元格跨越两列
跨行：<tr rowspan="2"></tr> 单元格跨越两行
长表格：
<table>
<thead>标题
</thead>
<tbody>表中内容
</tbody>
<tfoot>表尾
</tfoot>
</table>
表单：
<form action="http://www.baidu.com" method="get">
</form>
action中的url来接收表单中的信息
method为表单提交的两种方式get和post
单行文本框：
<form action="http://www.baidu.com" method="get">
<p>Username:
<input type="text" name="username" size="15" maxlength="30" /p>
</p>
</form>
type="text" 决定使用的是单行文本框
name="username" 相当于变量名
size="15"文本框的长度
length="30"文本框中可输入最大字符的长度
密码框：
<input type="password" name="" size="" maxlength="" />
多行文本框：
<textarea name="" cols="" rows=""> </textarea>
cols 指定文本框的宽度 也就是一行的长度
rows 指定文本框的长度 也就是一列的长度
单选按钮：
<input type="radio" name="select" value="" checked="checked" />one
<input type="radio" name="select" value="" checked="checked" />two
<input type="radio" name="select" value="" checked="checked" />three
name:相同name的表示同一个关联中的选项
value=""为按钮选中要被发送的值
checked="checked" 为默认选定的按钮
复选框
<input type="checkbox" name="" value="" checked="checked" />one
下拉按钮框：
<select name="">
<option value=""> </option>
<option value="" selected="selected"> </option>
</select>
selected="selected" 默认选项
多选框：
<select name="" size="3" multiple="multiple">
<option value="" selected="selected"> </option>
<option value="" selected="selected"> </option>
<option value="" selected="selected"> </option>
<option value="" selected="selected"> </option>
</select>
size="3" 表示显示的个数
文件上传域：
<form action="" method="pose">
<input type="file" name="" />
<input type="submit" value="upload" /> 按钮 value显示在按钮上的值
</form>
图像按钮：将图像作为按钮
<input type="image" src="c:\users\hope\desktop\timg.jpg" width="20" height="30" />
按钮和隐藏控件：
<button><img src="c:\images\add.jpg alt="add" />Add </button>
即在按钮中插入图片，以及可以使用其他操作,Add为文本显示
<input type="hidden" name="bookmark" value="lyrics" /> 隐藏控件
标签表单控件：<label>
第一种方式：将控件包围：<label> Age:<input type="text" name="age" /> </label>
第二种方式：用for
<input id="female" type="radio" name="gender" value="f">
<label for="female">Female </label>
组合表单元素：<filedset> </filedset>
<filedest>
<legend>Contact details</legend>
<label>Email:<br />
<input type="text" name="email" /></label><br />
<label>Mobile:<br />
<input type="text" name="mobile" /></label><br />
<label>Telephone:<br/>
<input type="text" name="telephone" /></label>
</filedest>
表单验证：required="required"
即 <input type="text" name="username" />
如果没输入就会提示“请填写此字段”
日期控件：
<input type="date" name="username" />
电子邮件输入控件：
<input type="email" name="email" />
URL输入控件：
<input type="url" name="url" />
搜索输入控件：
<input type="search" name="search" placeholder="输入值"/>
placeholder为设置提示的值
注释：<!-- -->
id特性：是唯一的，通常被称为全局特性，作为唯一标识，用来设置自己的样式
class特性：一种方法指定多个元素。
将文本和元素集中在一个块级元素<div></div>
将文本和元素集中在一个内联元素中<span></span>
内联框架：<iframe src="" width="" height="" >
页面信息：<meta name="" content="">
name="description" content="描述网页的信息，最多155个字符"
name="keywords" content="关键字，搜索引擎通过其搜索"
name="robots" content="用来告诉搜索引擎哪些页面需要索引，哪些页面不需要索引
关键字有：all,none,index,noindex,follow,nofollow"
name="author" content="用于定义网页的设计者"
name="pragma" content="用于防止浏览器对网页进行缓存，参数no-cache"
name="expires" content="指定网页缓存过期的时间，Fri, 04 Apr 2014 23:59:59 GMT"
name="content-Type" content="text/html";charset="utf-8"
向网页中添加视频：<video>
src=""
poster="在视频加载时显示一个特定的图像"
width="" height=""
controls:如果使用该特性，就表示浏览器需要提供默认的播放控件
autoplay:如果使用该特性，就表示该视频自动播放
loop:如果使用该特性，表示在视频结束之后重新播放
preload:该特性告诉浏览器在加载时，需要做什么
none:该值表示在按下播放按钮之前，浏览器不必加载视频
auto: 浏览器在载入页面时，应加载视频
metadata:该值表示浏览器只需要搜集少量信息，比如：大小、首帧时间、播放列表和持续时间
要用格式工厂，把视频转换为avc(h264)格式的mp4才能播放
页眉：<header></header>
页脚：<footer></footer>
导航：<nav></nav>
文章：<article></article>
附属信息：<aside></aside>
部分：<section></section>
标题组：<hgroup></hgroup>
图像、影音及其他文件：<figure>
<img 放置图片>
<figcaption>描述图像的信息</figcaption>
</figure>
<head>
<title> </title> //标题
</head>
<body>
<h1></h1> //表示主标题
<p></p> //表示段落
<h2></h2> //h1的子标题
<h2></h2> //h1的子标题
</body>
</html>
元素包括起始标签、结束标签、内容
特性
<p lang="en-us"></p> lang为语言特性，en-us表示美式英语
html有6个级别的标签
即：<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
粗体：<b></b>
<h1>今天开始学习<b>HTML和CSS</b></h1> //即HTML和CSS为粗体
斜体：<i></i>
上标：x<sup>2</sup> //相当于x的平方
下标：y<sub>2</sub> //相当于y2
换行：<br />
水平线：<hr />
通常用一个标签来包含 <h1><hr /></h1>
加粗：<strong> </strong>
强调：<em> </em> 起强调作用，通常浏览器以斜体显示
引用：<blockquote> </blockquote> 标记引用 通常在浏览器中，文本会以前后缩进来表示
较短引用： <q> </q> 文本前后会加双引号显示，IE浏览器不支持
<cite></cite>同样也是引用
缩写词和首字母缩写词：<abbr> </abbr>
如： <abbr title="Professor">Prof</abbr> //表示Prof是由Professor缩写的
<abbr title="Kuang Zeng Xiong">KZX</abbr> //表示KZX是由Kuang Zeng Xiong缩写的
定义：<dfn> </dfn> 用来表示一个新术语定义或行业用语
如： <dfn> MySQL </dfn>
设计者详细信息：<address><a href="mailto:homer@example.org">homer@example.org</a></address>
增加、插入：<ins>worst</ins> worst下会出现下划线
删除：<del>Best</del> Best会有删除线 表示已经从文档中删除的文本
不准确：<s>here</s> here会有删除线 表示不准确却并不予以删除的内容
有序列表： 会有序号出现在每一行
<ol>
<li>我们</li> //结果：1.我们
<li>他们</li> 2.他们
</ol>
无序列表： 每一行前会有点号
<ul>
<li>我们</li> //结果: 我们
<li>他们</li> 他们
</ul>
定义列表：
<dl>
<dt>first</dt> //结果： first
<dd>我们的时光</dd> 我们的时光
<dt>second</dt> second
<dd>清澈晶莹</dd> 清澈晶莹
</dl>
<a> 标签定义超链接，用于从一张页面链接到另一张页面。
<a> 元素最重要的属性是 href 属性，它指示链接的目标。
编写链接
<a href="https://www.baidu.com">百度一下</a>
建立email链接：mailto
<a href="mailto:4546456@qq.com">邮箱</a> href特性值mailto:开始
在新窗口中打开链接：target
<a href="http://www.baidu.com" target="_blank"> 用到target特性，把特性值设置为：_blank
链接到当前网页的特定位置：
<a href="#top">top</a> 跳转的按钮
<h2 id="top"> </h2> 要跳转到的位置
id必须以字母或者下划线开头
添加图像：<img />
<img src="C:\Users\Hope\Desktop\timg.jpg" alt="星空图" title="仰望的人" width="200" height="200" />
src:图片的地址
alt:搜索引擎的关键字
title：放在图片上显示的字
width:宽
height：高
旧代码：HTML5不在支持
图像的水平对齐：align="left"左对齐，使文本显示在图片的右方
align="right"右对齐，使文本显示在图片的左方
图像的垂直对齐：align="top" 将文本的第一行置于靠近图片的顶端位置
align="middle"将文本的第一行置于靠近图片的中间位置
align="buttom"将文本呢的第一行置于靠近图片的底端位置
保存图片的格式：jpeg png gif
当图片包含多种不同的颜色时，应保存为jpeg格式
当图片包含少量的颜色或大面积的同色区域时，应保存为GIF或PNG格式
图形和图形的说明：
<figure>
<img src="……" />
<br />
<figcaption>图像的说明</figcaption>
</figure>
即图片与图片说明相关联
表格结构
<table> //结果：11 22
<tr>行
<td>11</td>列
<td>22</td>
</tr>
</table>
表格标题：<th></th> 和<td>用法一样
<th scope="col"></th> 列标题
<th scope="row"></th> 行标题
跨列：<td colspan="2"></td> 单元格跨越两列
跨行：<tr rowspan="2"></tr> 单元格跨越两行
长表格：
<table>
<thead>标题
</thead>
<tbody>表中内容
</tbody>
<tfoot>表尾
</tfoot>
</table>
表单：
<form action="http://www.baidu.com" method="get">
</form>
action中的url来接收表单中的信息
method为表单提交的两种方式get和post
单行文本框：
<form action="http://www.baidu.com" method="get">
<p>Username:
<input type="text" name="username" size="15" maxlength="30" /p>
</p>
</form>
type="text" 决定使用的是单行文本框
name="username" 相当于变量名
size="15"文本框的长度
length="30"文本框中可输入最大字符的长度
密码框：
<input type="password" name="" size="" maxlength="" />
多行文本框：
<textarea name="" cols="" rows=""> </textarea>
cols 指定文本框的宽度 也就是一行的长度
rows 指定文本框的长度 也就是一列的长度
单选按钮：
<input type="radio" name="select" value="" checked="checked" />one
<input type="radio" name="select" value="" checked="checked" />two
<input type="radio" name="select" value="" checked="checked" />three
name:相同name的表示同一个关联中的选项
value=""为按钮选中要被发送的值
checked="checked" 为默认选定的按钮
复选框
<input type="checkbox" name="" value="" checked="checked" />one
下拉按钮框：
<select name="">
<option value=""> </option>
<option value="" selected="selected"> </option>
</select>
selected="selected" 默认选项
多选框：
<select name="" size="3" multiple="multiple">
<option value="" selected="selected"> </option>
<option value="" selected="selected"> </option>
<option value="" selected="selected"> </option>
<option value="" selected="selected"> </option>
</select>
size="3" 表示显示的个数
文件上传域：
<form action="" method="pose">
<input type="file" name="" />
<input type="submit" value="upload" /> 按钮 value显示在按钮上的值
</form>
图像按钮：将图像作为按钮
<input type="image" src="c:\users\hope\desktop\timg.jpg" width="20" height="30" />
按钮和隐藏控件：
<button><img src="c:\images\add.jpg alt="add" />Add </button>
即在按钮中插入图片，以及可以使用其他操作,Add为文本显示
<input type="hidden" name="bookmark" value="lyrics" /> 隐藏控件
标签表单控件：<label>
第一种方式：将控件包围：<label> Age:<input type="text" name="age" /> </label>
第二种方式：用for
<input id="female" type="radio" name="gender" value="f">
<label for="female">Female </label>
组合表单元素：<filedset> </filedset>
<filedest>
<legend>Contact details</legend>
<label>Email:<br />
<input type="text" name="email" /></label><br />
<label>Mobile:<br />
<input type="text" name="mobile" /></label><br />
<label>Telephone:<br/>
<input type="text" name="telephone" /></label>
</filedest>
表单验证：required="required"
即 <input type="text" name="username" />
如果没输入就会提示“请填写此字段”
日期控件：
<input type="date" name="username" />
电子邮件输入控件：
<input type="email" name="email" />
URL输入控件：
<input type="url" name="url" />
搜索输入控件：
<input type="search" name="search" placeholder="输入值"/>
placeholder为设置提示的值
注释：<!-- -->
id特性：是唯一的，通常被称为全局特性，作为唯一标识，用来设置自己的样式
class特性：一种方法指定多个元素。
将文本和元素集中在一个块级元素<div></div>
将文本和元素集中在一个内联元素中<span></span>
内联框架：<iframe src="" width="" height="" >
页面信息：<meta name="" content="">
name="description" content="描述网页的信息，最多155个字符"
name="keywords" content="关键字，搜索引擎通过其搜索"
name="robots" content="用来告诉搜索引擎哪些页面需要索引，哪些页面不需要索引
关键字有：all,none,index,noindex,follow,nofollow"
name="author" content="用于定义网页的设计者"
name="pragma" content="用于防止浏览器对网页进行缓存，参数no-cache"
name="expires" content="指定网页缓存过期的时间，Fri, 04 Apr 2014 23:59:59 GMT"
name="content-Type" content="text/html";charset="utf-8"
向网页中添加视频：<video>
src=""
poster="在视频加载时显示一个特定的图像"
width="" height=""
controls:如果使用该特性，就表示浏览器需要提供默认的播放控件
autoplay:如果使用该特性，就表示该视频自动播放
loop:如果使用该特性，表示在视频结束之后重新播放
preload:该特性告诉浏览器在加载时，需要做什么
none:该值表示在按下播放按钮之前，浏览器不必加载视频
auto: 浏览器在载入页面时，应加载视频
metadata:该值表示浏览器只需要搜集少量信息，比如：大小、首帧时间、播放列表和持续时间
要用格式工厂，把视频转换为avc(h264)格式的mp4才能播放
页眉：<header></header>
页脚：<footer></footer>
导航：<nav></nav>
文章：<article></article>
附属信息：<aside></aside>
部分：<section></section>
标题组：<hgroup></hgroup>
图像、影音及其他文件：<figure>
<img 放置图片>
<figcaption>描述图像的信息</figcaption>
</figure>
824
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
