HTML基础总结

最新推荐文章于 2022-09-25 12:26:09 发布

Mybabyying

最新推荐文章于 2022-09-25 12:26:09 发布

阅读量122

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/Mybabyying/article/details/103244255

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

什么是HTML

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

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

HTML所包含的内容

首先看一下代码视图便于理解

<!DOCTYPE html>								<!-- 声明为 HTML5 文档 -->
<html>										<!-- 元素是 HTML 页面的根元素 -->	
	<head>									<!-- 元素包含了文档的元（meta）数据-->		
		<meta charset="utf-8">				<!-- 如 <meta charset="utf-8"> 定义网页编码格式为 utf-8 -->
		<title>我的第一个页面</title>		<!-- 元素描述了文档的标题 -->
	</head>
	<body>									<!-- 元素包含了可见的页面内容 -->
	<h1></h1>
	<p></p>
	</body>
</html>

注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到源码。

HTML 标签

HTML 标记标签通常被称为 HTML 标签

HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如和
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

HTML 元素

“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:
在这里插入图片描述

实例

代码：

<!DOCTYPE html>								<!-- 声明为 HTML5 文档 -->
<html>										<!-- 元素是 HTML 页面的根元素 -->	
	<head>									<!-- 元素包含了文档的元（meta）数据-->		
		<meta charset="utf-8">				<!-- 如 <meta charset="utf-8"> 定义网页编码格式为 utf-8 -->
		<title>我的第一个页面</title>		<!-- 元素描述了文档的标题 -->
	</head>
	<body style="background-color: aqua;">	<!-- 元素包含了可见的页面内容 -->
	<h1>这是h1标签</h1>
	<p>这是p标签</p>
	</body>
</html>

视图：
在这里插入图片描述
在网页中查看源码(鼠标右击>查看元素|| 按F12 )：

HTML基础

HTML 标题（Heading）：

HTML 标题是通过 h1-h6 标签来定义的，他是用来做标题的，所以，字体都会比p标签大一些。

HTML 段落：

HTML 段落是通过标签

来定义的，他是用来做段落的，所以字体是普通的大小
在这里插入图片描述

HTML 链接：

HTML 链接是通过标签 a 来定义的

<a href="https://www.baidu.com/" target="_blank" rel="noopener noreferrer">访问百度</a>

如果你将 target 属性设置为 “_blank”, 链接将在新窗口打开。

HTML 图像：

HTML 图像是通过标签来定义的.

<img  src="/images/pulpit.jpg" width="304" height="228">

src中是想要显示的图片的路径，width是定义显示的图片的宽度，而height则是定义图片的高度

HTML 表格

表格由 table 标签来定义。
每个表格均有若干行（由 tr 标签定义），
每行被分割为若干单元格（由 td 标签定义）。
字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
代码：

<html>										<!-- 元素是 HTML 页面的根元素 -->	
	<head>									<!-- 元素包含了文档的元（meta）数据-->		
		<meta charset="utf-8">				<!-- 如 <meta charset="utf-8"> 定义网页编码格式为 utf-8 -->
		<title>表格</title>					<!-- 元素描述了文档的标题 -->
	</head>
	<body>									<!-- 元素包含了可见的页面内容 -->
	<table border="1">						<!-- 定义表格table -->
	    <tr>
			<th>表头</th>					<!-- th表示表头 -->
		</tr>
		<tr>								<!-- tr表示行 -->
	        <td>第一行第一列</td>			<!-- tb表示列 -->
	        <td>第一行第二列</td>
	    </tr>
	    <tr>
	        <td>第二行第一列</td>
	        <td>第二行第二列</td>
	    </tr>
	</table>

	</body>
</html>

效果图：
在这里插入图片描述
表格的表头使用 th标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本

HTML 列表

HTML列表分为有序列表和无序列表

有序列表：

	<ol>
		<li>有序列表1</li>
		<li>有序列表2</li>
		<li>有序列表3</li>
		<li>有序列表4</li>
		<li>有序列表5</li>
	</ol>

视图：
在这里插入图片描述

无序列表：

	<ul>
		<li>无序列表1</li>
		<li>无序列表2</li>
		<li>无序列表3</li>
		<li>无序列表4</li>
		<li>无序列表5</li>
	</ul>

视图：
在这里插入图片描述

需要注意的是：一般情况便签和元素都是可以单独使用的，但列表，ul 、ol标签必须配合 li 标签使用

HTML 元素类别

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素

块级元素特点：

总是从新行开始
高度，行高、外边距(margin)一级内边距(padding)都可以控制
宽度默认是容器的100%
可以容纳内联元素和其他块元素

常用的块元素有 h1 - h6 标签、p 标签、 div标签、 ul，ol列表。其中div 标签是最典型的块元素，（也是页面布局最常用的）

<!-- 常用块级元素 -->
		<div>
			<p>这是div标签包含的p标签</p>		<!-- 块级元素可以包含其他元素 -->
		</div>
		
		<p>这是p标签</p>		<!-- 块级元素p标签 -->
		<div>
			<ol>
				<li>这是div标签包含的ol有序列表1</li>
				<li>这是div标签包含的ol有序列表2</li>
			</ol>
		</div>

视图：
在这里插入图片描述

HTML 行内元素（内联元素）

特点：

总是在一行中显示
宽高属性无效
默认宽度就是它元素本身的宽度
行内元素只能容纳文本或其他行内元素，不可以放块级元素（a标签特殊，可以放块级元素）

常用的行内元素有 a标签、strong标签、b标签、i标签、del标签、s标签、span标签，其中，span标签是最常用也是最经典的行内标签

块元素和内连元素的相互转换

有时候我们需要将块元素转化为内连元素或内联转化为块元素使用
这里需要给需要转化的元素加一个css样式属性(display)：
添加css时，需要先加style以增加css样式使用

块元素转化为内联元素

块元素没转换前代码：

		<div>				<!-- 定义块元素1 -->	
			块元素1
		</div>
		<div>				<!-- 定义块元素2 -->
			块元素2
		</div>

转化前视图：
在这里插入图片描述
转化需要添加 display 样式属性：为了使更加直观，我给div加了一个背景图片（backgroud-color）

块元素转化为内联元素代码(display: inline-block):

<div style="display: inline-block; background-color: red;">			<!-- 定义块元素1 -->
			块元素1(背景红色)
		</div>
		<div style="display: inline-block; background-color: blue; ">			<!-- 定义块元素2 -->
			块元素2(背景蓝色)
		</div>

转化后的视图：
在这里插入图片描述

内联元素转化块元素：

转化前代码：

<span style="background-color: red;">		<!-- 定义一个span内联元素 背景颜色为红色 -->
	内联元素1(背景红色)
</span>
<span style="background-color: blue;">		<!-- 定义一个span内联元素 背景颜色为蓝色 -->
	内联元素2(背景蓝色)
</span>

** 视图：**
在这里插入图片描述
内联元素转化为块元素代码(display: block)：

<body>						
	<span style=" display: block; background-color: red;">		<!-- 定义一个span内联元素 背景颜色为红色 -->
		内联元素1(背景红色)
	</span>
	<span style="display: block; background-color: blue;">		<!-- 定义一个span内联元素 背景颜色为蓝色 -->
		内联元素2(背景蓝色)
	</span>
</body>

视图：
在这里插入图片描述

Mybabyying

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础总结

什么是HTMLHTML 是用来描述网页的一种语言HTML 指的是超文本标记语言: HyperText Markup LanguageHTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML 文档包含了HTML 标签及文本内容HTML文档也叫做 web 页面HTML所包含的内容首先看一下代码视图便于理解...
复制链接

扫一扫