HTML基础

1. 标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。

<h1>这是一个标题</h1> 
<h2>这是一个标题</h2> 
<h3>这是一个标题</h3>

2.段落

HTML 段落是通过标签<p>来定义的。

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

3.折行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 < br > 标签：

<p>这个<br>段落<br>演示了分行的效果</p>

4.水平线

<hr> 标签在 HTML 页面中创建水平线。

5.注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

注释写法如下:

6.列表

6.1无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表使用<ul>标签

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

6.2有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于<ol>标签。每个列表项始于<li>标签。

列表项使用数字来标记。

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

7.div和span标签

7.1div 标签

<div>是一个块级元素，通常与CSS配合使用，用于页面布局

<div>标签可以把文档分割为独立的，不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

<div>是一个块级元素。这意味着它的内容自动地开始新的一行。实际上，换行是<div>固有的唯一格式表现。可以通过<div>的class或id应用和外的样式

<div>content</div>

常用属性：

7.2span 标签

<span>被用来组合文档中的行内元素，审判没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

<span>content</span>

8 格式化标签

8.1font

规定文本的字体颜色、字体尺寸、字体样式

常见属性：color（颜色名、十六进制，rgb）

​ size（字体大小）

​ face（字体风格）

8.2pre

定义预格式化的文本。被包围在pre的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

8.3文本标签

<b>加粗文本</b> 或者<strong>加粗文本</strong>
<i>斜体文本</i>
<u>下划线<u/>
<del>删除线<del/>
<code>电脑自动输出</code>
<sub> 下标</sub> 和 <sup> 上标</sup>

9.超链接a标签

HTML 链接是通过标签<a>来定义的。

HTML 链接由<a>标签定义。链接的地址在 href 属性中指定

使用 target 属性，

常用属性

​ href： 必须属性，链接的地址在 href 属性中指定

target ：你可以定义被链接的文档在何处显示。

​ _self 表示当前页面（默认）

​ _blank 表示打开新页面进行跳转

9.1a标签实现锚点

​ 利用a标签的name属性：

<a name="top"></a>

​ 利用一般标签的id属性：div id=””, a id=””等；

<div id="top"> </div>、<a id="top"><a/>

​ 锚点定位，#别忘记了

<a href="#top">返回首部<a/>

10. 图像标签 img

在 HTML 中，图像由<img> 标签定义。

要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。

img标签，是一个行内标签，不会自动换行

<img src="" alt="" />

必须属性

常用属性

11.表格

<tab></tab>标签定义HTML表格
<tr></tr>标签定义表格的行，tr元素包含一个或者多个td\th
<td></td>标签定义HTML表格中的标准单元格
<th></th>标签定义表格内的表头单元格。th元素内部的文本通常会呈现为剧中的粗体文本，而td元素内的文本通常是左对齐的普通文本

简单的HTML表格table元素以及一个或多个tr、hd或td元素组成。

理解：table相当于表格的外框，tr相当于行，td为一个单元格，th为有标题作用的单元格，同时th中的内容有加粗效果。

table标签常用属性

table标签中，width:px、%

​ % ：参考的是上一级元素的宽度，如果上一级元素未设置，则参考屏幕宽度

height：表格的高度

tr标签常用属性

css样式：

​ border-collapse：collapse; 合并表格边框

​ 合并单元格

​ 的colspan和rowspan分别规定单元格横跨的列数和行数

​ 纵向合并：rowspan

​ 横向合并：colspan

12.表单

12.1form标签

表单是一个包含表单元素的区域。

表单使用表单标签 <form> 来设置:

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

注：

• 表单用于向服务器传输数据，form元素是块级元素，其前后会产生折行。
• 表单提交时，必须设置表单元素的name属性值，否则无法获取数据
• 表单需要结合表单元素去使用

常用属性：

method：表单提交方式：get、post

​ get：默认，主动的获取方式，数据放在url上(浏览器中地址栏的后面)，数据的容量有限，安全性差，有缓存(会将数据保存在浏览器中)

​ post：数据放在请求时体中，数据量理论上没有限制，相对安全，没有缓存。post请求需要服务器的支持

所有标签都有的属性：

• id属性：用来标识元素的唯一性
• name属性：提交数据时的参数名
• stytle属性：设置元素的行内样式（具体样式）
• class属性：设置元素的样式名

12.2input标签

<input>标签用于收集用户信息。

常用属性：

注：

1. 单选框需要通过name属性设置为一组，复选框也是一样的
2. 如果是上传文件的表单，则表单需要设置一个属性 enctype=”multipart/form-data”,提交方式为post请求
3. 没有name属性是无法提交数据的！！！

文本域（Text Fields）

文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

浏览器显示如下：

First name:
Last name:

注意:表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。

密码字段

密码字段通过标签<input type="password"> 来定义:

<form>
Password: <input type="password" name="pwd">
</form>

浏览器显示效果如下:

Password:

注意:密码字段字符不会明文显示，而是以星号或圆点替代。

单选按钮（Radio Buttons）

<input type="radio"> 标签定义了表单单选框选项

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

浏览器显示效果如下:

Male
Female

复选框（Checkboxes）

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

浏览器显示效果如下:

I have a bike
I have a car

提交按钮(Submit Button)

<input type="submit"> 定义了提交按钮.

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

浏览器显示效果如下:

Username:

假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 “html_form_action.php” 的页面。该页面将显示出输入的结果。

12.3textarea标签

该标签定义多行的文本输入控件。文本区中可容纳无限数量的文本，可以通过cols和rows属性来规定text area的尺寸。cols规定文本区内的可见宽度。rows规定文本区内的可见行数。

<textarea>content<textarea/>

12.4lable标签

<lable>标签为input元素定义标注（标记）

lable元素不会呈现任何的特殊效果。

lable标签的for属性应当与相关元素的id属性相同，此时点击lable标签会自动为元素聚焦

12.5button标签

input按钮：

​ type=”button” 普通按钮

​ type=”submit” 提交按钮

​ type=”reset” 重置按钮

button按钮：

​ type=”button” 普通按钮

​ type=”submit”（默认） 提交按钮

​ type=”reset” 重置按钮

注：button按钮为双标签，标签之间可以添加内容（文本或标签等）

不给type的话 ：<button>按钮</button>————这个是”submit”（默认提交按钮，而不是普通按钮

12.6select标签

<select>用于定义下拉列表。

<select name="student" >				//下拉框 
	<option value ="">小学生</option>	  //下拉框的选项标签
	<option value="">中学生</option>
	<option value="">大学生</option>
</select>

select常用属性

option常见属性

13.HTML常见字符实体

	实体名称对大小写敏感！

虽然 html 不区分大小写，但实体字符对大小写敏感。

13.1标签的分类

​ HTML中标签元素三种不同的类型：块元素，行内元素，行内块元素

块级元素

​ 元素都从新的一行开始，并且其后的元素也另起一行;元素的高度、宽度、行高以及顶和底边距都可以设置；元素宽度在不设置情况下，是它本身父容器的100%（和父元素宽度一致），除非设定一个宽度。

html中常见的块级元素：`

行内元素

​ 和其他元素都在一行上；元素的高度、宽度及顶部和底部的边距不可设置；元素的宽度就是它包含的文字或者图片的宽度，不可改变。

html中常见的行内元素：

行内块元素

和其他元素都在一行上；元素的高度、宽度、行高以及顶部和底部的边距都可以设置。

img：用于标记网页中的图像 ，有属性src:图片资源路径 ，alt:提示信息 当图片加载失败 ，以指定文本形式代替图片显示
button：按钮
input：输入框，有属性type输入框类型，有属性值（text表示文本输入框，file文件选择器，password密码输入框，email邮箱输入框，number数字输入框，button按钮）。placeholder占位字符，用于提示输入框应该输入的内容。value表示输入框中的内容。name和后台服务器交互时，必须携带name属性，发送请求时的参数名。

单选 type=“radio” 表示一个单选选项处于同一组单选框只能选中一个值，将多个radio的name属性值设置为相同的值
type=”checkbox”复选框

label:和input标签绑定到一块使用，有属性for，属性值就是input输入框的id值。checked属性为标签选中状态
select:下拉列表
option:下拉选项

总结：

注:

以上是HTML重点知识的总结，如果文章有任何错误和建议，请各位大佬尽情评论留言！如果这篇文章对你有些许帮助，希望可爱亲切的您点个赞推荐一手，非常感谢啦！最后，感谢各位大佬们看到了这里！愿你韶华不负，青春无悔！