(初识前端) html标签

目录

html基础知识:

1.块属性标签

2.行属性标签

3.行块属性标签


html基础知识:

<!+TAB/enter   补齐代码>

<ctrl + />   快捷注释

p*5快捷创建5个p标签

CSS写在<head>或<放在外部文件中,在head中调用>

HTML写在<body>

1.块属性标签

(1)特点:

     <1>上下排列,独占一行;

     <2>可以设置宽高,如果不设置宽高,宽度自动充满父容器,高度由内容决定;

(2)包含的标签:

     <1>div标签:没有任何意义,一般用来划分区域; 

    代码:

    运行结果:

     

     <2>p标签:段落标签         例:p*5:批量创建段落标签       p{$}*5:给创建的段落标记序号

    代码:

     运行结果:

     <3>h1-h6标签:标题标签       (注意:h1标签一般在一个网页只有一个)

    代码:

     运行结果:

     <4>ul>li标签:无序列表

    代码:

   运行结果:

     <5>ol>li标签:有序列表              <ol   style = "list-style:none">:取消标签样式

    代码:

     运行结果:

2.行属性标签

(1)特点:

     <1>左右排列;

     <2>不支持设置宽高;

     <3>不支持上下的margin(外边距)和padding(内边距);

(2)包含的标签:

     <1>span标签:用来放置文字;

    代码:

    

    运行结果:

    

     <2>a标签:超链接标签,用来跳转网页;

     a标签的属性:

       1)href:  用来放置网页地址(相对路径、网络路径、绝对路径);

                        可以为空,为空为刷新页面;

                        "#"返回顶部;

                        "###"无效链接;

      2)target(跳转方式):

                       _self(默认在本窗口打开);

                       _blank(在新的窗口打开页面);

     注意:     相对路径:  平级直接写文件名;

                                         /下一级;

                                        ../返回上一级;

    代码:

     运行结果:

3.行块属性标签

(1)特点:

     <1>左右排列;

     <2>支持设置宽高;

(2)包含的标签:

     <1>src:用来放置图片的地址(相对地址,网络地址,绝对地址);

     <2>alt:图片加载失败提示信息;

     <3>title:鼠标移入提示信息;

    代码:

    运行结果:

  • 4
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值