javaweb之HTML总结

╰+哭是因爲堅強的太久メ 2021-06-24 16:10 466阅读 0赞

## HTML的简介 ##

### 什么是HTML ###

**HyperText Markup Language 超文本标记语言**

*  超文本：超出文本的范畴，使用HTML可以轻松实现这样的操作
 *  标记：HTML所有的操作都是通过标记实现的，标记就是标签 `<标签名称>`
 *  网页语言：是一门实现网页的语言。

### 第一个HTML程序 ###

*  HTML后缀是 **.html** 或 **.htm**
 *  代码：
    
        <font size="5" color="red">这是我的第一个html程序！<font>
 *  效果：  
    这是我的第一个html程序！

### HTML的规范（大家都要遵循） ###

1.  一个html文件开始标签和结束标签 `<html> </html>`
2.  HTML包含两部分内容  
    1）`<head>` 设置相关信息 `</head>`  
    2）`<body>`显示在页面上的内容都写在body里面`</body>`
3.  HTML的标签有开始标签，也有结束标签  
    `<head>` `</head>`
4.  HTML的代码不区分大小写。
5.  有些标签，没有结束标签。  
    例如：换行`<br/>` 分割线`<hr/>`

### HTML操作思想 ###

网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候就需要使用标签吧要操作的数据包起来（封装起来），通过修改标签的属性值来实现标签内数据样式的变化。  
一个标签就相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值就可以了。

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

## HTML中常用的标签 ##

### 文字标签和注释标签 ###

*  **文字标签**：修改文字的样式  
    `<font>` `</font>`  
    **属性：**
    
     *  **size**：文字的大小。取值范围：1~7，超出了7，默认还是7。
     *  **color**：文字的颜色。  
        颜色的表示方式：
    
    1.  英文单词：red green blue black white yellow gray ……
    2.  使用十六进制数表示：`#ffffff` ：RGB颜色  
        可以通过工具实现不同的颜色。
 *  **注释标签**  
    html的注释：``

### 标题标签、水平线标签和特殊字符 ###

*  **标题标签**：`<h1>` `</h1>`；`<h2>` `</h2>`……`<h6>` `</h6>`。  
    从h1到h6，大小是依次变小，同时会自动换行。
 *  **水平线标签**：`<hr>`  
    属性：  
    size：水平线的粗细。取值范围1~7。  
    color：水平线的颜色。
 *  **特殊字符**：  
    对特殊字符进行转义：  
    ![在这里插入图片描述][20190413200830658.png]

### 列表标签 ###

#### 定义列表（dl标签）： ####

自定义列表以 `<dl>` 标签开始。每个自定义列表项以 `<dt>` 开始。每个自定义列表项的定义以 `<dd>` 开始。

#### 有序列表 ####

有序列表始于 `<ol>` 标签。每个列表项始于 `<li>` 标签。  
`<ol>`的属性`type`定义了有序列表的序号样式，可用的值有：`1 A a I i`。

<ol>
    	<li>Coffee</li>
    	<li>Milk</li>
    </ol>

#### 无序列表 ####

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。  
无序列表始于`<ul>` 标签。每个列表项始于 `<li>`。  
`<ul>`的属性`type`定义了无序列表的序号样式： `disc`、`square`、`circle`。

<ul>
    	<li>Coffee</li>
    	<li>Milk</li>
    </ul>

### 图像标签 ###

`<img src="文件的路径" />`、  
**常用属性：**  
`src`：图片的路径，  
`width`：图片的宽度，  
`height`：图片的高度，  
`alt`：图片的提示文字。（有些浏览器不显示，兼容性比较差）

### 路径的介绍 ###

绝对路径：就是文件在计算机上的绝对位置。从根分区到文件的位置路径。  
相对路径：一个文件相对于另一个文件的路径。从一个文件到另一个文件的路径。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70]

### 超链接标签 ###

#### 链接资源 ####

<a href="资源路径"> 显示在页面上的内容</a>

`href`：链接的资源的地址  
`target`：设置打开的方式，默认是在当前页打开

*  blank：在一个新窗口打开
 *  self：在当前页打开（默认）

当链接不需要到任何地址，在href里面加`#`。

<a href="#">显示在页面上的内容</a>

#### 定位资源 ####

如果我们想要定位资源：

*  先定义一个位置：
    
        <a name="top">顶部</a>
 *  回到这个位置：
    
        <a href="#top">回到顶部</a>

在这里引入一个标签：`<pre>` `</pre>`原样输出，保留换行、空格、缩进

### 表格标签 ###

*  可以对数据进行格式化，使数据显示的更加清晰
 *  `<table>`  
    标签定义 HTML 表格。
    
    **属性：**  
    `border`：表格线  
    `bordercolor`：表格线的颜色  
    `cellspacing`：单元格直接的距离  
    `width`：表格的宽度  
    `height`：表格的高度
 *  简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
 *  `tr` 元素定义表格行，`th` 元素定义表头，`td` 元素定义表格单元。
 *  `tr`  
    **设置显示方式** align：`left`、`center`、`right`
 *  `td`  
    **设置显示方式** align：`left`、`center`、`right`

<table border="1">
    	<tr>
        	<th>Month</th>
        	<th>Savings</th>
      	</tr>
      	<tr>
        	<td>1</td>
        	<td>$600</td>
    	</tr>
    	<tr>
        	<td>2</td>
        	<td>$500</td>
    	</tr>
    </table>

*  表格的标题：`<caption> </caption>`
 *  合并单元格  
    `rowspan`：跨行。、
    
        <table border="1">
        	<tr>
        		<th>Month</th>
        		<th>Savings</th>
        	</tr>
        	<tr>
        		<td>January</td>
        		<td>$100.00</td>
        		<td rowspan="2">$50</td>
        	</tr>
        	<tr>
        		<td>February</td>
        		<td>$10.00</td>
        	</tr>
        </table>
    
    `colspan`：跨列。
    
        <table border="1">
        	<tr>
        		<th>Month</th>
        		<th>Savings</th>
        	</tr>
        	<tr>
        		<td colspan="2">January</td>
        	</tr>
        	<tr>
        		<td colspan="2">February</td>
        	</tr>
        </table>

### 表单标签 ###

`<from>` `</from>`：定义一个表单的范围。

*  `action`属性：提交的位置，默认是提交到当前页面。
 *  `method`属性：表单的提交方式。有两种， `get`(默认选项) 和 `post`。  
    **get和post的区别：**  
    1. get请求会携带提交的数据，post不会携带（在请求体里面）。  
    2. get请求安全级别低，post高。  
    3. get请求数据大小有限制，post没有限制。
 *  `enctype`：一般请求不需要设置这个属性，做文件上传的时候需要设置这个属性。

输入项：可以输入内容或者选择内容的部分。  
大部分的格式：`<input type="输入项的类型">`

*  普通输入项：
    
        <input type="text" name="phone" />
 *  密码输入项：
    
        <input type="password" name="mima" />
 *  单选输入项：  
    在里面有name属性。name属性必须相同。  
    如果设置默认选中属性，就用checked属性：`checked="checked"`。  
    必须要有一个value值。
    
        <input type="radio" name="sex" value="woman" checked="checked" />女 
        <input type="radio" name="sex" value="man" />男
 *  复选输入项：  
    在里面有name属性。name属性必须相同。  
    如果设置默认选中属性，就用checked属性：`checked="checked"`。  
    必须要有一个value值。
    
        <input type="checkbox" name="love" value="zq" />足球
        <input type="checkbox" name="love" value="yy" checked="checked" />游泳
        <input type="checkbox" name="love" value="qm" />骑马
        <input type="checkbox" name="love" value="sj" />射箭
 *  文件输入项：
    
        <input type="file" />
 *  下拉输入项：  
    如果设置默认选中属性，就用checked属性：`selected="selected"`。
    
        <select name="birth">
        	<option value="1991">1991</option>
        	<option value="1992" selected="selected">1992</option>
        	<option value="1993">1993</option>
        	<option value="1994">1994</option>
        </select>
 *  文本域输入框：
    
        <textarea rows="10" cols="80">文本域默认内容！</textarea>
 *  隐藏项：（不会显示在页面上，但是存在于HTML代码里面）
    
        <input type="hidden" />
 *  提交按钮
    
        <input type="submit" value="提交" />
    
    也可以使用图片进行提交：
    
        <input type="image" src="xxx.jpg" />
    
    当在输入项里面写了name属性之后，点击提交按钮会把表单内的内容提交到服务器。  
    `? 输入项=输入值 & ……`
 *  重置按钮:回到输入项的初始状态
    
        <input typr="reset" value="重置按钮" />
 *  普通按钮(一般和js一块使用)
    
        <input type="button" value="普通按钮" />

### 其他常用标签 ###

<b> 加粗 </b>
    <u> 下划线 </u>
    <i> 斜体 </i>
    <s> 删除线 </s>
    
    <pre>
    	原样输出，保留格式
    </pre>
    
    <p>段落标签</p>
    
    <sub> 下标 </sub>
    <sup> 上标 </sup>
    
    <div> 换行的盒子 </div>
    
    <span> 不换行的盒子 </span>

### HTML的头标签`<head>` ###

*  `<head>` 定义关于文档的信息。
 *  `<title>` 定义文档标题。
    
        <title>标题</title>
 *  `<base>` 定义页面上所有链接的默认地址或默认目标。
    
        <base target="_blank" /> 设置所有的超链接在新窗口中打开
 *  `<link>` 定义文档与外部资源之间的关系。引入外部文件。
 *  `<meta>` 定义关于 HTML 文档的元数据。
    
        <meta charset="utf-8" /> 设置网页字符集
        <meta name="keywords" content="keyword1,keyeord2"/> 设置网页关键字
        <meta http-equiv="refresh" content="3;xxx.html"/> 设置网页自动跳转
 *  `<script>` 定义客户端脚本。
 *  `<style>` 定义文档的样式信息。

[20190413200830658.png]: /images/20210615/3eec942023a241cdb30270285e7c8daf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70]: /images/20210615/fc6095ea49804d38a28aeb5e29bb0666.png