HTML+CSS标签——基础标签（div、span、iframe、meta）

发布时间：2023年12月29日

<!DOCTYPE html PUBLIC
   "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta name="description" content="Telephone,emil and directions for The Art Bookshop ,London,UK"/>
		<title>Contact The Art Bookshop,London UK</title>
	</head>
	<body>
		<div id="header">
			<h1>The Art Book Shop</h1>
			<ul>
				<li><a href="3.html">home</a></li>
				<li><a href="3.html">new publications</a></li>
				<li class="current-page"><a href="3.html">contact</a></li>
			</ul>
		</div><!-- end header -->
		<div id="content">
			<p>Charing Cross Road,London,WC2,UK</p>
			<p><span class="contact">Telephone</span>0207 946 0946</p>
			<p><span class="contact">Email</span><a href="mailto:books@example.com">books@example.com</a></p>
			<iframe width="425" height="275" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" scr="http://maps.google.co.uk/map?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=charing+cross+road+london&amp;output=embed"></iframe>
		</div><!-- end content -->
		<p>&copy;The Art Bookshop</p>
	</body>
</html>

?这段代码是一个简单的HTML页面，描述了一个名为“The Art Bookshop”的书店的联系方式。页面包括书店的名称、导航菜单、地址、电话号码、电子邮件和一个嵌入的Google地图。书店位于伦敦的 Charing Cross Road。

第 1 行至第 3 行：

<!DOCTYPE html PUBLIC
   "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

这段代码是 HTML 文件的文档类型声明（DOCTYPE），表示该文件是 HTML 4.01 Transitional 标记的文档，声明了浏览器应该使用何种规范来解释该文件的内容。

第 4 行至第 14 行：

<html>
	<head>
		<meta name="description" content="Telephone,emil and directions for The Art Bookshop ,London,UK"/>
		<title>Contact The Art Bookshop,London UK</title>
	</head>

这段代码是页面的头部（head）部分，其中包含了网页的元数据和标题信息。其中?meta?元素指定了该页面的描述信息，标题元素?title?定义了页面的标题。

第 15 行至第 26 行：

	<body>
		<div id="header">
			<h1>The Art Book Shop</h1>
			<ul>
				<li><a href="3.html">home</a></li>
				<li><a href="3.html">new publications</a></li>
				<li class="current-page"><a href="3.html">contact</a></li>
			</ul>
		</div><!-- end header -->
		<div id="content">
			<p>Charing Cross Road,London,WC2,UK</p>
			<p><span class="contact">Telephone</span>0207 946 0946</p>
			<p><span class="contact">Email</span><a href="mailto:books@example.com">books@example.com</a></p>
			<iframe width="425" height="275" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" scr="http://maps.google.co.uk/map?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=charing+cross+road+london&amp;output=embed"></iframe>
		</div><!-- end content -->

这段代码是页面的正文（body）部分，其中包含了页面的主要内容，包括书店的地址、电话和邮箱等联系方式，以及通过嵌入 Google 地图进行的地址定位展示。

第 27 行至第 29 行：

		<p>&copy;The Art Bookshop</p>
	</body>
</html>

<!DOCTYPE>：这是文档类型声明，指定该HTML文档使用的DTD（文档类型定义）。在这里，使用了HTML 4.01 Transitional DTD。
<html>：这是HTML文档的根元素，表示整个HTML文档的开始和结束。
<head>：这个元素包含了一些关于文档的元数据，其中包括了标题和元描述。该部分通常用于定义文档的外部样式表、脚本、字符编码和其他信息。
<meta>：这个元素用于定义关于HTML文档的元数据。在给定的代码中，<meta>标签用来指定文档的描述内容（通过name属性）。
<title>：这个元素用于定义HTML文档的标题，显示在浏览器的标题栏或标签页中。
<body>：这个元素包含了HTML文档的主要内容，所有在网页中显示的内容都需要放在这个标签中。
<div>：这个元素用于在文档中创建一个区块（或容器），通常用于组织和布局HTML文档中的内容。
<h1>：这个元素用于定义HTML文档中的标题，其级别从h1到h6都表示不同的标题级别。
<ul>：这个元素用于创建一个无序列表，其中包含多个列表项。
<li>：这个元素用于定义无序列表中的一个列表项。
<a>：这个元素用于创建超链接，可以在HTML文档中跳转到其他网页或位置。
<p>：这个元素用于定义一个段落。
<span>：这个元素用于将文本的一部分设置为特定的样式或应用额外的标记。
<iframe>：这个元素用于在网页中嵌入其他网页、文档或应用程序。
<br>：这个元素用于在文本中创建一个换行符，通常用于在段落中插入换行。
<img>：这个元素用于向HTML文档中插入图像。它通过src属性指定要显示的图像的URL，并可以使用alt属性为图像定义替代文本。
<script>：这个元素用于在HTML文档中引入JavaScript代码。可以通过src属性指定一个外部脚本文件，或者直接在<script>标签中编写JavaScript代码。
<style>：这个元素用于在HTML文档中定义内部样式表。可以在<style>标签中编写CSS样式规则，来为HTML元素定义样
<header>：这个元素用于定义HTML文档的页眉部分。通常用于包含网页的标题、logo、导航菜单等内容。
<nav>：这个元素用于定义导航链接的区域。通常用于包含网页的导航菜单，比如链接到其他页面或同一页面中的不同部分。
<footer>：这个元素用于定义HTML文档的页脚部分。通常用于包含版权信息、联系方式等内容。
<table>：这个元素用于创建一个表格。通过嵌套的<tr>（表格行）和<td>（表格数据）标签，可以定义表格的结构和内容。
<form>：这个元素用于创建一个表单，用于将用户输入的数据发送到服务器。表单可以包含输入字段、按钮、复选框等元素。
<input>：这个元素用于创建一个输入字段，可以接受用户输入的数据。包括文本输入框、单选按钮、复选框、提交按钮等不同类型。
<button>：这个元素用于创建一个按钮，可以通过JavaScript或者表单提交等触发特定的操作。
<label>：这个元素用于给表单元素（比如输入字段）定义一个标签，用于描述该字段的用途或内容。
<select>：这个元素用于创建一个下拉列表，提供多个选项供用户选择。

文章来源:https://blog.csdn.net/weixin_66547608/article/details/135297682
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！