HTML相关知识点总结
目录
- 简介
- HTML文档和网页的关系呢？
- HTML的标签样子？
- HTML基本概念
- HTML常用元素
- 列表
- 表格
- 表单及表单元素
- 多媒体元素
- 线
- 细节
- 文档类型
- 头文件
- 1. HTML 元素</li>
<li>2.HTML <base> 元素</li>
<li>3.HTML <link> 元素</li>
<li>4.HTML <style> 元素</li>
<li>5.HTML <meta> 元素</li>
<li>6.HTML <script> 元素</li>
</ul>
</ul>
<li>案例<br> </li>
<ul class="second_class_ul">
<li>table<br> </li>
<ul class="third_class_ul"></ul>
<li>register<br> </li>
<ul class="third_class_ul"></ul>
<li>学生信息表格<br> </li>
<ul class="third_class_ul"></ul>
<li>会员注册表单<br> </li>
<ul class="third_class_ul"></ul>
</ul>
</ul>
</div>
<p class="maodian"></p>
<h2>简介<br> </h2>
<p>HTML超<strong>文本标记语言</strong>（Hyper Text Markup Language），它是互联网上应用最广泛的标记语言。不要把HTML语言和C、Java等编程语言混淆起来。简单的说，HTML文件就是普通文本+HTML标记（也就是HTML标签），而不同的HTML标签能显示不同的效果。</p>
<p class="maodian"></p>
<h3>HTML文档和网页的关系呢？<br> </h3>
<p>**网页就是HTML文档。HTML文档有HTML标签和纯文本组成。**web浏览器的作用就是读取HTML文档，并以网页的形式显示它们。浏览器不是显示HTML标签，而是使用标签来解释页面的内容。</p>
<p class="maodian"></p>
<h3>HTML的标签样子？<br> </h3>
<p>HTML的标记标签通常被称为HTML标签，它是由一对尖括号以及关键词组成，如。而且HTML的标签基本上是成对出现的，如</p>
<p><html></html>。在这一对标签中，第一个称为起始标签，第二个被称为结束标签。</p>
<div class="jb51code">
<pre class="brush:xhtml;">
### HTML的组成：
</pre>
</div>
<p>head 部分</p>
<p>用于定义HTML的一些基本信息，或者引入外部文件。</p>
<p>body 部分</p>
<p>整个HTML文档的显示内容。</p>
<p class="maodian"></p>
<h2>HTML基本概念<br> </h2>
<p class="maodian"></p>
<h3>标签<br> </h3>
<p>网页就是HTML文档。HTML文档是由标签和内容组成。</p>
<p>常用的标签：</p>
<p><html>、<head>、<body>、<div>、<span>、<h1>~<h6>、<p>、<form>、<input>、<a>、<img>、<iframe>、<script>、<style> 等</p>
<p class="maodian"></p>
<h3>元素<br> </h3>
<p>HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。</p>
<div>
<table>
<thead>
<tr>
<th>开始标签</th>
<th>内容</th>
<th>结束标签</th>
</tr>
</thead>
<tbody>
<tr>
<td><p></td>
<td>你好，李磊</td>
<td></p></td>
</tr>
<tr>
<td><a href=“http://www.baidu.com”></td>
<td>到百度</td>
<td></a></td>
</tr>
<tr>
<td><br/></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<p class="maodian"></p>
<h3>属性<br> </h3>
<p>多数的HTML元素都有属性。</p>
<p>属性提供了有关 HTML 元素的更多的信息。</p>
<p>属性总是以**名称/值对(属性/属性值)**的形式出现，比如：name=“value”。</p>
<p>属性总是在 HTML 元素的开始标签中规定。</p>
<p class="maodian"></p>
<h3>注释<br> </h3>
<p>注释标签 <!-- 与 --> 用于在 HTML 插入注释。</p>
<p class="maodian"></p>
<h3>编码规则<br> </h3>
<p>（1） 元素和属性均小写</p>
<p>HTML 标签对大小写不敏感。</p>
<p>等同于</p>
<p>。万维网联盟（W3C）在 HTML 4 中推荐使用小写，建议小写。</p>
<p>（2） 有结束标签的元素，有开始标签必须有结束标签；只有开始标签没有结束标签的元素，开始标签中必须加 /。</p>
<p>（3） 始终为属性加引号</p>
<p><img alt=”name=‘Bill “HelloWorld” Gates'” id=”imgId” name='imgName'/></p>
<p class="maodian"></p>
<h2>HTML常用元素<br> </h2>
<p class="maodian"></p>
<h3>标题<br> </h3>
<p>标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。</p>
<p><h1> 定义最大的标题。<h6> 定义最小的标题。</p>
<p>标题的建议用法：</p>
<p>1.每个页面h1标签最多只使用一次，搜索引擎会怀疑页面内存在多个h1标签是作弊；</p>
<p>2.如果是首页，建议h1标签为网站名称，网站名称是首页的重中之重，非他莫属；</p>
<p>3.如果是文章页面建议h1标签为文章的标题，h1标签就是对文本标题所进行的着重强调的一种标签，那么文章页面当然是文章的标题是最重要的；</p>
<p>4.如果是分类页面则不建议使用h1标签，实际经验总结，分类页面等聚合页面不适合使用h1标签，因为页面内容是文章列表：可能“没重点”；</p>
<p>5.<h2>用于段落标题，或者说副标题。</p>
<p>6.<h3>表示段落的小节标题，一般是用在段落小节。</p>
<p>7.<h4>-<h6>基本很少用到，是告诉搜索引擎这些不是很重要的内容，当一篇文章内容较多的时候，可以用来说明一些内容不是很重要的。</p>
<p class="maodian"></p>
<h3>段落<br> </h3>
<p>段落是通过 <p> 标签定义的</p>
<p>折行：<br/></p>
<p class="maodian"></p>
<h3>链接<br> </h3>
<p>HTML 使用超级链接与网络上的另一个文档相连。</p>
<p>几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。</p>
<p>超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，你可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。</p>
<p>当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。</p>
<p><strong>我们通过使用 <a> 标签在 HTML 中创建链接。</strong><br> 有两种使用 <a> 标签的方式：</p>
<ul>
<li>1.通过使用 href 属性 - 创建指向另一个文档的链接；</li>
<li>2.通过使用 name 属性 - 创建文档内的书签。<br> </li>
</ul>
<p class="maodian"></p>
<h3>跳转页面：<br> </h3>
<p>超链接的语法：</p>
<p><a href=“url”>Link text</a></p>
<p>target 属性：</p>
<p>标签的 target 属性规定在何处打开链接文档。</p>
<p><a href=“http://www.baidu.com” target="_blank">欢迎访问百度!</a></p>
<p>该属性有四个值:</p>
<p>4 个保留的目标名称用作特殊的文档重定向操作：</p>
<div class="jb51code">
<pre class="brush:xhtml;">
_blank
浏览器总在一个新打开、未命名的窗口中载入目标文档。
_self
这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。
_parent
这个目标使得文档载入父窗口或者包含超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。
_top
这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
提示：这些 target 的所有 4 个值都以下划线开始。。
</pre>
</div>
<p>此外，target属性在使用框架frameset 和iframe时非常有用</p>
<p class="maodian"></p>
<h3>跳转锚点<br> </h3>
<div class="jb51code">
<pre class="brush:xhtml;">
<!--
由A跳转到B
-->
<a href="#标记">A</a>
<a name="标记">B</a>
</pre>
</div>
<p class="maodian"></p>
<h3>图片<br> </h3>
<p>通过使用 HTML，可以在文档中显示图像。</p>
<p>在 HTML 中，图像由 <img> 标签定义。<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。</p>
<ul>
<li>指定图片源（src）<br> </li>
</ul>
<p style="margin-left: 40px">要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。</p>
<p style="margin-left: 40px">定义图像的语法是：<img src=“url” /></p>
<ul>
<li>替换文本属性（alt）</li>
</ul>
<p style="margin-left: 40px">alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。</p>
<p style="margin-left: 40px"><img src=“boat.gif” alt=“Big Boat”></p>
<p style="margin-left: 40px">在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。</p>
<p class="maodian"></p>
<h2>列表<br> </h2>
<p class="maodian"></p>
<h3>有序列表<br> </h3>
<p>语法：</p>
<p><ol></p>
<p><li>咖啡</li></p>
<p><li>牛奶</li></p>
<p><li>茶</li></p>
<p></ol></p>
<p class="maodian"></p>
<h3>无序列表<br> </h3>
<p>语法：</p>
<p><ul></p>
<p><li>咖啡</li></p>
<p><li>茶</li></p>
<p><li>牛奶</li></p>
<p></ul></p>
<p class="maodian"></p>
<h3>定义列表<br> </h3>
<p>自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。</p>
<p>语法：</p>
<p><dl></p>
<p><dt>Coffee</dt></p>
<p><dd>Black hot drink</dd></p>
<p><dd>Black drink</dd></p>
<p><dd>hot drink</dd></p>
<p><dt>Milk</dt></p>
<p><dd>White cold drink</dd></p>
<p><dd>cold drink</dd></p>
<p><dd>White drink</dd></p>
<p></dl></p>
<p class="maodian"></p>
<h2>表格<br> </h2>
<p>表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、表格等等。</p>
<ul>
<li>表格的常用属性</li>
</ul>
<p> </p>
<table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>border</td>
<td>隶属于<table>标签，定义表格宽度</td>
</tr>
<tr>
<td>cellspacing</td>
<td>隶属于<table>标签，单元格间距，定义单元格之间的距离</td>
</tr>
<tr>
<td>cellpadding</td>
<td>隶属于<table>标签，单元格边距，定义单元格内容与边框的距离</td>
</tr>
<tr>
<td>bgcolor</td>
<td>应用于<table>、<td>、<th>标签，设置表格的背景色（过时）</td>
</tr>
<tr>
<td>background</td>
<td>应用于<table>、<td>、<th>标签，设置表格的背景图片（过时）</td>
</tr>
<tr>
<td>align</td>
<td>应用于<table>、<td>、<th>标签，表格是设置表格在外部容器中的对齐方式，单元格是设置内容的对其方式（过时）</td>
</tr>
<tr>
<td>colspan</td>
<td>应用于<td>、<th>标签，合并列</td>
</tr>
<tr>
<td>rowspan</td>
<td>应用于<tr>标签，合并行</td>
</tr>
</tbody>
</table>
<p></p>
<ul>
<li>更为复杂的表格定义</li>
</ul>
<p> </p>
<table>
<thead>
<tr>
<th>标签</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>caption</td>
<td>定义表格的标题</td>
</tr>
<tr>
<td>thead</td>
<td>定义表格头</td>
</tr>
<tr>
<td>tfoot</td>
<td>定义表格脚</td>
</tr>
<tr>
<td>tbody</td>
<td>定义表格主体</td>
</tr>
<tr>
<td>colgroup</td>
<td>为表格中的一个或多个列指定属性值</td>
</tr>
<tr>
<td>col</td>
<td>为表格中的一列指定属性值</td>
</tr>
</tbody>
</table>
<p></p>
<p class="maodian"></p>
<h3>块<br> </h3>
<p>（1）块元素和内联元素</p>
<p>HTML 元素被定义为块级元素或内联元素。</p>
<p>块元素：</p>
<p>块级元素”译为 block level element。块级元素在浏览器显示时，通常会以新行来开始（和结束）。</p>
<p>例子：<h1>, <p>,<ul>,<table></p>
<p>内联元素：</p>
<p>内联元素”译为 inline element。内联元素在显示时通常不会以新行开始。</p>
<p>例子：<td>, <a>, <img></p>
<p>（2）<div>和<span></p>
<p>元素是块级元素，它是可用于组合其他 HTML 元素的容器。<br> <div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。</p>
<p>如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。</p>
<p><div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。</p>
<p><span> 元素是内联元素，可用作文本的容器。</p>
<p><span> 元素也没有特定的含义。</p>
<p>当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。</p>
<p class="maodian"></p>
<h2>表单及表单元素<br> </h2>
<p class="maodian"></p>
<h3>表单<br> </h3>
<p>HTML 表单用于搜集不同类型的用户输入。</p>
<p><form> 元素定义 HTML 表单。</p>
<p>语法如下：</p>
<p><form></p>
<p>.</p>
<p>form elements</p>
<p>.</p>
<p></form></p>
<p class="maodian"></p>
<h4>表单属性<br> </h4>
<p><strong>Action 属性</strong><br> </p>
<p>action 属性定义在提交表单时执行的动作。</p>
<p>向服务器提交表单的通常做法是使用提交按钮。</p>
<p>通常，表单会被提交到 web 服务器上的网页。</p>
<p><form action=“action_page.php”></p>
<p>在上面的例子中，指定了某个服务器脚本来处理被提交表单。如果省略 action 属性，则 action 会被设置为当前页面。</p>
<p><strong>method 属性</strong><br> method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：</p>
<p><form action=“action_page.php” method=“GET”></p>
<p>或：</p>
<p><form action=“action_page.php” method=“POST”></p>
<p>何时使用 GET？</p>
<p>您能够使用 GET（默认方法）：</p>
<p>如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。</p>
<p>当您使用 GET 时，表单数据在页面地址栏中是可见的：</p>
<p>action_page.php?firstname=Mickey&lastname=Mouse</p>
<p>注释：GET 最适合少量数据的提交。浏览器会设定容量限制。</p>
<p>何时使用 POST？</p>
<p>如果表单正在更新数据，或者包含敏感信息（例如密码）。</p>
<p>POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。</p>
<p><strong>name属性<br> </strong>如果要正确地被提交，每个输入字段必须设置一个 name 属性。</p>
<p><form> 标签的所有属性如下：</p>
<p> </p>
<table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>accept-charset</td>
<td>规定在被提交表单中使用的字符集(默认:页面字符集)</td>
</tr>
<tr>
<td>action</td>
<td>规定向何处提交表单的地址(url)(提交页面)</td>
</tr>
<tr>
<td>autocomplete</td>
<td>规定浏览器应该自动完成表单(默认:开启)</td>
</tr>
<tr>
<td>enctype</td>
<td>规定被提交数据的编码(默认:url-encoded)</td>
</tr>
<tr>
<td>method</td>
<td>规定在提交表单时所用的http方法(默认:GET)</td>
</tr>
<tr>
<td>name</td>
<td>规定识别表单的名称(对于DOM使用:document.forms.name)</td>
</tr>
<tr>
<td>novalidate</td>
<td>规定浏览器不验证表单</td>
</tr>
<tr>
<td>target</td>
<td>规定action属性中地址的目标(默认:_self)</td>
</tr>
</tbody>
</table>
<p></p>
<p class="maodian"></p>
<h4>表单元素<br> </h4>
<p>表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。<br> </p>
<p><strong>input 元素</strong></p>
<p><input> 元素</p>
<p><input> 元素是最重要的表单元素。</p>
<p><input> 元素有很多形态，根据不同的 type 属性区分出不同的表单元素。</p>
<p> </p>
<table>
<thead>
<tr>
<th>类型</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>text</td>
<td>定义常规的文本输入</td>
</tr>
<tr>
<td>password</td>
<td>密码框</td>
</tr>
<tr>
<td>radio</td>
<td>单选按钮</td>
</tr>
<tr>
<td>checkbox</td>
<td>多选框</td>
</tr>
<tr>
<td>submit</td>
<td>提交按钮</td>
</tr>
<tr>
<td>button</td>
<td>普通按钮</td>
</tr>
</tbody>
</table>
<p></p>
<p><strong>实现单选框必须满足的条件<br> </strong></p>
<div class="jb51code">
<pre class="brush:xhtml;">
<p>性别:
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
</pre>
</div>
<p style="margin-left: 40px">实现多选框必须满足的条件<br> 1.必须要有input type=" checkbox"<br> 2.必须有value=“XXX” value:多选框的值<br> 3.必须有name=“XXX” 且框的内容相同 name:表示组<br> </p>
<div class="jb51code">
<pre class="brush:xhtml;">
<p>爱好
<input type="checkbox" value="sleep" name="hobby"/>睡觉
<input type="checkbox" value="code" name="hobby"/>编码
<input type="checkbox" value="chat" name="hobby"/>聊天
<input type="checkbox" value="game" name="hobby"/>游戏
</p>
</pre>
</div>
<p><strong>表单元素格式</strong></p>
<p> </p>
<table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>type</td>
<td>指定元素的类型.text,password,checkbox,radio,submit,reset,file,hidden,image和button,默认为text</td>
</tr>
<tr>
<td>name</td>
<td>指定表单元素的名称</td>
</tr>
<tr>
<td>value</td>
<td>元素的初始值.type为radio时必须指定一个值(在框里没写东西之前会显示value)</td>
</tr>
<tr>
<td>size</td>
<td>指定表单元素的初始宽度.当type为text或password时,表单元素的大小以字符为单位.对于其他类型,宽度以像素为单位</td>
</tr>
<tr>
<td>maxlength</td>
<td>type为text或password时,输入的最大字符数,多了就输不进去了</td>
</tr>
<tr>
<td>checked</td>
<td>type为radio或checkbox时,指定按钮是否是被选中</td>
</tr>
</tbody>
</table>
<p></p>
<p><strong>HTML5新增了很多的输入类型，如下所示。</strong></p>
<p>HTML5 增加了多个新的输入类型：</p>
<p>l color</p>
<p>l date</p>
<p>l datetime</p>
<p>l datetime-local</p>
<p>l email</p>
<p>l month</p>
<p>l number</p>
<p>l range</p>
<p>l search</p>
<p>l tel</p>
<p>l time</p>
<p>l url</p>
<p>l week</p>
<p>注释：老式 web 浏览器不支持的输入类型，会被视为输入类型 text。</p>
<p><strong><select> 元素（下拉列表）</strong></p>
<div class="jb51code">
<pre class="brush:xhtml;">
<select name="cars">
<option value="volvo">Volvo\</option>
<option value="saab">Saab\</option>
<option value="fiat">Fiat\</option>
<option value="audi">Audi\</option>
</select>
</pre>
</div>
<p><strong><textarea> 元素(文本域)</strong></p>
<div class="jb51code">
<pre class="brush:xhtml;">
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
</pre>
</div>
<p><strong>文件域</strong></p>
<div class="jb51code">
<pre class="brush:xhtml;">
<p>
<input type="file" name="files">
</p>
</pre>
</div>
<p><strong>滑块</strong></p>
<div class="jb51code">
<pre class="brush:xhtml;">
<p>音量
<input type="range" name="voice" min="0" max="100" step="2">
</p>
</pre>
</div>
<p><strong>搜索</strong></p>
<div class="jb51code">
<pre class="brush:xhtml;">
<p>搜索:
<input type="search" name="search">
</p>
</pre>
</div>
<p><strong>按钮</strong></p>
<div class="jb51code">
<pre class="brush:xhtml;">
<p>按钮:
<input type="button" name="btn1" value="点击变长">
</p>
<!-- 按钮
input type="button" 普通按钮
input type="image" 图像按钮
input type="submit" 提交按钮
input type="reset" 重置按钮
-->
</pre>
</div>
<p class="maodian"></p>
<h2>多媒体元素<br> </h2>
<p>在HTML中也提供了对于音频和视频的支持。</p>
<p>在 HTML 中播放声音的方法有很多种。</p>
<p>在 HTML 中播放音频并不容易！</p>
<p>您需要谙熟大量技巧，以确保您的音频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放。</p>
<p>使用插件</p>
<p>浏览器插件是一种扩展浏览器标准功能的小型计算机程序。</p>
<p>插件有很多用途：播放音乐、显示地图、验证银行账号，控制输入等等。</p>
<p>可使用<object>或<embed>标签来将插件添加到 HTML 页面。</p>
<p>这些标签定义资源（通常非 HTML 资源）的容器，根据类型，它们即会由浏览器显示，也会由外部插件显示。</p>
<p class="maodian"></p>
<h3>audio 标签<br> </h3>
<p><audio>元素是一个 HTML5 元素，在 HTML 4 中是非法的，您的页面无法通过 HTML 4 验证。但在浏览器中都有效（老式浏览器不起作用，比如IE6）。</p>
<p><audio src=”” autoplay=”” controls=”” loop=””></audio></p>
<p>属性名：</p>
<p>src:音频地址。</p>
<p>autoplay:是否装载好后自动播放。</p>
<p>controls:是否显示播放的控制条。</p>
<p>loop:是否重复播放。</p>
<p>实例:</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>
