前端入门基础知识回顾（一）—— HTML知识点总结

最新推荐文章于 2024-08-18 21:08:41 发布

腾辉00

最新推荐文章于 2024-08-18 21:08:41 发布

阅读量178

点赞数

分类专栏： HTML 文章标签： html

腾辉原创

本文链接：https://blog.csdn.net/m0_50074259/article/details/107990120

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前言

这算是我的第一篇技术博客了，也算是自己给及自己讲一节课吧。目前我学的知识还比较局限，所以没有一个清楚的规划路线。所以就慢慢更进吧。
这段时间我将会以连载的形式将HTML和CSS的基本知识写成一篇篇的博客，以后可能继续写关于JS和vue的学习经验
此次复习我是按照W3C的课程路线来的，在总结知识点的同时我会总结一些自己的经验。
如果有不足，欢迎批评，真心感谢
下面开始了~

首先还是要解释一下什么是HTML

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言(markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

HTML的代码都是标签（单标签和多标签）

下面直接开始介绍各个标签吧

HTML骨架

<!-- <html> 元素定义了整个 HTML 文档。 -->
<html>
<head>
</head>
<!-- <body> 元素定义了 HTML 文档的主体 -->
<body>
    <p>内容部分</p>
</body>
</html>

HTML标题和段落

    <h1> 最大标题 </h1>
    <h2> 标题标签 </h2>
    <h3> 标题标签 </h3>
    <h4> 标题标签 </h4>
    <h5> 标题标签 </h5>
    <h6> 最小标题 </h6>

    <p> 这是段落标签 </p>
    
	<hr /> 定义水平线

	<br> 折行
	<&nbsp> 输出空格

在这里插入图片描述

HTML注释

	快捷键 : CTRL+/
	<!-- 这个好看的括号里面是注释的内容 -->

HTML链接

	<a href="#"> 这是a标签 </a>

a标签不只是一个链接的作用，有三个功能：

超链接
锚点
打电话/发邮件

HTML图像

	<img src="#" width="#" height="#" />

图像的名称和尺寸是以属性的形式提供的。

div标签

div标签是一个容器，它没有任何展示效果。
但在我看来，div标签是一个非常重要的标签，是将HTML和CSS链接的桥梁，HTML只负责内容和标题，而通过在div标签定义的各种选择器，可以将页面变得多元丰富。

HTML列表

HTML里面有三种列表：无序列表、有序列表、定义列表

无序列表和有序列表的差别在于每个项目前的符号样式，无序列表通常是圆点或者三角形，而有序列表一般是数字或字母等有规律的方式排列。定义列表更像是一个大纲。

无序列表

	<ul>
		<li>内容一</li>
		<li>内容二</li>
	</ul>

无序列表的效果如下：

内容一
内容二

项目符号前面表示的样式不只有小圆点，你可以在ul标签内给它设置属性，让它变得不一样，如 type=“disc”（默认实心圆）、 type=“circle”（空心圆）、type=“square”（小方块）等等。

有序列表

	<ol>
		<li>内容一</li>
		<li>内容二</li>
	</ol>

有序列表的效果如下：

内容一
内容二

同样，你也可以通过改变ol内的属性改变内容前面序号的样式，如：type=“A”（大写字母）、 type=“I”（古罗马数字形式）

定义列表

	<dl>
		<dt>内容一</dt>
			<dd>内容一拓展</dd>
		<dt>内容二k</dt>
			<dd>内容二拓展</dd>
	</dl>

定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

HTML表格

	<!-- border属性可以设置表格边框的宽度 -->
	<table border="1">
		<tr>
			<th>表头</th>
			<th>表头</th>
		</tr>
		<tr>
			<td>一行一列</td>
			<td>一行二列</td>
		</tr>
		<tr>
			<td二行一列</td>
			<td>二行二列</td>
		</tr>
	</table>
	<!-- th代表表头 -->
	<!-- tr代表某一行 -->
	<!-- td代表某一列 -->

以上是基本的表格标签，你可以通过一些属性设置来达到任意行列的表格。

border 规定表格边框的宽度。
cellpadding 规定单元边沿与其内容之间的空白。
cellspacing 规定单元格之间的空白。
colspan 跨列
rowspan 跨行

上面是非常基础的HTML标签，大多数网页含有这些基础的标签，并且有规律的嵌套起来，通过css使得网站变得丰富

	<html>
	
	<body>
		<p>嵌套就是在标签里面写标签呗</p>
	</body>
	
	</html>

HTML标签属性

	class 	规定元素的类名（classname）
	id		规定元素的唯一 id
	style	规定元素的行内样式
	title  	规定元素的额外信息（可在工具提示中显示）

以上便是基础的HTML标签，其实学习这些标签只要花一点时间就够了，主要还是通过CSS或各种框架来实现的。由于这是基础入门，所以不拓展更深的知识点了，接下来我会将HTML速查手册拷贝到我的博客，便于以后查阅。

腾辉00

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端入门基础知识回顾（一）—— HTML知识点总结

前言这算是我的第一篇技术博客了，也算是自己给及自己讲一节课吧。目前我学的知识还比较局限，所以没有一个清楚的规划路线。所以就慢慢更进吧。这段时间我将会以连载的形式将HTML和CSS的基本知识写成一篇篇的博客，以后可能继续写关于JS和vue的学习经验此次复习我是按照W3C的课程路线来的，在总结知识点的同时我会总结一些自己的经验。如果有不足，欢迎批评，真心感谢下面开始了~首先还是要解释一下什么是HTMLHTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (Hyper Text
复制链接

扫一扫

专栏目录