HTML 知识点总结

最新推荐文章于 2024-03-18 12:09:27 发布

笑忘书zzl

最新推荐文章于 2024-03-18 12:09:27 发布

阅读量2.2k

点赞数 36

分类专栏：从前端到数据库文章标签： html

本文链接：https://blog.csdn.net/qq_44124656/article/details/103818047

版权

从前端到数据库专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、HTML简介

HTML 俗称网页，就是我们打开浏览器访问任何一个网站所看到的都是由 HTML 页面提供的（或者与 HTML 技术相关的内容提供）。

HTML 全称为 HyperText Markup Language，被译为超文本标记语言。所谓的超文本就是不仅只有文本内容，包括链接、音频和视频、图像等内容。所谓标记语言，简单来说就是元素。也就是说，HTML 提供一系列的元素来构成一个页面中最基础的内容。

HTML 是一种描述 Web 文档结构和语义的语言，它由元素组成，每个元素可以有一些属性或文本。

当你保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 文件后缀。

编写HTML代码的工具：

记事本
sublime text
hbuilder
webstorm
vscode
pycharm – python代码也可以写html代码

二、第一张网页

一个页面有且只有一个根标签是html，元素一般包含和两个元素，也就是 HTML 的头部和主体内容。

<html>
    <head>
        <title>网页的标题</title>
    </head>
    <body>
        <!-- 这是一个文本框 -->
        <input type="text"></input>
    </body>
</html>

**HTML标签：**由尖括号包围：
成对出现： <p></p> ,即开标签和闭标签.
属性： 定义在开标签中，如input标签中的type属性
简写： 开闭标签之间的内容是标签体，如果标签体为空，则可以简写：
注释： 是注释标签
HTML文档在浏览器中被解释运行,展示的不是源码而是渲染之后的效果

三、HTML头部

< head > 元素包含了当前 HTML 页面的所有头部元素，在 < head > 元素内必须定义 < title > 元素，还可以定义 < script >、< link > 等元素。

这些 HTML 的头部元素定义了当前页面的标题、编码、使用的脚本或样式等信息。

1、title元素

< title >元素定义了当前HTML页面的标题

<title>百度一下，你就知道</title>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AGycI1jQ-1578023422160)(HTML.assets/1530668619163.png)]

2、meta元素

元素提供了 HTML 页面的元数据（Metadata），元数据是存储数据的信息。

通常用于设置页面的编码、描述、关键词、作者等信息。

元素不会显示在页面中，但会被浏览器解析。

2.1 定义网页内容的编码格式

<meta charset="utf-8">

2.2 定义HTML页面关键字，用于搜索引擎

<meta name="keywords" content="HTML,CSS,XML,JavaScript">

2.3 定义HTML页面描述

<meta name="description" content="百知教育IT培训,java培训,PHP培训,UI培训,H5培训,linux培训,大数据培训,Python人工智能,IT行业培训领跑者,高薪就业 ">

2.4 定义HTML页面作者

<meta name="author" content="百知教育">

四、HTML主体

1、body元素

标签定义文档的主体。元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。body元素中包含的内容（子标签）是用户可以看到的。

一个 HTML 文件只能存在一个标签。

2、HTML元素基本构成

2.1 元素类型

HTML 是标记语言，所谓标记就是指页面中的元素（元素也可以叫做标签）。一个完整的 HTML 页面都是由众多不同的元素组成的。

闭合元素：必须包含开始元素和结束元素，如果没有结束元素会产生意料之外的错误。

<title>百知教育Python人工智能培训</title>
<p>这是一个段落标签</p>                     <!--该标签的作用是表示一个段落，会有换行-->

空元素：也可以叫做单元素，只需要开始元素，而不需要结束元素。

<meta name="description" content="渥瑞达Web前端培训">

<br/>            <!-- 换行 -- >

2.2 HTML属性

属性是设置在HTML元素中的，用于为元素添加附加信息。属性一般都是定义在开始元素中，并且是以“名称/值”对出现

 <input type="text" />   <!-- 这是一个文本框 -->

 <input type="button" value="点我" />   <!-- 这是一个按钮 -->

五、HTML文本

1、标题元素

HTML 提供了 6 个标题元素，由大到小依次为 <h1> 到 <h6>

<h1>这是一级标题</h1>

<h2>这是二级标题</h2>

<h3>这是三级标题</h3>

<h4>这是四级标题</h4>

<h5>这是五级标题</h5>

<h6>这是六级标题</h6>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gpmb9nTx-1578023422163)(HTML.assets/1530670234313.png)]

2、段落

元素定义段落

: **浏览器会自动地在段落的前后添加空行** ```html

这是一个段落.

这是另一个段落.

```

注意：在html中手动换行无效

3、换行

元素定义的段落内容是不会自动换行的，如果换行需要使用 br 元素

<body>
	生活赋予我们一种巨大的和无限高贵的礼品，这就是青春：充满着力量，充满着期待志愿，充满着求知和斗争的志向，充满着希望信心和青春。
	<br>
    人所缺乏的不是才干而是志向，不是成功的能力而是勤劳的意志。
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LbaNYf1L-1578023422165)(HTML.assets/1530670731312.png)]

4、水平线

在浏览器中显示一条水平线（分隔线）效果。

属性：size=“10” color=“red” width=“100px 或者 50%” align=“left/right/center”

10像素高颜色宽度对齐方式

<body>
	生活赋予我们一种巨大的和无限高贵的礼品，这就是青春：充满着力量，充满着期待志愿，充满着求知和斗争的志向，充满着希望信心和青春。
	<br>
	<hr size="1" width="100%" color="red"/>
	人所缺乏的不是才干而是志向，不是成功的能力而是勤劳的意志。
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nK6UOf0r-1578023422166)(HTML.assets/1530671029915.png)]

5、文本修饰

5.1 粗体字

这是一段正常未加粗的文本内容.
<br>
<b>这是一段加粗之后的文本内容.</b>
<br>
<strong>粗体--着重强调</strong>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Va3GdgFK-1578023422168)(HTML.assets/1530672074778.png)]

5.2 斜体字

<i>这是一段斜体的文本内容.</i>

5.3 下划线

<body>
	证明人：<u>百知教育</u>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aJY0EaxC-1578023422169)(HTML.assets/1530671768110.png)]

5.4 删除线

<body>
	<del>这是一段要被删除的文字</del>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X4f2bCuN-1578023422172)(HTML.assets/1530671905293.png)]

5.5 下标文字

<body>
	H<sub>2</sub>O
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E8DEONkQ-1578023422179)(HTML.assets/1530672009385.png)]

5.6 上标文字

3 ² = 9

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NTEZhEkv-1578023422180)(HTML.assets/1530672138124.png)]

5.7 小号字

正常文字
<small>小号文字</small>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6KckvEOc-1578023422182)(HTML.assets/1530672191397.png)]

5.8 大号字

<body>
	<small>小号文字</small>
	正常文字
	<big>大号文字</big>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gCJaBbhq-1578023422184)(HTML.assets/1530672254286.png)]

六、图像与链接

1、图像元素

元素引入外部图像，元素是空元素。

1.1 src属性

src 属性（必需），表示引入图像的 URL 地址。

<img src="images/img.png">

图像可以是本地地址，也可以是网络地址。

<img src="https://himg.bdimg.com/sys/portrait/item/c8764d725f6c6963656e6365g872fc876872f.jpg">

1.2 图像大小

width 和 height 属性用于设置图像显示的宽度和高度。

<img src="img.png" width="350" height="233" />

1.3 图像定位(了解)

align 属性用于设置图像显示的位置。

left：水平方向居左。
right：水平方向居右。
top：垂直方向居上。
bottom：垂直方向居下。
middle：居中。

<img src="img.png" width="350" height="233" align="right" />

1.4 alt属性

<img src="abcdef.png" alt="无法加载图片"/>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-evR6GiGo-1578023422185)(HTML.assets/1530673186561.png)]

2、超链接

2.1 用法

href 属性（必需），表示指定跳转的 URL 地址

<a href="http://www.baizhiedu.com">百知教育</a>

2.2 打开方式： target 属性

元素的 target 属性用于设置链接的打开方式。

_blank：在新窗口打开链接。
_self：在当前窗口打开链接。

<a href="http://www.baizhiedu.com" target="_blank">百知教育</a>

2.3 锚点

<body>
	<a name="postion"></a>       <!-- 定义锚点 -->
	<!-- 页面其它内容
		...
		...
		...
	 -->
	<a href="#postion">定位到postion的位置</a>  <!-- 链接到锚点 -->
</body>

2.4 回到顶部的空链接

<body>
	<!-- 页面其它内容
		...
		...
		...
	 -->
	<a href="#">回到顶部</a>   <!-- 回到顶部 -->
</body>

七、列表

1、无序列表

1.1 定义无序列表

元素定义无序列表，用于列出页面上没有特定次序的条目。

<ul>	
	<li>北京市</li>	
	<li>上海市</li>	
	<li>重庆市</li>
</ul>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8MFYHQJB-1578023422187)(HTML.assets/1530684550787.png)]

1.2 type属性

定义列表的项目符号的类型

disc：实心圆，默认值。
circle：空心圆。
square：实心矩形。

<ul type="circle">	
		<li>北京市</li>	
		<li>上海市</li>	
		<li>重庆市</li>
</ul>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gCwhGGdG-1578023422188)(HTML+CSS_pic/1530684771419.png)]

2、有序列表

2.1 定义有序列表

<ol>	
		<li>北京市</li>	
		<li>上海市</li>	
		<li>重庆市</li>
</ol>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ofA5U8WE-1578023422190)(HTML.assets/1530684878880.png)]

2.2 type属性

1：数字值，默认值。
a 或 A：小写或大写字母。
i 或 I：小写或大写罗马数字。

<ol type="a">	
	<li>北京市</li>	
	<li>上海市</li>	
	<li>重庆市</li>
</ol>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3l1LPm9P-1578023422191)(HTML.assets/1530685009075.png)]

3、自定义列表

<dl>
    <dt>北京</dt>
    <dd>海淀</dd>
    <dd>昌平</dd>
    <dd>朝阳</dd>
    <dt>广东</dt>
    <dd>广州</dd>
    <dd>深圳</dd>
    <dd>东莞</dd>
</dl>

八、表格

1、表格使用

表格由 < table > 标签来定义。每个表格均有若干行（由标签定义），每行被分割为若干单元格（由标签定义）。

<table>
	<tr>
		<td>第1行，第1列</td>
		<td>第1行，第2列</td>
	</tr>
	<tr>
		<td>第2行，第1列</td>
		<td>第2行，第2列</td>
	</tr>
</table>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JL9Sjv2t-1578023422196)(HTML.assets/1530685462072.png)]

2、表格属性

属性名称	描述
width 和 height	设置表格的宽度和高度
align	设置表格的对齐方式
border	设置表格的边框宽度
bgcolor	设置表格的背景颜色
cellpadding	设置内边距（单元格边框与内容之间的距离）
cellspacing	设置外边距（单元格之间的距离）
bordercolor	边框颜色

<table border="1" cellspacing="0" bgcolor="gray" bordercolor="red" width="300px" height="100px" align="left">
	<tr>
		<td>第1行，第1列</td>
		<td>第1行，第2列</td>
	</tr>
	<tr>
		<td>第2行，第1列</td>
		<td>第2行，第2列</td>
	</tr>
</table>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3bucqAYt-1578023422198)(HTML.assets/1530685943196.png)]

3、tr元素

属性名称	值	描述
align	right、left、center	左右对齐方式
valign	top 、middle 、bottom	垂直对齐方式
bgcolor	rgb(xxx,xxx,xxx)、colorName	背景颜色

<table border="1" cellspacing="0" width="500px" height="100px">
	<tr align="center">
		<td>第1行，第1列</td>
		<td>第1行，第2列</td>
	</tr>
	<tr align="right" valign="top" bgcolor="blue">
		<td>第2行，第1列</td>
		<td>第2行，第2列</td>
	</tr>
</table>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-737Gkc1r-1578023422199)(HTML.assets/1530695272576.png)]

4、td元素

元素是定义表格的数据单元格。

属性名称	值	描述
align	right、center、left	设置水平对齐方式
valign	top、middle、bottom	设置垂直对齐方式
width和height	pixels 、%	设置单元格的宽和高
colspan和rowspan	number	设置单元格的跨列和跨行数量
bgcolor	rbg()、colorName	单元格背景色

<table border="1" cellspacing="0" width="500px" height="100px">
	<tr>
		<td align="center">第1行，第1列</td>
		<td valign="top">第1行，第2列</td>
	</tr>
	<tr>
		<td width="300px">第2行，第1列</td>
		<td bgcolor='red'>第2行，第2列</td>
	</tr>
</table>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IcLpE6Ii-1578023422201)(HTML.assets/1530697152946.png)]

合并行和列

<table border="1" cellspacing="0" width="500px" height="200px">
	<tr>
		<td>第1行，第1列</td>
		<td>第1行，第2列</td>
	</tr>
	<tr>
		<td colspan="2">第2行，第1列</td>	 
	</tr>
	<tr>
		<td>第3行，第1列</td>
		<td rowspan="2">第3行，第2列</td>
	</tr>
	<tr>
		<td>第4行，第1列</td>
	</tr>
</table>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z6ythYQ4-1578023422203)(HTML.assets/1530697074613.png)]

5、表格标题caption

元素用于定义表格的标题，必须紧随元素之后，且只能对每个表格定义一个标题。

<table border="1" cellspacing="0" width="500px" height="100px">
	<caption>表格标题</caption>
	<tr>
		<td>第1行，第1列</td>
		<td>第1行，第2列</td>
	</tr>
	<tr>
		<td>第2行，第1列</td>
		<td>第2行，第2列</td>
	</tr>
</table>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V3X7gcxe-1578023422204)(HTML.assets/1530697414224.png)]

6、表头thead、tbody表主体、tfoot表脚注

标签定义表格的表头。

<table border="1" cellspacing="0" width="500px" height="100px">
	<caption>信息</caption>
	<thead>
		<tr>
			<th>姓名</th> <!-- 定义表头单元格 会加粗显示 -->  
			<th>性别</th>
		</tr>
	</thead>
	<tr>
		<td>Tom</td>
		<td>boy</td>
	</tr>
	<tr>
		<td>Linda</td>
		<td>girl</td>
	</tr>
</table>

tfoot 元素应该与 thead 和 tbody 元素结合起来使用。（比较少用）

九、表单

1、form 元素

表单用标签描述，表单内部可以有多个子标签，用来完成用户信息的收集，并发送请求给服务器。

属性：action=“xxx” method=“get/post”

请求地址请求方式

http://www.baidu.com?uname=abc&passwd=123
<form action="http://www.baidu.com" method="get">
	username:<input type="text" name="uname" id="uname115"/><br/>  # abc
	password:<input type="text" name="passwd" id="pwd115"/><br/>   # 123
	<input type="submit" value="提交" id="sub115"/>
</form>

2、表单元素

元素有很多不同类型，根据不同的 type 属性来决定。

用户名：<input type="text" name="txt" />  <!-- text表示文本框-->

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nLWfznhF-1578023422206)(HTML.assets/1530757524606.png)]

type属性：

类型名称	描述
text	文本输入框
password	密码框
radio	单选按钮
checkbox	复选框
button	按钮
submit	提交按钮
reset	重置按钮
file	文件域

name属性 ：标签的普通的属性，相当于别名，是每个输入控件的重要属性==请求参数名。
id属性 ：标签的唯一标识名，不能重复。
value属性 ：标签的普通属性，是中药属性==请求参数值。

2.1 文本框

用户名：<input type="text" name="txt" />  <!-- text表示文本框-->

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H6IYvY3p-1578023422207)(HTML.assets/1530758139189.png)]

用户名：<input type="text" name="pwd" value="Mr_lee" maxlength="10" readonly="readonly" />

2.2 密码框

密码：<input type="password" name="pwd" value="123456" />

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7Nk9Lys0-1578023422208)(HTML.assets/1530758213655.png)]

2.3 单选按钮

<!-- name：值必须一样，value：表示提交表单时的值 checked:默认选中-->
<input type="radio" name="sex" value="1">男       
<input type="radio" name="sex" value="0" checked="checked">女

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XP3i844U-1578023422210)(HTML.assets/1530758647865.png)]

2.4 复选框

<input type="checkbox" name="course" value="Mysql">Mysql
<input type="checkbox" name="course" value="HTML">HTML
<input type="checkbox" name="course" value="Linux">Linux
<input type="checkbox" name="course" value="Django">Django

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r5mPRrZ3-1578023422211)(HTML.assets/1530758924865.png)]

2.5 按钮

<input type="button" name="btn" value="点我">

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ozchiqAW-1578023422214)(HTML.assets/1530759170832.png)]

2.6 提交按钮

<input type="submit" name="sub_btn" value="提交">

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kIOKVxLo-1578023422215)(HTML.assets/1530759206331.png)]

2.7 重置按钮

<input type="reset" name="set_btn" value="重置">

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cG06duKx-1578023422217)(HTML.assets/1530759252821.png)]

2.8 文件域

<input type="file">

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mHkQp3fZ-1578023422219)(HTML.assets/1530759404657.png)]

2.9 文本域

<textarea name="txtInfo" rows="4" cols="20">aa</textarea>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-406qSTUX-1578023422221)(HTML.assets/1530759866508.png)]

3、下拉选框

选择课程：
<select name="course">
	<option value="1">Java</option>
	<option value="2" selected="selected">C++</option>
	<option value="3">PHP</option>
</select>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b9rrRffX-1578023422222)(HTML.assets/1530759604602.png)]

4、表单综合实例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9sgjtXvT-1578023422223)(HTML.assets/1530759682014.png)]

十、特殊符号

显示结果	描述	实体名称
	空格
<	小于号	<
>	大于号	>
©	版权（copyright）	©
®	注册商标	®
™	商标	™

ile">


[外链图片转存中...(img-mHkQp3fZ-1578023422219)]

##### 2.9 文本域

```html
<textarea name="txtInfo" rows="4" cols="20">aa</textarea>

[外链图片转存中…(img-406qSTUX-1578023422221)]

3、下拉选框

选择课程：
<select name="course">
	<option value="1">Java</option>
	<option value="2" selected="selected">C++</option>
	<option value="3">PHP</option>
</select>

[外链图片转存中…(img-b9rrRffX-1578023422222)]

4、表单综合实例

[外链图片转存中…(img-9sgjtXvT-1578023422223)]

十、特殊符号

显示结果	描述	实体名称
	空格
<	小于号	<
>	大于号	>
©	版权（copyright）	©
®	注册商标	®
™	商标	™

笑忘书zzl

关注

36
点赞
踩
82

收藏

觉得还不错? 一键收藏
5
评论
HTML 知识点总结

一、HTML简介HTML 俗称网页，就是我们打开浏览器访问任何一个网站所看到的都是由 HTML 页面提供的（或者与 HTML 技术相关的内容提供）。人-普通人超人HTML 全称为 HyperText Markup Language，被译为超文本标记语言。所谓的超文本就是不仅只有文本内容，包括链接、音频和视频、图像等内容。所谓标记语言，简单来说就是元素。也就是说，HTML 提供一系列的元素...
复制链接

扫一扫