来看看喽）"/>
html 基础部分（总结很够详细，来看看喽）
2021年03月17日，我开始学习html了，一门新的语言，趁热打铁把学到的东西记录下来，供准备学习 html 的各位观看，也供自己查漏补缺。
目录
- 简介
- HTML是什么
- HTML基础文档介绍
- html的元数据
- HTML5 头文件
- html
- head
- body
- meta（了解）
- 元素分类
- 块状元素
- 内联元素
- 内联块状元素
- 常用元素介绍
- h1 （标题标签）
- p （大段文字）
- span （小段文本）
- div （一个盒子）
- i，em（倾斜）
- b，strong （加粗）
- br （换行标签）
- u（下划线）
- hr （分割线）
- s（删除线）
- abbr （缩略语）
- address
- sub，sup （下标记，上标记）
- pre 、code（存放代码）
- var （声明变量）
- kbd （键盘按键打印）
- samp （cmd代码打印）
- button （按钮标签）
- svg（矢量图形）
- 超链接
- a （超链接标签）
- 多媒体
- 引入图片
- background-image
- img
- 引入视频
- 引入音频
- 标签属性及相关
- 打开新网页的方法
- 布尔属性 控制
- 全局常用属性
- class
- id（唯一标识符）
- style
- title
- lang （语言）
- 转义字符
- 列表
- 无序列表
- 有序列表
- 自定义列表
- table（表格）
- 表单
- 简介
- 表单类型
- 表单格式
- enctype属性
- type属性
- 单行文本框 text
- 密码框 password
- 隐藏 hidden
- 分组操作 radio
- 复选框 checkbox
- 颜色选择器 color
- 时间选择器 date和month
- 邮箱 email
- 文件上传 file
- 数字控件 number
- 搜索框 search
- 提交按钮 submit
- 重置按钮 reset
- 普通按钮 button
- fieldset 分割表单
- 关联效果 label
- 多行文本框
- 下拉框
- 下拉单选框
- 下拉多选框
- 自动补全输入框
- 知识点整合实例代码
简介
HTML是什么
HTML，全称：Hyper Text Markup Language（超文本标记语言），简单来说，网页就是用HTML语言制作的。
HTML基础文档介绍
快捷键调出以下基本文档：
Shift+1+回车 或者 输入h，之后选择html：5 ，点回车
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 页面当前宽度等于我设备的宽度 按照1.0的倍率缩放 --><!-- viewport 让你的网页适配你的设备，例：相同页面使用手机和电脑切换 --><title>Document</title>
</head>
<body></body>
</html>
html的元数据
HTML5 头文件
我所用的html版本也就是当下基本大家都在用的HTML的5.0版本，简称H5，H5的头文件也就是开头声明的第一行：
<!DOCTYPE html>
document type html
文件 类型 html
头文件中各个元素含义说明：
<!-- charset=UTF-8表示文档中的字符的编码descriptiondescription也被使用在搜索引擎显示的结果页中keywords提供关键词给搜索引擎，根据不同的搜索词，查找到相关的网站,现在不推荐使用viewport定义了网页在不同端的显示效果<link rel="icon" href="/files/system/2017/02-21/22263393a2c9409464.jpg?version=8.6.13" type="image/x-icon" />网页图标的定义<link href="/static-dist/app/css/bootstrap.css?version=8.6.13" rel="stylesheet" />引入的css文件<script src="/static-dist/libs/html5shiv.js?version=8.6.13"></script>引入的js文件lang="en"为文档设置主语言--><script>alert('弹出框')</script>
html
<html></html>
是一个根元素，包含了整个完整的页面
head
<head></head>
是一个容器，通常里面包含的是关键字，页面描述，css文件和js的引入，字符集的声明，图标的引入等等
body
<body></body>
主题，包含了文字，图片，音频，视频等等
meta（了解）
<meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0">
meta 标签是 HTML 语言头部的一个辅助性标签，我们可以定义页面编码语言、搜索引擎优化、自动刷新并指向新的页面、控制页面缓冲、响应式视窗等等
元素分类
块状元素
在页面中以块的形式出现，相对于的内容也会出现在一行中（独行显示），其后面的内容会被挤到下一行去，对宽高进行单独设置。例如，div，h1，p标签都是块状元素。
<div style="height: 300px;">这是一个div的盒子标签</div><p>这是一个p标签</p>
内联元素
在页面中不会导致文本换行，通常用于在一堆文字中间出现超链接，或强调元素等，无法对宽高进行单独设置，元素内容有多高，标签就有多宽高。例如，span标签。
<span>这是span标签1</span><span>这是span标签2</span>
内联块状元素
在页面一行中可以显示多个，并且可以对他们宽高进行单独的设置。例如，img，input标签。
<img src="" alt=""><input type="text">
常用元素介绍
h1 （标题标签）
<h1>1级标题</h1><h2>2级标题</h2><h3>3级标题</h3><h4>4级标题</h4><h5>5级标题</h5><h6>6级标题</h6><!-- h1 ~ h6 标题标签 建议最好只对每个页面使用一次<h1> 这是顶级标题，所有其他标题位于层次结构中的下方。请确保在层次结构中以正确的顺序使用标题。不要使用<h3>来表示副标题，后面跟<h2>来表示副副标题 这是没有意义的，会导致奇怪的结果。在可用的六个标题级别中，应该只在每页使用不超过三个，建议将内容分散在多个页面上。
p （大段文字）
<p>通常用于表示大段的文字通常用于表示大段的文字通常用于表示大段的文字通常用于表示大段的文字通常用于表示大段的文字</p><!-- 通常用于表示大段的文字 -->
span （小段文本）
<span>这是一个小段文本的span标签</span>
div （一个盒子）
可以理解为一个盒子
<div class="" id=""> 这是一段放在div里的文本</div><!-- <div class="" id=""> -开始标签属性名="属性值" 空格 属性名="属性值"这是一段放在div里的文本 -内容</div> -结束标签
-->
i，em（倾斜）
文本字体倾斜
<i>用斜体表达的意义：外国文字，分类名称，技术术语</i> <em>也是倾斜的文字</em>
b，strong （加粗）
文本字体加粗
<b>用粗体表达的意义：关键字，产品名称，引导句</b><strong>也是加粗</strong>
br （换行标签）
<br />
u（下划线）
给文本加上下划线
<u>用来传达传统上用下划线表达的意义：专有名词，拼写错误</u>
hr （分割线）
在网页中显示一条分割线
<hr><!-- hr -分割线 -->
s（删除线）
在文本上加一道横线，告知用户此信息曾经有过但已过时或无法再次使用
<s>删除线</s>
abbr （缩略语）
默认带一个title，鼠标放置上方时会有气泡窗显示文本
自带下划线，下划线以连续点的形式呈现
<abbr title="这是缩略语的全部内容">略</abbr>
address
<address>这里面的内容通常表示的是联系方式</address>
sub，sup （下标记，上标记）
<sub>下标</sub><sup>上标</sup>
pre 、code（存放代码）
保留代码的换行，缩进，将代码完整的呈现出来，通常，pre会和code连用，一目了然地让你知道这里放的是一段代码
<pre><code>public static void bubble(int[] array) {for(int i=0;i<array.length-1;i++) {for(int j=0;j<array.length-1-i;j++) {if(array[j]>array[j+1]) {swap(array, j, j+1);}}}}</code></pre>
var （声明变量）
<!-- 用于标记具体的变量名 --><var>name</var>
kbd （键盘按键打印）
<!-- 用于标记输入电脑键盘的输入 --><kbd>Ctrl</kbd>
samp （cmd代码打印）
<!-- samp 用于标记计算机程序的输出 例如cmd--><pre><samp>PING mozilla (63.245.215.20): 56 data bytes64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>
button （按钮标签）
<button>按钮</button>
svg（矢量图形）
可以理解为，用代码画画
<svg t="1615948018132" class="icon" viewBox="0 0 1071 1024" version="1.1" xmlns=""p-id="5221" width="128" height="128"><pathd="M814.518427 465.473078a254.362469 254.362469 0 0 0-165.4636 60.972523 325.807371 325.807371 0 1 0-19.315723 370.954963A255.991506 255.991506 0 1 0 814.518427 465.473078z"fill="#FF3B61" p-id="5222"></path></svg>
超链接
a （超链接标签）
点击链接和图片来跳转到别的页面
<!-- <a href=""></a> --><!-- 超链接阔以链接文件(包括了html文件,文本文件)图像,声音,视频,下载 --><a href="/">超链接的文字</a><!-- a链接阔以看作是一个容器,同样又可以让一张图片具备跳转链接的能力 --><a href="/"><img width="100px" height="200px" src="./imgs/01be6c5e8aa690a801216518c2ae5d.jpg@2o.jpg" alt=""></a>
可以发邮件
<a href="./index.html">前往index.html</a><!-- a链接阔以用来发邮件 href="mailto:发给那个人的邮件地址"--><a href="mailto:123456789@qq?subject='邮箱的主题'">发起邮件</a>
可以设置下载按钮，当在网页里点击下载按钮时，将从href里访问所需图片的下载链接以完成下载
小贴士：尽量不要在页面上传.svg格式的文件，也要阻止别人在页面上传.svg格式的文件，容易被漏洞侵蚀。
<a href="/?product=firefox-latest-ssl&os=win64&lang=zh-CN"download="Firefox Setup 86.0.1.exe"><button>下载按钮</button></a>
a链接锚点（快速导航）：在页面中点击前往box后，网页链接将会跳转，链接后会增加#box文字，并在跳转的页面中，将“#”后的带有名称box的链接（这是box的a链接）显示在页面左上的位置
<a href="#box">前往box</a><!-- 这是a链接锚点的效果#锚点名 要与同一页面中的name的名字保持一致--><a href="" name="box">这是box的a链接</a><div class="box1"></div>
多媒体
引入图片
background-image
<head><style>.box1 {background-image: url('./imgs/01be6c5e8aa690a801216518c2ae5d.jpg@2o.jpg');/* 如果图片是为了作为背景的装饰效果,通常用background-image去控制 */height: 200px;/*在background-image中，由于图片是依附于文字(放了一堆文本)的背景，我们可以通过height(文字的高度)来控制图片显示的多少*/}</style>
</head><body><div class="box1">放了一堆文本</div></body>
img
<body><!-- 多媒体 图片 声音 视频 --><img src="./imgs/01be6c5e8aa690a801216518c2ae5d.jpg@.jpg" alt="图片在加载失败情况显示的文字"><img src="./imgs/01be6c5e8aa690a801216518c2ae5d.jpg@2o.jpg" height="150px" width="150px"><!-- <img src="./imgs/01be6c5e8aa690a801216518c2ae5d.jpg@2o.jpg"> --><!-- src 表示引用图片的地址alt 由于某种原因无法加载图像，普通浏览器也会在页面上显示alt 属性中的备用文本height 和 width 共同决定了图片的宽高,推荐使用px(像素)作为单位-->
</body>
引入视频
<video width="800px" height="600px" src="./static/18-01 视频.mp4" controls autoplay loop mutedposter="./imgs/01be6c5e8aa690a801216518c2ae5d.jpg@2o.jpg"preload="auto">您的当前浏览器不支持这个标签,推荐视频其他的浏览器,<a href="">点此观看</a><!-- 优化代码：当用户使用浏览器无法正常观看视频时，提供一个其他链接供用户跳转观看 --></video><!-- controls显示视频的控制图标autoplay控制视频是否自动播放loop控制视频是否循环播放muted默认视频播放时关闭声音poster这个属性指向了一个图像的URL，这个图像会在视频播放前显示。通常用于粗略的预览或者广告。preload这个属性被用来缓冲较大的文件，有3个值可选："none" ：不缓冲"auto" ：页面加载后缓存媒体文件"metadata" ：仅缓冲文件的元数据-->
引入音频
<!-- 音频文件 --><audio controls><source src="./static/音乐.mp3" type="audio/mp3" /></audio><!--显示音频的控制图标autoplay控制音频是否自动播放loop控制音频是否循环播放muted默认音频播放时关闭声音preload这个属性被用来缓冲较大的文件，有3个值可选："none" ：不缓冲"auto" ：页面加载后缓存媒体文件"metadata" ：仅缓冲文件的元数据 audio标签具备video标签的大部分属性,但不具备宽，高,和poster -->
标签属性及相关
打开新网页的方法
<a href="/" target="_self" title="这是一个title">这是a链接</a><!-- target - _self 默认值 表示在当前网页打开- _blank 表示在新窗口打开网页 -->
布尔属性 控制
disabled是否存在，控制用户是否能在文本框中输入文字
<input type="text" disabled><!-- disabled 存在，无法输入disabled 不存在，可以输入 -->
全局常用属性
class
给类起个名，起多个名字也可以，用空格隔开，起的多个名字都能用来调用这个类
<style>.box1 {color: red;}.box2 {font-size: 32px;}</style>
<!-- class以空格分隔的元素类列表。类允许CSS和JavaScript通过类选择器或类似方法的函数来选择和访问特定元素Document.getElementsByClassName()。--><div class="box1 box2">这是一个有class的div标签</div><div class="box1">这是一个有class的div标签</div>
id（唯一标识符）
不能重名，类似于每个人的身份证
<!-- id定义一个唯一标识符（ID），该标识符在整个文档中必须是唯一的。其目的是在链接（使用片段标识符），脚本或样式（使用CSS）时标识元素。--><div id="boxId">这是一个有id的div</div>
style
更改字体风格：颜色，大小
<!-- style包含要应用于元素的CSS样式声明。--><div style="color: red;font-size: 32px;">这是一个有style的div标签</div>
title
鼠标悬停在网页的文本上时，会有提示字段出现
<!-- title包含代表与其所属元素相关的咨询信息的文本。此类信息通常可以（但不一定）作为工具提示显示给用户。--><div title="只是一段提示信息">这是一个有title的div标签</div>
lang （语言）
表示这篇文档使用的是什么语言。
<html lang="zh">
表示这个div中用的是什么语言
<div lang="en">这是一个有lang="en"的标签</div>
常用：zh、en
zh代表中文，en代表英文
转义字符
在html中，有些符号难以直接打印出来，这就用到了转义字符
<div><div><div>这是一段 文本</div><div>" " " " 双引号</div><div>''''' 单引号</div><div>&&&&& 和符号</div><!-- 转义字符 &英文字母串;< -- 表示的是<> -- 表示的是> --表示空格 " --表示双引号' --表示单引号& --表示&® --表示商标--><!-- --><!-- 表示一个注释 快捷键：ctrl+/ --></div>
列表
无序列表
<!-- 无序列表 --><!-- ul 表示无序列表的框框li 表示当前列表的每一项Unordered listlist item--><ul><li class="box">每一项1</li><li class="box">每一项2</li><li class="box">每一项3</li></ul>
有序列表
<!-- 有序列表 --><!-- ol 表示有序列表的框框li 表示当前列表的每一项Ordered list--><ol type="A" start="6"><li>有序列表的每一项,具有顺序意义</li><li>有序列表的每一项,具有顺序意义</li><li>有序列表的每一项,具有顺序意义</li></ol><!-- • type设置编号的类型：a 表示小写英文字母编号A 表示大写英文字母编号i 表示小写罗马数字编号I 表示大写罗马数字编号1 表示数字编号（默认） reversed此布尔值属性指定列表中的条目是否是倒序排列的，即编号是否应从高到低反向标注。start一个整数值属性，指定了列表编号的起始值。写的阿拉伯数字-->
自定义列表
<!-- 自定义列表 --><!-- 这种列表的目的是标记一组项目及其相关描述 --><dl><dt>自定义列表的标题1</dt><dd>自定义列表的内容1</dd><dt>自定义列表的标题2</dt><dd>自定义列表的内容2</dd></dl>
table（表格）
<body><table style="background-color:rosybrown;" border="1" width="600px" align="center" cellpadding="10" cellspacing="0"><caption>表格的标题</caption><tbody><thead><tr><th>1</th><th>2</th><th>3</th></tr></thead><!-- 表格通过table元素表示tr表示表格中的行,有几个tr 表格就有几行td 是tr里面的元素,表示表格的单元格th 是tr里面的元素,表示表格单元格的格头 默认在单元格中加粗居中tbody 可以有一个或多个,表示表的主体caption 是表格的标题,可有可不有 有且只有一个thead 表示表格的行头 可写可不写--><tr><th rowspan="3">合并行</th><th>2</th><th>3</th></tr><tr><!-- <td>1</td> --><td>2</td><td>3</td></tr><tr><!-- <td>1</td> --><td>2</td><td>3</td></tr><tr><!-- th/td的常用属性colspan 合并列rowspan 合并行--><th colspan="3">合并列</th><!-- <th>2</th><th>3</th> --></tr><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>1</td><td>2</td><td>3</td></tr><tr><th rowspan="2" colspan="2">合并行</th><!-- <th>2</th> --><th>3</th></tr><tr><!-- <td >1</td> --><!-- <td>2</td> --><td>3</td></tr><tr><td>1</td><td>2</td><td>3</td></tr></tbody></table><!-- table常用属性• align此属性指示表必须如何在包含文档中对齐。它可能具有以下值：left：表格显示在文档的左侧；center：表格显示在文档中心；right：表格显示在文档的右侧。• border此整数属性以像素为单位定义表格周围边框的大小• cellpadding此属性定义是否显示单元格内容与其边框之间的空间。即单元格的内边距• cellspacing此属性以百分比值或像素定义两个单元格之间的间距大小。即单元格的外边距• width此属性定义表格的宽度。style里面的样式属性background-color:rosybrown;控制了元素的背景颜色-->
</body>
表单
简介
表单用于收集不同类型的用户输入数据，将用户输入数据提交给web服务器，表单使用http协议提交数据
表单类型
单行文本框，多行文本框 选择框，按钮，复选框，单选框等。
表单格式
<form action="" method="GET" novalidate><input type="url"><input type="submit" value="提交"></form><!-- action 定义了在提交表单时，应该把手机的数据发送到哪个URL或模块去处理method 定义了发送数据的http方法-- get 和 postnovalidate 输入框默认需要验证，当添加novalidate时则不需要验证-->
enctype属性
enctype 属性 是在method的属性为post时，决定了表单的提交给服务器的MIME类型是什么
<form action="" enctype="application/x-www-form-urlencoded"></form><form action="" enctype="multipart/form-data"></form><form action="" enctype="text/plain"></form><!-- application/x-www-form-urlencoded 未指定时的属性默认值multipart/form-data 如果表单中包含文件上传的功能（type="file"）必须使用此值text/plain 常用于测试-->
type属性
单行文本框 text
<input type="text">
密码框 password
<input type="password" name="" id="">
隐藏 hidden
不显示的空间，但值仍然会提交到服务器中去
<input value="6666" type="hidden" name="UserID">
分组操作 radio
通过name属性值对radio进行分组操作，允许在拥有相同name值的选项中选其中的一个
<input type="radio" name="man" id="">男<input type="radio" name="woman" id="">女|<input checked type="radio" value="1" name="sex" id="">男<input type="radio" value="2" name="sex" id="">女
运行结果：
前者两个选项都可以点，是有问题的
后者加入了value，并将两个选项的name都设为sex，将选项变为只能选择其中一项，逻辑合理
复选框 checkbox
<input checked type="checkbox" value="1" name="hobby" id="">html<input checked type="checkbox" value="2" name="hobby" id="">JAVA<input type="checkbox" value="3" name="hobby" id="">python<input type="checkbox" value="4" name="hobby" id="">PHP<!-- 复选框 可设置选中还是未选中 --><!-- checked 用于设置单选框或多选框是否被选中 -->
颜色选择器 color
颜色选择器：<input type="color">
时间选择器 date和month
日期选择器（年月日）：<input type="date">月选择器：<input type="month" name="" id="">
邮箱 email
邮箱输入：<input type="email" name="" id="">
文件上传 file
文件上传：<input type="file">
数字控件 number
数字控件：<input type="number" name="" id="">
搜索框 search
提交按钮 submit
提交已经填写的信息
重置按钮 reset
重置所有选项为空
普通按钮 button
只是个按钮
搜索框：<input type="search"><input type="url" name="" id=""><input type="submit" value="提交"><input type="reset" value="重置"><input type="button" value="普通按钮">
运行结果：
fieldset 分割表单
fieldset 用于分割表单，legend定了表单的小标题
<form action=""><fieldset><legend>这是一个表单的标题</legend>姓名：<input type="text">密码框：<input type="password" name="" id=""></fieldset></form>
运行结果：
关联效果 label
label标签的for属性与input标签的id属性可以产生相关联的效果
（在点击name字母时，光标会自动聚焦到name的输入框）
<form action=""><label for="username">姓名：</label><input id="username" type="text"><br><label>密码：</label><input type="password"></form>
多行文本框
<form action="">多行文本框<!-- cols:文本域的宽度，多少列 默认为20列rows：文本域的高度，多少行style="resize: none;" 阻止多行文本域自由缩放textarea中，只接受纯文本的内容，任何html的内容都会被显示成纯文本内容--><textarea style="resize: none;" name="textareaValue" id="" cols="30" rows="10"></textarea></form>
运行结果：
下拉框
下拉单选框
选项框的宽度由最长的那个选项决定
下拉单选框<select name="selectValue1" id=""><option value="1">这个选项1很长很长</option><option value="2">选项2</option><option value="3">选项3</option><option value="4">选项4</option></select>
下拉多选框
下拉多选择框<!-- multiple 是否多选 --><select multiple name="selectValue2" id=""><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option><option value="4">选项4</option></select>
运行结果：
按住Ctrl，鼠标依次点击
自动补全输入框
<!-- multiple 是否多选 -->自动补全输入框<select multiple name="selectValue2" id=""><option value="1">啊啊啊啊啊啊选项1</option><option value="2">选项2</option><option value="3">选项3</option><option value="4">选项4</option></select><!-- input中list的值要和datalist的id保持一致，一旦数据列表与表单小部件相关联，就阔以实现模糊搜索的功能-->
运行结果：
知识点整合实例代码
将刚才的知识运用整合一下，做个实例页面：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action="" method="GET"><p><label for="name">用户名：</label><input type="text" id="name" name="username"></p><p><label for="">密 码：</label><input type="password" name="password"></p><p><label for="">再次输入密码：</label><input type="password" name="password"></p><p><label for="">密码保护问题：</label><select name="problem"><option value="0">你母亲的名字是?</option><option value="1">你父亲的名字是?</option><option value="2">你最喜欢的人是?</option><option value="3">你毕业的学校是?</option></select></p><p><label for="">密码保护问题答案：</label><input type="text" name="password protection"></p><p><label for="">性别：</label><input type="radio" name="sex" value="0">男<input type="radio" name="sex" value="1">女</p><p>你的生日是(年月日)：<input type="date"></p><p>输入邮箱：<input type="email" name="" id=""></p><p>喜欢的颜色：<input type="color"></p><p>你的幸运数字是：<input type="number" name="" id=""></p><p><label for="">爱好：</label><input type="checkbox" name="hobby" value="sing">唱歌<input type="checkbox" name="hobby" value="dance">跳舞<input type="checkbox" name="hobby" value="game">玩游戏<input type="checkbox" name="hobby" value="study">学习<table>其他爱好：</table><textarea cols="30" rows="10" name="love"></textarea></p><p><table>真实姓名：</table><input type="text" name="name"></p><p><table>本人照片：</table><input type="file" name="pic"></p><p><input type="submit" value="提交"><input type="reset" value="重置"></p></form>
</body>
</html>
运行结果：
更多推荐
html 基础部分（总结很够详细,来看看喽）
发布评论