HTML学习

最新推荐文章于 2025-09-13 23:06:41 发布

weixin_33779515

最新推荐文章于 2025-09-13 23:06:41 发布

阅读量48

点赞数

CC 4.0 BY-SA版权

文章标签： python xhtml

原文链接：https://my.oschina.net/zengjs275/blog/780045

本文介绍了HTML的基本元素及其用途，包括标题、链接、样式定义等，并详细解释了如何使用<base>、<link>、<style>等标签以及如何设置图片、列表和元数据。

2019独角兽企业重金招聘Python工程师标准>>>

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码

HTML <title> 标签元素在所有 HTML/XHTML 文档中都是必需的。
title 元素能够：
定义浏览器工具栏中的标题
提供页面被添加到收藏夹时显示的标题
显示在搜索引擎结果中的页面标题

HTML <base> 元素
<base> 标签为页面上的所有链接规定默认地址或默认目标（target）：
<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>

HTML <link> 元素
<link> 标签定义文档与外部资源之间的关系。
<link> 标签最常用于连接样式表：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

HTML <style> 元素
<style> 标签用于为 HTML 文档定义样式信息。
您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式：
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<a href="http://www.w3school.com.cn">This is a link</a>
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。

空元素 开始标签与介绍标签一体<br />
<img src="w3school.jpg" width="104" height="142" />
<img src="boat.gif" alt="Big Boat">当加载图片失败时显示alt指定的文字
<body background="/i/eg_background.jpg">添加背景图片
<p>图像 <img src ="/i/eg_cute.gif" align="middle"> 居中显示</p>

HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
但是推荐使用小写

始终为属性值加双引号，属性本身含有双引号则使用单引号。

标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
浏览器会自动地在标题的前后添加空行。
请确保将 HTML heading 标签只用于标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。

<hr /> 标签在 HTML 页面中创建水平线。

<!-- 注释 -->

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签
<p>This is<br />a para<br />graph with line breaks</p>

浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。

style 属性提供了一种改变所有 HTML 元素的样式的通用方法，用style替代部分旧标签
font-family、color 、 font-size 、text-align 分号隔开
<p style="font-family:arial;color:red;font-size:20px;text-align:center;">A paragraph.</p>

<abbr title="etcetera">etc.</abbr>
在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。

文字上加删除线
<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>

<q> 元素定义短的引用，浏览器通常会为 <q> 元素包围引号。

<blockquote> 元素定义被引用的节，浏览器通常会对 <blockquote> 元素进行缩进处理。

 <address> 元素定义文档或文章的联系信息（作者/拥有者）。
此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。

 <pre> 元素中包围代码段，能按空格输出，正常显示代码。否则连续输出。

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

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

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

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

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

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

当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

命名锚的语法：

<a name="label">锚（显示在页面上的文本）</a>

首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：

<a name="tips">基本的注意事项 - 有用的提示</a>

然后，我们在同一个文档中创建指向该锚的链接：

<a href="#tips">有用的提示</a>

您也可以在其他页面中创建指向该锚的链接：

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。

图片map技术http://www.w3school.com.cn/tiy/t.asp?f=html_areamap

HTML表格实例http://www.w3school.com.cn/html/html_tables.asp

列表

无序列表 <ul>。有序列表 <ol>.每个列表项始于 <li>。

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

meta标签的作用：

meta标签共有两个属性，它们分别是http-equiv属性和name属性。
　　1、name 属性 ：
　　<meta name="Generator" contect="">用以说明生成工具（如Microsoft FrontPage 4.0）等；
　　<meta name="KEYWords" contect="">向搜索引擎说明你的网页的关键词；
　　<meta name="DEscription" contect="">告诉搜索引擎你的站点的主要内容；
　　<meta name="Author" contect="姓名">告诉搜索引擎你的站点的制作的作者；
　　<meta name="Robots" contect= "all|none|index|noindex|follow|nofollow">
　　其中的属性说明如下：
　　设定为all：文件将被检索，且页面上的链接可以被查询；
　　设定为none：文件将不被检索，且页面上的链接不可以被查询；
　　设定为index：文件将被检索；
　　设定为follow：页面上的链接可以被查询；
　　设定为noindex：文件将不被检索，但页面上的链接可以被查询；
　　设定为nofollow：文件将被检索，页面上的链接不可以被查询。
　　2、http-equiv属性 ：
　　<meta http-equiv="Content-Type" contect="text/html";charset=gb_2312-80">
　　<meta http-equiv="Content-Language" contect="zh-CN">
　　用以说明主页制作所使用的文字以及语言；
　　<meta http-equiv="Refresh" contect="n;url=http://yourlink">
　　定时让网页在指定的时间n内，跳转到页面http://yourlink；
　　<meta http-equiv="Expires" contect="Mon,12 May 2001 00:20:00 GMT">
　　可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。
　　需要注意的是必须使用GMT时间格式；
　　<meta http-equiv="Pragma" contect="no-cache">
　　是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出；
　　<meta http-equiv="set-cookie" contect="Mon,12 May 2001 00:20:00 GMT">
　　cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式；
　　<meta http-equiv="Pics-label" contect="">
　　网页等级评定，在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，
　　而网站的限制级别就是通过meta属性来设置的；
　　<meta http-equiv="windows-Target" contect="_top">
　　强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用；
　　<meta http-equiv="Page-Enter" contect="revealTrans(duration=10,transtion= 50)">
　　<meta http-equiv="Page-Exit" contect="revealTrans(duration=20，transtion=6)">
　　设定进入和离开页面时的特殊效果，这个功能即FrontPage中的“格式/网页过渡”，不过所加的页面不能够是一个frame页面。

转载于:https://my.oschina.net/zengjs275/blog/780045