HTML学习笔记 03 - 常用标签

一、常用块标签

块标签(block-level tags):在浏览器中单独占一行

1、<div>标签

div是单词division的前3个字母,意为分开分隔,主要作用是将网页中的一块相关内容区域组织在一起。

  • 实例:
<body>
  <div style="width:300px; height:100px; background:#F0F0F0">
    div是一个块标签,通常表示页面中的一个分区或节
  </div>
</body>

说明:

  • <div>标签是一个块标签,通常表示页面中的一个分区,在HTML页面布局时常常用到该标签。
  • 由于<div>标签缺乏语义,HTML5中新增了一些具有语义的标签,如<article><section><nav><aside><header><footer><main><figure><figcaption>等,它们的主要作用均是更具语义的组织页面中的一块相关内容区域,它们也都是块标签,关于它们的用法,将在后面的章节详细介绍,这里不再展开。

2、标题标签<h1><h6>

<h1><h6> 标签用来定义标题。<h1> 定义最大的标题,<h6> 定义最小的标题。标题标签属于块标签。通常用来表现网页内容的结构,本身具有语义

<body>
  <h1>一级标题</h1>
  <h2>二级标题</h2>
  <h3>三级标题</h3>
  <h4>四级标题</h4>
  <h5>五级标题</h5>
  <h6>六级标题</h6>
</body>

说明:

  • 标题标签从<h1><h6>,共6个,标题标签中显示出来的文字为粗体,且依次从大到小

3、段落标签<p>

<p> 标签可定义一个段落,用来表现描述性内容。段落与段落之间有一个空行

  • 实例:
<body>
  <p>  有一天,老马对小马说:“你已经长大了,能帮妈妈做点事吗?”小马连蹦带跳地说:“怎么不能?我很愿意帮您做事。”老马高兴地说:“那好啊,你把这半袋麦子驮到磨坊去吧。”</p>
  <p>  小马驮起口袋,飞快地往磨坊跑去。跑着跑着,一条小河挡住了去路,河水哗哗地流着。小马为难了,心想:我能不能过去呢?如果妈妈在身边,问问她该怎么办,那多好啊!可是离家很远了。他向四周望望,看见一头老牛在河边吃草,小马嗒嗒嗒嗒跑过去,问道:“牛伯伯,请您告诉我,这条河,我能过去吗?”老牛说:“水很浅,刚没小腿,能过去。”</p>
  <p>  小马听了老牛的话,立刻跑到河边,准备过去。突然从树上跳下一只松鼠,拦住他大叫:“小马!别过河,别过河,河水会淹死你的!”小马吃惊地问:“水很深吗?”松鼠认真地说:“当然啦!昨天,我的一个伙伴就掉在这条河里淹死的!”小马连忙收住脚步,不知道怎么办好。他叹了口气说:“唉!还是回家问问妈妈吧!”</p>
</body>

4、水平线标签<hr/>

<hr />标签在浏览器中产生一条水平线。标签都是成对的,即有开始标签就有结束标签,<hr />中的/表示标签结束

  • 实例:
<body>
  <h1>欢迎你</h1>
  <hr />
  <p>快乐工作,快乐学习。</p>
  <p>今天的努力是未来成功的基石</p>
</body>

5、有序列表标签<ol>

<ol>标签表示有序列表标签,<li>标签用来表示每一个列表条目<ol>标签的type属性可以更改有序列表条目符号风格

  • 实例:
<body>
  <h3>注册步骤:</h3>
  <ol type="1">
    <li>填写信息</li> 
    <li>收电子邮件</li>
    <li>注册成功</li>  
  </ol>
</body>

说明:

  • <ol>标签的type属性用来表示条目符号风格,常见的有:
type属性及值 风格
type="1" 以数字风格表示列表顺序
type="a" 以小写字母风格表示列表顺序
type="i" 以罗马数字风格表示列表顺序

6、无序列表标签<ul>

<ul>标签表示无序列表标签,<li>用来表示每一个列表条目。<ul>标签的type属性可以更改无序列表条目符号风格

  • 实例:
<body>
  <h3>新人上路指南</h3> 
  <ul type="disc">
    <li>如何成为优秀的员工</li>
    <li>如何做好每天的工作</li>
    <li>如何成就职业生涯</li>
  </ul>
</body>

说明:

  • <ul>标签的type属性用来表示条目符号风格,常见的有:
type属性及值 风格
type="disc" 以实心圆表示列表顺序
type="square" 以矩形表示列表顺序
type="circle" 以空心圆表示列表顺序

7、描述列表标签<dl>

描述列表使用<dl>标签表示,在<dl>标签中包含标题标签<dt>和描述标签<dd>

  • 实例:
<body>
  <dl>
    <dt>咖啡</dt>
    <dd>一种黑色的热饮料,原料据说是咖啡豆,非洲盛产这类原料。</dd>
    <dd>可以提神,刺激神经。</dd>
  </dl>
</body>

说明:

  • <dl>是定义列表标签;
  • <dt>是定义列表的标题
  • <dd>是定义列表的描述,描述部分会向右侧缩进

二、常用行标签(内联标签)

行标签inline-level tags):在浏览器中不单独占一行

1、<span>标签

<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。如果说<div>是将一块相关内容区域组织在一起的话,那么<span>标签是将一行内的一部分相关内容组织在一起。<span>标签没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。如果不对 <span> 应用样式,那么 <span> 标签中的文本与其他文本不会任何视觉上的差异。

  • 实例:
<body>
  <p>价格:<span style="color:red;font-size:70px;">10</span></p>
</body>

2、换行标签<br/>

<br />表示换行标签,<br />后面的内容在浏览器中另起一行显示。<br />标签中的/表示标签结束

  • 实例:
<body>
  <p>
  难忘今宵<br />无论天涯与海角<br />神州万里同怀抱<br />共祝愿祖国好 祖国好
  </p>
</body>

3、图片标签<img/>

<img /> 标签可定义一副图像<img />标签中的/表示标签结束

  • 实例:
<body>
  <img src="images/dog.png" width="400" height="400" alt="狗狗" title="可爱的狗狗" />
</body>

说明:

  • src属性是图片的来源,src属性的值是图片文件的路径,可以使用相对路径或绝对路径。本例中是src="images/dog.png"
  • alt属性用于在图片不能正常显示时的提示文字
  • title属性用于在鼠标悬停在图片上时提示文字
  • width属性表示图片的宽,单位是像素
  • height属性表示图片的高,单位是像素

4、视频标签<video>

<video>标签,用于在浏览器中播放视频。使用标签不需要下载任何额外的浏览器视频播放插件,完全由浏览器自身来实现视频的解码播放

  • 实例:
<body>
  <video src="source/likeYou.mp4" controls="controls" width="500" height="250"></video>
</body>

说明:

  • src属性是必要的属性,表示视频文件路径,可以是==相对路径或者绝对路径。
  • controls属性表示显示一组视频播放控件,用以控制视频的播放。是controls="controls"的简写。
  • HTML5规范中并没有对视频播放控件的样式进行规范定义,因此,不同的浏览器可能会有不同外观的播放控件,但功能大都大同小异。
  • width属性表示视频的宽,单位是像素。
  • height属性表示视频的高,单位是像素。
  • <video>标签可以添加poster属性,用来定义封面图片。一般情况下,浏览器会显示视频的第一帧,但有时,第一帧没有画面或者第一帧的画面并不适合宣传展示,因此,需要人为的设置一个封面。poster属性的值是图片文件的路径,可以使用相对路径绝对路径
  • 其他属性说明:
属性 说明
autoplay 页面加载后自动播放视频,如果有该属性,视频自动播放,如果没有该属性,视频就不会自动播放
preload none:视频播放前,浏览器不会预先下载视频资源,当用户不点击播放按钮时,会节省带宽
metadata:视频播放前,浏览器不会下载视频资源,但是会获得资源的元数据(视频大小,持续时间,视频格式,前几帧画面)
auto(默认):浏览器根据实际情况动态决定。例如,在wifi、3G、4G数据漫游情况下,动态采用不同的加载方案注意:如果设置了autoplay属性,那么preload属性的值将会被忽略
muted 静音播放
loop 循环播放
  • 一个视频文件包含两部分内容,即视频部分和音频部分,每一个部分都使用一种特定的编码类型来编码。(mp4是最好的选择)

5、音频标签<audio>

<audio>标签,用于在浏览器中播放音频。使用<audio>标签不需要下载任何额外的浏览器音频播放插件,完全由浏览器自身实现音频的解码和播放。

  • 实例:
<body>
  <audio src="source/YouAreMySunshine.mp3" controls></audio>
</body>

说明:

  • src属性表示音频文件的路径。
  • controls属性表示显示一组音频播放控件,是controls="controls"的简写。
  • 其他属性说明:
属性 说明
autoplay 页面加载时是否自动播放音频
preload none:不预先加载音频
metadata:预先加载元数据
auto:让浏览器根据实际情况动态决定
muted 静音播放
loop 循环播放
  • HTML5支持MP3、AAC、AAC+、WAV PCM等众多音频格式,鉴于目前各浏览器及操作系统的支持情况,MP3格式是一种最好的选择。

6、<i>标签

<i>表示强调不同的情绪声音,也可以表示技术术语、生物分类、来自另一种语言的成语或习语、一个想法等等。

  • 实例:
<body>
  <p><i>小狗</i>是一种可爱的动物!</p>
  <p><i>Thank god</i>,项目终于可以按时交付了。</p>
  <p><i>我希望这次可以成功</i>,他想。</p>
</body>

说明:

  • <i>标签中的内容默认会被浏览器显示为斜体

8、<b>标签

<b>标签表示文档中的关键字、商品名称等。

  • 实例:
<body>
  <p>
    关键词:
	<b>HTML5</b><b>CSS3</b><b>W3C</b>
  </p>
</body>

说明:

  • <b>标签中的内容默认会被浏览器显示为粗体

9、<em>标签

ememphasis的意思,<em>标签中的内容是用来强调的重点内容

  • 实例:
<body>
  <p><em>小狗</em>是一种可爱的动物!</p>
  <p>小狗是一种<em>可爱</em>的动物!</p>
</body>

说明:

  • <em>标签中的内容默认会被浏览器显示为斜体

10、<strong>标签

  • 实例:
<body>
  <p><strong>警告:水深危险!</strong></p>
</body>

说明:

  • <strong>标签中的内容默认会被浏览器显示为粗体

三、W3C标准

W3C标准英文全程是World Wide Web Consortium,中文是万维网联盟
万维网联盟标准不是某一个标准,而是一系列标准的集合。网页主要有三部分组成:结构Structure)、表现Presentation)、行为Behavior)。
对应的标准也有三方面:

  1. 结构化标准主要包括XHTMLXML
  2. 表现标准语言主要包括CSS
  3. 行为标准主要包括(如W3C DOM)、ECMAScript等。
    这些标准大部分是W3C起草发布,也有一是其他标准组织制定的标准。

1、W3C提倡的web规范基本原则

  • 标签的开始和结束符合规范
  • 内容(结构)和表现(样式)分离
  • HTML内容结构要求语义化
    还有很多细节性的规范,比如行标签中不可出现块标签尽可能减少div多层级嵌套等。这里需要特别说明的一点,刚才介绍到的<i>标签,<b>标签,<em>标签,<strong>标签,如果在内容不具有语义,只是单纯的想将文字的样式显示为斜体或粗体,请不要使用这几个带有语义的标签。

2、W3C规范

1、 需要声明(DOCTYPE)

DOCTYPE(document type)文档类型的简写,用来说明你用的XHTML或者HTML是什么版本。其中DTD叫文档类型定义,里面包含了文档的规则,浏览器就根据你定义的DTD来解释你页面的标识,并展现出来。要建立符合标准的网页,DOCTYPE声明是必不可少关键组成部分;除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和css都不会生效。 有过度的(Transitional)、严格的(strict)、框架的(frameset)。

2、需要定义语言编码

<meta http-equiv=“Content-Type” content=“text/html; charset=gb2312” />

注:如果忘记了定义语言编码,可能会出现页面乱码现象。

3、JavaScript定义

Js必须要用<script language="javascript" type="text/javascript">来开头定义,以保证在不支持js的浏览器上直接显示出来。

4、CSS定义

CSS必须要用<style type=“text/css”>开头来定义,为保证各浏览器的兼容性,在写CSS时请都写上数量单位,例如:
错误:.space_10{padding-left:10}
正确:.space_10 {padding-left:10px}

5、使用注释

正确的应用等号或者空格替换内部的虚线<!--这里是注释============这里是注释-->

6、所有标签的元素属性名字都必须使用小写

与HTML不一样,XHTML对大小写是敏感的,<title><TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。

7、所有属性值必须用引号括起来(" '')双引号或单引号

8、把所有特殊符号用编码表示

任何小于号(<),不是标签的一部分,都必须被编码为 &lt;
任何大于号(>),不是标签的一部分,都必须被编码为 &gt;
任何与号(&),不是实体的一部分的,都必须被编码为 &amp;

9、所有的标记都必须有相应的结束标记

双标记:<div></div>
单标记:<img />

10、所有的标记都必须合理嵌套

<p><b></p></b>必须修改为:<p><b></b></p>

11、图片添加有意义的alt属性

图片加载失败时可以用alt属性表明图片内容。同理添加文字链接的title属性,帮助显示不完整的内容显示完整

12、在form表单中增加lable,以增加用户友好度 。
例如:

<form action="http://somesite.com/prog/adduser" method="post">
  <label for="firstname">first name: </label>
  <input type="text" id="firstname" />
  <label for="lastname">last name: </label>
  <input type="text" id="lastname" />
</form>
发布了20 篇原创文章 · 获赞 0 · 访问量 679
App 阅读领勋章
微信扫码 下载APP
阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 书香水墨 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览