HTML学习记录：（一）、基础语法_<p id = "textstyle">-CSDN博客

本文链接：https://blog.csdn.net/dujidan/article/details/116154620
HTML学习记录：（一）、基础语法

<html>
<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>
</html>

<!-- 
<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落 

HTML 标题
HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的

HTML 段落
HTML 段落是通过 <p> 标签进行定义的。

HTML 链接
HTML 链接是通过 <a> 标签进行定义的。    在 href 属性中指定链接的地址。 
    
HTML 图像
HTML 图像是通过 <img> 标签进行定义的。  图像的名称和尺寸是以属性的形式提供的

空的 HTML 元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法
即使 <br> 在所有浏览器中的显示都没有问题，使用 <br /> 也是更长远的保障。

HTML 属性   HTML 
属性提供了有关 HTML 元素的更多的信息。
属性总是在 HTML 元素的开始标签中规定。
提示：使用小写属性
HTML 提示：使用小写属性
在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号
属性	值	描述
class	classname	规定元素的类名（classname）
id	id	规定元素的唯一 id
style	style_definition	规定元素的行内样式（inline style）
title	text	规定元素的额外信息（可在工具提示中显示）

HTML 水平线
<hr /> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。

HTML 注释   
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

提示：使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它！（但是不要用 <br /> 标签去创建列表。）

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

HTML 样式
style 属性的作用：    提供了一种改变所有 HTML 元素的样式的通用方法。
background-color 属性为元素定义了背景颜色
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸
text-align 属性规定了元素中文本的水平对齐方式

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

用于长引用的 HTML <blockquote>   
浏览器通常会对 <blockquote> 元素进行缩进处理。
    
用于缩略词的 HTML <abbr>    
对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。
    
用于定义的 HTML <dfn>   定义项目或缩写的定义。
注释：如果您希望简而化之，请使用第一条，或使用 <abbr> 代替。
    
HTML <address> 元素定义文档或文章的联系信息（作者/拥有者）。
此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。

HTML <cite> 元素定义著作的标题。
浏览器通常会以斜体显示 <cite> 元素

HTML <bdo> 元素定义双流向覆盖（bi-directional override）。
<bdo> 元素用于覆盖当前文本方向：
 -->



<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<a href="http://www.w3school.com.cn">This is a link</a>
<img src="w3school.jpg" width="104" height="142" />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<!-- This is a comment -->
<p>This is<br />a para<br />graph with line breaks</p>

<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
<p>WWF 的目标是：<q>构建人与自然和谐共存的世界。</q></p>
<p>以下内容引用自 WWF 的网站：</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年来，WWF 一直致力于保护自然界的未来。
世界领先的环保组织，WWF 工作于 100 个国家，
并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote>
<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>

1. 如果设置了 <dfn> 元素的 title 属性，则定义项目
<p><dfn title="World Health Organization">WHO</dfn> 成立于 1948 年。</p>
2. 如果 <dfn> 元素包含具有标题的 <abbr> 元素，则 title 定义项目
<p><dfn><abbr title="World Health Organization">WHO</abbr></dfn> 成立于 1948 年。</p>
3. 否则，<dfn> 文本内容即是项目，并且父元素包含定义。
<p><dfn>WHO</dfn> World Health Organization 成立于 1948 年。</p>

<address>
    Written by Donald Duck.<br> 
    Visit us at:<br>
    Example.com<br>
    Box 564, Disneyland<br>
    USA
</address>

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
<bdo dir="rtl">This text will be written from right to left</bdo>



<!-- 
HTML 计算机代码格式
通常，HTML 使用可变的字母尺寸，以及可变的字母间距。
<kbd>, <samp>, 以及 <code> 元素全都支持固定的字母尺寸和间距。

HTML 键盘格式
HTML <kbd> 元素定义键盘输入：
HTML <samp> 元素定义计算机输出示例：
HTML <code> 元素定义编程代码示例：
    <code> 元素不保留多余的空格和折行：
    如需解决该问题，您必须在 <pre> 元素中包围代码

HTML 变量格式化
HTML <var> 元素定义数学变量

HTML 超链接（链接）
有两种使用 <a> 标签的方式：
通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签
使用 Target 属性，你可以定义被链接的文档在何处显示。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像


 -->

 <p>To open a file, select:</p>
 <p><kbd>File | Open...</kbd></p>
 <samp>
    demo.example.com login: Apr 12 09:10:17
    Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>
<code>
    var person = { firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue" }
</code>

<p>Coding Example:</p>

<code>
<pre>
var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
}
</pre>
</code>

<p>Einstein wrote:</p>
<p><var>E = m c<sup>2</sup></var></p>

<a href="http://www.w3school.com.cn/">Visit W3School</a>
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
<a name="tips">基本的注意事项 - 有用的提示</a>
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

<img src="boat.gif" alt="Big Boat">

<!-- 
表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。
字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格和边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用边框属性来显示一个带有边框的表格：
表格的表头
表格的表头使用 <th> 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本：
空单元格
没有内容的表格单元显示得不太好
为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
 -->
 <table border="1">
    <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
    </tr>
    <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
    </tr>
</table>

<table border="1">
    <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>row 2, cell 2</td>
    </tr>
    </table>

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