html 基础总结

来源：互联网发布：美国房地产市场数据编辑：程序博客网时间：2024/06/02 03:06

一、基础
1. HTML 标题: HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
<h1>This is a heading</h1>
<h6>This is a heading</h6>

2. HTML 段落: HTML 段落是通过 <p> 标签进行定义的。
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

3. HTML 链接: HTML 链接是通过 <a> 标签进行定义的。
<a href="http://www.w3school.com.cn">This is a link</a>
在新窗口打开超链接
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

4. HTML 图像: HTML 图像是通过 <img> 标签进行定义的。
<img src="w3school.jpg" width="104" height="142" />

5. HTML 邮件:
<p>
这是邮件链接：
<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
</p>

<p>
<b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
</p>

. 常用标签
文本格式化标签：
<b> 定义粗体文本。
<big> 定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。
<small> 定义小号字。
<strong> 定义加重语气。
<sub> 定义下标字。
<sup> 定义上标字。
<ins> 定义插入字。
<del> 定义删除字。
<s> 不赞成使用。使用 <del> 代替。
<strike> 不赞成使用。使用 <del> 代替。
<u> 不赞成使用。使用样式（style）代替。

计算机输出标签：
<code> 定义计算机代码。
<kbd> 定义键盘码。
<samp> 定义计算机代码样本。
<tt> 定义打字机代码。
<var> 定义变量。
<pre> 定义预格式文本。
<listing> 不赞成使用。使用 <pre> 代替。
<plaintext> 不赞成使用。使用 <pre> 代替。
<xmp> 不赞成使用。使用 <pre> 代替。

引用、引用和术语定义
<abbr> 定义缩写。
<acronym> 定义首字母缩写。
<address> 定义地址。
<bdo> 定义文字方向。
<blockquote>定义长的引用。
<q> 定义短的引用语。
<cite> 定义引用、引证。
<dfn> 定义一个定义项目。
布局
<br/> 换行
<hr/> 定义一条水平分割线
 注释

二、样式和布局
<style> 定义样式定义。
<link> 定义资源引用。
<div> 定义文档中的节或区域（块级）。
<span> 定义文档中的行内的小块或区域。
<font> 规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。
<basefont> 定义基准字体。不赞成使用。请使用样式。
<center> 对文本进行水平居中。不赞成使用。请使用样式。

1. 背景色
<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>
不推荐旧的方式：
<body bgcolor="yellow">
<p>The old bgcolor attribute only works on the body element.</p>
<p>For future proof HTML, use styles instead:</p>
</body>

2. 字体类型/字体大小/字体颜色
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>

不推荐旧的方式：
<h1><font face="verdana">A heading</font></h1>
<p><font size="5" face="arial" color="red">A paragraph.</font></p>

3. 文本对齐方式
<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
不推荐旧的方式：
<h1 align="center">This is heading 1</h1>

4. 外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
5. 内部样式表
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

6. 内联样式
<p style="color: red; margin-left: 20px">This is a paragraph</p>

阅读全文

1 0