前端之HTML内容
1 HTML简介
HTML是超文本标记语言，它不是一种编程语言，而是一种标记语言。标记标签是一套标记标签，这种标记标签通常被称为HTML标记标签。浏览器不会显示HTML标记标签，而是使用标签来解释页面的内容。标签基本上都是成对出现，比如<h1>和</h1> ，<p>和</p>等。
HTML文档结构：
- <!DOCTYPE html>声明为HTML5文档。
- <html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部和主体。
- <head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。
- <title>、</title>定义了网页标题，在浏览器标题栏显示。
- <body>、</body>之间的文本是可见的网页主体内容。
样式如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title这里是文档的标题</title> </head> <body> <p>这里包含了可见的页面内容</p> </body> </html>
注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则需要设置为 <meta charset="gbk">。
2 HTML标签和元素
HTML元素指的是从开始标签到结束标签的所有代码。
注释：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。
HTML 元素语法：
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 也有一部分标签是单独呈现的，比如：<br/>、<hr/>、<img src="1.jpg" />等。
- 标签里面可以有若干属性，也可以不带属性。
- <标签名 属性1=“属性值1” 属性2=“属性值2”......>内容部分</标签名>
- <标签名 属性1=“属性值1” 属性2=“属性值2”....../>
HTML常用标签及含义：
| 标签 | 含义 |
| <!---..---> | 定义注释 |
| <!DOCTYPE> | 定义文档类型 |
| <a> |
定义超文本链接 |
| <audio> | 定义音频内容 |
| <body> | 定义文档的主体 |
| <br> | 定义换行 |
| <button> | 定义一个点击按钮 |
| <col> |
定义表格中一个或多个列的属性值。比如设置元素水平对齐方式，元素的宽度等。<col> 没有结束标签。 |
| <div> |
定义文档中的节。用法：<div> 是一个块级元素。可以用 id 或 class 来标记 <div>，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。 |
| <form> | 定义了HTML文档的表单 |
| <h1>to<h6> | 定义了HTML标题 |
| <head> |
定义关于文档的信息，用于定义文档的头部，它是所有头部元素的容器 |
| <hr> | 定义水平线 |
| <html> |
定义HTML文档。<html> 与 </html> 标签限定了文档的开始点和结束点，20:27:53在它们之间是文档的头部和主体。 |
| <img> | 定义图像 |
| <input> |
定义输入控件。<input> 标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。 |
| <li> |
定义列表的项目。<li> 标签可用在有序列表(<ol>) 和无序列表 (<ul>) 中。 |
| <link> | 定义文档与外部资源的关系。<link> 标签最常见的用途是链接样式表。 |
| <meta> |
定义关于HTML文档的元信息，比如针对搜索引擎和更新频度的描述和关键词。<meta> 标签位于文档的头部，不包含任何内容。 <meta> 标签的属性定义了与文档相关联的名称/值对 |
| <ol> | 定义有序列表 |
| <option> |
定义下拉列表中的一个选项（一个条目）。option 元素位于select 元素内部。浏览器将 <option> 标签中的内容作为<select> 标签的菜单或是滚动列表中的一个元素显示。 |
| <p> |
定义段落。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间 |
| <script> | 定义客户端脚本 |
| <select> | 定义选择列表（下拉列表） |
| <span> |
定义文档中的节。被用来组合文档中的行内元素。span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。 |
| <style> | 定义文档的样式信息 |
| <table> |
定义表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。 |
| <td> | 定义表格中的单元 |
| <th> | 定义表格中的表头单元格 |
| <title> | 定义文档的标题 |
| <tr> | 定义表格中的行 |
| <ul> | 定义无序列表。ul>li |
| <vidio> | 定义视频。比如电影片段或其他视频流。 |
3 HTML表单
在HTML中，使用<form>元素创建表单。
<form>标签属性及其说明：
| 属性 | 说明 |
| name | 表单的名称 |
| method | 设置表单的提交方式，get或者post方式 |
| action | 指向处理该表单页面的URL（相对位置或者绝对位置） |
| enctype | 设置表单内容的编码方式 |
| target | 设置返回信息的显示方式 |
<form>表单元素：
常用的表单元素有 ：输入域标记<input>，选择域标记<select>、<option>，和文字域标记<textarea>等
<input> 元素是最重要的表单元素。常用的文本框、按钮、单选按钮、复选框按钮等构成一个完整的表单。
语法格式如下：
<form> <input name="file_name" type="type_name"> </form>
① 输入域标记<input>
参数type是指输入域的类型。在<input type="">标记中一共提供了10中类型的输入区域。这些type属性值为：
| 值 | 说明 | 举例 |
| submit |
submit表示按钮， 将表单的内容提交到服务器端 |
添加一个提交按钮： <input type="submit" name="Submit" value="提交"> |
| text | 文本框 |
添加一个文件框： <input type="text" name="user" value="纯净水" size="20" maxlength="10"> |
| password | 密码域 |
填加一个密码域： <input type="password" name="pwd" value="666666" size="20" maxlength="10"> |
| file | 文件域 |
添加一个文件域： <input type="file" name="file" enctype="multipart/form-data" size="20" maxlength="200"> |
| image | 图像域 |
添加一个图像域： <input type="image" name="imageField" src="芝加哥阿德勒天文馆.JPG" width="120" height="24" border="0"> |
| radio |
单选框， 用于设置一组选择项， 用户只能选择一项 |
添加一个单选按钮：（您的性别：） <input type="radio" name="sex" value="male" >男 <input type="radio" name="sex" value="female" checked>女 <input type="radio" name="sex" value="other" >其他 |
| checkbox |
复选框 允许用户选择多个选择项 |
添加一组复选框：（影响您购买本书的因素：） <input type="checkbox" name="factors" value="cover" >封面 <input type="checkbox" name="factors" value="content" checked>正文内容 <input type="checkbox" name="factors" value="price" >价格 |
| reset | 重置按钮，清除与重置表单内容 |
<input type="reset" name="Submit" value="重置"> |
| button | 普通按钮，可以激发提交表单的动作 | <input type="button" name="Submit" value="按钮"> |
| hidden | 隐藏域 | <input type="hidden" name="bookid" > |
② 选择域标记<select>和<option>：
可以建立一个列表或者菜单，选择域标记<select>和<option>的显示方式：
| 显示方式 | 说明 | 举例 |
| 列表方式 |
下拉列表框 浏览者可通过拖动滚动条来查看各选项 |
<p> <option value="0" >网络编程</option>
<option value="1" selected>办公自动化</option>
<option value="2" >网页设计</option>
<option value="3" >网页美工</option>
</select>
</p>
|
| 菜单方式 |
multiple属性用于下拉列表<select>标记中， 指定该选项用户可以用<shift>或<ctrl>键进行多选 |
<p>
<select name="spec" id="spec" multiple>
<option value="0" >网络编程</option>
<option value="1" selected>办公自动化</option>
<option value="2" >网页设计</option>
<option value="3" >网页美工</option>
</select>
</p>
|
③ 文字域标记<textarea>:
文字域标记<textarea>用来制作多行的文字域，可以在其中输入更多的文本。语法格式如下：
<p> <textarea name="suggest" id="suggest" cols="30" rows="10"> 请输入您的建议 </textarea> </p>
