1、HTML
Hyper Text Markup Language（超文本标记语言）
2、世界知名浏览器厂商对HTML5的支持
微软
Google
苹果
Opera
3、W3C标准包括
结构化标准语言（XHTML 、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript ）
4、HTML网页基本结构
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
我的第一个网页
</body>
</html>
< body>、等成对的标签，分别叫开放标签和闭合标签
单独呈现的标签（空元素），如
；意为用 / 来关闭空元素
5、DOCTYPE声明
<!DOCTYPE html>
（告诉了浏览器使用哪种HTML版本来显示网页）（不是一个HTML标签，文档类型声明标签）
6、标签
双闭合标签：<apply key=’‘value’’> xx
tt
单闭合标签：<apply key=’‘value’’/>(只需要使用属性的时候可以使用与<apply key=’‘value’’>意义相同)
6.1head中存在的标签
1）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xCVNYANO-1647256731519)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220313213027895.png)]
2）标签
必须包含content属性，用于定义http-equiv或name属性相关信息。
可选http-equiv或name属性或scheme属性
http-equiv：把content属性关联到HTTP头部
name：把content属性关联到一个名称
scheme：用于翻译content属性值的格式
<meta meta的属性=‘’属性值‘’>meta标签内容</meta>
<!--<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。-->
<meta charset="UTF-8" />
<!--utf-8 则包含全世界所有国家需要用到的字符。推荐utf-8，还可设置为gb2312,gb2312包含全部中文字符。同时页面编码应与页面文件保存时的编码一致
-->
<meta http-equiv="refresh"
content="x,http://www.baidu.com"/>
<!--过x秒，刷新页面，跳转至新页面-->
6.2body中存在的标签
1）标题标签
<h1>标签</h1>
<h2>标签</h2>
<h3>标签</h3>
<h4>标签</h4>
<h5>标签</h5>
<h6>标签</h6>
<h7>标签</h7>
<h8>标签</h8>
<h9>标签</h9>
标题标签中的-均为自定义标签
2）段落标签
用于定义段落，可以将网页分为若干段。
<p>北京欢迎你，有梦想谁都了不起！</p>
<p>有勇气就会有奇迹。</p>
3）换行标签
强制换行。但没有分段落。
<p>北京欢迎你，<br/>有梦想谁都了不起！</p>
<p>有勇气就会有奇迹。</p>
4)其他
1.、加粗
2.、倾斜
3.、删除
4.、下划线
5.水平线标签
5） 注释和特殊符号
空格
大于号(>)
>
小于号(<)
<
引号(")
"
版权符号@
©
<p>有勇气 就会有奇迹。</p>
如果时间>晚上6点，就坐车回家<br/>
如果时间<早上7点，就走路去上学<br/>
© 2020-2022<br/>
6）图像标签
<!--<img src="path" alt="text" title="text" width="x" height="y" />
src:图像地址
alt:图像加载不出来时用与替代说明的文字
title:鼠标悬停提示文字
width:图像宽度
height:图像高度
-->
<img src="html/img2.png"
alt="F2" title="F2"/><br/>
7）链接标签
<!--<a href="path" target="目标窗口位置">链接文本或图像</a>
href：链接跳转路径
target：链接在哪个窗口打开，常用值：_self(当前页)、_blank（重新跳转一页）-->
<!--文本链接-->
<a href="detail.html" target="_blank">欢迎降落</a>
<!--图片链接-->
<a href="detail.html" target="_blank">
<img src="image/img1.png" alt="欢迎降落"
title="欢迎降落" />
</a>
8）锚链接
<!--
从A页面的甲位置跳转到本页中的乙位置
<a href="#名字"></a>---------目的地：<h3 id="名字"></h3>
-->
<p><a href="#1">F1</a><br/>
<a href="#2">F2</a><br/>
<a href="#3">F3</a><br/>
<a href="#4">F4</a><br/>
<a href="#5">F5</a><br/></p>
<p><h3 id="1"></h3>
<img src="html/img1.png" alt="F1" title="F1" /><br/>
</p>
<p><h3 id="2"></h3>
<img src="html/img2.png" alt="F2" title="F2"/><br/>
</p>
<p><h3 id="3"></h3>
<img src="html/img3.png" alt="F3" title="F3"/><br/>
</p>
<p><h3 id="4"></h3>
<img src="html/img4.png" alt="F4" title="F4"/><br/>
</p>
<p><h3 id="5"></h3>
<img src="html/img5.png" alt="F5" title="F5"/><br/>
</p>
9）列表
1.无序列表
无序列表的特性：
没有顺序，每个
- 标签独占一行（块元素）
默认 - 标签项前面有个实心小圆点
一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等 -
<!--以<ul>标签来实现 以<li>标签表示列表项 <ul type = "square" style="list-style:url(/day01/图片/hetao11.jpg) ;"> disc 默认值。实心圆。 circle 空心圆。 square 实心方块 无序列表中的每项都是平级的，没有级别之分，并且列表中的内容一般都是相对简单的标题性质的网页内容 --> <ul> <li>11111</li> <li>22222</li> <li>33333</li> <li>44444</li> </ul>
2.有序列表
有序列表的特性:
有顺序，每个 - 标签独占一行（块元素）
默认 - 标签项前面有顺序标记
一般用于排序类型的列表，如试卷、问卷选项等 -
<--以<ol>标签来实现 以<li>标签表示列表项 <ol type="1"> tpye属性可以为：1,a,A,i,I 设置起始数字<ol start="5"> 有序列表ol-li一般用于显示带有顺序编号的特定场合 --> <ol type="1" start="1" > <li>11111</li> <li>22222</li> <li>33333</li> <li>44444</li> </ol>
3.定义列表
定义列表的特性:
标签、
没有顺序，每个- 标签独占一行（块元素）
默认没有标记
一般用于一个标题下有一个或多个列表项的情况<!--以<dl>标签来实现 以<dt>标签定义列表项 以<dd>标签定义内容 定义列表一般适用于带有标题和标题解释性内容的场合 --> <dl> <dt>水果</dt> <dd>苹果</dd> <dd>桃子</dd> <dd>李子</dd> </dl>
10）表格
<!-- <table> <tr> <td>第1个单元格的内容</td> <td>第2个单元格的内容</td> …… </tr> <tr> <td>第1个单元格的内容</td> <td>第2个单元格的内容</td> …… </tr> </table> table:表格 tr:行 td:单元格 th:表头效果:加粗，居中 border:设置边框大小（默认无边框）（可使用在<table>） cellspacing: 设置单元格和边框之间的空隙（可使用在<table>） align="center"设置居中，还有left,right（可使用在<table> <tr><th><td>） background设置背景图片background="img /ss.jpg"（可使用在<table> <tr><th><td>） bgcolor:设置背景颜色（可使用在<table> <tr><th><td>） rowspan:行合并（可使用在<th><td>） colspan:列合并（可使用在<th><td>） --> <h2>流量调查表</h2> <table border="1" > <tr align="center"> <th >总页面流量</th> <th>共计来访</th> <th>会员</th> <th>游客</th> </tr> <tr> <td >9756488</td> <td>97656</td> <td>758087</td> <td>43364677</td> </tr> <tr> <td >46776686</td> <td>85544</td> <td>69357</td> <td>568787</td> </tr> <tr> <td >7538087</td> <td>546774</td> <td>476897</td> <td>994545</td> </tr> <tr> <td >7538087</td> <td colspan="3">1.58</td> </tr>
11）媒体元素
1.视频元素video
<!--<video src="视频路径" controls type="video/webm"></video> src：指定要播放的视频文件的路径 controls：提供播放、暂停和音量的控件。标识这个视频也有自己的控制器。 type：用于指出视频的格式内容 source：表明资源来源，可以有多个，但只展示一个。 autoplay会让页面加载后自动播放 --> <video controls > <source src="yinp/video.webm" type="video/webm"/> <sourxe src="yinp/video.mp4" type="video/mp4"/> </video>
2.音频元素audio
<!--<audio src="视频路径" controls type="video/webm"></audio> src：指定要播放的视频文件的路径 controls：提供播放、暂停和音量的控件。标识这个视频也有自己的控制器。 type：用于指出视频的格式内容 source：表明资源来源,可以有多个，但只展示一个。 autoplay会让页面加载后自动播放 --> <audio controls autoplay> <source src="yinp/video.webm" type="audio/mpeg"/> <sourxe src="yinp/video.mp4" type="audio/ogg"/> </audio>7、HTML5的结构元素
1.header标题头部区域的内容（用于页面或页面中的一块区域）
2.footer标记脚部区域的内容（用于整个页面或页面的一块区域）
3.sectionWeb页面中的一块独立区域
4.article独立的文章内容
5.aside相关内容或应用（常用于侧边栏）
6.nav导航类辅助内容
<header><h2>网页头部</h2> </header> <section><h2>网页主体部分</h2></section> <footer><h2>网页底部</h2></footer>8、内联框架
<!-- <iframe src="path" name="mainFrame" ></iframe> src:引用页面地址。可以设置src的属性值为http://www.bdqn.cn，在这个页面中也可以打开一个线上的网页 name:框架标识名 --> <!-- 邮箱“邮箱左栏.html”代码 --> <ul> <li> <a href="发件箱.html" target="right">发件箱</a> </li> <li> <a href="收件箱.html" target="right">收件箱</a> </li> <li> <a href="草稿箱.html" target="right">草稿箱</a> </li> </ul> <!-- 邮箱栏代码 ，右栏，根据左栏跳转 --> <section> <iframe src="邮箱左栏.html" width="200px" height="500px"></iframe> </section> <!-- 邮箱栏代码 ，左栏，根据左栏跳转 --> <section> <iframe name="right" width="500px" height="500px"></iframe> </section>
9、表单
<!-- <form method="post" action="result.html"> <p> 名字：<input name="name" type="text" > </p> <p> 密码：<input name="pass" type="password" > </p> <p> <input type="submit" name="Button" value="提交"/> <input type="reset" name="Reset" value="重填“/> </p> </form> form:为表单标签，可以插入input标签进行表单内容的提交。如果form中没有属性，也会提交本身页面。 action:表示向何处发送表单数据 name：需要提交的标签必须拥有name属性。键值对。 method:规定如何发送表单数据 常用值：get | post get会将所有信息在url中展示出来，相对不安全，因为url有长度长度限制，所以get发送的内容有限制，但是速度快。 post相对安全，但是通过开发者工具查看请求。不存在url长度限制，速度相对慢。 -->10、input标签
1.type：指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text
1）type=“text”
<!-- text:文本 name:提交form时的key value:给予元素一个默认的值，输入后会改变 size：文本框大小 maxlength：type为text 或 password 时，输入的最大字符数 --> <input type="text" name="text" value="student" size="30" maxlength="30"/>
2)type=“password”
<!-- password:密码，输入时会变成* name:提交form时的key --> <input type="password" name="text" value="student" size="30" maxlength="30"/>
3）type=“radio”
<!-- radio:单选按钮 name:提交form时的key checked：默认选择 --> <input type="radio" name="sex" value="男" >男</input> <input type="radio" name="sex" value="女" checked>女</input><br/><br/>
4）type=“checkbox”复选框
<input type="checkbox" name="interest" value="sports"/>运动 <input type="checkbox" name="interest" value="talk" checked />聊天 <input type="checkbox" name="interest" value="play"/>玩游戏
5）列表框select标签
select标签： multiple：可多选 size：每次展示的个数 option标签 value：被选中时提交这个value值 selected：默认选中 <select name="列表名称" size="2" multiple> <option value="1" selected="selected">111</option > <option value="2">222</option > </select>
6）type=“email”
<!--type为Emile时会在提交时进行一个检查判断它是否在中间存在@符合--> <p>邮箱:<input type="email" name="email"/></p> <input type="submit"/>7）type=“url”
<!--type为url时会在提交时进行一个检查判断它是否包含http://www.xxx.com--> <p>url:<input type="url" name="url"/></p> <input type="submit"/>8）type=“number”
<!-- number数字 min:最小值 max:最大值 step:步数，每一次加量只能为其倍数 --> <p>url:<input type="number" name="num" min="0" max="100" step="10"/></p> <input type="submit"/>
9）搜索框
<p>请输入搜索的关键词:<input type="search" name="sousuo"/></p> <input type="submit"/>10）滑块
<p>请输入数字:<input type="range" name="range1" min="0" max="10" step="2"/></p> <input type="submit"/>11）隐藏域
<input type="hidden" value="666" name="userid">12）label标签
<!--根据id和for自动将光标移动到框里--> <label for="dianziyx">电子邮箱</label> <input id="dianziyx" type="email" name="myemil" value="student@bdqn.cn" size="30"/><br/><br/>13)按钮
<!-- <input type="image" src="images/login.gif" /> <input type="reset" name="butReset" value="reset按钮"> <input type="submit" name="butSubmit" value="submit按钮"> <input type="button" name="butButton" value="button按钮" οnclick="alert(document.getElementById('name').value)" /> reset重置按钮 submit提交按钮 value按钮上显示的文字 src图片路径 button普通按钮,点击事件来自onclick，onclick需要写js -->14)多行文本域
<textarea name="showText" cols="x" rows="y" style="resize:none;">文本内容 </textarea >15)文件域
<form action="a" method="post" enctype="multipart/form-data"> <p><input type="file" name="files" /> <input type="submit" name="upload" value="上传" /></p> </form> <!--enctype:表单编码属性 file:文件域-->[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F9IHgpy3-1647256731523)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220314114939761.png)]
mages/login.gif" />
reset重置按钮
submit提交按钮
value按钮上显示的文字
src图片路径
button普通按钮,点击事件来自onclick，onclick需要写js–>
14)多行文本域 ```html <textarea name="showText" cols="x" rows="y" style="resize:none;">文本内容 </textarea >15)文件域
<form action="a" method="post" enctype="multipart/form-data"> <p><input type="file" name="files" /> <input type="submit" name="upload" value="上传" /></p> </form> <!--enctype:表单编码属性 file:文件域--> - 标签独占一行（块元素）
1269
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
