HTML的结构标签

举报
初学者7000 发表于 2020/07/23 09:02:24 2020/07/23
8k+ 0 1
【摘要】 HTML的结构标签结构便签是构建一个网页基本结构的主要元素,html的每一个元素都值得研究,今天就开个头。div 盒子标签 没有任何的样式 双标签 可用属性:align:left,right,center,justify,可以对内容的放置位置进行设定。同时支持html的大量事件属性,全局属性,着重要研究”style“,感觉以后可以写写。P 段落标签 默认有上下外边距 双标签 可用...

HTML的结构标签

结构便签是构建一个网页基本结构的主要元素,html的每一个元素都值得研究,今天就开个头。

div 盒子标签 没有任何的样式 双标签

    可用属性:align:left,right,center,justify,可以对内容的放置位置进行设定。同时支持html的大量事件属性,全局属性,着重要研究”style“,感觉以后可以写写。



    可用属性:同上。
h1~h6 标题标签 字体逐次减小 双标签 默认上下边距 字体加粗 字体变大 h1为主标签 其余为副标签 h1作为主标签一个网页只能出现一次,虽然多了还是可以显示,但是根据规范,并且在文件验证的时候仍然报错,还是就写一个。

    可用属性:除了align,标准属性支持id, class, title, style, dir, lang, xml:lang;标准属性:onclick, ondblclick, onmousedown, onmouseup, onmouseover, 

onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

span 空元素标签 没有任何意义 双标签

    可用属性:大量的事件属性和全局属性。

em和i 斜体字标签 双标签 虽然都是斜体字标签,但是em标签具有强调语义,强调作用是针对浏览器的,用户从界面上看不出来两个的区别

    可用属性:除了align,标准属性支持id, class, title, style, dir, lang, xml:lang;标准属性:onclick, ondblclick, onmousedown, onmouseup, onmouseover, 

onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

strong与b 加粗字体标签 双标签 strong具有强调的语义

<!--网页基本结构-->

<!doctype html> 

<!--文档申明 

!(申明)

doc(document 文档)

html (html5)

-->

<html> 

<head><!-- 头部标签  看不见但是又和我们本身相关的一些东西(标签)-->

<meta charset="UTF-8" /><!-- 申明当前网页的字符编码 保存时的编码和这里的要一致-->

<!-- 网页的标题 -->

<title>今天是第一节课</title>

<!-- 

对网页的描述

-->

<meta name="description" content="课程真的不错不错" />

<meta name="keywords" content="课程真的不错不错" />

<style type="text/css">

div,p,h1{

border:1px solid red;

</style>

</head>

<body>

   课程真的不错不错




<div>课程真的不错不错div</div><!-- 盒子标签  无任何默认样式 语义用来装东西的盒子-->

<p>课程真的不错不错</p><!-- 段落标签,有默认的上下外边距 语义就是个段落-->

<h1>课程真的不错不错</h1><!-- 标题标签,有默认的上下外边距,字体默认加粗变大 语义就是个标题 -->

<h2>课程真的不错不错</h2>

<h3>课程真的不错不错</h3>

<h4>课程真的不错不错</h4>

<h5>课程真的不错不错</h5>

<h6>课程真的不错不错</h6><!-- 标题一共有6个,其中h1是核心标题,其他都是副标题,核心标题同一个网页只能用一次 -->



<span>课程真的不错不错</span><!-- span  空元素标签,没有任何语义和形式,什么时候都可以使用 -->



<!-- 斜体标签em iem 强调的含义i  单纯的斜体 默认字体斜体-->

<em>课程真的不错不错</em>

<i>课程真的不错不错</i>

<!-- 加粗字体strong bstrong 强调的含义b 单纯的加粗默认加粗字体-->

<strong>课程真的不错不错</strong>

<b>课程真的不错不错</b>

</body>



image.png

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

作者其他文章

评论(0

抱歉,系统识别当前为高风险访问,暂不支持该操作

    全部回复

    上滑加载中

    设置昵称

    在此一键设置昵称,即可参与社区互动!

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。