XiYuJing|文章:HTML学习

[[ slide_text ]]

[[item.c]]

HTML学习

发布时间：2022年09月29日 作者：靖华来源：XiYuJing

HTML

# HTML介绍

## HTML简介：

超文本标记语言，是一种标识性的语言。它包括一系列标记标签，通过这些标记标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。

### 标签：

HTML标签也可以称为元素，不同的标签有不同的功能解释，用来表示不同的功能。每个标签都是由一对尖括号包裹的单词组成。 一般的标签是成对出现的，一般称第一个标签是开始标签，第二个是结束标签。开始和结束标签也称为开放标签和闭合标签。

### W3C：

HTML由 W3C制定的，W3C(World Wide Web Consortium)是一个非盈利性组织。在中国的北京航空航天大学设有分部

### 页面整体分为两部分：

![](http://43.143.99.137:8888/group1/M00/00/01/CgAECmM1sU-AZS9IAAPjveBTDqk1124894)一部分是head部分，主要是页面的整体信息和配置，内容不会出现在浏览器内部。
一部分是body部分，这部分内容则会在浏览器中展示出来

## 常见标签

### 分类

![](http://43.143.99.137:8888/group1/M00/00/01/CgAECmM1sWaAPCIfAADEO-SuQ-Y1018633)

### 标签及使用

#### 一·标签

1.  由一对尖括号包裹单词构成

如：<body>

2.  标签不区分大小写，推荐小写

#### 二·嵌套

标签可以嵌套，但不能交叉嵌套

![undefined](http://43.143.99.137:8888/group1/M00/00/01/CgAECmM1saaAVowYAAArmVohUYw8344750 "undefined")

![](http://43.143.99.137:8888/group1/M00/00/01/CgAECmM1sbOACh2ZAAAt1kwyDmo0072452)

#### 三·使用规则

开始标签--标签体--结束标签

如：<a> 百度 </a>

自闭合标签直接使用，

如：

换行：<br>

水平线：<hr>

输入框：<input>

图片：<img>

#### 四·标签属性

通常为键值对形式出现，

eg：color=“red"

属性只能出现在开始标签和自闭合标签内，

属性名字全部小写，属性值必须用单引号或双引号包裹，

如果属性名和属性值完全一样，直接写属性名即可，

eg: "readonly"(input标签属性)

### 标签介绍

#### 块级（块状）标签和内联（行内）标签：

1.  块级标签：<p>/<h1>/<table>/<ol>/<ul>/<form>/<div>

2.  内联标签：<a>/<input/>/<img/>/<sub>/<sup>/<textarea>/<span>

3.  块级元素的特点：

1.  总在新行上开始。
    2.  高度，行高以及外边距和内边距都可控制。
    3.  宽度缺省，则是它容器的100%。
    4.  它可以容纳内联元素和其他块元素

4.  inline元素特点：

1.  和其他元素在一行上。
    2.  高，行高以及外边距和内边距不可改变。
    3.  宽度就是其文字或图片宽度，不可改变。
    4.  内联元素只能容纳文本或者其他内联元素

5.  行内元素注意：

1.  设置宽度width无效
    2.  设置高度height无效
    3.  设置margin只有左右margin有效，上下无效
    4.  设置padding只有左右padding有效，上下则无效，注意元素范围是增大了，但是对元素周围的内容是没影的。

#### 标题标签

一般用在文章的标题，有h1~h6

#### 段落标签

用于文章段落

#### 列表标签

列表标签分为：有序列表、无序列表以及定义

#### div标签

分割一块区域

#### 图片标签

用于在网页中插入图片

#### 粗体/斜体标签

用于网页中突出字体

#### 超链接标签

用于链接其他资源，可以用来跳转或者锚点

#### 文字标签

span标签是纯文本，配合CSS则可以展示不同
效果

### HTML转义

![](http://43.143.99.137:8888/group1/M00/00/01/CgAECmM1scKALjjdAAEACVF4tOA3215188)

## 行内元素和块级元素:

![](http://43.143.99.137:8888/group1/M00/00/01/CgAECmM1sc2AWEVNAAKcFA9gMEQ7492967)

行内元素对文字可以提供更加丰富的操作空间

块级元素更多是用于整体页面的构造

![](http://43.143.99.137:8888/group1/M00/00/01/CgAECmM1sdWAewCtAAJOnHPsvbQ5862118)

## 表格

### 表格解释：

#### 什么是表格：
		和大家常见的excel表格类似

### 作用：

表格的作用主要以表格形式来展示数据

### 表格主体内容：

主要分为表头，单元格，表角

## 表格内容：

表格标签：<table>(包裹整个表格)

表头标签：<thead>(默认加粗，居中)

表身：<tbody>(正规要写，实际中常会省略)

表脚：<tfoot> (结尾，一般没写)

![](http://43.143.99.137:8888/group1/M00/00/01/CgAECmM1seCAefbcAAFRBX8AZ1c5427936)

## 表单

### 介绍：

表单是搜集用户数据信息的各种表单元素的集合区域

### 作用：

用于收取用户数据并[***向后台发送***]()，前后交互的方式之一

### 应用：

表单常应用于 [登录注册，搜索，文件上传]()等

### 表单属性：

#### action

提交时候的地址，默认使用当前页面

#### method

提交时候的方法，有get 和 post 两种方法，默认使用 get

#### entype

设置编码格式 有三种
默认：application/x-www-form-urlencoded
        上传文件：multipart/form-data
        不建议使用：text/plain

![](http://43.143.99.137:8888/group1/M00/00/01/CgAECmM1seyAP0KcAAP6lMOEY3E3562769)

### input输入框常用的属性

#### type属性

![](http://43.143.99.137:8888/group1/M00/00/01/CgAECmM1sfiALBeDAAGcaHDIv3c0176498)

#### name属性

表单与后台交互时最重要的一个属性，要求input标签都带上
表单提交项的键， 与id不同，name属性是和服务器通信时使用的名字，而id属性是浏览器端使用的名字，该属性主要方便客户编程而在css和js中使用

#### value属性

表单提交项的值 。input的值，单选多选下拉框必须设置value属性，这样后台才能获得你选中的到底是哪个或哪几个选项

#### 其他

placeholder：  提高用户体验度
readonly：只读
disabled：禁用

### select下拉框常用的属性

#### option 下拉选项

下拉框的基本标签，有多少个option 就有多少个下拉选项

#### size下拉框显示

表示下拉框，显示多少个，默认为一个

#### name下拉框的名字

表示下拉框向后台提交数据的时候，所传的名字

#### selected 下拉状态

表示选中某个下拉选项

### 表单的其他标签

fieldset：给表单设置分组

legend：设置分组表单的标题

label：题高用户体验度(如：设置单选按钮的名字)

![](http://43.143.99.137:8888/group1/M00/00/01/CgAECmM1sgaANtNOAAF2DDzFuks2934727)

你觉得文章怎么样

已浏览 79 次，0 条评论