HTML学习
简介
HyperText Markup Language 超文本标记语言,后缀名.htm .html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>摆烂基地(blog.lrdhappy.com)</title>
</head>
<body>
<h1>第一个标题</h1>
<p>第一个段落。</p>
</body>
</html>
<!DOCTYPE html>
声明为 HTML5 文档,不区分大小写<html>
元素是 HTML 页面的根元素,定义了整个 HTML 文档<head>
元素包含了文档的元(meta)数据,如<meta charset="utf-8">
定义网页编码格式为 utf-8<title>
元素描述了文档的标题<body>
元素包含了可见的页面内容,定义了 HTML 文档的主体<h1>
元素定义一个大标题<p>
元素定义一个段落
Html基础
标题
HTML 段落是通过标签 <h>
来定义的,可选范围<h1> - <h6>
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
段落
HTML 段落是通过标签 <p>
来定义的
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
链接
HTML 链接是通过标签 <a>
来定义的,在href 属性中指定链接的地址
<a href="https://blog.lrdhappy.com/">摆烂基地链接</a>
请始终将正斜杠添加到子文件夹。假如这样书写链接:href=“https://www.runoob.com/html”,就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href=“https://www.runoob.com/html/”。
target 属性
值 | 描述 |
---|---|
_blank | 在新窗口中打开被链接文档。 |
_self | 默认。在相同的框架中打开被链接文档。 |
_parent | 在父框架集中打开被链接文档。 |
_top | 在整个窗口中打开被链接文档。 |
framename | 在指定的框架中打开被链接文档。 |
在新窗口打开文档
<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>
<!-- rel="noopener noreferrer"
意思是不会打开其他的网站,因为恶意病毒可能会修改你的浏览器空白页地址。-->
id 属性
在HTML文档中插入ID:
<a id="tips">有用的提示部分</a>
在HTML文档中创建一个链接到"有用的提示部分(id=“tips”)":
<a href="#tips">访问有用的提示部分</a>
或者,从另一个页面创建一个链接到"有用的提示部分(id=“tips”)":
<a href="https://www.runoob.com/html/html-links.html#tips">访问有用的提示部分</a>
访问链接指定位置
<h2><a id="C4">章节 4</a></h2>
<p>这边显示该章节的内容……</p>
<p>
<a href="#C4">查看章节 4</a>
</p>
邮件
参数 | 描述 |
---|---|
mailto:name@email.com | 邮件接收地址 |
cc=name@email.com | 抄送地址 |
bcc=name@email.com | 密件抄送地址 |
subject=subject text | 邮件主题 |
body=body text | 邮件内容 |
? | 第一个参数分隔符 |
& | 其他参数分隔符 |
多个邮件地址用 ; 隔开,空格用 %20 代替
<p>
这是一个电子邮件链接:
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
发送邮件</a>
</p>
<p>
这是另一个电子邮件链接:
<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发送邮件!</a>
</p>
图片
HTML 图像是通过标签 <img>
来定义的,在浏览器无法载入图像时,替换文本属性(alt)告诉读者失去的信息
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228" alt="这是一张图片">
不同目录
<img src="/images/test.png" width="258" height="390" />
<p></p>
<img src="../test.png" width="259" height="390" />
相同目录下
<img src="test.jpg" width="300" height="120"/>
来源于网络
<img src="https://www.baidu.com/img/flexible/logo/pc/peak-result.png" width="300" height="120"/>
图片可点击区域
<area>
标签定义图像映射内部的区域(图像映射指的是带有可点击区域的图像)。
<area>
元素始终嵌套在 <map>
标签内部
<map>
标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。
<img>
中的 usemap 属性可引用 <map>
中的 id 或 name 属性(取决于浏览器),所以我们应同时向 <map>
添加 id 和 name 属性
<h4 style="text-align: center;">也可以点击图片上的文字试试
<br>
<img src="/images/link.png" height="400" width="400" alt="导航图片" usemap="#mylinkpng">
</h4>
<map name="mylinkpng">
<area shape="rect" coords="0,0,80,80" href="#music" target="_blank">
<area shape="rect" coords="320,0,400,80" href="#talk" target="_blank">
<area shape="rect" coords="160,160,240,240" href="#about" target="_blank">
<area shape="rect" coords="0,320,80,400" href="#fun" target="_blank">
<area shape="rect" coords="320,320,400,400" href="#vedio" target="_blank">
</map>
矩形:(左上角顶点坐标为(x1,y1),右下角顶点坐标为(x2,y2))
<area shape="rect" coords="x1,y1,x2,y2" href=url>
圆形:(圆心坐标为(X1,y1),半径为r)
<area shape="circle" coords="x1,y1,r" href=url>
多边形:(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)
<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>
创建图片链接
<p>创建图片链接:
<a href="http://www.runoob.com/html/html-tutorial.html">
<img border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
<p>无边框的图片链接:
<a href="http://www.runoob.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
注释
<!-- 这是一个注释 -->
href src
- href(Hypertext Reference)表示超文本引用,在link和a元素使用
- src(source)表示来源地址,在 img、script、iframe 等元素上,是引入
<link href="reset.css" rel=”stylesheet“/>
<script src="script.js"></script>
Html语法
元素
开始标签 | 元素内容 | 结束标签 |
---|---|---|
<p> |
这是一个段落 | </p> |
<a href="default.html"> |
这是一个链接 | </a> |
<br> <br /> |
换行 | |
<hr> |
水平线 |
- 某些 HTML 元素具有空内容
- 空元素在开始标签中进行关闭
- 大多数 HTML 元素可以嵌套
- 大多数 HTML 元素可拥有属性
- htm标签大小写不敏感
没有内容的 HTML 元素被称为空元素,空元素是在开始标签中关闭的,在开始标签中添加斜杠,比如 <br />
,是关闭空元素的正确方法
属性
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现,比如:
<a href="https://blog.lrdhappy.com">摆烂基地</a>
属性值应该始终被包括在引号内,一般使用双引号,也可以使用单引号,若属性值本身就含有双引号,那么必须使用单引号,例如:name=‘John “ShotGun” Nelson’
属性 | 描述 |
---|---|
class | 为html元素定义一个或多个类名,类名从样式文件引入,class=" " (引号里面可以填入多个class属性) |
id | 定义元素的唯一id |
style | 规定元素的行内样式(inline style) |
title | 描述了元素的额外信息 (作为工具条使用) |
折行
在不产生一个新段落的情况下进行换行
<p>这个<br>段落<br>演示了分行的效果</p>
当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。
文本格式化
标签 | 描述 |
---|---|
<b> <strong> |
粗体,使用网页阅读器(盲人),strong 会重读,b 则不会 |
<i> <em> |
斜体,<em> 标签告诉浏览器把其中的文本表示为强调的内容 |
<small> |
小号字 |
<big> |
大号字 |
<sub> |
下标字 |
<sup> |
上标字 |
<ins> |
插入字/下划线 <u>下划线 |
<del> |
删除字 |
<kbd> |
键盘码(推荐CSS) |
<code> |
代码(推荐CSS) |
<samp> |
计算机代码样本(推荐CSS) |
<var> |
定义变量(推荐CSS) |
<pre> |
定义预格式文本 |
<abbr> |
定义缩写<abbr title="World Health Organization">WHO</abbr> |
<address> |
地址,文档所有者联系信息,斜体 |
<bdo> |
指定文本方向,rtl为反向ltr正向<bdo dir="rtl">该段落文字从右到左显示。</bdo> |
<blockquote> |
定义一个摘自另一个源的块引用(长)<blockquote cite="http://www.worldwildlife.org/who/index.html"><br/>For 50 years<br/></blockquote> |
<q> |
标记一个短的引用,浏览器经常会在这种引用插入引号 |
<cite> |
定义作品(比如书籍、歌曲、电影、电视节目、绘画、雕塑等等)的标题,引用的文本将以斜体显示 |
<dfn> |
定义一个定义项目(推荐CSS) |
<pre>
此例演示如何使用 pre 标签
对空行和 空格
进行控制
</pre>
头部
<head>
元素包含了所有的头部标签元素。在 <head>
元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> ,<base>
title
<title>
标签定义了不同文档的标题。
<title>
在 HTML/XHTML 文档中是必须的。
- 定义了浏览器工具栏的标题
- 当网页添加到收藏夹时,显示在收藏夹中的标题
- 显示在搜索引擎结果页面的标题
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
base
<base>
标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接
<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>
<body>
<img src="logo.png"> - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签,该标签指定了页面上所有链接的默认 URL,所以该图片的访问地址为 "http://www.runoob.com/images/logo.png"
<br><br>
<a href="http://www.runoob.com">菜鸟教程</a> - 注意这个链接会在新窗口打开,即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。
</body>
link
<link>
标签定义了文档与外部资源之间的关系。
<link>
标签通常用于链接到样式表:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
style
<style>
标签定义了HTML文档的样式文件引用地址.
<style>
元素中你也可以直接添加样式来渲染 HTML 文档
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
meta
meta标签描述了一些基本的元数据,不显示在页面上,但会被浏览器解析,通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务
为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容:
<meta name="description" content="摆烂基地">
定义网页作者:
<meta name="author" content="Lrdhappy">
每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">
script
<script>
标签用于加载脚本文件,如: JavaScript
表格
表格由 <table>
标签来定义。每个表格均有若干行(由 <tr>
标签定义),每行被分割为若干单元格(由 <td>
标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等
border="1"
有边框- tr td 顺序可变 改变表格方向
- th表头
- thead 表格的页眉 第一行
- tbody 表格的主体
- tfoot 表格的页脚 末行
- caption 定义标题,标签必须直接放置到
<table>
标签之后 - colgroup 定义表格列的组
- col 定义表格列属性
- span属性规定列组应该横跨的列数
<table>
标签常用属性:
border="1" 表格边框的宽度
bordercolor="#fff" 表格边框的颜色
cellspacing="5" 单元格之间的间距
width="500" 表格的总宽度
height="100" 表格的总高度
align="right" 表格整体对齐方式 (参数有 left、center、right)
bgcolor="#fff" 表格整体的背景色
<tr>
标签的常用属性:
bgcolor="#fff" 行的颜色
align="right" 行内文字的水平对齐方式 (参数有left、center、right)
valign="top" 行内文字的垂直对齐方式 (参数有top、middle、bottom)
<td>、<th>
标签的常用属性:
width="500" 单元格的宽度,设置后对当前一列的单元格都有影响
height="100" 单元格的高度,设置后对当前一行的单元格都有影响
bgcolor="fff" 单元格的背景色
align="right" 单元格文字的水平对齐方式 (参数left、center、right)
rowspan="3" 合并垂直水平方向的单元格
colspan="3" 合并水平方向单元格
valign="top" 单元格文字的垂直对齐方式 (参数middle、bottom、top)
<table border="1" >
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
row 1, cell 1 | row 1, cell 2 |
row 2, cell 1 | row 2, cell 2 |
row 1, cell 1 | row 1, cell 2 |
row 2, cell 1 | row 2, cell 2 |
<table border="1" align="center">水平标题
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4 align="center">垂直标题:</h4>
<table border="1" align="center">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>
Name | Telephone | Telephone |
---|---|---|
Bill Gates | 555 77 854 | 555 77 855 |
First Name: | Bill Gates |
---|---|
Telephone: | 555 77 854 |
Telephone: | 555 77 855 |
<!-- <colgroup> 和 <col> 标签 设置背景色-->
<table border="1">
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
ISBN | Title | Price |
---|---|---|
3476896 | My first HTML | $53 |
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
Month | Savings |
---|---|
Sum | $180 |
January | $100 |
February | $80 |
<h4 style="text-align:center">课程表</h4>
<table border="1" cellpadding="10" width="100%">
<tr>
<th colspan="2">时间\日期</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
</tr>
<tr>
<th rowspan="2">上午</th>
<th>9:30-10:15</th>
<th>语文</th>
<th>语文</th>
<th>语文</th>
<th>语文</th>
<th>语文</th>
</tr>
<tr>
<th>10:25-11:10</th>
<th>语文</th>
<th>语文</th>
<th>语文</th>
<th>语文</th>
<th>语文</th>
</tr>
<tr>
<th colspan="7"></th>
</tr>
<tr>
<th rowspan="2">下午</th>
<th>14:30-15:15</th>
<th>语文</th>
<th>语文</th>
<th>语文</th>
<th>语文</th>
<th>语文</th>
</tr>
<tr>
<th>15:25-16:10</th>
<th>语文</th>
<th>语文</th>
<th>语文</th>
<th>语文</th>
<th>语文</th>
</tr>
</table>
时间\日期 | 一 | 二 | 三 | 四 | 五 | |
---|---|---|---|---|---|---|
上午 | 9:30-10:15 | 语文 | 语文 | 语文 | 语文 | 语文 |
10:25-11:10 | 语文 | 语文 | 语文 | 语文 | 语文 | |
下午 | 14:30-15:15 | 语文 | 语文 | 语文 | 语文 | 语文 |
15:25-16:10 | 语文 | 语文 | 语文 | 语文 | 语文 |
列表
无序列表
<ol>
标签,表项使用<li>
<h4>嵌套列表:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
嵌套列表:
- Coffee
- Tea
- Black tea
- Green tea
- Milk
<h4>圆点列表:</h4>
<ul style="list-style-type:disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>圆圈列表:</h4>
<ul style="list-style-type:circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>正方形列表:</h4>
<ul style="list-style-type:square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
圆点列表:
- Apples
- Bananas
- Lemons
- Oranges
圆圈列表:
- Apples
- Bananas
- Lemons
- Oranges
正方形列表:
- Apples
- Bananas
- Lemons
- Oranges
有序列表
<ol>
标签,表项使用<li>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
- Coffee
- Tea
- Milk
- Coffee
- Tea
- Milk
<h4>编号列表:</h4>
<ol><!--默认1 数字列表-->
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>大写字母列表:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>小写字母列表:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>罗马数字列表:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>小写罗马数字列表:</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
编号列表:
- Apples
- Bananas
- Lemons
- Oranges
大写字母列表:
- Apples
- Bananas
- Lemons
- Oranges
小写字母列表:
- Apples
- Bananas
- Lemons
- Oranges
罗马数字列表:
- Apples
- Bananas
- Lemons
- Oranges
小写罗马数字列表:
- Apples
- Bananas
- Lemons
- Oranges
自定义列表
自定义列表不仅仅是一列项目,而是项目及其注释的组合。
自定义列表以 <dl>
标签开始。每个自定义列表项以 <dt>
开始。每个自定义列表项的定义以 <dd>
开始
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
- Coffee
- - black hot drink
- Milk
- - white cold drink
区块
-
HTML 可以通过
<div>
和<span>
将元素组合起来 -
大多数 HTML 元素被定义为块级元素或内联元素。
-
块级元素在浏览器显示时,通常会以新行来开始(和结束)。如:
<h1>, <p>, <ul>, <table>
-
内联元素在显示时通常不会以新行开始。
实例:
<b>, <td>, <a>, <img>
-
HTML
<div>
元素是块级元素,可用于组合其他 HTML 元素的容器。没有特定的含义,浏览器会在其前后显示折行。如果与 CSS 一同使用,<div>
元素可用于对大的内容块设置样式属性。<div>
元素的另一个常见的用途是文档布局。使用<table>
元素进行文档布局不是表格的正确用法。<table>
元素的作用是显示表格化的数据。 -
HTML
<span>
元素是内联元素,可用作文本的容器,没有特定的含义。当与 CSS 一同使用时,<span>
元素可用于为部分文本设置样式属性。
<!-- 文档中的一个区域将显示为蓝色 -->
<div style="color:#0000FF">
<h3>这是一个在 div 元素中的标题。</h3>
<p>这是一个在 div 元素中的文本。</p>
</div>
<!-- 对文本中的一部分进行着色 -->
<p>后面文字是 <span style="color:blue">蓝色</span> 的</p>
布局
div布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DivStyle</title>
</head>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © blog.lrdhappy.com</div>
</div>
</body>
table布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TableStyle</title>
</head>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>主要的网页标题</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
内容在这里</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权 © blog.lrdhappy.com</td>
</tr>
</table>
</body>
</html>
表单和输入
表单用于收集用户的输入信息。,HTML 表单表示文档中的一个区域,此区域包含交互控件,将用户收集到的信息发送到 Web 服务器
文本框及密码框
name属性必须指定,否则数据不会发送给服务器
<form action="">
First name: <input type="text" name="firstname"/><br/>
Last name: <input type="text" name="lastname"/>
OtherTest: <input type="text" name="lastname" value="test"/><!--文本框中出现test-->
</form>
<form action="">
Username: <input type="text" name="user"/><br/>
Password: <input type="password" name="password"/>
</form>
单选按钮
同一个name属性只能选一个
<form action="">性别:
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
</form>
复选框
<form>
喜欢的编程语言: <br>
<input type="checkbox" name="vehicle" value="HTML">HTML<br>
<input type="checkbox" name="vehicle" value="CSS">CSS<br>
</form>
下拉列表
- value:提交数据到服务器的值(后台程序PHP使用)
- name:为控件命名,以备后台程序 ASP、PHP 使用
- checked:当设置 checked=“checked” 时,该选项被默认选中
<form>
你是生物吗<br>
<input type="radio" value="YES" checked="checked">YES<br />
<input type="radio" value="NO">NO<br>
</form>
<form action="">
<select name="country">
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="uk">英国</option>
<option value="japan">日本</option>
</select><br>
</form>
<!--多组标签 可用于下拉框 省 市-->
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
预选列表
<form action="">学习专业:
<select name="majority">
<option value="cs">CS</option>
<option value="ee">EE</option>
<option value="se" selected>SE</option>
</select>
</form>
使用隐藏在下拉列表中的默认空白值实现SELECT标记
<form>
<select>
<option selected disabled hidden style="display: none" value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
- selected:使此选项成为默认选项。
- disabled:使此选项无法点击。
- style=“display:none”:使此选项不在旧版浏览器中显示。
- hidden:使此选项不显示在下拉列表中。
多行文本框
value值为开始到结束标签内容,包含空白
<textarea name="info" rows="10" cols="30">
个人简介:
</textarea>
按钮
<input type="button" value="Hello world!">
<button>HELLO!</button>
提交 重置
当用户单击确认按钮时,表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。action 属性会对接收到的用户输入数据进行相关的处理:
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
输入数据会传送到 html_form_action.php 文件,该页面将显示出输入的结果。
以上实例中有一个 method 属性,它用于定义表单数据的提交方式,可以是以下值:
- post:指的是 HTTP POST 方法,表单数据会包含在表单体内然后发送给服务器,用于提交敏感数据,如用户名与密码等。
- get:默认值,指的是 HTTP GET 方法,表单数据会附加在 action 属性的 URL 中,并以 **?**作为分隔符,一般用于不敏感信息,如分页等。
<!-- 以下表单使用 GET 请求发送数据到当前的 URL,method 默认位 GET。 -->
<form>
<label>Name:
<input name="submitted-name" autocomplete="name">
</label>
<button>Save</button>
</form>
<!-- 以下表单使用 POST 请求发送数据到当前的 URL。 -->
<form method="post">
<label>Name:
<input name="submitted-name" autocomplete="name">
</label>
<button>Save</button>
</form>
<!-- 表单使用 fieldset, legend, 和 label 标签 -->
<form method="post">
<fieldset>
<legend>Title</legend>
<label><input type="radio" name="radio"> Select me</label>
</fieldset>
</form>
带边框表单
<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>
发送邮件表单
<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="发送">
<input type="reset" value="重置">
</form>
form表单元素
<label>
标签的 for 属性应当与相关元素的 id 属性相同,label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件
<!-- 以下表单使用 GET 请求发送数据到当前的 URL,method 默认位 GET。 -->
<form>
<label>Name:
<input name="submitted-name" autocomplete="name">
</label>
<button>Save</button>
</form>
<!-- 以下表单使用 POST 请求发送数据到当前的 URL。 -->
<form method="post">
<label>Name:
<input name="submitted-name" autocomplete="name">
</label>
<button>Save</button>
</form>
<!-- 表单使用 fieldset, legend, 和 label 标签 -->
<form method="post">
<fieldset>
<legend>Title</legend>
<label><input type="radio" name="radio"> Select me</label>
</fieldset>
</form>
<button>
在 <button>
元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 <input>
元素创建的按钮之间的不同之处
<input type="button" value="Hello world!"><br>
<button>HELLO!</button><br>
<button type="button">点我!</button> <br>
<optgroup>
标签把相关的选项组合在一起
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
<fieldset>
标签可以将表单内的相关元素分组。标签会在相关表单元素周围绘制边框。通过<legend>
定义标题
标签属性
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
<!-- 文本替代图像 alt-->
<form action="demo_form.html">
First name: <input type="text" name="fname"><br>
<input type="image" src="submit.gif" alt="Submit" width="48" height="48">
<!-- 框里 value 显示默认值-->
Username: <input type="text" name="user" value="默认值"><br>
</form>
input type
button
checkbox
color
date
datetime
datetime-local
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
框架
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。iframe:
- 属性默认以像素为单位, 但是你可以指定其按比例显示 (如:“80%”)
- frameborder 属性用于定义iframe表示是否显示边框。设置属性值为 “0” 移除iframe的边框
<iframe src="URL"></iframe>
<iframe loading="lazy" src="demo_iframe.htm" width="200" height="200"></iframe>
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
<iframe src="demo_iframe.htm" frameborder="no"></iframe>
<p id="music"><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86
src="//music.163.com/outchain/player?type=2&id=1146770&auto=1&height=66"></iframe></p>
<br>
<p id="vedio"><iframe height="480px" width="720px" src="//player.bilibili.com/player.html?aid=425305020"
scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe></p>
<!-- iframe 可以显示一个目标链接的页面
目标链接的属性必须使用 iframe 的属性-->
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>
某些网页不希望被嵌套, 响应头中有一选项
X-Frame-Options
他有三个可配置值
DENY:表示该网站页面不允许被嵌套,即便是在自己的域名的页面中也不能进行嵌套。
SAMEORIGIN:表示该页面可以在相同域名页面中被嵌套展示。
ALLOW-FROM uri:表示该页面可以在指定来源页面中进行嵌套展示。
frameset已经淘汰
<html>
<head></head>
<frameset rows="20%,*" > <!-- frameborder="no" -->
<frame src="frames/top.html"/>
<frameset cols="15%,*">
<frame src="frames/left.html"/>
<frameset rows="80%,*">
<frame src="frames/main.html"/>
<frame src="frames/bottom.html"/>
</frameset>
</frameset>
</frameset>
</html>
颜色
HTML 颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)1600万种不同颜色。
每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)。
#000000 rgb(0,0,0)
#FFFFFF rgb(255,255,255)
三位数表示法为:#RGB,转换为6位数表示为:#RRGGBB
RGBA 的意思是(Red-Green-Blue-Alpha)它是在 RGB 上扩展包括了 “alpha” 通道,运行对颜色值设置透明度。
div {
background:rgba(255,0,0,0.5);
}
相对于使用 rgb(255,255,0),使用 rgba(255,255,0,0.5) 可以实现设置颜色透明度的功能,这里的 0.5 表示透明度,范围 0~1,0 表示全透明。
通常我们为了省略一个 0:
div {
background:rgba(255,0,0,.5);
}
实例:
<p style="background-color:rgb(255,255,0)">
通过 rbg 值设置背景颜色
</p>
<p style="background-color:rgba(255,255,0,0.25)">
通过 rbg 值设置背景颜色
</p>
<p style="background-color:rgba(255,255,0,0.5)">
通过 rbg 值设置背景颜色
</p>
<p style="background-color:rgba(255,255,0,0.75)">
通过 rbg 值设置背景颜色
</p>
WEB安全色 :
数年以前,当大多数计算机仅支持 256 种颜色的时候,一系列 216 种 Web 安全色作为 Web 标准被建议使用,216 跨平台 web 安全色被用来确保:当计算机使用 256 色调色板时,所有的计算机能够正确地显示所有的颜色。
颜色名
141个颜色名称是在HTML和CSS颜色规范定义的(17标准颜色,再加124)。下表列出了所有颜色的值,包括十六进制值。17标准颜色:黑色,蓝色,水,紫红色,灰色,绿色,石灰,栗色,海军,橄榄,橙,紫,红,白,银,蓝绿色,黄色
脚本
<script>
标签用于定义客户端脚本,比如 JavaScript,<script>
元素既可包含脚本语句,也可通过 src 属性指向外部脚本文
<script>
document.write("Hello World!");
document.write("<p>这是一个段落。</p>");
</script>
<p id="demo">
JavaScript 可以触发事件,就像按钮点击。</p>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="Hello JavaScript!";
}
</script>
<button type="button" onclick="myFunction()">点我</button>
<noscript>
标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时,<noscript>
元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。只有在浏览器不支持脚本或者禁用脚本时,才会显示 <noscript>
元素中的内容
<script>
document.write("Hello World!")
</script>
<noscript>抱歉,你的浏览器不支持 JavaScript!</noscript>
字符实体
HTML 中的预留字符必须被替换为字符实体,一些在键盘上找不到的字符也可以使用字符实体来替换,如需显示小于号,我们必须这样写:<
或 < 或 <,HTML 中的常用字符实体是不间断空格
,浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格,在显示该页面之前,浏览器会删除它们中的 9 个。如需在页面中增加空格的数量,您需要使用
字符实体
实体名称对大小写敏感!
显示结果 | 描述 | 实体名称 | 实体编号 |
---|---|---|---|
空格 | |
  |
|
< | 小于号 | < |
< |
> | 大于号 | > |
> |
& | 和号 | & |
& |
" | 引号 | " |
" |
’ | 撇号 | ' (IE不支持) |
' |
¢ | 分 | ¢ |
¢ |
£ | 镑 | £ |
£ |
¥ | 人民币/日元 | ¥ |
¥ |
€ | 欧元 | € |
€ |
§ | 小节 | § |
§ |
© | 版权 | © |
© |
® | 注册商标 | ® |
® |
™ | 商标 | ™ |
™ |
× | 乘号 | × |
× |
÷ | 除号 | ÷ |
÷ |
URL
简介
scheme://
host.domain:
port/
path/
filename
-
- scheme - 定义因特网服务的类型。最常见的类型是 http
- host - 定义域主机(http 的默认主机是 www)
- domain - 定义因特网域名,比如 runoob.com
- :port - 定义主机上的端口号(http 的默认端口号是 80)
- path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。
- filename - 定义文档/资源的名称
Scheme | 访问 | 用于… |
---|---|---|
http | 超文本传输协议 | 以 http:// 开头的普通网页。不加密。 |
https | 安全超文本传输协议 | 安全网页,加密所有信息交换。 |
ftp | 文件传输协议 | 用于将文件下载或上传至网站。 |
file | 计算机上的文件。 |
URL字符编码
URL 使用 ASCII 字符集,URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符,URL 不能包含空格。URL 编码通常使用 + 来替换空格。
字符 | 编号 | 描述 |
---|---|---|
32 | 空格(space) | |
! | 33 | 感叹号(exclamation mark) |
" | 34 | 引号(quotation mark) |
# | 35 | 数字符号(number sign) |
$ | 36 | 美元符号(dollar sign) |
% | 37 | 百分比符号(percent sign) |
& | 38 | & 符号(ampersand) |
’ | 39 | 撇号(apostrophe) |
( | 40 | 左括号(left parenthesis) |
) | 41 | 右括号(right parenthesis) |
* | 42 | 星号(asterisk) |
+ | 43 | 加号(plus sign) |
, | 44 | 逗号(comma) |
- | 45 | 连字符(hyphen) |
. | 46 | 句号(period) |
/ | 47 | 斜线(slash) |
0 | 48 | 数字 0 |
9 | 57 | 数字 9 |
: | 58 | 冒号(colon) |
; | 59 | 分号(semicolon) |
< | 60 | 小于号(less-than) |
= | 61 | 等于号(equals-to) |
> | 62 | 大于号(greater-than) |
? | 63 | 问号(question mark) |
@ | 64 | @ 符号(at sign) |
A | 65 | 大写字母 A |
Z | 90 | 大写字母 Z |
[ | 91 | 左方括号(left square bracket) |
\ | 92 | 反斜线(backslash) |
] | 93 | 右方括号(right square bracket) |
^ | 94 | 插入符号(caret) |
_ | 95 | 下划线(underscore) |
` | 96 | 重音符(grave accent) |
a | 97 | 小写字母 a |
z | 122 | 小写字母 z |
{ | 123 | 左花括号(left curly brace) |
| | 124 | 竖线(vertical bar) |
} | 125 | 右花括号(right curly brace) |
~ | 126 | 波浪线(tilde) |
XHTML
- XHTML 是以 XML 格式编写的 HTML
- XHTML 指的是可扩展超文本标记语言
- XHTML 与 HTML 4.01 几乎是相同的
- XHTML 是更严格更纯净的 HTML 版本
- XHTML 是以 XML 应用的方式定义的 HTML
- XHTML 是 2001 年 1 月发布的 W3C 推荐标准
- XHTML 得到所有主流浏览器的支持
与 HTML 相比最重要的区别:
文档结构
- XHTML DOCTYPE 是强制性的
<html>
中的 XML namespace 属性是强制性的<html>、<head>、<title> 以及 <body>
也是强制性的
元素语法
- XHTML 元素必须正确嵌套
- XHTML 元素必须始终关闭
- XHTML 元素必须小写
- XHTML 文档必须有一个根元素
属性语法
- XHTML 属性必须使用小写
- XHTML 属性值必须用引号包围
- XHTML 属性最小化也是禁止的
XHTML 文档必须进行 XHTML 文档类型声明(XHTML DOCTYPE declaration)。
<html>, <head>, <title>, 和 <body>
元素也必须存在,并且必须使用 <html>
中的 xmlns 属性为文档规定 xml 命名空间。
下面的例子展示了带有最少的必需标签的 XHTML 文档:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <title>文档标题</title> </head> <body> 文档内容 </body> </html>
XHTML 元素必须合理嵌套
在 HTML 中,一些元素可以不互相嵌套,像这样:
<b><i>粗体和斜体文本</b></i>
在 XHTML 中,所有的元素都必须互相合理地嵌套,像这样:
<b><i>粗体和斜体文本</i></b>
XHTML 元素必须有关闭标签
<p>这是一个段落</p> <p>这是另外一个段落</p>
空元素必须包含关闭标签
错误示例:
分行:<br> 水平线: <hr> 图片: <img src="C:\Users\Dage\Desktop\frontend\happy.gif" alt="Happy face">
正确示例:
分行:<br /> 水平线: <hr /> 图片: <img src="C:\Users\Dage\Desktop\frontend\happy.gif" alt="Happy face" />
XHTML 元素必须是小写
错误示例:
<BODY> <P>这是一个段落</P> </BODY>
正确示例:
<body> <p>这是一个段落</p> </body>
属性名称必须是小写
错误示例:
<table WIDTH="100%">
正确示例:
<table width="100%">
属性值必须有引号
错误示例:
<table width=100%>
正确示例:
<table width="100%">
不允许属性简写
错误示例:
<input checked> <input readonly> <input disabled> <option selected>
正确示例:
<input checked="checked"> <input readonly="readonly"> <input disabled="disabled"> <option selected="selected">
如何将 HTML 转换为 XHTML
- 添加一个 XHTML <!DOCTYPE> 到你的网页中
- 添加 xmlns 属性添加到每个页面的html元素中。
- 改变所有的元素为小写
- 关闭所有的空元素
- 修改所有的属性名称为小写
- 所有属性值添加引号
常见的 DOCTYPE 声明
HTML 5
<!DOCTYPE html>
HTML 4.01 Strict
这个 DTD 包含所有 HTML 元素和属性,但不包括表象或过时的元素(如 font )。框架集是不允许的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
这个 DTD 包含所有 HTML 元素和属性,包括表象或过时的元素(如 font )。框架集是不允许的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
这个 DTD 与 HTML 4.01 Transitional 相同,但是允许使用框架集内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict
这个 DTD 包含所有 HTML 元素和属性,但不包括表象或过时的元素(如 font )。框架集是不允许的。结构必须按标准格式的 XML 进行书写。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
这个 DTD 包含所有 HTML 元素和属性,包括表象或过时的元素(如 font )。框架集是不允许的。结构必须按标准格式的 XML 进行书写。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
这个 DTD 与 XHTML 1.0 Transitional 相同,但是允许使用框架集内容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
这个 DTD 与 XHTML 1.0 Strict 相同,但是允许您添加模块(例如为东亚语言提供 ruby 支持)。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
使用CSS
CSS 可以通过以下方式添加到HTML中:
- 内联样式- 在HTML元素中使用"style" 属性
- 内部样式表 -在HTML文档头部
<head>
区域使用<style>
元素 来包含CSS - 外部引用 - 使用外部 CSS 文件
内联样式
<!-- 定义元素颜色-->
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>
<body style="background-color:yellow;">
这是一个标题
这是一个段落。
<!-- font-family(字体),color(颜色),和font-size(字体大小)-->
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
一个标题
一个段落。
<!-- 居中对齐 -->
<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>
居中对齐的标题
这是一个段落。
内部样式表
当单个文件需要特别样式时,就可以使用内部样式表。你可以在<head>
部分通过 <style>
标签定义内部样式表
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
外部样式表
当样式需要被应用到很多页面的时候,可以通过更改一个文件来改变整个站点的外观
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<!-- CSS 提供-->
<style>
@import url("标签路径")
</style>
HTML5
改进
最小的HTML5文档
下面是一个简单的HTML5文档:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body> 文档内容...... </body>
</html>
HTML5 的改进
- 新元素
- 新属性
- 完全支持 CSS3
- Video 和 Audio
- 2D/3D 制图
- 本地存储
- 本地 SQL 数据
- Web 应用
- HTML5 多媒体
- 添加和删除了一些语义元素
HTML5 应用
使用 HTML5 你可以简单地开发应用
- 本地数据存储
- 访问本地文件
- 本地 SQL 数据
- 缓存引用
- Javascript 工作者
- XHTMLHttpRequest 2
HTML5 图形
使用 HTML5 你可以简单的绘制图形:
- 使用canvas元素。
- 使用内联 SVG
- 使用 CSS3 2D 转换,CSS3 3D 转换
HTML5 使用 CSS3
- 新选择器
- 新属性
- 动画
- 2D/3D 转换
- 圆角
- 阴影效果
- 可下载的字体
浏览器支持
现代的浏览器都支持 HTML,此外,所有浏览器,包括旧的和最新的,对无法识别的元素会作为内联元素自动处理。可以 “教会” 浏览器处理 “未知” 的 HTML 元素。
HTML5 定了 8 个新的 HTML 语义 元素。所有这些元素都是 块级 元素。为了能让旧版本的浏览器正确显示这些元素,你可以设置 CSS 的 display 属性值为 block:
header, section, footer, aside, nav, main, article, figure { display: block; }
<!-- 为 HTML 添加新元素-->
<script>
document.createElement("myHero")
</script>
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
<myHero>我的第一个新元素</myHero>
JavaScript 语句 document.createElement(“myHero”) 是为 IE 9及以后浏览器添加新的元素。如果IE浏览器版本小于IE9,则需要使用资源库解析
<head>
<meta charset="utf-8">
<title>渲染 HTML5</title>
<!--[if lt IE 9]>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
Canvas
HTML5 <canvas>
元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas>
标签只是图形容器,必须使用脚本来绘制图形。可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像
注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成
<div id="canvas">
<canvas id="myCanvas" width="800px" height="500px" style="border:1px solid #000000;">
</canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
</div>
首先,找到 <canvas>
元素:
var c=document.getElementById("myCanvas");
然后,创建 context 对象:
var ctx=c.getContext("2d");
getContext(“2d”) 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形:
ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75);
设置fillStyle属性可以是CSS颜色,渐变,或图案。fillStyle 默认设置是#000000(黑色)。
fillRect(*x,y,width,height*)
方法定义了矩形当前的填充方式。
在Canvas上画线,使用以下两种方法:
- moveTo(x,y) 定义线条开始坐标
- lineTo(x,y) 定义线条结束坐标
- 绘制线条我们必须使用到 “ink” 的方法,就像stroke()
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
在canvas中绘制圆形或圆弧, 我们将使用以下方法:
arc(x,y,r,start,stop [,true/false正向反向])
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();//从头开始,防止连线
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
//圆弧
ctx.arc(400, 400, 50, 0, Math.PI, false);
实心文本
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
空心文本
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
渐变
可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
- x: 渐变的开始圆的 x 坐标
- y: 渐变的开始圆的 y 坐标
- r: 开始圆的半径
- x1: 渐变的结束圆的 x 坐标
- y1: 渐变的结束圆的 y 坐标
- r1: 结束圆的半径
- (x,y) 和 (x1,y1)简单地相同即可(即同心圆)
当我们使用渐变对象,必须使用两种或两种以上的停止颜色。
**addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1.**使用渐变,设置fillStyle或strokeStyle的值为 渐变,然后绘制形状,如矩形,文本,或一条线,使用 createLinearGradient():
<!-- 创建一个线性渐变 -->
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 创建渐变
var grd=ctx.createLinearGradient(400,400,600,600);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(450,450,550,550);
<!-- 创建一个径向/圆渐变 -->
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 创建渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
图像
- drawImage(image,x,y)
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
img.onload = function() {
ctx.drawImage(img,10,10);
}
</script>
SVG
SVG 定义为可缩放矢量图形,使用 XML 格式定义图形,在放大或改变尺寸的情况下其图形质量不会有损失。HTML <svg>
元素是 SVG 图形的容器,SVG 有多种绘制路径、框、圆、文本和图形图像的方法。
其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于:SVG 图像可通过文本编辑器来创建和修改,可被搜索、索引、脚本化或压缩,可在任何的分辨率下被高质量地打印
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
<circle cx="200" cy="50" r="40" stroke="black" stroke-width="2" fill="blue" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
<circle cx="200" cy="50" r="40" stroke="black" stroke-width="2" fill="blue" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
SVG 与 Canvas两者间的区别
SVG 是一种使用 XML 描述 2D 图形的语言。
Canvas 通过 JavaScript 来绘制 2D 图形。
SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。
Canvas | SVG |
---|---|
依赖分辨率 | 不依赖分辨率 |
不支持事件处理器弱的 | 支持事件处理器最适合带有大型渲染区域的应用程序(比如谷歌地图) |
文本渲染能力能够以 .png 或 .jpg 格式保存结果图像 | 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) |
最适合图像密集型的游戏,其中的许多对象会被频繁重绘 | 不适合游戏应用 |
MathML
MathML 是数学标记语言,是一种基于XML(标准通用标记语言的子集)的标准,用来在互联网上书写数学符号和公式的置标语言。
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<msup><mi>a</mi><mn>2</mn></msup>
<mo>+</mo>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>=</mo>
<msup><mi>c</mi><mn>2</mn></msup>
</mrow>
</math>
拖放
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>图片拖放</title>
<style type="text/css">
#div1,
#div2 {
float: left;
margin: 10px;
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>拖动图片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img loading="lazy" id="drag1" src="/images/test.png" draggable="true" ondragstart="drag(event)" width="336"
height="69">
</body>
</html>
设置元素为可拖放
首先,为了使元素可拖动,把 draggable 属性设置为 true :
<img draggable="true">
拖动什么 - ondragstart 和 setData()
然后,规定当元素被拖动时,会发生什么。
在上面的例子中,ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值:
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
Text 是一个 DOMString 表示要添加到 drag object 的拖动数据的类型。值是可拖动元素的 id (“drag1”)。
放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。
默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法:
function allowDrop(ev)
{
ev.preventDefault();
}
进行放置 - ondrop
当放置被拖数据时,会发生 drop 事件。
在上面的例子中,ondrop 属性调用了一个函数,drop(event):
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data));
}
代码解释:
- 调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
- 通过 dataTransfer.getData(“Text”) 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
- 被拖数据是被拖元素的 id (“drag1”)
- 把被拖元素追加到放置元素(目标元素)中
地理位置
HTML5 Geolocation API 用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else
{
x.innerHTML="该浏览器不支持获取地理位置。";
}
}
function showPosition(position)
{
x.innerHTML="纬度: " + position.coords.latitude +
"<br>经度: " + position.coords.longitude;
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="用户拒绝对获取地理位置的请求。"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="位置信息是不可用的。"
break;
case error.TIMEOUT:
x.innerHTML="请求用户地理位置超时。"
break;
case error.UNKNOWN_ERROR:
x.innerHTML="未知错误。"
break;
}
}
function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}
getCurrentPosition() 方法返回对象,始终会返回 latitude、longitude 以及 accuracy 属性。
属性 | 描述 |
---|---|
coords.latitude | 十进制数的纬度 |
coords.longitude | 十进制数的经度 |
coords.accuracy | 位置精度 |
coords.altitude | 海拔,海平面以上以米计 |
coords.altitudeAccuracy | 位置的海拔精度 |
coords.heading | 方向,从正北开始以度计 |
coords.speed | 速度,以米/每秒计 |
timestamp | 响应的日期/时间 |
视频
<video>
元素支持多个<source>
元素.<source>
元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
<video>
元素支持三种视频格式: MP4, WebM, 和 Ogg:
- MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
- WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
- Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MP4 | video/mp4 |
---|---|
WebM | video/webm |
Ogg | video/ogg |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>软院wo谈会</title>
</head>
<body>
<div style="text-align:center">
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">放大</button>
<button onclick="makeSmall()">缩小</button>
<button onclick="makeNormal()">普通</button>
<br>
<video id="video1" width="100%" height="100%">
<source src="/images/软院wo谈会-出国、考研、保研、就业.mp4" type="video/mp4">
您的浏览器不支持 HTML5 video 标签。
</video>
</div>
<script>
var myVideo = document.getElementById("video1");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig() {
myVideo.width = 560;
}
function makeSmall() {
myVideo.width = 320;
}
function makeNormal() {
myVideo.width = 420;
}
</script>
</body>
</html>
音频
control 属性供添加播放、暂停和音量控件。
在<audio> 与 </audio>
之间你需要插入浏览器不支持的<audio>
元素的提示文本 。
<audio>
元素允许使用多个 <source>
元素. <source>
元素可以链接不同的音频文件,浏览器将使用第一个支持的音频文件
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
<!-- 自动播放 -->
<audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
<!-- 循环播放 -->
<audio controls loop>
<!-- 静音 -->
<audio controls muted>
<!-- 设置为预加载的 preload 元素
auto - 当页面加载后载入整个音频
meta - 当页面加载后只载入元数据
none - 当页面加载后不载入音频
-->
<audio controls preload="none">
<audio src="horse.ogg" controls>
您的浏览器不支持 audio 元素。
</audio>
source属性 设置不同屏幕显示的图片
<picture>
<source media="(min-width:650px)" srcset="https://static.runoob.com/images/runoob-logo.png">
<source media="(min-width:465px)" srcset="https://static.runoob.com/images/code-icon-script.png">
<img src="https://static.runoob.com/images/mix/hjkg_icon.png" style="width:auto;">
</picture>
input新类型
时间 颜色 数字
在input字段主要用于选取颜色
选择你喜欢的颜色: <input type="color" name="favcolor">
从一个日期选择器选择一个日期
生日: <input type="date" name="bday">
定义一个日期和时间控制器(本地时间)(UTC 时间):
生日 (日期和时间): <input type="datetime" name="bdaytime">
datetime-local 类型允许你选择一个日期和时间 (无时区).
生日 (日期和时间): <input type="datetime-local" name="bdaytime">
在提交表单时,会自动验证 email 域的值是否合法有效:
E-mail: <input type="email" name="email">
定义月与年 (无时区):
生日 (月和年): <input type="month" name="bdaymonth">
定义周和年 (无时区):
选择周: <input type="week" name="week_year">
定义可输入时间控制器(无时区):
选择时间: <input type="time" name="usr_time">
定义一个数值输入域(限定):
数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">
定义输入电话号码字段:
电话号码: <input type="tel" name="usrtel">
定义输入URL字段:
添加您的主页: <input type="url" name="homepage">
使用下面的属性来规定对数字类型的限定:
属性 | 描述 |
---|---|
disabled | 规定输入字段是禁用的 |
max | 规定允许的最大值 |
maxlength | 规定输入字段的最大字符长度 |
min | 规定允许的最小值 |
pattern | 规定用于验证输入字段的模式 |
readonly | 规定输入字段的值无法修改 |
required | 规定输入字段的值是必需的 |
size | 规定输入字段中的可见字符数 |
step | 规定输入字段的合法数字间隔 |
value | 规定输入字段的默认值 |
输入域 搜索域
range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。
定义一个不需要非常精确的数值(类似于滑块控制):
<input type="range" name="points" min="1" max="10">
max - 规定允许的最大值
min - 规定允许的最小值
step - 规定合法的数字间隔
value - 规定默认值
search 类型用于搜索域,比如站点搜索或 Google 搜索。
Search Google: <input type="search" name="googlesearch">
表单
新的表单元素:
<datalist>
<keygen>
<output>
**<datalist>
**
<datalist>
元素规定输入域的选项列表。
<datalist>
属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项:
使用 <input>
元素的列表属性与 <datalist>
元素绑定.
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<keygen>
<keygen>
元素的作用是提供一种验证用户的可靠方法。<keygen>
标签规定用于表单的密钥对生成器字段。当提交表单时,会生成两个键,一个是私钥,一个公钥。私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。
<form action="demo_keygen.asp" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>
<output>
<output>
标签作为计算结果输出显示(比如执行脚本的输出),Edge 12及更早 IE 版本的浏览器不支持 output 元素。
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
新的表单属性
<form> / <input>
autocomplete 属性
当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项。autocomplete 属性有可能在 form元素中是开启的,而在input元素中是关闭的。
<form action="demo-form.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
<form>
novalidate 属性
规定在提交表单时不应该验证 form 或 input 域
<form action="demo-form.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
<input>
autofocus 属性
autofocus 属性是一个布尔属性。规定在页面加载时,域自动地获得焦点。
First name:<input type="text" name="fname" autofocus>
<input>
form 属性
form 属性规定输入域所属的一个或多个表单。如需引用一个以上的表单,使用空格分隔的列表。位于form表单外的 input 字段引用了 HTML form (该 input 表单仍然属于form表单的一部分)
<form action="demo-form.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
</form>
Last name: <input type="text" name="lname" form="form1">
<input>
formaction 属性
The formaction 属性用于描述表单提交的URL地址.会覆盖