Web前端的学习之路

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可以嵌套使用。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值