HTML+CSS标签——基础标签（div、span、iframe、meta）
<!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&source=s_q&hl=en&geocode=&q=charing+cross+road+london&output=embed"></iframe>
</div><!-- end content -->
<p>©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&source=s_q&hl=en&geocode=&q=charing+cross+road+london&output=embed"></iframe>
</div><!-- end content -->
这段代码是页面的正文（body）部分，其中包含了页面的主要内容，包括书店的地址、电话和邮箱等联系方式，以及通过嵌入 Google 地图进行的地址定位展示。
第 27 行至第 29 行：
<p>©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>：这个元素用于创建一个下拉列表，提供多个选项供用户选择。
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！