html入门学习---常用标签

短命女 2023-10-13 11:03 24阅读 0赞

## 什么是HTML ##

HyperTextMarkupLanguage:超文本标记语言  
作用：负责搭建页面结构和内容  
超文本：不仅仅是文本，还包括多媒体（音频、视频）  
结构：  
<标签名>标签内容</标签名>  
or  
<标签名/>

## 常用文本标签 ##

### 标题标签 ###

h1~h6:一级标题标签到六级标题标签  
特点：独占一行  
字体加粗  
自带行间距

<h1>一级标题标签</h1>
    <h2>二级标题标签</h2>

### 段落标签 ###

p:段落  
特点：独占一行，自带上下行间距

### 加粗标签 ###

b:加粗  
特点：字体加粗

### 斜体标签 ###

i:斜体  
特点：字体变斜体样式

### 下划线 ###

u:字体下方有线条

### 删除线 ###

s:字体上有线条，表示删除

### hr水平分割线 ###

<hr>

### br换行符 ###

<br>

### 列表标签 ###

有序列表：ol（ordered list）和li

无序列表：ul（unordered list）和li

列表嵌套：有序列表和无序列表可以任意无限嵌套

<ol>
    	<li>计算机专业</li>
    	<ul>
    		<li>计科1班</li>
    		<li>计科2班</li>
    	</ul>
    	<li>数学系</li>
    	<ul>
    		<li>数学与应用数学1班</li>
    		<li>数学与应用数学2班</li>
    	</ul>
    </ol>

### 图片标签img ###

标签名：img  
**属性**：

1.  src：资源路径
2.  相对路径：访问站内资源使用
    
     *  资源与页面在同级目录：./资源名—其中‘./’可以省略
     *  资源在页面的上级目录：…/资源名
     *  资源在页面的下级目录：文件名/资源名
3.  绝对路径：访问站外资源使用。从http或https开始的网站绝对路径和从盘符开始的本级绝对路径。会存在图片盗链问题（图片找不到）
4.  alt:当图片无法正常显示时显示的文本内容
5.  title:当鼠标悬停在图片上时显示的文本内容
6.  width/height:设置图片的宽度和高度

### 超链接a ###

href:资源路径，作用类似图片的src属性

### 表格标签 ###

相关标签：table表格、tr行、td列、caption表标题、th表头  
相关属性：border边框、colspan跨列、rowspan跨行  
特点：表标题—居中显示，表头—居中，加粗

<table border="1" cellspacing="0" cellpadding="">
    	<caption>学生基本信息表</caption>
    	<tr>
    		<th>学号</th>
    		<th>姓名</th>
    		<th>班级</th>
    		<th>性别</th>
    		<th>年龄</th>
    	</tr>
    	<tr>
    		<td>2020115101</td>
    		<td>Tom</td>
    		<td>计科1班</td>
    		<td>男</td>
    		<td>23</td>
    	</tr>
    	<tr>
    		<td>2020115101</td>
    		<td>Tom</td>
    		<td>计科1班</td>
    		<td>男</td>
    		<td>23</td>
    	</tr>
    	<tr>
    		<td>2020115101</td>
    		<td>Tom</td>
    		<td>计科1班</td>
    		<td>男</td>
    		<td>23</td>
    	</tr>
    	<tr>
    		<td>2020115101</td>
    		<td>Tom</td>
    		<td>计科1班</td>
    		<td>男</td>
    		<td>23</td>
    	</tr>
    </table>

### input标签 ###

属性:type–类型

*  text：文本输入框
 *  password：密码输入框
 *  radio:单选框
 *  checkbox:复选框
 *  file:文件选择框
 *  date:日期选择器

用户名：<input type="text" value="" placeholder="请输入用户名"/>
    		密码：<input type="password" name="" id="" placeholder="请输入密码" />
    		性别：
    		
    		<input type="radio" name="gender" id="" value="" />男
    		<input type="radio" checked name="gender" id="" value="" />女
    		爱好：
    		
    		<input type="checkbox" name="hobby" id="" value="" />篮球
    		<input type="checkbox" name="hobby" id="" value="" />音乐
    		<input type="checkbox" name="hobby" id="" value="" />羽毛球
    		<input type="checkbox" name="hobby" id="" value="" />看美女
    		<input type="checkbox" name="hobby" id="" value="" />rap
    		照片：
    		<input type="file" name="" id="" value="" />
    		出生日期：
    		<input type="date" name="" id="" value="" />

### 下拉框 ###

select标签

出生地：
    	<select name="">
    		<option value="">云南省</option>
    		<option value="">四川省</option>
    		<option selected value="">湖北省</option>
    		<option value="">湖南省</option>
    		<option value="">重庆市</option>
    	</select>

### 按钮 ###

#### 提交按钮 ####

<input type="submit" name="" id="" value="提交1" />
    <button type="submit">提交2</button>

#### 重置按钮 ####

<input type="reset" name="" id="" value="重置1" />
    <button type="reset">重置2</button>

#### 自定义按钮 ####

<input type="button" name="" id="" value="自定义按钮1" />
    <button type="button">自定义按钮2</button>