标签：格式化 列表 最大的 加载 相关 指定 项目 语法 方式
段落相关标签<p><br><hr>
格式化相关标签<small><sub><sup><pre>
列表相关标签<ol><ul><li>
图片相关标签<img>
超链相关标签<a>
本章重点：段落相关标签，超链标签
本章难点：超链相关标签<a>
标题元素：
标题元素由标签<h1>到<h6>定义。<h1>定义了最大的标题元素，<h6>定义了最小的。
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
HTML自动在一个标题元素前后各添加一个空行。
段落：
段落是用<p>标签定义的。
<p>This is another paragraph</p>
HTML自动在一个段落前后各添加一个空行。
换行：
当需要结束一行，并且不想开始新段落时，使用<br>标签。<br>标签不管放在什么位置，都能够强制换行。
<p>This <br> is a para<br>graph with line breaks</p>
<br>标签是一个空标签，它没有结束标记。
格式化文字：
<html>
<body>
<b>This text is bold</b><br>
<strong>
This text is strong
</strong><br>
<big>
This text is big
</big><br>
<em>
This text is emphasized
</em><br>
<i>
This text is italic
</i><br>
<small>
This text is small
</small><br>
This text contains
<sub>
subscript
</sub><br>
This text contains
<sup>
superscript
</sup>
</body>
</html>
这个例子说明了在HTML里面可以怎样格式化文本。
无序列表：
无序列表是一个项目的序列。各项目前加有标记（通常是黑色的实心小圆圈）。
无序列表以<ul>标签开始。每个列表项目以<li>开始。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
无序列表的项目中可以加入段落、换行、图像，链接，其他的列表等等。
有序列表：
有序列表也是一个项目的序列。各项目前加有数字作标记。
有序列表以<ol>标签开始。每个列表项目以<li>开始。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
更多示例：
有序列表的不同类型：
<html>
<body>
<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase letters list:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Roman numbers list:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>
这个例子显示了有序列表的不同类型。
无序列表的不同类型：
<html>
<body>
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Circle bullets list:</h4>
<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Square bullets list:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
这个例子显示了无序列表的不同类型。
Img标签和src属性：
在HTML里面，图像是由<img>标签定义的。
<img>是空标签，意思是说，它只拥有属性，而没有结束标签。
想要在页面上显示一个图像，需要使用src属性。“src”表示“源”的意思。“src”属性的值是所要显示图像的URL。
插入图像的语法：
URL指向图像存储的地址。网站“www.w3schools.com”子目录“images”中的图像“boat.gif”的URL如下： “http://www.w3schools.com/images/boat.gif”。
当浏览器在文档中遇到img标签时，就放置一个图像。如果把img标签放在两个段落之间，就会先显示一个段落，然后是这个图像，最后是另外一个段落。
alt属性：
alt属性用来给图像显示一个“交互文本”。alt属性的值是由用户定义的。
“alt”属性在浏览器装载图像失败的时候告诉用户所丢失的信息，此时，浏览器显示这个“交互文本”来代替图像。给页面上的图像都加上alt属性是一个好习惯，它有助于更好地显示信息，而且，对纯文本浏览器很有用。
基本注意点——有用的技巧:
如果一个HTML文档包含10个图像，那么为了正确显示这个页面，需要加载11个文件。加载图像是需要时间的，所以请谨慎使用图像。
更多示例：
调整图像大小：
<html>
<body>
<p>
<img src="./images/hackanm.gif" width="20" height="20">
</p>
<p>
<img src="./images/hackanm.gif" width="45" height="45">
</p>
<p>
<img src="./images/hackanm.gif" width="70" height="70">
</p>
<p>
You can make a picture larger or smaller changing the values in the "height" and "width" attributes of the img tag.
</p>
</body>
</html>
背景图像：
<html>
<body background="./images/background.jpg">
<h3>Look: A background image!</h3>
<p>Both gif and jpg files can be used as HTML backgrounds.</p>
<p>If the image is smaller than the page, the image will repeat itself.</p>
</body>
</html>
图像链接：
<html>
<body>
<p>
You can also use an image as a link:
<a href="back.htm">
<img border="0" src="./images/next.gif">
</a>
</p>
</body>
</html>
锚标签和href属性：
HTML使用锚标签（<a>）来创建一个连接到其他文件的链接。锚可以指向网络上的任何资源：HTML页面，图像，声音，影片等等。
创建一个锚的语法：
锚可以指向网络上的任何资源：HTML页面，图像，声音，影片等等。
标签<a>被用来创建一个链接指向的锚，href属性用来指定连接到的地址，在锚的起始标签<a>和结束标签</a>中间的部分将被显示为超级链接。
这个锚定义了一个到W3Schools的链接：
上面这段代码在浏览器中显示的效果如下：
target属性：
使用target属性，你可以定义从什么地方打开链接地址。
下面这段代码打开一个新的浏览器窗口来打开链接：
锚标签和name属性
name属性用来创建一个命名的锚。使用命名锚以后，可以让链接直接跳转到一个页面的某一章节，而不用用户打开那一页，再从上到下慢慢找。
下面是命名锚的语法：
你可以为锚随意指定名字，只要你愿意。下面这行代码定义了一个命名锚：
你应该注意到了：命名锚的显示方式并没有什么与众不同的。
想要直接链接到“tips”章节的话，在URL地址的后面加一个“#”和这个锚的名字，就像这样：
一个链接到本页面中某章节的命名锚是这样写的：
基本注意点——有用的技巧：
尽量在子目录路径后面加一个左斜杠。假如你像下面这样写：href="http://www.w3schools.com/html"，将会产生向服务器产生两个HTTP请求，因为服务器会在后面追加一个左斜杠，产生一个新的请求，就像这样：href="http://www.w3schools.com/html/"。
命名锚通常用来在大型文档的开头创建章节表。这个页面的每个章节被加上一个命名锚，到这些锚的链接被放在页面的顶端。
如果浏览器无法找到指定的命名锚，它将转到这个页面的顶部，而不显示任何错误提示。
更多示例：
在新浏览器窗口中打开链接：
<html>
<body>
<a href="lastpage.htm" target="_blank">Last Page</a>
<p>
If you set the target attribute of a link to "_blank",
the link will open in a new window.
</p>
</body>
</html>
单击超连接，打开一个新窗口：
链接到本页面的某个位置：
<html>
<body>
<p>
<a href="#C4">
See also Chapter 4.
</a>
</p>
<p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<a name="C4"><h2>Chapter 4</h2></a>
<p>This chapter explains ba bla bla</p>
</body>
</html>
单击超连接
标签：格式化 列表 最大的 加载 相关 指定 项目 语法 方式
原文地址：https://www.cnblogs.com/borter/p/9439650.html
