E001Web学习笔记-HTML

亦凉 2023-10-18 23:57 124阅读 0赞

# 一、HTML概述 #

## 1、简介 ##

超文本标记语言，是最基本的网页开发语言；

标记语言不是编程语言，没有什么逻辑性；

## 2、概述 ##

①html文档后缀名：.html或者.htm；

②标签分为：

**围堵标签：**有开始标签和结束标签，例如<html></html>；

**自闭标签：**开始标签与结束标签在一起，例如<br/>；

③标签可以嵌套；

④在开始标签中定义属性，属性由键值对构成，但需要用引号（单双引号都可以）引起来；

⑤html标签字母不区分大小写，但是建议使用小写；

## 3、元素和属性 ##

一个HTML标签称为一个**元素**，一个元素内部可以设置例如id，title等信息，这些信息称为**属性**；

**属性值**一般用双引号引起，若属性值内部有双引号，则用单引号引起；

## 4、基本代码框架 ##

<!DOCTYPE html>
    
    <html>
    	
    	<head>
    		
    		<meta charset="utf-8">
    		
    		<title>这是标题</title>
    	</head>
    	
    	<body>
    	</body>
    </html>

# 二、HTML标签 #

## 1、文件标签 ##

### <!DOCTYPE html>： ###

文档标记；

### html： ###

html文档的根标签；

### head： ###

头标签，用于指定html文档的一些属性，引入外部资源；

### title： ###

标题标签；

### body： ###

主体标签；

## 2、文本标签 ##

### 代码： ###

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>这是标题</title>
    </head>
    <body>
    
    	<h1>标题 1</h1>
    	<h2>标题 2</h2>
    	<h3>标题 3</h3>
    	<h4>标题 4</h4>
    	<h5>标题 5</h5>
    	<h6>标题 6</h6>
    
    	<p>段落</p>
    	<hr color="aqua" width="200px" size="5" align="left"/>
    	<p>段落</p>
    
    
    
    	<p>换行前<br/>换行后</p>
    
    	<center><b>加粗</b></center>
    	<i>斜体</i>
    </body>
    </html>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70][]

### 属性取值说明： ###

**color的三种取值方式：**

①英文单词：red、green、blue等；

②rgb(值1,值2,值3)：值的范围是0~255，如rgb(0,0,255)；

③\#值1值2值3：值的范围00~FF，如\#FF0000；

**width的两种取值方式：**

①数值：单位默认是px，例如width="20px"；

②百分比：相对于父元素的比例；

## 3、图片标签 ##

### 图片地址的三种写法： ###

①本地图片资源：绝对路径，指的是图片在本机上的绝对位置；

②本地图片资源：相对路径，指的是图片相对于本html文件的位置：

**写法：./:目录名/文件名（当前目录）或者直接写文件名；目录名/文件名（同级目录）；../:目录名/文件名（上级目录）；**

③网络图片资源：写入图片资源的网址；

## 4、列表标签 ##

### 代码： ###

<ol>
    			<li>大哥</li>
    			<li>二哥</li>
    			<li>三哥</li>
    			<li>四哥</li>
    		</ol>
    		
    		<ul>
    			<li>大姐</li>
    			<li>二姐</li>
    			<li>三姐</li>
    			<li>四姐</li>
    		</ul>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1][]

## 5、链接标签 ##

### 代码： ###

<a href="连接地址">连接文字</a>

### 运行结果： ###

![20190823113602152.jpg][]

### 说明： ###

**地址可以是网络地址、相对文件路径、或者绝对文件路径；类似图片；**

## 6、块标签（跟CSS结合） ##

### 代码： ###

<div>这是div</div>
    		<span>这是span</span>

### 备注： ###

div独占一行；span的文本信息在一行内展示；

## 7、语义化标签 ##

### 代码： ###

<header>
    		    
    		    <div>这是div</div>
    		    <span>这是span</span>
    		</header>
    		<footer>
    			
    			<div>这是div</div>
    			<span>这是span</span>
    		</footer>

### 备注： ###

语义化标签也是主要结合CSS使用，语义化标签是为了提高代码的可读性，提供的一些标签；

## 8、表格标签 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>图片标签</title>
    	</head>
    	<body>
    		
    		
    		<table border="1" width="50%">
    			<caption>表格的标题</caption>
    			
    			<thead>
    				
    				<tr>
    					
    					<th>1哥</th>
    					<th>2哥</th>
    					<th>3哥</th>
    					<th>4哥</th>
    				</tr>
    			</thead>
    			
    			<tbody>
    				<tr>
    					
    					<td rowspan="2">1姐</td>
    					<td>2姐</td>
    					<td>3姐</td>
    					<td>4姐</td>
    				</tr>
    				<tr>
    					
    					<td colspan="2">2姐</td>
    					<td>4姐</td>
    				</tr>
    			</tbody>
    			
    			<tfoot>
    				<tr>
    					<td>1姐</td>
    					<td>2姐</td>
    					<td>3姐</td>
    					<td>4姐</td>
    				</tr>
    			</tfoot>
    		</table>
    	</body>
    </html>

# 三、表单标签 #

## 1、概述 ##

### form： ###

用于定义表单，它的范围代表了采集用户数据的范围；

### 属性简介： ###

**action：**

指定提交数据的URL；

**method：**

指定提交方式：get、post（一共七种，常用两种）；

**get：**

①请求参数会在地址栏中显示，会封装在请求行中，显示在浏览器地址栏；

②请求参数的长度有限制；

③不太安全；

**post：**

①请求参数不会在地址栏中显示，会封装在请求体中；

②请求参数的长度没有限制；

③较为安全；

### 注意： ###

表单项中的数据要想被提交就必须指定name属性；

### 代码示例： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>表单</title>
    	</head>
    	<body>
    		<form>
    			用户名：<input name="username" /><br />
    			密码：<input name="password" /><br />
    			<input type="submit" name="login" id="login" value="登录" />
    		</form>
    	</body>
    </html>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2][]

## 2、表单项input ##

可通过不同的type取值改变元素展示的样式；

### text ###

文本输入框（默认）；

### password ###

密码输入框；

### radio ###

单选框

**注意：**

①要想使多个单选框实现单选的效果，则必须设置相同的name值；

②一般会给每一个单选框一个value值，指定其被选中后提交的值；

③checked属性，用来指定默认值；

### checkbox ###

复选框

**注意：**

①一般会给每一个单选框提供value属性，指定被选中后提交的值；

②checked属性，用来指定默认值；

### file ###

文件选择框

### hidden ###

隐藏域，用于提交一些信息；

### 按钮 ###

submit提交按钮；

button普通按钮；

image图片按钮；

### label ###

指定输入项的文字描述信息；

**注意：**

label的for属性一般会和input的id属性值对应，如果对应了，则点击label区域，会让input输入框获取焦点；

### 代码示例： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>表单</title>
    	</head>
    	<body>
    		<form>
    			账号：<input name="username" /><br />
    			密码：<input name="password" /><br />
    			头像：<input type="file" name="file" /><br />
    			隐藏域：<input type="hidden" /><br />
    			职业（单选）：<br />
    			学生<input type="radio" name="radio" value="学生"/>
    			教师<input type="radio" name="radio" value="教师"/>
    			校长<input type="radio" name="radio" value="校长"/><br />
    			爱好（多选）：<br />
    			运动<input type="checkbox" name="radio" value="运动"/>
    			读书<input type="checkbox" name="radio" value="读书"/>
    			Java<input type="checkbox" name="radio" value="Java"/><br />
    			
    		<input type="submit" name="login" id="login" value="提交" />
    		<input type="button" name="login" id="common" value="普通按钮" />
    		<input type="image" name="login" id="image" value="图片按钮" />
    		</form>
    	</body>
    </html>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3][]

## 3、表单项select ##

下拉列表

### 代码示例： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>列表</title>
    	</head>
    	<body>
    		<select>
    			<option value ="0">--请选择--</option>
    			<option value ="1">北京</option>
    			<option value ="2">上海</option>
    			<option value ="3">杭州</option>
    		</select>
    	</body>
    </html>

### 运行结果： ###

![20190824163725398.jpg][]

## 4、表单项textarea ##

文本域

cols指定列数，rows指定行数；

### 代码示例： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>文本域</title>
    	</head>
    	<body>
    		<textarea cols="20" rows="20">
    			这是文本域啊！这是文本域啊！这是文本域啊！
    			这是文本域啊！这是文本域啊！这是文本域啊！
    			这是文本域啊！这是文本域啊！这是文本域啊！
    			这是文本域啊！这是文本域啊！这是文本域啊！
    			这是文本域啊！这是文本域啊！这是文本域啊！
    			这是文本域啊！这是文本域啊！这是文本域啊！
    			这是文本域啊！这是文本域啊！这是文本域啊！
    			这是文本域啊！这是文本域啊！这是文本域啊！
    			这是文本域啊！这是文本域啊！这是文本域啊！
    		</textarea>
    	</body>
    </html>

### 运行结果： ###

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4][] ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190823105526692.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190823113252390.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[20190823113602152.jpg]: https://img-blog.csdnimg.cn/20190823113602152.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190824155340637.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20190824163415483.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[20190824163725398.jpg]: https://img-blog.csdnimg.cn/20190824163725398.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20190824164000504.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70