html5dddtHTML5基本入门

keywords 表示网站的关键字，可以同时指定多个关键字，关键字间利用,隔开

<meta name="Keywords" content="网上购物,网上商城,手机,条记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,腕表,存储卡,京东"/>

description 用于指定网站的描述

<meta name="description" content="京东JD.COM-专业的综合网上购物商城,发卖家电、数码通讯、电脑、家居百货、服装衣饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的做事，为您供应愉悦的网上购物体验!"/>

<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">

将页面重定向到另一个网站

（图片来自网络侵删）

1.2title标签

title标签的内容会作为搜索结果的超链接上的笔墨显示

<title>Document</title>1.3标题h1 ~ h6 一共有六级标题从h1~h6主要性递减，h1最主要，h6最不主要h1在网页中的主要性仅次于title标签，一样平常情形下一个页面中只会有一个h1标题元素是块元素<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>hgroup标签用来为标题分组，可以将一组干系的标题同时放入到hgroup<hgroup> <h1>还乡偶书二首</h1> <h2>其一</h2> </hgroup>其他标签p标签表示页面中的一个段落<p>在p标签中的内容就表示一个段落</p>em标签用于表示语音语调的一个加重<p>本日景象<em>真</em>不错！
</p>strong表示强调，主要内容！
<p>你本日必须要<strong>完胜利课</strong>！
</p>blockquote 表示一个长引用<blockquote> 这句话我是从来没有说过的！
</blockquote>q表示一个短引用子曰<q>学而时习之，乐呵乐呵！
</q>br标签表示页面中的换行<br>1.4布局标签

header 表示网页的头部 main 表示网页的主体部分(一个页面中只会有一个main) footer 表示网页的底部 nav 表示网页中的导航 aside 和主体干系的其他内容（侧边栏） article 表示一个独立的文章 section 表示一个独立的区块，上边的标签都不能表示时利用section

div 没有语义，就用来表示一个区块，目前来讲div还是我们紧张的布局元素

span 行内元素，没有任何的语义，一样平常用于在网页中选中笔墨

<header></header> <main></main> <footer></footer> <nav></nav> <aside></aside> <article></article> <section></section> <div></div> <span></span>1.5列表1.1.1分类1.1.1.1有序列表

利用ol标签来创建无序列表，利用li表示列表项

<ul> <li>构造</li> <li>表现</li> <li>行为</li> </ul>1.1.1.2 无序列表

利用ul标签来创建无序列表，利用li表示列表项

<ol> <li>构造</li> <li>表现</li> <li>行为</li> </ol>1.1.1.3定义列表

利用dl标签来创建一个定义列表，利用dt来表示定义的内容，利用dd来对内容进行阐明解释

<dl> <dt>构造</dt> <dd>构造表示网页的构造，构造用来规定网页中哪里是标题，哪里是段落</dd> <dd>构造表示网页的构造，构造用来规定网页中哪里是标题，哪里是段落</dd> <dd>构造表示网页的构造，构造用来规定网页中哪里是标题，哪里是段落</dd> </dl>1.1.1.4列表之间可以相互嵌套

<ul> <li> aa <ul> <li>aa-1</li> <li>aa-2 <ul> <li>aa-1</li> <li>aa-2</li> </ul> </li> </ul> </li> </ul>1.6超链接1.6.1 浸染

超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置

1.6.2 定义

利用 a 标签来定义超链接

<a href="https://www.baidu.com">超链接</a>1.6.3 属性1.6.3.1属性1：href

指定跳转的目标路径

值可以是一个外部网站的地址

也可以写一个内部页面的地址

超链接是也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素

1.6.3.2 属性2：target

用来指定超链接打开的位置

_self 默认值在当前页面中打开超链接

_blank 在一个新的要么中打开超链接

<a href="07.列表.html" target="_blank">超链接</a>1.6.4其他

将#作为超链接的路径的展位符利用

javascript:; 来作为href的属性，此时点击这个超链接什么也不会发生

将超链接的href属性设置为#，这样点击超链接往后页面不会发生跳转，而是转到当前页面的顶部的位置

跳转到页面的指定位置，只需将href属性设置 #目标元素的id属性值

<a href="#bottom">去底部</a> <br><br><a href="#p3">去第三个自然段</a> <br><br><p> 内容多一点</p><a href="#">这是一个新的超链接</a> <br><br><a href="javascript:;">这是一个新的超链接</a> <br><br><a id="bottom" href="#">回到顶部</a>1.7图片标签

img标签来引入外部图片，img标签是一个自结束标签

属性：src 属性指定的是外部图片的路径（路径规则和超链接是一样的）

alt 图片的描述，这个描述默认情形下不会显示，有些浏览器会图片无法加载时显示

<img src="./img/1.gif" alt="松鼠">1.8内联框架

用于向当前页面中引入一个其他页面

src 指定要引入的网页的路径frameborder 指定内联框架的边框

<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>1.8 音视频标签1.8.1音频

audio 标签用来向页面中引入一个外部的音频文件的

1.8.1.1 属性controls 是否许可用户掌握播放autoplay 音频文件是否自动播放如果设置了autoplay 则音乐在打开页面时会自动播放loop 音乐是否循环播放

<audio src="./source/audio.mp3" controls autoplay loop></audio>

除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径

<audio controls>  <source src="./source/audio.mp3"> <source src="./source/audio.ogg"> <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100"> </audio>1.8.2视频

与 audio 相似

<video controls> <source src="./source/flower.webm"> <source src="./source/flower.mp4"> <embed src="./source/flower.mp4" type="video/mp4"> </video>

2.表格table在table中利用tr表示表格中的一行，有几个tr就有几行在tr中利用td表示一个单元格，有几个td就有几个单元格rowspan 纵向的合并单元格colspan 横向的合并单元格

<table border="1" width='50%' align="center"> <tr> <td>A1</td> <td>B1</td> <td>C1</td> <td>D1</td> </tr> <tr> <td>A2</td> <td>B2</td> <td>C2</td> <td rowspan="2">D2</td> </tr> <tr> <td>A3</td> <td>B3</td> <td>C3</td> </tr> <tr> <td>A4</td> <td>B4</td> <td colspan="2">C4</td> </tr> </table>长表格可以将一个表格分成三个部分：头部 thead主体 tbody底部 tfootth 表示头部的单元格

<table border="1" width='50%' align="center"> <thead> <tr> <th>日期</th> <th>收入</th> <th>支出</th> <th>合计</th> </tr> </thead> <tbody> <tr> <td>2000.1.1</td> <td>500</td> <td>200</td> <td>300</td> </tr> <tr> <td>2000.1.1</td> <td>500</td> <td>200</td> <td>300</td> </tr> <tr> <td>2000.1.1</td> <td>500</td> <td>200</td> <td>300</td> </tr> <tr> <td>2000.1.1</td> <td>500</td> <td>200</td> <td>300</td> </tr> </tbody> <tfoot> <tr> <td></td> <td></td> <td>合计</td> <td>300</td> </tr> </tfoot> </table>表格样式border-spacing: 指定边框之间的间隔

border-spacing: 0px;border-collapse: collapse; 设置边框的合并

border-collapse: collapse;如果表格中没有利用tbody而是直策应用tr，那么浏览器会自动创建一个tbody，并且将tr全都放到tbody中tr不是table的子元素3.表单（form）利用form标签来创建一个表单action 表单要提交的做事器的地址数据要提交到做事器中，必须要为元素指定一个name属性值

<input type="text" name="username">单选按钮像这种选择框，必须要指定一个value属性，value属性终极会作为用户的填写的值通报给做事器checked 可以将单选按钮设置为默认选中

<input type="radio" name="hello" value="a"><input type="radio" name="hello" value="b" checked>多选框

<input type="checkbox" name="test" value="1"> <input type="checkbox" name="test" value="2"> <input type="checkbox" name="test" value="3" checked>下拉列表

<select name="haha"> <option value="i">选项一</option> <option selected value="ii">选项二</option> <option value="iii">选项三</option> </select>提交按钮

<input type="submit" value="注册">属性autocomplete="off" 关闭自动补全readonly 将表单项设置为只读，数据会提交disabled 将表单项设置为禁用，数据不会提交autofocus 设置表单项自动获取焦点

<form action="target.html"> <input type="text" name="username" value="hello" readonly> <br><br> <input type="text" name="username" autofocus> <br><br> <input type="text" name="b"> <br><br>  <br><br>  <br><br> <input type="submit">  <input type="reset">  <input type="button" value="按钮"> <br><br> <button type="submit">提交</button> <button type="reset">重置</button> <button type="button">按钮</button> </form>4.注释

5.属性属性，在标签中（开始标签或自结束标签）还可以设置属性属性是一个名值对（x=y）属性用来设置标签中的内容如何显示属性和标署名或其他属性该当利用空格隔开属性不能瞎写，该当根据文档中的规定来编写，有些属性有属性值，有些没有。
如果有属性值，属性值该当利用引号引起来6.文档声明

<!doctype html>