HTML中各级标签用法3

最新推荐文章于 2023-07-11 23:00:09 发布

m0_66163230

最新推荐文章于 2023-07-11 23:00:09 发布

阅读量239

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/m0_66163230/article/details/122421727

版权

1、HTML嵌入CSS样式

HTML仅仅只能呈现一些信息，表现能力很有限，需要结合CSS来一起使用，这样可以使页面更加的精美。

CSS 样式既可以作为单独的文件引入到 HTML 文档中，也可以直接写在 HTML 文档中。如下所示：

行内样式（内联样式）：就是把 CSS 样式直接放在HTML的标签（<em>、<strong>、<div>、<p>）中，一般都是放入style属性中，修改不方便，而且每一个标签要设置样式都需要添加 style 属性。如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<p style="background-color: aqua;">段落1</p>
		<p style="background-color: blue;">段落2</p>
		<div style="background-color: aquamarine;">块级</div>
		<strong style="font-size: 45px;">学习</strong>
	</body>
</html>

运行结果如下：

内嵌样式：使用 <style> 标签在 HTML 文档头部（<head> 和 <head> 之间）定义 CSS 样式，这样可以解决行内样式多次书写的弊端（减少代码量）以及行内样式带来样式修改的不方便。如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
		p{
			text-align: left;
			font-size: 20px;
			text-indent: 2em;
			margin-bottom: 25px;
		}	
		</style>
	</head>
	<body>
		<p>
			C语言代码由固定的词汇按照固定的格式组织起来，简单直观，程序员容易识别和理解，
			但是对于CPU，C语言代码就是天书，根本不认识，CPU只认识几百个二进制形式的指令。
			这就需要一个工具，将C语言代码转换成CPU能够识别的二进制指令，也就是将代码加工成 .exe 程序；
		</p>
		<p>
			我们平时所说的程序，是指双击后就可以直接运行的程序，这样的程序被称为可执行程序（Executable Program）。
			在 Windows 下，可执行程序的后缀有 .exe 和 .com（其中 .exe 比较常见）；在类 UNIX 系统（Linux、Mac OS 等）下，
			可执行程序没有特定的后缀，系统根据文件的头部信息来判断是否是可执行程序。
			
		</p>
	</body>
</html>

运行结果如下：

从这个例子我们可以知道，<style>标签有多个属性，如下所示：

必须属性：

<style type="text/css">

可选属性：

<style madia="screen">

<style madia="tty">

<style madia="tv">

<style madia="projection">

<style madia="handheld">

<style madia="print">

<style madia="braille">

<style madia="aural">

<style madia="all">

链接式：使用 <link> 标签引入外部 CSS 样式表文件，这是网站应用最多的方式，也是最实用的方式。它可以将HTML 文档和 CSS 文件完全分离，实现结构层和表示层的彻底分离，增强网页结构的扩展性和 CSS 样式的可维护性。同样也是在<head></head>标签进行的。

导入样式：使用 @import 命令导入外部 CSS 样式表文件。它有6种书写方式：

@import daoru.css
@import 'daomxss'
@mport "daoru.css"
@import url(daoru.css)
@import url('daoru.css')
@import url("daoru.css")

2、HTML块级元素和内联（行内）元素

HTML标签包括块级元素和内联元素两类。

块级元素

块级元素不管是否使用换行标签<br/>，它都会在新的一行上开始。它包括的标签有<div>（最具代表性，通过与CSS相结合可以实现不同的效果）、<p>、<nav>、<aside>、<header>、<footer>、<section>、<ul>、<address>、<h1>~<h6>。

内联元素（行内元素）

行内元素的高度、宽度（内容的宽度）以及外边距和内边距均不可改变。它包含的标签有<span>（最常用，可以HTML文档的内容进行修饰，也可以与CSS结合使用来美化网页）、<b>、<i>、<u>、<em>、<strong>、<sup>、<sub>、<big>、<small>、<li>、<ins>、<del>、<code>、<cite>、<dfn>、<kbd>、<var>

元素嵌套：块级元素和内联元素可以相互嵌套，也可以自己嵌套自己。

3、HTML布局

为了改进传统布局模式，就会使用到各种不同的布局标签，如下所示：

<header>：定义网页的头部。
<nav>：定义网页的导航栏。
<section>：定义网页中的单独部分，包括图像、文本、表格。
<article>：定义文章或其他独立信息。
<aside>：表示网页以外的部分。
<footer>：表示网页的底部。
<detail>：定义详细信息，即可以隐藏详细信息，也可以显示详细信息。
<summary>：用于为<details>标签定义标题。

4、内联框架标签<iframe>

<iframe src="url" width="m" height="n"></iframe>

src属性：表示为要嵌入的网页的地址。

align="left、right、top、middle、bottom"：设置如何来对齐 <iframe>。

frameborder="1、0"：设置是否显示 <iframe> 周围的边框。

height=" px"：设置高度。

longdesc="URL"：设置页面，该页面中包含了有关 <iframe> 的描述。

marginheight=" px"：设置顶部和底部的边距。

marginwidth=" px"：设置左侧和右侧的边距。

name="text"：设置名称

sandbox=" 、allow-forms、allow-same-origin、allow-scripts、allow-top-navigatio"

scrolling="yes、no、auto"：设置是否在 <iframe> 中显示滚动条

seamless="seamless"

src="URL"：设置要在 <iframe> 中显示的文档地址（URL）

srcdoc="HTML代码 "

width=" px"：设置宽度。

5、头部标签<head>

<title>标签：定义HTML文档的标题，一个HTML文档只允许一个<title>标签存在，必须在<head></head>标签中。如下例所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>菜鸟教程</title>
	</head>
	<body>
	</body>
</html>

运行结果如下：

<base> 标签：用于为页面中所有相对链接指定一个基本链接；意思就是如果设置了基本链接后，当前页面中的所有相对链接都会使用这个基本链接作为前缀。与<title>标签一样，只能在<head></head>标签中使用，只能有一个。如下例所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>菜鸟教程</title>
		<base href="../" />
	</head>
	<body>
		<ul>
			<li><a href="https://www.runoob.com"</li>
		</ul>
	</body>
</html>

<link> 标签：用于引用外部 CSS 样式表。它有两个重要属性，是rel（指示引用文件的类型）和href（设置外部文件的路径）。

<style>标签

<meta> 标签：提供有关 HTML 文档的元数据

<script> 标签

<noscript> 标签