HTML常用标签

最新推荐文章于 2023-05-07 23:36:37 发布

JoeLittleStar

最新推荐文章于 2023-05-07 23:36:37 发布

阅读量135

点赞数

分类专栏： h5

本文链接：https://blog.csdn.net/zhouxinxin250/article/details/90902113

版权

h5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

标签，元素

<!DOCTYPE>声明
帮助浏览器正确地显示网页。HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。
带有 HTML5 DOCTYPE 的 HTML 文档：

<!DOCTYPE html>

定义 HTML 文档

<html>
...
</html>

头部元素

<head>
<!-- 定义浏览器工具栏中的标题 -->
<title>Title of the document</title>
<!-- 定义文档与外部资源之间的关系 -->
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<!-- 为 HTML 文档定义样式信息 -->
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
<!-- meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。 -->
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
<!-- 用于定义客户端脚本，比如 JavaScript。 -->
<script type="text/javascript">
document.write("Hello World!")
</script>
</head>

标题

<!-- 通过 <h1> - <h6> 等标签进行定义的 -->
<h1>This is a heading</h1>

定义文档的主体

<body>
  文档的内容... ...
</body>

段落
浏览器会自动地在段落的前后添加空行。

<p>这是段落。</p>

链接

<a href="http://www.w3school.com.cn">
This is a link</a>

图像

<img src="/i/eg_w3school.gif" width="300" height="120" />

列表

<!-- 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。-->
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
<!-- 有序列表也是一列项目，列表项目使用数字进行标记。-->
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

表格

<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

换行

<!-- 空元素,使用小写标签 -->
<br />

水平线

<hr />

注释

<!-- This is a comment -->

script 元素

<!-- 
<script> 标签用于定义客户端脚本，比如 JavaScript。
script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
-->
<script type="text/javascript">
document.write("Hello World!")
</script>

块级元素或内联元素
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
内联元素在显示时通常不会以新行开始。

<!-- 定义文档中的分区或节（division/section）。-->
<div style="color:#00FF00">
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>
<!-- 定义 span，用来组合文档中的行内元素。-->
<p class="tip"><span>提示：</span></p>

属性

属性为 HTML 元素提供附加信息。
属性总是以名称/值对的形式出现，比如：name=“value”。
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

class 属性
class 属性规定元素的类名（classname）。
对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。

<!-- 分类行内元素-->
<html>
	<head>
	<style>
	  span.red {color:red;}
	</style>
	</head>
	<body>
	
	<h1>My <span class="red">Important</span> Heading</h1>
	
	</body>
</html>

style 属性
用于改变 HTML 元素的样式。

<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>

背景
背景颜色（Bgcolor）
背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

背景（Background）
背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。

<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">
<!-- URL可以是相对地址，如第一行代码。也可以使绝对地址，如第二行代码。-->

注意：应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。

样式表CSS

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：

外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。

<head>
	<style type="text/css">
		body {background-color: red}
		p {margin-left: 20px}
	</style>
</head>

内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

文件路径

文件路径描述了网站文件夹结构中某个文件的位置。
文件路径会在链接外部文件时被用到：

网页
图像
样式表
JavaScript

绝对文件路径
绝对文件路径是指向一个互联网文件的完整 URL：

<img src="https://www.w3school.com.cn/images/picture.jpg" alt="flower">

相对路径
相对路径指向了相对于当前页面的文件。

<!-- 指向了位于当前网站根目录中 images 文件夹里的一个文件 -->
<img src="/images/picture.jpg" alt="flower">
<!-- 指向了位于当前文件夹中 images 文件夹里的一个文件 -->
<img src="images/picture.jpg" alt="flower">
<!-- 指向了位于当前文件夹的上一级文件夹中 images 文件夹里的一个文件 -->
<img src="../images/picture.jpg" alt="flower">

使用相对路径是个好习惯（如果可能）。

布局

使用 div 元素的 HTML 布局

<!DOCTYPE html>
<html>

<head>
<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;	      
}
#section {
    width:350px;
    float:left;
    padding:10px;	 	 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
   padding:5px;	 	 
}
</style>
</head>

<body>

<div id="header">
<h1>City Gallery</h1>
</div>

<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>

<div id="section">
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>

<div id="footer">
Copyright ? W3Schools.com
</div>

</body>
</html>

使用 HTML5 的网站布局

<!DOCTYPE html>
<html>

<head>
<style>
header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;	 
}
nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;	      
}
section {
    width:350px;
    float:left;
    padding:10px;	 	 
}
footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;	 	 
}
</style>
</head>

<body>

<header>
<h1>City Gallery</h1>
</header>

<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>

<section>
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</section>

<footer>
Copyright W3Schools.com
</footer>

</body>
</html>

字符实体

HTML 中的预留字符必须被替换为字符实体。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
字符实体类似这样：

&entity_name;
或者
&#entity_number;
如需显示小于号，我们必须这样写：&lt; 或 &#60;
常用字符实体是不间断空格(&nbsp;)。

统一资源定位器

URL (Uniform Resource Locator)也被称为网址。
统一资源定位器（URL）用于定位万维网上的文档（或其他数据）。遵守以下的语法规则：

scheme://host.domain:port/path/filename

解释：

scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3school.com.cn
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称

URL 编码

URL 只能使用 ASCII 字符集来通过因特网进行发送。
由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。
URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。

XHTML

XHTML 是以 XML 格式编写的 HTML。
如何从 HTML 转换到 XHTML?

向每张页面的第一行添加 XHTML <!DOCTYPE>
向每张页面的 html 元素添加 xmlns 属性
把所有元素名改为小写
关闭所有空元素
把所有属性名改为小写
为所有属性值加引号

JoeLittleStar

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML常用标签

HTML 指的是超文本标记语言 (Hyper Text Markup Language)标签，元素<!DOCTYPE>声明帮助浏览器正确地显示网页。HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。带有 HTML5 DOCTYPE 的 HTML 文档：<!DOCTYPE html>定义 HT...
复制链接

扫一扫