标签
HTML 标签
HTML 是标记语言,里面的所有功能都是通过标签来实现的,可以说标签就像一个个“砖块”,H5 前端开发工程师就像是建筑工人,用这些“砖块”按照一定规则组合起来建造成网页。
想要造一栋 HTML 大楼,不了解各个标签是不行的。下面就让我们来简单认识这些常用标签。
1、标签的简单介绍
1.1 单标签、双标签
单标签:单个出现,以⾃身单个标签标识结束
双标签:成对出现,以自身第二个标签标识结束
1.2 ⾏内标签、块级标签、行内块标签
行内标签:可与其他行内元素并列一行;不能设置宽度和高度,高度是行高(line-height:100px;可设置),宽度是内容的总宽度;默认文字会被放在中间显示。例:<a>
块级标签:拥有⾃身宽⾼,通常独⾃占据⼀⾏独占一行;如果不设置宽度,会默认占满父元素的百分之百;可以当做容器包含其他标签。例:<div>
行内块标签:可以设置宽度高度等样式;可以和其他元素并排显示,现在只有 input 标签符合行内块元素;
1.3 单⼀标签、组合标签
单⼀标签:单独出现,表示具体的功能或展示具体的内容。
组合标签:配合使⽤,才能产⽣相应的内容与效果。例:
<table>
<tr>
<td></td>
</tr>
</table>
1.4 标签大小写书写规范
html5 中的标签不区分大小写,都可以识别,不过这里建议标签全部小写。
因为 js 只能识别小写,为了之后对接 js,标签最好全部小写。
2、head 中的标签
head 是网页的头部,里面放置的代码是用来对网页进行相关设置
meat 标签
<meta charset="UTF-8" />
在网页中 meat 标签最常用的设置是用来设置字符集,字符集设置错误将会导致网页打开乱码。
title 标签
<title>网页标题</title>
显示在浏览器标签栏
<title></title> 需要写在 <meta charset="UTF-8" /> 标签后 meta
标签设置字符集,若title写在前,则网页运行 title 时还没有设置字符集导致标题乱码。
style 标签
<style>
* {
margin: 0;
padding: 0;
}
</style>
style 标签是用来在 head 标签中设置 CSS 样式,美化修饰网页。
script 标签
script 标签可以在其中写入 js 代码
<script>
var a = 10;
var b = 20;
console.log(a + b);
</script>
当然也可以通过 script 标签来引入外部的 js 文件
<script src="01.js"></script>
link 标签
<link rel="stylesheet" href="style.CSS" />
通过 link 标签可以引入外部的 CSS 样式文件
ico 图标
<link rel="shortcut icon" href=""/images/favicon.ico">
在网页标题前引入 ico 图标
3、body 中的标签
body 是网页的主体,网站上所能见到的内容基本都在 body 中,大部分标签也都是在 body 中使用。
h1-h6 标题标签
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
h1-h6 标签是标题标签。数字表示标题的大小,1 最大,6 最小。
p 段落标签
<p></p>
块级元素。段落标签,内部通常放置文本
span 标签
<span></span>
行内元素 。类似 p 标签,span 里同样用来放置文本,。
注意,span 标签可以放在 p 标签内,但 p 标签里不能放 span 标签
hr 水平线
<hr />
hr 标签在网页中产生一条水平线
del 删除线
<del></del>
del 标签中的文字字中间会被划上一条横线
b 加粗
<b></b>
b 标签中的文字会被加粗
strong 加粗强调
<strong></strong>
strong 标签中的文字会被加粗,并且强调
I 倾斜文本
<i></i>
I 标签中的文字会被倾斜,在网页中显示斜体
em 倾斜强调
<em></em>
em 标签中的文字会被倾斜,并且强调
pre 预格式文本
<pre></pre>
pre 标签表示预格式文本。由于在 html 会有多个空格会被合并成一个,回车换行会失效等问题,导致网页布局混乱。
pre 标签内的内容可以原样显示到网页中
br 换行
<br />
br 标签表示换行,相当于 enter 回车键
ul li 无序列表
<ul>
<li></li>
<li></li>
</ul>
type:属性值:定义了无序列表序号的类型 disc:实心圆 circle:空心圆 aquare:实心方块
none:什么都没有
ul li 标签表示无序列表,类似于表格,可以使文字等以清单的方式显示
ol li 有序列表
<ol>
<li></li>
<li></li>
</ol>
type:属性值:定义有序序号的类型 数字:(默认) a:小写英文字母 A:大写英文字母
i:小写的罗马数字 I:大写的罗马数字
ol li 标签表示有序列表,类似于表格,可以时文字等以清单的方式显示,并且会在最前面标注序号,1、2、3、4 等
img 图片
<img src="./img/01.jpg" alt="图片" />
img 标签表示在网页中引用图片
a 超链接
<a href="https://www.cnblogs.com/"></a>
a 标签表示在网页中添加超链接,a 标签中点内容就会有超链接效果
div 盒子
<div></div>
div 标签常用于切割划分网页,把网页切割成各个部分,方便网页开发。
table tr th td 表格标签
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
table 标签是在网页中插入表格。tr 表示行,td 表示单元格。表格还常用于网页的布局
form 标签 & input 标签
<form action=" " method="get">
<input type="text" placeholder="请输入用户名" />
</form>
表单标签:用于收集用户输入的信息,并提交到服务器。
input 标签:可设置为输入框,按钮等
下划线:u
<u></u>
上标:sup
<sup></sup>
下标:sub
<sub></sub>
表格:table
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
table属性: border:边框 rules:边框显示规则 width:宽度 height:高度 cellpadding:内边距:边框与内容之间的宽度 cellspacing:外边距:单元格与单元格之间的宽度 表格的行:tr align: 设置该行内容的水平对齐方式 left/center/right valign: 设置该行内容的水平对齐方式 top/middle/bottom 表格的标题:th 行标题或者列标题,字体具有加粗效果,放在tr中 表格的单元格:td align: 水平对齐 valign:垂直对齐 width:宽度 heiht:高度 colspan:横向合并 rowspan:纵向合并 注意: 每行中指定列的宽度,都是以最宽的决定 每行中指定列的高度,都是以最高的决定 表格的标题: 标记:
标题 注意: cation一定是紧跟table属性后 一个表格最多只有一个标题浮动框架:iframe 在网页中嵌套别的网页
<iframe src="此处是网站地址"></iframe>
语法:<iframe
src="规定在 iframe 中显示的文档的 URL(默认的显示页面)"
width=""
height=""
frameborder="1/0"
name="iframe名称"
scrolling="yes/no/auto"
>
</iframe>
结构标记 HTML5 推出的专门用来布局的一组标记 目的: 取代 div,提升整体代码的可读性和语意性
header:
<header></header>
定义网页的页眉部分或者其他部分的顶部内容
aside:
<aside></aside>
定义网页的导航部分
nav:
<nav></nav>
编写网页的导航部分
section:
<section></section>
整个网页的主体
footer:
<footer></footer>
表示网页底部,一般情况下是用户不太关注的部分
article:
<article></article>
用来表示文章内容部分 论坛帖子,微博,说收,朋友圈,新闻等
flash 插件:
<object>
<embed width="value" height="value" wmode="transparet" src="flash路径"></embed>
</object>
滚动字幕:
</marquee>
多媒体标签
<atudio> </atudio>
4、实体字符
由于标签字符的特殊性,<、>
空格、等特殊符号。会被浏览器误认成 html 语言的标签,不会在网页中显示。
所以为了在网页中正常使用这些字符则需要用到实体字符
下面介绍一些常用实体字符
实体字符 | 字符含义 | 网页中显示效果 |
---|---|---|
| 空格符号 | |
< | 小于号 | < |
> | 大于号 | > |
© | 版权符号 | @ |
¥ | 人民币符号 | ¥ |
& | 和 | & |
® | 注册商标 | ® |
™ | 商标 | ™ |
× | 乘号 | × |
÷ | 除号 | ÷ |