HTML5定义的8个新的语义(semantic)元素,所有的这些元素都是块级元素。为了让旧版本的浏览器正确显示这些元素,可以设置css的display属性值为block
实例:
header,section,footer,aside,nav,main,article,figure{
display:block;
}
如何给HTML添加新元素
<html>
<head>
<meta charset="utf-8">
<title>为html添加新元素</title>
<script>document.createElement("myHero")</script>
<style>
myHero{
display:block;
background-color:#ddd;
padding:50px;
font-size:30px;
}
</style>
</head>
<body>
<h1>爱上明天</h1>
<p>爱上明天</p>
<myHero>爱上明天</myHero>
</body>
</html>
JavaScript语句doucument.createElement(“myHero”)是为了给HTML添加新元素
常用HTML标签:
img
功能:显示图片
属性:src,用于图片资源的制定路径,可以是一个http地址,也可以是本地路径;alt,用于显示提示性信息,如果图片加载成功,将鼠标悬停在该图片上,会显示提示性文字;如果失败,会显示该文字
注意:img是一个单标签,没有结束标签。
p
功能:指示一个段落
pre
功能:在网页中,空格和换行会被忽略,该标签可以用于保持文字的格式。
br
功能:换行。
注意:br是一个单标签
h1-h6
功能:指示标题,从1至6逐渐变小。
span和div
功能:没有任何可见效果,就只是作为其他标签的父标签(或者说是容器)引入,方便对某些内容运用css。
table
功能:指示一个表格。
子标签:
caption:表格的表题(可选)
tr:表示表格的一行
th:表示一列的表头(可选)
td:表示一列的单元格
a
功能:超链接,实现跳转。
属性:
href:表示超链接要跳转到的资源路径
1>可以是http地址或本地文件系统html文档的路径
2>可以是本文档的锚点(#+其他元素的name属性)
target:表示该超链接该以何种方式打开。
可取值:
_self表示在当前窗口打开
_blank表示在空白页打开
frame的name属性值,在frameset中使用到,表示在该名称的frame中打开(这是利用框架,在框架中的某一个格子里面打开)
ol和ul
功能:展示一个列表,ol是有序列表,ul是无序列表
子标签:li表示一个列表项
frameset
功能:用于将当前窗体分为几部分;
属性:rows:表示将当前窗体分成几行。可取值:数字(表示像素大小),百分数(表示当前窗体大小的百分数),*(表示剩余部分)
例如:rows=“20%,,20%”表示当前窗体从上到下分为3个部分,上部窗体占整个窗体20%的高度(宽度是原窗体高度)下部也为20%,而则是剩下的部分。
cols:表示窗体分为几列。可以参见rows。
noresize:指示当前窗体中的各个部分不能改变大小,可取值:noresize。
frameborder:窗体各个部分的边框大小。
子标签:
frame:表示一个子窗体。
属性:
src:当前窗体要加载的资源路径,可以是http地址,也可以是本地文件系统HTML文件路径。
name:当前窗体的名称,可以结合a标签在frameset中使用。
注意:frameset可以嵌套使用。