HTML入门级，新手必备基础知识[可做笔记收藏]

HTML标签

前言：

本文总结了HTML的基本概念和使用规则，可以收藏当作笔记，想不起来的时候翻阅查看，但如果想真正掌握，还需要动手写代码，学编程一定要实践！！！实践！！！实践！！！（重要的事情说三遍）

什么是HTML，为什么要学

“Html是超文本标记语言，是用来描述web文档的一种标记语言。使用标签作为页面的开始和结束部分：1、html通常被称为静态网页；2、HTML是带html或Htm扩展名的文件…
这你们都看的多了，不给你们正经说了，大白话就是你想做网页，做前端，就得用HTML，它是基础中的基础。

一、段落标签

1.标题标签

一共6级
<h1> </h1> <h2> </h2>

2.换行标签

< br >

3.水平分割线

<hr>

二、文本格式化标签

1.加粗

<b> <strong>

2.下划线

<u> <ins>

3.倾斜

<i> <em>

4.删除线

<s> <del>

三、媒体格式化标签

1.图片标签

<img src=" " alt=" ">
可以有多个属性，用空格隔开

属性

1. src是路径属性
   路径：返回上一级是…/ 上两级是…/…/
   下一级直接写文件夹名称 eg. images/
2. alt是替换文本
   当图片加载成功时不显示alt内容
   图片加载失败显示alt内容
3. title 是提示文本
   当鼠标悬停时，才显示文本
   注意：title属性不仅可以用于图片标签，还可用于其他标签
4. width 和 height 设置宽度和高度
   写一个就可以，另一个会等比变化

2.音频标签

<audio src=" " controls> </audio>
属性

1. src 音频路径
2. controls 显示播放控件
3. autoplay 自动播放
4. loop 循环播放

注意：音频标签目前支持三种格式：MP3,Wav,Ogg

3.视频标签

属性

1. src 音频路径
2. controls 显示播放控件
3. autoplay 自动播放 (谷歌浏览器配合 muted 实现静音播放）
4. loop 循环播放

4.链接标签

<a href=" "> 超链接 </a>
开发初期还不知道跳转地址时，href=“#”(#代表空链接）
属性
href 链接地址
target
1. _self 默认值，在当前窗口跳转（覆盖原网页）
2. _blank 在空白页面跳转（保留原页面）

三、列表标签

1.无序列表

1. 标签组成：、

标签	说明
ui	表示无序列表整体，用于包裹li标签
li	表示无序列表的每一项，用于包含每一行的内容

2. 显示特点：
   圆点显示

3. 注意点：
   ul标签中只允许包含li标签
   li标签可以包含任意内容

2.有序列表

1. 标签组成：

标签	说明
oi	表示有序列表整体，用于包裹li标签
li	表示有序列表的每一项，用于包含每一行的内容

2. 显示特点：
   序号标识

3. 注意点：
   ol标签中只允许包含li标签
   li标签可以包含任意内容

3.自定义列表

1. 标签组成：

标签	说明
dl	表示自定义列表整体，用于包裹dt/dd标签
dt	表示自定义列表的主题
dd	表示自定义列表针对主题的每一项内容

2. 显示特点：
   dd前会默认显示缩进效果

3. 注意点：
   dl标签中只允许包含 dt/dd标签
   dt/dd标签可以包含任意内容

四、表格标签

1.基本标签

1. 标签组成：

标签	说明
table	表格整体，包裹tr
tr	表格每行，包裹td
td	表格单元格，包裹内容

2. 注意点：
   包裹关系：table>tr>td

2.相关属性

常见相关属性：

属性名	属性值	属性效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

注意点：实际开发用CSS设置

3.表格标题和表格单元格标签

标签名	名称	说明
caption	表格大标题	默认在表格整体顶部居中的位置
th	表头单元格	通常用于表格第一行，默认文字加粗并居中

注意点；

1. caption标签在table标签内部
2. th用于替换td

4.合并单元格

步骤：

1. 明确合并哪几个单元格
2. 通过左上原则，确定保留谁，删除谁
   上下合并，只保留最上边的
   左右合并，只保留最左边的
   3.给保留的单元格设置：跨行合并或者跨列合并

属性名	属性值	属性效果
rowspan	合并单元格个数	跨行合并，垂直合并
colspan	合并单元格个数	跨列合并，水平合并

注意点：
只有同一结构标签中的单元格才能合并（thead,tbody,tfoot)

五、表单标签

1.input系列标签

1. 使用场景：网页显示收集用户信息的表单效果
2. 标签名：input
   input标签可以通过type属性值的不同，展示不同效果
   3.type属性值：

标签名	type属性值	说明	常用属性	说明
input	text	文本框，用于输入单行文本	placeholder	占位符，提示用户输入内容显示
input	password	密码框，写的内容用圆点显示	placeholder	占位符，提示用户输入内容显示
input	radio	单选框，用于单选框	name；checked	分组，拥有相同name属性值的单选框为一组，一组同时只能有一个被选中；
input	checkbox	多选框，用于多选多	checked	默认选中
input	file	文件选择，用于之后上传文件	multiple	多文件选择
input	submit	提交按钮,能提交后台	form；value	必须在表单域标签内使用；给按钮添加显示信息
input	reset	重置按钮	form	必须在表单域标签内使用
input	button	普通按钮，默认无功能，之后配合js添加功能	value	给按钮添加显示信息

2.button按钮标签

type属性值：（同input)

标签名	type属性值	说明	常用属性	说明
button	submit	提交按钮,能提交后台	form；value	必须在表单域标签内使用；给按钮添加显示信息
button	reset	重置按钮	form	必须在表单域标签内使用
button	button	普通按钮，默认无功能，之后配合js添加功能	value	给按钮添加显示信息

注意点：

1. 谷歌浏览器中默认button是提交按钮
2. button标签双标签，便于包裹：文字，图片

3.select下拉菜单标签

1.标签组成：
select标签：下拉菜单的整体
option标签：下拉菜单的每一项
2.常见属性：
selected ：下拉菜单的默认选中

4.textarea文本域标签

标签名：textarea

注意点：
实际开发用css设置

5.label标签

1.使用场景：用于绑定内容和标签标签的关系
2.使用方法：

1. 直接用label标签把表单标签和内容一起包裹起来
2. 把label标签的for属性删除即可

六、语义化标签（了解，电脑端不用）

特殊：没有语义的布局标签

1. div标签：一行只显示一个（独占一行）
2. span标签：一行显示多个

有语义标签–手机端常用标签

标签名	语义
header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
section	网页区块
artical	网页文章

七、字符实体

作用：在网页中显示特殊符号

1. 网页不认识多个空格，只认识一个

空格字符实体： & nbsp ; (中间没有空格）