关于HTML文档头部里面的关键标签在上一篇已经详细介绍过了, 我在今天这篇文章里会盘点其他常用标签的含义和效果.
基础类与格式类
<!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>
页面显示效果:
超链接<a>
<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>
图像类和图像映射
所谓图像映射, 就是将图片或图片中的某些部分, 作为可点击跳转的响应区域. 通过<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>
列表类
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。列表还可以嵌套. 示例如下:
列表项目使用数字进行标记。
有序列表始于 <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>
自定义列表效果如图:
列表嵌套:
<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>
效果如图:
文本类
使用 pre 标签对空行和空格进行控制。可以看到这里对换行和空格都进行了保留.
<pre>
春眠不觉晓
处处闻啼鸟
夜来风雨声
花落 知多少?
</pre>
效果如下:
不同字体效果:
<b>bold</b>
<i>italic</i>
<small>small</small>
<br />
This text contains
<sub>subscript</sub>
<br />
This text contains
<sup>superscript</sup>
效果如图:
表格类
<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>
效果如下:
<tr>
<td>100</td>
<td>200</td>
<th colspan="2" >300</th> //设置了一个列扩展, 可以是任何位置
<tr>
<td> </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>
效果如下图
表格实现嵌套:
<td>这个单元包含一个表格:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
样式类
<div style="color:#00FF00"> //定义一个块元素并设置其中字体颜色
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
设置 <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的区别
- 唯一性: HTML id 属性用于 为HTML 元素指定唯一的 id。一个 HTML文档中不能存在多个有相同 id 的元素。而同一个class却可以由多个 HTML 元素使用
- 多用途: id 属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。通过 ID 和href链接实现页内锚
- class 可以用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。
注释:id名和class名是区分大小写的!
其他关键标签
点击按钮更改文字:
<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