知识点: HTML、HTML文本排版、表格、超级链接、表单和框架
-
HTML元素语法：
- HTML元素以开始标签起始(<标签名>)，以结束标签终止</标签名>；
- 元素内容是开始标签与结束标签之间的内容，某些标签具有空内容，如：
<p></p>； - 空元素在开始标签中进行关闭，大多数HTML元素可拥有属性，如
<p id="test"></p>。
-
HTML属性：
- HTML标签可以拥有属性，属性提供了有关HTML元素的更多信息
- 属性总是以名称/值对的形式出现，比如：name=“value”
- 属性总是在HTML元素的开始标签中规定，属性和属性值对大小写不敏感
- 元素的属性可以改变其文本内容的样式与布局
-
HTML的style样式：
- style属性提供了一种改变所有HTML元素的样式的通用方法，样式是一种新的首选的改变HTML样式的方式。
- 通过HTML样式，能够通过使用style属性直接将样式添加到HTML元素，如：
<p style="background-color:red"></p>，或是在头部引入，如：<style type="text/css">样式内容</style>，或者间接地引入独立的样式表中（CSS文件）的样式，如：<link href="引入的文件路径" rel="stylesheet">。
-
HTML常用标签：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
<style>用于定义内部样式</style>
<h1~h6>标题标签</h1~h6>
<hr /> <!--(注释标签)生成一条水平线-->
<br /> <!--换行标签-->
<p>段落标签</p>
<a href="url">超链接，用于跳转到其它网站</a>
<i>斜体字样</i>
<b>粗体字样</b>
<s>删除线</s>
<u>下划线</u>
<sup>上标</sup>
<sub>下标</sub>
<div>块分区</div>
<span>行内分区</span>
<label>常与input一起使用</label>
<img src="url"> <!--引入图片-->
<table>定义表格</table>
<tr>定义表行</tr>
<th>定义表头<th>
<td>定义单元格</td>
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
</ol>
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
</ul>
<input> <!--文本输入框-->
<form>将用户输入的数据提交给后台</from>
</body>
</html>
- 一个完整的表格:
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
</tr>
</tbody>
</table>
表单
form： HTML表单用于搜集用户的输入，可以指定不同类型的input元素、复选框、单选框、提交按钮等等。
表单属性（form）：
- action：定义在提交表单时执行的动作，若省略则默认提交到当前页面；
- method：规定表单提交时所使用的的HTTP方法（post、get）；
input： 最重要的表单元素，根据不同的type值有不同的形态：text–》文本、radio–》单选框、checkbox–》复选框、submit–》提交
- name属性：如果要被正确的提交，每一个提交的字段必须设置一个name属性
<!DOCTYPE html>
<html>
<body>
<form action="index.php" method="post"> <!--使用post方法提交到index.php文件-->
<label>姓名：<!--文本-->
<input type="text" name="username">
</label>
<br />
<label>性别：<!--单选框-->
<input type="radio" name="sex" value="man">男
<input type="radio" name="sex" value="woman">女
</label>
<br />
<label>爱好：<!--复选框-->
<input type="checkbox" name="sing" value="sing">唱歌
<input type="checkbox" name="playgames" value="playgames">电竞
<input type="checkbox" name="basketball" value="basketball">篮球
<input type="checkbox" name="swimming" value="swimming">游泳
</label>
<br />
<input type="submit" value="提交"> <!--提交-->
</form>
</body>
</html>
select： 元素定义下拉列表
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
<!--option元素定义带选择的选项-->
</select>
button： 定义可以点击的按钮
<!--点击之后弹出“hello world!”-->
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
定义框架： frameset
- 通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。在下面的这个例子中，我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 “frame_a.htm” 被置于第一个列中，而 HTML 文档 “frame_b.htm” 被置于第二个列中：
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
结构标记： HTML5所提供的结构标记，专门用于表示常见的网页结构（即制作布局），提升布局代码的语义性和可读性
<header></header>：定义文档的页眉即页面顶部信息
<nav></nav>：定义页面的导航链接部分
<section></section>：定义文档中的节，文档中主体内容
<article></article> ：定义独立于文档的其他部分内容(章、节等)
<footer></footer>：定义某区域的脚注信息，页面底部内容等
<aside></aside>：多用于侧边栏和相关引用信息等
