📝前言
本文主要是简要概括HTML的基本知识点，利于前端刚入门的小白了解HTML，如果有什么需要改进的地方还请各位大佬指出🤞
🤺作者简介：前端新人小白
🏡博客首页：我的学习笔记
🧗♀️近期目标：深入学习三剑客
目录
❤️写这篇文章是为了总结自己的学习，也希望可以帮助到更多的朋友更好入门前端❤️
一.🔔HTML是什么
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
通俗一点来说，我们所看到的网页的框架就是HTML中一系列的标签如：标题标签、段落标签、列表标签...所构成的。
就好比捏个小人🧍♂️，我们需要先捏好人的各个部位（标签）如：头👨、手💪、腿🦵，然后再将他们拼接成一个完整的小人（HTML）。
二.🧍♂️HTML的基本结构
上面我们说到的标签看来是十分主要滴🔔！！！但是在学习标签时，我们应该先来了解一下HTML的基本结构。
<!DOCTYPE html>为文档声明。咱们就先告诉解析器，咱们这个文档类型写的是HTML💕
三.👨💪🦵HTML标签
⛳基本标签
HTML标签
整个网页是从<html>这里开始的，然后到</html>结束。
such as 人从头开始从脚结束🧍♂️
head标签
网页的头部👨，描述了我们这个HTML文档的信息，但这部分不在浏览器中显示🙅♂️。
可以使用在<head>里面的标签主要有七种:
| <head>内部标签 | 说明 |
| <meta> | 定义网页的基本信息 |
| <title> | 定义网页的标题 |
| <style> | 定义CSS样式 |
| <link> | 链接外部CSS样式或脚本文件 |
| <script> | 定义脚本语言 |
| <base | 所有的链接标签的默认链接 |
body标签
页面的身子🧍♂️，定义网页展示的内容。
👇👇👇这里就需要我们往后学习更多的HTML标签去构建属于我们的网页啦。
⛳段落和文字
<!-- 标题标签 -->
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
<!-- 段落标签 -->
<p>HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
</p>
<!-- 换行标签 -->
<p>HTML的全称为超文本标记语言，是一种标记语言。<br>它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
</p>
<!-- 水平线 -->
<hr>
⛳列表
列表主要分为有序列表、无序列表和自定义列表
有序列表
主要由<ul>标签和<li>标签构成，列表的每一项前默认显示圆点标识
<!-- 无序列表 -->
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>
<ul>
<li>无序列表3.1</li>
<li>无序列表3.2</li>
<li>无序列表3.3</li>
</ul>
</li>
</ul>
无序列表
主要由<ol>标签和<li>标签构成，列表项目使用数字进行标记
<!-- 有序列表 -->
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
自定义列表
最外层的标签为 <dl></dl> , 一级标签为 <dt></dt> , 二级标签为 <dd></dd>
<!-- 自定义列表 -->
<dl>
<dt>配送方式</dt>
<dd>上面自提</dd>
<dd>211限时达</dd>
<dd>配送服务查询</dd>
<dt>支付方式</dt>
<dd>货到付款</dd>
<dd>在线支付</dd>
<dd>分期付款</dd>
</dl>
⛳表格
| <table> | 定义HTML表格 |
| <caption> | 定义表格标题 |
| <tr> | 定义表格行 |
| <th> | 定义表头 |
| <td> | 定义表格单元 |
<table>
<caption>表格标题</caption>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
<tr>
<td>表格1</td>
<td>表格</td>
<td>表格</td>
</tr>
<tr>
<td>表格2</td>
<td>表格</td>
<td>表格</td>
</tr>
</table>
⛳图像
HTML 图像是通过标签 <img> 来定义的。
| 属性 | 描述 |
| src | 显示图像的URL |
| alt | 图像替代文本 |
| title | 图像提示文本 |
| height | 图像高度 |
| width | 图像宽度 |
| border | 图像的边框粗细 |
<h3>使用img引用图像，src为路径</h3>
<img src="img_one.jpg">
<h3>alt是在图片无法显示时代替的文字</h3>
<img src="img_onee.jpg" alt="这是一张图片">
<h3>title为鼠标移到图片时提示的文字</h3>
<img src="img_one.jpg" title="这是一张图片">
<h3>width height border 即图片的长宽，边框的粗细</h3>
<img src="img_one.jpg" width="100px" height="50px" border="20">
⛳链接
HTML 链接是通过标签 <a> 来定义，用来实现页面的跳转。
| 属性 | 描述 |
| href | 链接指向页面的URL |
| target | 链接页面的打开方式 |
利用href实现超链接
<!-- 文本超链接 -->
<a href="https://www.baidu.com/">点击链接跳转到百度首页</a>
<!-- 图片超链接 -->
<a href="https://www.baidu.com/">
<img src="img_one.jpg" title="点击图片跳转到百度首页" width="200" height="100" />
</a>
target
- _top 跳出框架打开网页。
- _parent 在父窗口打开网页。
- _ framename 在指定的框架中打开网页。
- _self为默认值当前页面打开。
- _blank为在新窗口中打开方式。
⛳表单
表单由表单标签、表单域、表单按钮三个基本部分组成
| 表单标签 | 包含处理表单数据所用的URL以及数据提交到服务器的方式 |
| 表单域 | 包含文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等 |
| 表单按钮 | 包括提交按钮、复位(重置)按钮和一般按钮 |
表单属性
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox） 等等。
我们可以使用 <form> 标签来创建表单:
<form action="表单提交地址" method="提交方法">
… 文本框、按钮等表单元素…
</form>| 属性 | 描述 |
| name | 表单命名 |
| action | 表单数据提交的地址 |
| method | 表单HTTP提交方式 |
| target | 目标窗口的打开方式 |
| enctype | 设置表单信息提交的编码方式 |
表单对象
放在form 标签内的各种标签，有：input、textarea、select、option、button、label、otpgroup等
| type属性 | 控件名称 |
| text（默认值） | 文本框 |
| password | 密码框 |
| radio | 单选按钮 |
| checkbox | 复选框 |
| submit | 提交按钮 |
| reset | 重置按钮 |
| image | 图片提交按钮 |
| button | 普通按钮 |
| hidden | 隐藏文本框 |
| file | 文件上传框 |
<form>
<!-- input中type默认为text -->
账号：<input><br><br>
<!-- type="password" 表示密码文本框，其输入的内容以密文的形式出现 -->
密码：<input type="password"><br><br>
<!-- type="radio" 使用name属性可以让单选按钮进行分组 name相同时一次只能选择一个 -->
性别：<input type="radio" name="gender">男
<input type="radio" name="gender">女
<!-- checked表示默认选中 -->
<input type="radio" checked=“checked” name="gender">保密
<br><br>
<!-- type="checkbox" -->
爱好：<input type="checkbox" name="aihao" checked=“checked”>足球
<input type="checkbox" name="aihao">篮球
<input type="checkbox" name="aihao">羽毛球
<input type="checkbox" name="aihao">唱歌
<input type="checkbox" name="aihao">跳舞
<br><br>
<!-- type="image" 图片会被当作一个按钮 -->
图片按钮：<input type="image" src="img_one.jpg" height="50"><br><br>
<!-- type="button"在value属性中可以显示按钮的内容 -->
普通按钮：<input type="button" value="普通按钮"><br><br>
<!-- type="hidden" 隐藏域在页面不可见，但是可以随着表单一起提交给服务端-->
隐藏域：<input type="hidden"><br><br>
<!-- type="date" 可选择年月日-->
生日<input type="date"><br><br>
邮箱<input type="email"><br><br>
<!-- type="number"的input元素只能输入数字，并可以使用max和min属性限制数字范围 -->
数字<input type="number"><br><br>
<!-- reset表示重置按钮，会让表单回到默认值-->
重置按钮：<input type="reset" value="重置按钮"><br>
<!-- type="submit" 结合(form)表单域实现提交效果 在表单中submit点击之后会自从触发提交行为，
会向action指定的地址提交，请求方式为method指定的方式通常表单提交为post -->
提交按钮：<input type="submit" value="提交按钮"><br>
</form>
多行文本
文本区域textarea中可容纳无限数量的文本，cols 和 rows 属性来规定 textarea 的尺寸大小。
文本域：<textarea name="" id="" cols="30" rows="10"></textarea><br>
下拉列表
下拉列表由select和option两个标签配合使用。
<select>定义了下拉选项列表<option>定义下拉列表中的选项
<form action="" method="get">
<p>
请选择星期:
<select name="recourse">
<option value="星期一" selected>星期一</option>
<option value="星期二">星期二</option>
<option value="星期三">星期三</option>
<option value="星期四">星期四</option>
<option value="星期五">星期五</option>
<option value="星期六">星期六</option>
<option value="星期日">星期日</option>
</select>
</p>
</form>
扫一扫
79万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
