# Web学习

**Repository Path**: fddqn/web-learning

## Basic Information

- **Project Name**: Web学习
- **Description**: 托管
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-10-15
- **Last Updated**: 2024-11-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

[TOC]

# 1. HTML常用标签

## 1.1 标题标签

```html
  <h1>h1标题标签</h1>	<!-- 标题一共，六级选 -->
  <h2>h2标题标签</h2>	<!-- 文字加粗独占一行 -->
  <h3>h3标题标签</h3>	<!-- 由大到小依次减 -->
  <h4>h4标题标签</h4>	<!-- 由重到轻随之变 -->
  <h5>h5标题标签</h5>
  <h6>h6标题标签</h6>
```

## 1.2 段落标签

```html
<p>这是一个段落</p>
```

## 1.3 换行标签

```html
<br /> <!--强制换行-->
```

## 1.4 文本格式化标签

```html
<strong>加粗</strong>		<b>加粗</b>		
<em>倾斜</em>				<i>倾斜</i>
<del>删除线</del>			<s>删除线</s>
<ins>下划线</ins>			<u>下划线</u>
```

## 1.5 div和span标签

```html
<div>独占一行</div> <!--一般用于布局-->
<span></span>
```

## 1.6 图像标签

### 	1.相对路径

```html
<img src="img.jpg"/> 	<!--同级路径-->
<img src="/img/img.jpg"/>	<!--下级路径-->
<img src="../img/img.jpg"/>	<!--上级路径-->
```

### 	2.绝对路径

```html
<img src="D:\img\img.jpg"/>
<img src="https://www.example.com/img.jpg"/>
```

## 1.7 超链接标签

属性：

href：为跳转地址

target：_self(默认 当前窗口打开页面)	_blank(新窗口打开)

```html
<a href="#">内容</a> <!--#表示空链接-->
```

锚点链接写法

跳转位置添加 id选择器选择器

```html
<a href="#two">1.例子</a>
```

## 1.8 注释

可以使用快捷键：Ctrl + /

```html
<!--注释内容-->
```

## 1.9 特殊字符

需要在网页中显示特殊字符

```html
 	<!--空格符-->		&nbsp;
<	<!--小于号-->		&lt;
>	<!--大于号-->		&gt;
&	<!--和号-->		 &amp;
￥	<!--人民币-->		&yen;
©	<!--版权-->		 &copy;
®	<!--注册商标-->		&reg;
°	<!--摄氏度-->		 &deg;
±	<!--正负号-->		 &plusmn;
✖	<!--乘号-->		  &times;
➗	<!--除号-->		  &divide;
<!--平方2上标-->	 &sup2;
<!--立方3上标-->	 &sup3;
```

# 2.HTML标签（下）

## 2.1表格标签

​	作用：用于展示数据

### 1.表格的语法

```html
<table>	<!--定义表格标签-->
    <tr>	<!--定义表格中的行-->
    	<td>单元格的文字</td>	<!--定义单元格-->
        .....
    </tr>
</table>
```

### 2.代码及效果

```html
<table>
    <tr><td>姓名</td><td>语文</td><td>数学</td><td>英语</td></tr>

    <tr><td>张三</td><td>90</td><td>85</td><td>88</td></tr>

    <tr><td>王五</td><td>90</td><td>85</td><td>88</td></tr>

    <tr><td>李四</td><td>90</td><td>85</td><td>88</td></tr>
</table>
```

![](hhttps://gitee.com/fddqn/web-learning/raw/master/upload-img/%E8%A1%A8%E6%A0%BC.png)

## 2.2表头单元格标签

th标签表示HTML表头部分

==一般为表格第一行或第一列，表头单元格文本加粗居中显示==

```html
<table>
    <tr><th>姓名</th><th>语文</th><th>数学</th><th>英语</th></tr>
  
    <tr><td>张三</td><td>90</td><td>85</td><td>88</td></tr>
  
    <tr><td>王五</td><td>90</td><td>85</td><td>88</td></tr>
  
    <tr><td>李四</td><td>90</td><td>85</td><td>88</td></tr>
  </table>
```

![](https://gitee.com/fddqn/web-learning/raw/master/upload-img/%E8%A1%A8%E6%A0%BC2.png)

## 2.3表格属性

实际开发一般用不到，通常使用css设置

| 属性名      | 属性值              | 描述                                        |
| :---------- | ------------------- | ------------------------------------------- |
| align       | left、center、right | 规定表格相对周围元素的对其方式              |
| border      | 1或”“               | 规定表格是否拥有边框默认为”“，表示无边框    |
| cellpadding | 像素值              | 规定单元边沿与其内容之间的空白，默认为1px。 |
| cellspacing | 像素值              | 规定单元格之间的空白，默认2px。             |
| width       | 像素值或百分比      | 规定表格的宽度                              |
| height      | 像素值或百分比      | 规定表格的高度                              |

代码

```html
 <table align="center" border="1" cellpadding="10" cellspacing="0" width="300" height="150">
    <tr><th>姓名</th><th>语文</th><th>数学</th><th>英语</th></tr>
  
    <tr><td>张三</td><td>90</td><td>85</td><td>88</td></tr>
  
    <tr><td>王五</td><td>90</td><td>85</td><td>88</td></tr>
  
    <tr><td>李四</td><td>90</td><td>85</td><td>88</td></tr>
  </table>
```

![](https://gitee.com/fddqn/web-learning/raw/master/upload-img/%E8%A1%A8%E6%A0%BC3.png)

## 2.4表格结构标签

thead内部必须包含tr标签

```html
<table>
    <thead><!--表格头部区域开始-->
      <tr><th>姓名</th><th>语文</th><th>数学</th><th>英语</th></tr>
    </thead><!--表格头部区域结束-->

    <tbody><!--表格主体区域开始-->
      <tr><td>张三</td><td>90</td><td>85</td><td>88</td></tr>
    </tbody><!--表格主体区域结束-->
  </table>
```

## 2.5合并单元格

![image-20241126135122065](https://gitee.com/fddqn/web-learning/raw/master/upload-img/%E4%B8%AA%E4%BA%BA%E7%AE%80%E5%8E%86.png)

### 1.合并单元格方式

跨行合并：rowspan="合并单元格数"

跨列合并：colspan="单元格合并数"

### 2.目标单元格

![image-20241126140529423](https://gitee.com/fddqn/web-learning/raw/master/upload-img/%E5%90%88%E5%B9%B6%E5%8D%95%E5%85%83%E6%A0%BC.png)

## 2.6列表标签

### 1.无序列表

ul标签中只能放li标签

li标签中可以放任何标签

```html
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>
```

### 2.有序列表

```html
<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>
```

### 3.自定义列表

```html
<dl>
    <td>名词1</td>
    <dd>名词解释1</dd>
    <dd>名词解释2</dd>
</dl>
```

## 2.7表单标签

组成：表单域、表单控件、提示信息

### 1.表单域

method：post/get

```html

<form action="url地址" method="提交方式" name="表单域昵称">
	表单控件区域
</form>
```

### 2.表单控件

```html
<!--input: 输入表单元素-->
<input type="属性值">
```

![image-20241130164003157](https://gitee.com/fddqn/web-learning/raw/master/upload-img/input%E5%B1%9E%E6%80%A7.png)

![image-20241130165656383](https://gitee.com/fddqn/web-learning/raw/master/upload-img/input%E5%B1%9E%E6%80%A72.png)

#### 1.label标签

![image-20241130170715896](https://gitee.com/fddqn/web-learning/raw/master/upload-img/label%E6%A0%87%E7%AD%BE.png)

select: 下拉表单元素

textarea: 文本域元素

```html

```