HTML的秘密(2)常用标签及属性盘点

341 阅读5分钟

关于HTML文档头部里面的关键标签在上一篇已经详细介绍过了, 我在今天这篇文章里会盘点其他常用标签的含义和效果.

基础类与格式类

image.png

<!DOCTYPE html>
<html lang="en">   <!--<html> 与 </html> 之间的文本描述网页-->
<head>
<meta charset="UTF-8">
<title>Practice</title>
</head>
<body>              //<body></body> 之间的文本是可见的页面内容
  <h1>This is a heading</h1>        //一共有6个等级的标题格式
  <h2>This is a heading</h2>
  <h3>This is a heading</h3>
  <p>This is a paragraph.</p>      //<p></p> 之间的文本被显示为段落
  <p>This is another paragraph.</p>     //两个段落
</body>
</html>

页面显示效果:

image.png

超链接<a>

image.png

<h3 align="right"><a name="test">This is a heading</a></h3>     <!--将标题定义为锚点-->
<a href="#test">本文的链接</a>   <!--跳转锚点-->

也可以在其他页面中创建指向该锚的链接:
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
假如浏览器找不到已定义的命名锚,那么就会定位到文档的顶端。不会有错误发生。

发送邮件:
<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>

下面的这行会在新窗口打开文档:
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

图像类和图像映射

image.png

所谓图像映射, 就是将图片或图片中的某些部分, 作为可点击跳转的响应区域. 通过<map><map/>来定义这个响应区域, 包括跳转目标, 响应区域的形状等等. 然后在<img/>中通过usemap属性来调用这个设置, 示例如下:

 <img src="eg_planets.jpg"           //插入图片, 指定位置
    usemap="#snowmap"        //使用图片映射#snowmap
    alt="Planets" />             //设置显示名称
<map name="snowmap" id="snowmap">    //新建map映射, 设置name和id, 必须相同
<area             //响应区域, 形状, 位置, 跳转链接, 跳转方式, 别名
    shape="circle"
    coords="180,139,14"
    href="https://w3school.com.cn/example/html/venus.html"
    target="_blank"
    alt="Venus"/>
</map>

在映射标签中的name和id属性, HTML有一些规范: 首先必须是在文档中唯一的, 并且非空, 可以只用name或者只用id来标识map, 但是如果两者都用的话, 两者的值必须一样.

注意: 在图像<img>定义中的alt属性非常重要, 它用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息.

HTML5<figure> 和<figcaption> 元素

通过 HTML5,图片和标题能够被组合在 <figure> 元素中 <img> 元素定义图像,<figcaption> 元素定义标题。

<figure>
<img src="MN1.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>

image.png

列表类

image.png

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。列表还可以嵌套. 示例如下:

列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol start="50">
  <li>咖啡</li>
  <li>牛奶</li>
  <li></li>
</ol>

<dl>
<dt>Coffee</dt><dt>Coffee</dt><dt>Coffee</dt>
<dd>Black hot drink</dd>
<dd>Black hot drink</dd>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

自定义列表效果如图: image.png

列表嵌套:
<ul>
<li>first item</li>
<li>second item
    <!-- Look, the closing </li> tag is not placed here! -->
    <ol>
        <li>second item first subitem</li>
        <li>second item second subitem</li>
        <li>second item third subitem</li>
    </ol>
    <!-- Here is the closing </li> tag -->
</li>
<li>third item</li>
</ul>

效果如图:

image.png

文本类

image.png

使用 pre 标签对空行和空格进行控制。可以看到这里对换行和空格都进行了保留.
<pre>
春眠不觉晓
    处处闻啼鸟

夜来风雨声

    花落  知多少?
</pre>

效果如下:

image.png

不同字体效果:
<b>bold</b>
<i>italic</i>
<small>small</small>
<br />
This text contains
<sub>subscript</sub>
<br />
This text contains
<sup>superscript</sup>

效果如图: image.png

表格类

image.png

<table border="1">
<caption>Superheros and sidekicks</caption>  //表格标题
<colgroup>               //定义列表组, 并赋予不同样式
    <col>
    <col span="2" class="batman">    //将2个列编成一个组
    <col span="2" class="flash">     //引用class样式
</colgroup>
<tr>
    <td> </td>
    <th scope="col">Batman</th>            //定义表头关联的对象
    <th scope="col">Robin</th>
    <th scope="col">The Flash</th>
    <th scope="col">Kid Flash</th>
</tr>
<tr>
    <th scope="row">Skill</th>
    <td>Smarts</td>
    <td>Dex, acrobat</td>
    <td>Super speed</td>
    <td>Super speed</td>
</tr>
</table>

效果如下:

image.png

<tr>
    <td>100</td>
    <td>200</td>
    <th colspan="2" >300</th>       //设置了一个列扩展, 可以是任何位置
<tr>
<td>&nbsp;</td>
<td>3902</td>
<td>600</td>
<td>333</td>
</tr>
<tr>
<th rowspan="2">399</th>    //行扩展, 其中的首行必须在它自己的tr内定义
    <td>32</td>
    <td>33</td>
    <td>90</td>
</tr>
<tr>
    <td>09</td>
    <td>99</td>
    <td>99</td>
</tr>

效果如下图

image.png

表格实现嵌套:

    <td>这个单元包含一个表格:
        <table border="1">
            <tr>
                <td>A</td>
                <td>B</td>
            </tr>
            <tr>
                <td>C</td>
                <td>D</td>
            </tr>
        </table>
    </td>

image.png

样式类

image.png

<div style="color:#00FF00">           //定义一个块元素并设置其中字体颜色
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>

image.png 设置 <div> 元素的类,使我们能够为相同的 <div> 元素设置相同的类

定义一个类, 在head部分, 通过\<style>包裹:
<head>
<style>
.cities {                //class name
background-color:black;
color:white;
margin:20px;
padding:20px;
} 
</style>
</head>
<div class="cities">     //div引用这个class样式
……
</div>
<h1>My <span class="cities">Important</span> Heading</h1>    //span引用
...

id 的语法是:写一个井号 (#),后跟一个 id 名称。然后,在花括号 { } 中定义 CSS 属性。

<head>
<style>
#myHeader {             //设置id
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<h1 id="myHeader">My Header</h1>    //引用这个id对应的样式

class与id的区别

  1. 唯一性: HTML id 属性用于 为HTML 元素指定唯一的 id。一个 HTML文档中不能存在多个有相同 id 的元素。而同一个class却可以由多个 HTML 元素使用
  2. 多用途: id 属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。通过 ID 和href链接实现页内锚
  3. class 可以用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。

注释:id名和class名是区分大小写的!

其他关键标签

image.png

点击按钮更改文字:
<p id="js1">daijiaoben</p>
<button type="button" onclick="jsfunction()"> click </button>
<script>
function jsfunction(){
    document.getElementById('js1').innerHTML='test'  //定义函数
}
</script>

iframe 用于在网页内显示网页。添加 iframe 的语法:

<iframe 
src="https://www.w3school.com.cn/tags/tag_term_hypertext.asp" 
width="80%" height="600" name="iframe_a">
</iframe>

URL 指向隔离页面的位置。h eight 和 width 属性用于规定 iframe 的高度和宽度。属性值的默认单位是像素,但也可以用百分比来设定(比如 "80%")。 name 用于定位嵌入的浏览上下文的名称。该名称可以用作 <a> 标签与 <form> 标签的 target 属性值

由于链接的目标匹配 iframe 的名称,所以下面的链接会在 iframe 中打开:

<p>
<a href="http://www.w3school.com.cn" 
target="iframe_a">W3School.com.cn</a>
</p>

以上, 就是常用的HTML标签及属性, 之后随着学习深入还会再补充.

感谢阅读, 如有不准确或错误之处请留言指正, 我会及时修改, 拜谢!


总结不易, 请勿私自转载, 否则别怪老大爷不客气!

欢迎热爱技术的小伙伴儿和我交流, 微信1296386616

参考资料:

WWW.W3SCHOOL.COM.CN W3SHOOL

developer.mozilla.org/ MDN web doc