WEB前端开发之HTML:常用标签知多少

举报
运气男孩 发表于 2020/06/14 16:08:52 2020/06/14
【摘要】 书山有路勤为径,学海无涯苦作舟 加油!

今天来介绍一下html常用标签

基本结构

<html lang=”en”>
<head> 
<title></title>
<meta charset=”utf-8” />
</head>
<body></body>
</html>


标题元素

●<h1>~<h6>标签用于定义标题

其中<h1>的重要性最高,<h6>的重要性最低。(权重)

●<h1>标签通常用于最顶层的标题。

一个html文档之中一般只有一个<h1>标题

段落元素

●<p>标签用于定义段落,浏览器会自动在其前后创建一些空白。

●<p>中的文字行数取决于浏览器窗口的宽度。(随着大小换行)

●<p>中的连续空格最终都将解析成一个空格。

 

Div标签  无语义 可嵌套

●divdivision的含义,用来划分区域,代表网页中的块,所以一般把它叫做块标签。

●div标签通常用于包围大块内容,它没有任何特殊的含义。

●div适合作为最通用的页面容器。

●div是块级元素     

无论内容长度  占满一行

span标签  无语义

span是内联标签,用在一行文本中,用来修饰文字。

span是内联元素

链接

链接是HTML页面非常重要的一环,如果没有链接,每个HTML页面将会孤

独的存在,与其它页面将不会有联系。

链接标签

●<a>标签是anchor的缩写,用于定义网页链接。

链接属性

●src属性表示链接的地址,可以是相对地址或者绝对地址。

●target属性表示点击链接后打开的方式,默认值为

”self”,代表在当前窗口打开新链接,除此之后,还可以设置成“blank”, 代表在新的窗口中打开。

图片标签

●img标签用于定义一-张图片,属于单标签结构,它有两个属性, src代表图片的地址, alt属性代表当图片无法显示时的替代文本。

图片的地址可以使用相对路径,也可以使用绝对路径。

●alt属性不要省略,目的是为了更好的兼容无图浏览器,图片会提示成alt属性内的文字。

Title 可以显示把鼠标放在图片上的文字

img标签上,还可以通过增加height属性和width属性来设置图片的宽度和高度。

列表

无序列表

使用<u|>标签定义无序列表,<li>标签定义列表项,无序列表的含义是列

表项内容没有前后顺序。

可以在ul标签上使用type属性定义图形符号的样式,当属性值为disc,显示为点;当属性值为square,显示为方块;当属性值为circle,显示为圆。

示例:

<ul> .
<li>华为手机</li>
<li>华为电脑</li>
<li>华为手表</i>
</ul>


有序列表

使用<ol>标签定义有序列表, <li>标签定义列表项,有序列表的每项有顺序含义。

有序列表的前缀通常为数字或者字母。

示例:

<ol>
<li>魔兽争霸</li>
<li>星际争霸</li>
<li>暗黑破坏神</li>
</ol>


自定义列表

使用<dl>标签定义自定义列表,内部可以有多个列表项,每个列表项用<dt>定义标题,<dd>定义列表项。

●<dl>标签定义了自定义列表( definition list )

●<dl> 标签用于结合<dt> (定义列表中的项目)<dd> (描述列表中的项目)

示例:

<dl>
<dt>辽宁省</dt>
<dd>沈阳市</dd> <dd>大连市</dd> <dd>鞍山市</dd>
</dI>


书山有路勤为径,学海无涯苦作舟!

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

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

全部回复

上滑加载中

设置昵称

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

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

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