H5——html

末蓝、 2022-05-08 00:36 275阅读 0赞

> 一个功能完善的web页面，通常由html 、css、与 js 构成。他们描述了网页的结构，样式以及功能。  
> HTML 即超文本标记语言，是一种用来制作超文本文档的简单标记语言，是制作网页的最基本语言，可以由游览器执行。

导航

HTML 文字排版标记  
 超链接  
 表格  
 表单

--------------------

html基本结构如下：

<!DOCTYPE HTML> <html> <head> <title>网页标题</title> </head> <body> <p>网页内容</p> </body> </html>

#### HTML 文字排版标记 ####

*  **<h1>~<h6>** ：标题标记，用于表示文档内容的标题内容，以及标题内容的级别
 *  **<p></p>** ：段落标记，用于表示内容是一个段落
 *  **<br/>**　：换行标记，用于段落内部的换行该标记是自我闭合标记
 *  **<hr/>**　：水平线
 *  **<ul></ul>**　：无序列表标记，表示列表所包含的项是没有先后顺序的，列表项使用<li>表示
 *  **<ol></ol>**　：有序列表标记，表示列表所包含的项是有先后顺序的，列表项使用<li>表示
 *  **<li></li>**　：列表项标记，只能与<ul>或<ol>结合使用
 *  **<dl></dl>**　：定义列表，定义列表至少包含一条术语（dt）或一条说明（dd）
 *  **<dt></dt>**　：定义列表项，标明一个术语要说明的对象
 *  **<dd></dd>**　：列表项说明
 *  **<b></b>或<strong></strong>**　：文本加粗，b 样式为粗体，strong 主旨是强调，表现为粗体
 *  **<i></i>或<em></em>**　：文本倾斜，ｉ样式为斜体，em 主旨是强调，表现为斜体
 *  **<div></div>**　：块级元素
    
     *  总是在新行上开始，占据一整行；
     *  高度，行高以及外边距和内边距都可控制；
     *  宽带始终是与浏览器宽度一样，与内容无关；
     *  它可以容纳行内（内联）元素和其他块元素。
 *  **<span></span>**　：行内元素
    
     *  和其他元素都在一行上；
     *  高，行高及外边距和内边距部分可改变；
     *  宽度只与内容有关；
     *  行内元素只能容纳文本或者其他行内元素。
 *  **<big></big>**　：表现性元素，定义字体大小
 *  **<small></small>**　：表现性元素，定义字体大小
 *  **<sup></sup>**　：表现性元素，定义上标
 *  **<sub></sub>**　：表现性元素，定义下标

#### 特殊符号 ####

*  “<” 和 “>”　：< 和 >
 *  “&laquo;” 和 “&raquo;”　：« 和 »
 *  “&lsaquo;” 和 “&rsaquo;”　：‹ 和 ›
 *  “&nbsp;”　：空格; 多个空格用其他表示方法
 *  “&copy;”　：©
 *  “&”　：&

#### 超链接 ####

**超链接**

通过使用超链接，各个不同的网页就可以相互的导航和跳转  
通过使用属性href来指定要链接的url，标签的内容可以为文本也可为其他标签  
<a href=“[www.baidu.com][]”> 跳转百度 </a>  
① a:link：未访问链接 ,如 a:link \{color:blue\}  
② a:visited：已访问链接 ,如 a:visited\{color:blue\}  
③ a:active：激活时（链接获得焦点时）链接的颜色 ,如a:active\{color:blue\}  
④ a:hover：鼠标移到链接上时 ,如 a:hover \{color:blue\}

**锚点**

定义锚点第三章  
定义指向该锚地的链接点击查看第三章

#### 表格 ####

**<table></table>**　：定义表格的基本框架  
**<tr></tr>**　：定义表格的行  
**<td></td>**　：定义表格中行内的单元格  
**<th></th>**　：定义表格中行内的单元格（标题），自动将文本加粗，居中对齐

*  cellspacing　：单元格间距
 *  cellpadding　：单元格内间距
 *  border　：边框属性
 *  align　：居中
 *  bgcolor background-color　：背景颜色
 *  colspan　：左右合并单元格
 *  rowspan　：上下合并单元格

#### 表单 ####

> 表单是采集用户输入的数据，然后提交给服务器的功能结构，再web页面中广泛应用。

表单有三个基本组成部件:

*  表单标签：这里面包含了处理表单数据所用程序的URL以及数据提交到服务器的方法。
 *  表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
 *  表单按钮：包括提交按钮、复位按钮和一般按钮；

表单标签：<form></form>  
功能：定义采集数据范围。  
语法：

＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃表单域对象＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃

**文本框**  
功能：文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。  
语法：＜input type=“text” name="…" size="…" maxlength="…" value="…"＞

**多行文本框**  
功能：也是一种让访问者自己输入内容的表单对象，只不过能让访问者填写较长的内容。  
语法：＜textarea name="…" cols="…" rows="…" ＞＜/textarea＞

**密码框**  
功能：是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其它符号代替，而输入的文字会被隐藏。  
语法：＜input type=“password” name="…" size="…" maxlength="…“/＞

**隐藏域**  
功能：隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。  
语法：＜input type=“hidden” name="…" value="…"＞

**单选框**  
当需要访问者在待选项中选择唯一的答案时，就需要用到单选框了。  
代码格式：＜input type=“radio” name="…" value="…"＞  
== 必须写上相同的name值才能每次选中一个==

**复选框**  
功能：复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个唯一的名称。  
语法：＜input type=“checkbox” name="…" value="…"＞

**文件上传框**  
功能：有时候，需要用户上传自己的文件，文件上传框看上去和其它文本域差不多，只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。  
语法：＜input type=“file” name="…" size=“15” maxlength="100"＞

**下拉选择框**  
功能：下拉选择框允许你在一个有限的空间设置多种选项。  
语法：  
＜select name="…" size="…" multiple＞  
＜option value="…" selected＞…＜/option＞  
…  
＜/select＞

＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃表单按钮＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃

**提交按钮**  
功能：提交按钮用来将输入的信息提交到服务器。  
语法：＜input type=“submit” name="…" value="…"＞

**复位按钮**  
功能：复位按钮用来重置表单。  
语法：＜input type=“reset” name="…" value="…"＞

**一般按钮**  
功能：一般按钮用来控制其他定义了处理脚本的处理工作。  
语法：＜input type=“button” name="…" value="…" οnclick="…"＞

[www.baidu.com]: http://www.baidu.com