学习前端【前端学习1】Html基础知识总结
理理不多废话直接开始，只挑最主要的。以HTML5为标准，像是一些废弃的标签、html4里边的，我全都省略掉了（一般也用不到）。
所有html,我们都写在后缀为html的文件里。写脚本时，我推荐编辑器vscode。
一、HTML基本框架（了解即可）
为什么是了解即可,因为不重要，框架不用你自己打出来，vscode直接输入个!就能自动生成。
1
2
3
4
5
6
7
8
9
10
11
| 整个网页是从<html>这里开始的，然后到</html>结束。
head标签代表页面的“头”，定义一些特殊内容，这些内容往往都是“不可见内容”（在浏览器不可见）。
<head> 定义了文档的信息
<title> 定义了文档的标题
<base> 定义了页面链接标签的默认链接地址
<link> 定义了一个文档和外部资源之间的关系
<meta> 定义了HTML文档中的元数据
<script> 定义了客户端的脚本文件
<style> 定义了HTML文档的样式文件
<head>的内部标签也非常重要，在前期大家只需要感性认知就可以。
<!--我是注释，记得我怎么写--> 这是注释
|
body标签代表页面的“身”，定义网页展示内容，这些内容往往都是“可见内容”（在浏览器可见）。
一、常用基础标签
段落与文字标签
1
2
3
4
5
6
7
| <p>单独成一行</p>
</br>(表示换行，它是单独出现的)
<hr>(表示分割线，也是单独出现的)
<h1></h1>...<h6></h6>(段落标签，表示标题文字大小，h1最大h6最小)
<div></div>(分割，块元素)
<span></span>区域（行内元素）
|
文本格式化标签
1
2
3
4
5
6
7
| <strong></strong>和<b></b>：给文字加粗
<em></em>和<i></i>：给文字加斜体效果
<del></del>和<s></s>：给文字加删除线
<ins></ins>和<u></u>：给文字加下划线
<cite></cite>：引用文字
<sub></sub>：文字下标
<sup></sup>：文字下标
|
无序列表
ul和li标签的组合使用
1
2
3
4
5
6
7
8
9
| <ul type="circle">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
对于 <ul>（无序列表），type 属性的可用值通常有：
disc：默认值，列表项前显示一个实心圆点（●）。
circle：列表项前显示一个空心圆圈（○）。
square：列表项前显示一个实心方块（■）。
|
效果：
有序列表
ol和li标签的组合使用
1
2
3
4
5
6
7
8
9
10
11
| <ol type="I">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
对于 <ol>（有序列表），type 属性的可用值通常有：
1：默认值，列表项按数字顺序排列（1, 2, 3, ...）。
A：列表项按大写字母顺序排列（A, B, C, ...）。
a：列表项按小写字母顺序排列（a, b, c, ...）。
I：列表项按大写罗马数字顺序排列（I, II, III, ...）。
i：列表项按小写罗马数字顺序排列（i, ii, iii, ...）。
|
效果：
- Item 1
- Item 2
- Item 3
自定义列表
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| dl、dt和dd的组合，其中要在<dl></dl>范围内去写，<dt></dt>是定义分类的,<dd></dd>是我们要写的东西。
<dl>
<dt>gal玩家</dt>
<dd>柚子社粉丝</dd>
<dd>前翼社粉丝</dd>
<dt>动漫爱好者</dt>
<dd>火影忍者</dd>
<dd>海贼王</dd>
<dt>游戏爱好者</dt>
<dd>黑神话悟空</dd>
<dd>侠盗猎车手</dd>
</dl>
|
效果：
- gal玩家
- 柚子社粉丝
- 前翼社粉丝
- 动漫爱好者
- 火影忍者
- 海贼王
- 游戏爱好者
- 黑神话悟空
- 侠盗猎车手
表格
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| 表格标签是<table></table>，所有东西写在里边，<tr></tr>表示行，<caption></caption>表示表头，<td></td>表示列：
其中对于table标签:
可以填一个属性为“border”,border对应的数字表示表格框框的粗细。
注：这里以HTML5为标准，很多属性（如width何cellspacing都不再使用，问就是推给css了）
<table border="1">
<caption>罚推galgame数量</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
|
效果：
罚推galgame数量
| 100 |
200 |
300 |
| 400 |
500 |
600 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| 那么如果我们想实现合并单元格，如何做呢?
colspan表示行合并，rowspan表示列合并
<table border="1">
<tr>
<td></td>
<td colspan="2"></td>
(这里就是把第一行后两个单元格合并了)
</tr>
<tr>
<td rowspan="2"></td>
(这里就是把第二行、一列后两个单元格合并了)
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
|
效果：
图片
如何引用图片？和实现点击字符跳转？很简单：
常用的几个标签：
src:图片地址，可以填本地路径也可以填网上图片链接。
alt:如果图片显示不出来后的替代文字
title:鼠标悬停到图片上显示的文字
width和height:允许你自己设置图片宽高（不建议使用）
拓展部分：usemap:将一个图片定义成多个区域，点击跳转不同链接。
感兴趣的话点我
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <img src="https://img1.doubanio.com/lpic/s34656558.jpg" alt="哈哈" title="galgame">
#下面是usemap，感兴趣可以试试。
<map name="infographic">
<area
shape="poly"
coords="130,147,200,107,254,219,130,228"
href="https://developer.mozilla.org/docs/Web/HTML"
target="_blank"
alt="HTML" />
<area
shape="poly"
coords="130,147,130,228,6,219,59,107"
href="https://developer.mozilla.org/docs/Web/CSS"
target="_blank"
alt="CSS" />
<area
shape="poly"
coords="130,147,200,107,130,4,59,107"
href="https://developer.mozilla.org/docs/Web/JavaScript"
target="_blank"
alt="JavaScript" />
</map>
<img usemap="#infographic" src="https://interactive-examples.mdn.mozilla.net/media/examples/mdn-info2.png" alt="MDN infographic" />
|
效果：
音频
用audio标签
引用音频和图片类似，常见属性：
src：填链接
controls: 显示播放的控件
autoplay: 填true或false,是否自动播放。
loop: 填true或false，是否循环播放
其余属性有很多，但不重要，感兴趣可自行去了解。
1
| <audio controls src = "https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"></audio>
|
效果：
视频标签
和以上音频一样，把audio换成video，不再赘述
超文本链接与标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
超文本链接的基本格式是
<a href="链接地址">要填的内容</a>
可以有的属性是target。
target = "_blank"的话，会新开个窗口实现跳转，
target = "_self"的话，直接在当前窗口跳转。
来个简单的例子：
<a href = "https://aurorayuhua.love" target = "_blank">点我跳转到资源站</a>
可以实现点击跳转的效果，可以是一个网址、一张图片、甚至是一个标签
那么什么是标签？标签就像我们看书的书签，有了它、就能立马跳转到我们要看的那一页。
格式是
<a name="标签名">文字</a>
举个例子：
<a name = "pos1">一、HTML基础知识点</a>
<a href = "#pos1">我要跳转到开头</a>
|
效果：
点我跳转到资源站
我要跳转到开头
Form表单
表单是什么？比如网站注册窗口、百度搜索框，这些都是表单。
表单是写在form标签里的。先来说form标签常用的属性:
action
指定表单数据提交到的服务器端URL。
method
指定提交表单时使用的HTTP方法（GET或POST）。分为get方法和post方法，提交少量数据用get,大量数据用post。
name
指定表单的名称。
target
指定提交表单后，服务器响应将如何显示。
例如，它可以是_blank（新窗口或标签页）、_self（当前窗口）、_parent（父框架）或_top（整个窗口）。
1
2
| <form action="url" method="get" name = "填表格" target = "_blank"></form>
|
以下不重要，了解即可，不用记
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| enctype
指定用于编码表单数据的字符集和内容类型。对于包含文件上传的表单，通常需要设置为multipart/form-data。
accept-charset
指定表单接受的字符编码集。
autocomplete
提供表单自动完成功能的提示。它可以设置为on（启用自动完成）、off（禁用自动完成）或不设置（浏览器默认行为）。
novalidate
如果设置，表示表单提交前不进行验证。
autofocus
如果设置，页面加载完成后，表单的首个输入字段会自动获得焦点。
class
指定表单的类名，用于CSS样式的应用。
id
指定表单的唯一标识符。
style
指定行内CSS样式。
title
提供关于表单的额外信息。
onsubmit
指定提交表单时执行的JavaScript函数或代码。
onreset
指定重置表单时执行的JavaScript函数或代码。
|
label标签和input标签
lable标签通常和input标签放一块，这里详细讲input标签，只记一些常用的。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| 类型（type）属性
<input>元素的type属性决定了输入控件的类型，常见的类型包括：（其实最常用的主要就text和password）
text：单行文本框
password：密码输入框，输入的字符会被隐藏
email：用于输入电子邮件地址
button：可点击的按钮
number：用于输入数字
radio：单选按钮
checkbox：复选框
submit：提交按钮
reset：重置按钮
file：文件上传控件
hidden：隐藏的输入字段
image：图像作为提交按钮
range：用于输入一定范围内的数字
date：用于输入日期
month：用于输入月份和年份
week：用于输入周和年份
time：用于输入时间
datetime：用于输入日期和时间
datetime-local：用于输入日期和时间（本地时间）
2. 属性
name：输入字段的名称，用于表单提交
value：输入字段的值
placeholder：在输入字段为空时显示的提示文本
required：表单提交时必须填写该字段
readonly：输入字段为只读，用户不能编辑
disabled：输入字段被禁用，用户不能编辑
maxlength：输入字段的最大字符数
minlength：输入字段的最小字符数
size：输入字段的宽度（字符数）
pattern：输入字段的正则表达式，用于验证输入
list：指定一个<datalist>元素的id，为输入字段提供自动完成建议
step：数字输入字段的合法数字间隔
multiple：允许用户选择多个值（如文件上传或电子邮件地址输入）
|
我的建议是不用记完，只记几个比较常用的就行。一般也就注册用户用邮箱、账号密码、忘记密码重置按钮、上传文件、是否同意网站条款，其余倒很少用了。
1
2
3
4
5
6
7
8
9
10
| <label>请输入用户名：</label><input type="text" name="username" placeholder="请输入您的用户名" value= "你可以把我删掉">
<label>请输入密码：</label><input type ="password" name = "password" placeholder = "输入密码">
<label>是否同意网站条款?</label>
<label>同意</label><input type = "checkbox">
<p>你是男生还是女生？</p>
<label for="male">男</label><input type="radio" id="male" name="gender">
<label for="female">女</label><input type="radio" id="female" name="gender">
<input type="submit" value="点我提交">
注：为了保证男女只能选一个，我们需要给他们加上相同的name标签。
label for里填的内容与id里一样，意思是告诉浏览器，点击这些标签时，应该将焦点移动到 id 为 "male" 和 "female" 的单选按钮上。
|
效果：
你是男生还是女生？
select标签
select标签主要做下拉列表用的,要注意:
1.select中至少包含一对option。
2.在option中定义selected=”selected”时，当前项即为默认选中项。
3.value=” “(初始值不能被省略）
4.使用multiple 属性可以设置单选或多选， multiple size=”3”就是能一共选3个
1
2
3
4
5
6
7
8
| <form>
<select>
<option value=" ">选项1</option>
<option value=" ">选项2</option>
<option value=" ">选项3</option>
<option value=" " selected="selected">选项4</option>
</select>
</form>
|
效果：
datalist标签
和select标签比较像，但是select只能选择，这个可以在框框里输入
1
2
3
4
5
6
7
8
9
10
| <label
>Choose a browser from this list: <input list="browsers" name="myBrowser"
/></label>
<datalist id="browsers">
<option value="Chrome"></option>
<option value="Firefox"></option>
<option value="Internet Explorer"></option>
<option value="Opera"></option>
<option value="Safari"></option>
</datalist>
|
效果：
<label
Choose a browser from this list:
textarea标签
创建一个文本框,rows是行数、cols是列数
1
| <textarea rows="4" cols="10">多行文本框内容</textarea>
|
iframe标签
可以用来穿插一些页面（比如b站视频）
height 和 width 属性用来定义iframe标签的高度与宽度。
属性默认以像素为单位, 但是指定其按比例显示 (如：”40%”)。
有些老旧的浏览器不支持。
1
| <iframe src="https://aurorayuhua.love/" width="500" height="200"></iframe>
|
效果：
块级元素和内联元素
块级元素（Block Elements）
块级元素在页面上以“块”的形式出现，它们的行为特点如下：
宽度：默认宽度填充其父元素的宽度（即100%），除非指定了宽度。
高度：高度取决于内部内容。
排列方式：块级元素通常会以垂直方向排列，即一个接一个地堆叠。
外边距（Margin）和内边距（Padding）：可以设置上下左右的外边距和内边距。
与其他元素的关系：块级元素周围不能有内联元素（除非特别指定）。
常见的块级元素包括：
1
2
3
4
5
6
7
8
9
10
11
| <div>
<section>
<header>
<footer>
<article>
<aside>
<ul>
<ol>
<li>
<p>
<h1> 到 <h6>
|
内联元素（Inline Elements）
内联元素在页面上以“行内”的形式出现，它们的行为特点如下：
宽度：宽度由其内部内容决定。
高度：高度也是由内部内容决定。
排列方式：内联元素通常会以水平方向排列，即它们会尽可能地排成一行。
外边距（Margin）和内边距（Padding）：只能设置左右和上下的内边距，上下的外边距不会影响布局。
与其他元素的关系：内联元素可以与其他内联元素或文本相邻。
常见的内联元素包括：
1
2
3
4
5
6
7
8
9
10
11
12
| <span>
<a>
<label>
<input>
<img>
<strong>
<em>
<b>
<i>
<br>
<hr>
<button>
|
HTML5新标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <header></header>
头部
<nav></nav>
导航
<section></section>
定义文档中的节,比如章节、页眉、页脚
<aside></aside>
侧边栏
<footer></footer>
脚部
<article></article>
代表一个独立的、完整的相关内容块,例如一篇完整的论坛帖子,一篇博客文章,一个用户的评论等。
|
写到这里，我基本把html常用的知识点都写完了。刚开始学的时候可能有点麻烦，但慢慢写多了就会了。不着急，慢慢来。如果有要更新补充的话，欢迎提出，我会后续补充。
下一篇写css笔记。
