HTML5基础标签
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是网页的头部,里面放置的代码是用来对网页进行相关设置
2.1 meat 标签
<meta charset="UTF-8">
在网页中meat标签最常用的设置是用来设置字符集,字符集设置错误将会导致网页打开乱码。
2.2 title 标签
<title>网页标题</title>
title 标签里是网页的标题,如下图所示:
显示在浏览器标签栏中
这里需要注意的一点是 <title></title> 需要写在 <meta charset=”UTF-8”> 标签后
meta 标签设置字符集,若title写在前,则网页运行 title 时还没有设置字符集导致标题乱码。
2.3 style 标签
<style> *{ margin:0; padding:0; } </style>
style标签是用来在head标签中设置CSS样式,美化修饰网页。
2.4 script 标签
script 标签可以在其中写入js代码
<script> var a = 10; var b = 20; console.log(a+b); </script>
当然也可以通过 script 标签来引入外部的js文件
<script src="01.js"></script>
2.5 link 标签
<link rel="stylesheet" href="style.CSS">
通过 link 标签可以引入外部的 CSS 样式文件
2.6 ico 图标
<link rel="shortcut icon" href=""/images/favicon.ico">
在网页标题前引入ico图标,如下图标签栏前的百度小图标
3、body 中的标签
body是网页的主体,网站上所能见到的内容基本都在body中,大部分标签也都是在body中使用。
3.1 h1-h6 标题标签
<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>
h1-h6 标签是标题标签。数字表示标题的大小,1最大,6最小。
3.2 p 段落标签
<p></p>
块级元素。段落标签,内部通常放置文本
3.3 span 标签
<span></span>
行内元素 。类似 p 标签,span 里同样用来放置文本,。
注意,span标签可以放在 p 标签内,但 p 标签里不能放 span 标签
3.4 hr 水平线
<hr>
hr 标签在网页中产生一条水平线
3.5 del 删除线
<del></del>
del标签中的文字字中间会被划上一条横线
3.6 b 加粗
<b></b>
b 标签中的文字会被加粗
3.7 strong 加粗强调
<strong></strong>
strong 标签中的文字会被加粗,并且强调
3.8 I 倾斜文本
<I></I>
I 标签中的文字会被倾斜,在网页中显示斜体
3.9 em 倾斜强调
<em></em>
em 标签中的文字会被倾斜,并且强调
3.10 pre 预格式文本
<pre></pre>
pre标签表示预格式文本。由于在html会有多个空格会被合并成一个,回车换行会失效等问题,导致网页布局混乱。
pre标签内的内容可以原样显示到网页中
3.11 br 换行
<br>
br标签表示换行,相当于enter回车键
3.12 ul li 无序列表
<ul> <li></li> <li></li> </ul>
ul li 标签表示无序列表,类似于表格,可以使文字等以清单的方式显示
3.13 ol li 有序列表
<ol> <li></li> <li></li> </ol>
ol li 标签表示有序列表,类似于表格,可以时文字等以清单的方式显示,并且会在最前面标注序号,1、2、3、4等
3.14 img 图片
<img src="./img/01.jpg" alt="图片">
img标签表示在网页中引用图片
3.15 a 超链接
<a href="https://www.cnblogs.com/"></a>
a 标签表示在网页中添加超链接,a标签中点内容就会有超链接效果
3.16 div 网页分割
<div></div>
div标签常用于切割划分网页,把网页切割成各个部分,方便网页开发。
3.17 table tr th td 表格标签
<table> <tr> <td></td> <td></td> <td></td> </tr> </table>
table标签是在网页中插入表格。tr表示行,td表示单元格。表格还常用于网页的布局
3.18 form 标签 & input标签
<form action=" " method="get" > <input type="text" placeholder="请输入用户名"> </form>
表单标签:用于收集用户输入的信息,并提交到服务器。
input标签:可设置为输入框,按钮等
4、实体字符
由于标签字符的特殊性,<、>、空格、等特殊符号。会被浏览器误认成html语言的标签,不会在网页中显示。
所以为了在网页中正常使用这些字符则需要用到实体字符
下面介绍一些常用实体字符
实体字符 |
字符含义 |
网页中显示效果 |
|
空格符号 |
|
&li; |
小于号 |
< |
> |
大于号 |
> |
© |
版权符号 |
@ |
¥ |
人民币符号 |
¥ |
& |
和 |
& |
® |
注册商标 |
® |
™ |
商标 |
™ |
× |
乘号 |
× |
÷ |
除号 |
÷ |
本次的文章就分享到这,如果有错误欢迎评论区指出。
原文地址:https://www.cnblogs.com/zhupengcheng/p/11218544.html
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例