简单的网页结构和常用的标签

目录

一.最简单的网页结构

二. 常用的标签

1.标题标签

2.段落标签

3.标题分组

4.强调标签

5.强调标签

6.强制换行标签

7.自结束标签

8.删除线标签

9.居中标签

10.img标签


一.最简单的网页结构

<!-- ctrl+/ 注释符号 通过注释给大家写一些笔记  -->

<!-- html 标签,跟标签/根元素 所有的网页内容都要写在html里面

开始标签和结束标签中间 ,一个页面只能一个html标签-->

<!-- 最简单的网页结构-->

<html>

    <!--head 标签 保存一些元信息 它里面的内容 用户是看不到的 主要帮助浏览器编译代码

     -->

     <head></head>

     <!-- body标签 书写网页的主体内容 所有的给用户看的,都写在body里面-->

     <body >

         我的第一个页面

     </body>

</html>


<html>
     <head></head>
     <body >
     </body>
</html>

二. 常用的标签

1.标题标签

h1,h2,h3,h4,h5.h6

默认样式: h1-h6字体的大小逐步减小,字体会加粗,会变黑

<h1>感觉要下雨了</h1>
<h2>感觉要下雨了</h2>

    注意:

        h1的语义是最重的,所以一个页面只有一个

         常用的标题标签h1-h6

        标题标签会独占一行,是块元素

2.段落标签

<p></p>

默认样式:段落与段落之间有较大的间隙

          段落标签也会独占一行,也是块元素

<p>感觉要下雨了</p>

3.标题分组

<hgroup></hgroup>

让标题之间有关系,没有默认样式

<hgroup>
        <h1>古诗一首</h1>
        <h2>杜甫</h2>
    </hgroup>

4.强调标签

<strong></strong>

 默认样式 :字体加粗加黑

<p>
    同学们,看着真帅
    同学们,看着<strong>真帅</strong>
</p>

5.强调标签

<em></em>

默认样式:字体斜体了

<p>
        同学们看着<em>真帅</em>
 </p>

6.强制换行标签

<br>(</br>)

<P>
强制换行<br>
强制换行
强制换行
</P>

7.自结束标签

<hr>(分割线)

8.删除线标签

<del></del>

<p>
原价:<del>199999元</del><br>
现价:1999元
</p>

9.居中标签

<center></center>

<center>
        <h1>1</h1>
</center>

10.img标签

<img src="" alt="" width="" height="">

引入图片 也是一个自结束标签,开始标签里 可以添加多个属性,用空格隔开即可

        4个属性

        src 引入图片的路径 暂时放入一个同一文件夹里

        alt 是对图片的描述 正常情况下,alt的内容是不显示的,当图片的路径出现问题了,图片引入不成功,alt就会显示,它可以帮助浏览器检索图片,养成写alt的习惯

        width 设置图片的宽度

        height 设置图片的高度

        一般情况下,不会同时设置width和height,只要单独设置一个就可以,另一个会自适应。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值