在网页开发中，我们需要掌握的常用HTML标签有哪些？

果想开发一个网站，除了要精通后端开发语言（如：php）外，还要精通HTML代码。那么，什么是HTML呢？HTML是一种超文本标记语言，它包含有众多的标签，我们可以通过这些标签，把不同的internet资源（如：文字、图片、视频、音频、表单等等）整合在一个统一的文档中，这就形成了我们可以看得见的网页。那么，HTML都有哪些常用的标签呢？

一、文档类型声明。

html5文档类型声明：<!doctype html>

html4文档类型声明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

二、html主标签。

这个标签是html最外层的标签，所有其它的HTML标签都要放在这个标签的内部。

<html>

</html>

三、双标签和单标签。

在HTML标签中，有的标签是成双成对的，如：<html></html>（如下图）；而有的标签是单个的，如：<hr>横线标签。

四、head头部标签。

head头部有以下几种常用标签：

meta：主要提供有关页面的元信息。

link：用来定义文档与外部资源的关系，最常用的是调用CSS样式文件。

title：页面标题的标签。

script：用来调用JS文件或JS代码。当然，script标签也可以在body主体中使用。

五、body主体标签。

1、块级标签。

块级标签的特性是：独自占有一行；标签的高与宽、边距可以修改；没有设置宽与高时，默认继承父标签。例如：

<div>div1</div>
<div>div2</div>
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>

前端页面显示的效果如下图：

常用的块级标签有：div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。

2、内联标签。

内联标签与块级标签不同，它不能独自占有一行，会与其它内联标签在同一样展示；内联标签的高与宽、上下边距是不能修改的，它里面的文字或图片有多高，它就是多高。例如如下代码：

<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<span>span1</span>
<span>span2</span>

CSS样式代码跟块级标签的例子是一样的，而显示的效果就不一样了，宽与高、上下边距没有效果。如下图：

常用的内联标签有：span、a、b、strong、i、em 。

3、内联块级标签。

内联块级标签，既有一些内联标签的特性，也有一些块级标签的特点：它不能独自占有一行，但是可以修改它的宽度和高度。例如下面这段代码：

<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<img src="w5.jpg" alt="">
<img src="w5.jpg" alt="">

CSS样式代码跟块级标签的那个例子仍然是一样的，图片的宽和高、上下边距修改成功，而2个图片不能独自占有一行，而是在同一行。如下图：

常用的内联块级标签有：img、input、textarea。

4、区域标签。

所谓区域标签，就是主要用来划分布局页面区域的。如：头部、主体内容、侧边栏、底部。这样划分的好处是：让页面布局更加清晰明了。

常用的区域标签有：header（头部）、footer（底部）、nav（导航）、aside（侧边栏）、section（主体）、article（独立内容）。

5、表单标签。

这个表单标签我们也是会经常用到的，如：登录网站的时候、提交数据的时候。如下图的评论表单：

表单常用的标签有：form、input、select、option、textarea 。

以上就是我们开发网页时，会常用到的HTML标签。当然，HTML标签远不止这些，尤其是html5出来后，新增了许多的新标签。但是，有些标签在我们开发中很少用到，所以，这里就没有做相应的介绍。

SS样式被称为“层叠样式表”，是一种网页制作不可或缺的技术，是用于修饰网页样式，达到设计效果的一种样式语言。

而由于样式效果非常多，在工作中并非所有的样式都会用到，因此经常可能遇到某些特定样式会突然想不起来的情况，更何况对于初学者来说遇到这种情况。

接下来就跟着小凡一起整理一下这些常用而易忘的css样式。

css样式的效果

01、文字超出部分显示省略号

单行文本的超出部分显示省略号。（一定要给元素本身设置宽度）

.title {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space:nowrap;
}

CSS样式效果图

多行文本的超出部分显示省略号

.title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}

CSS样式效果图

PS：建议加上word-break:break-all 否则遇到长单词会出现很神奇的布局情况。

图一

图二

图一未添加，图二添加后的不同效果

02、中英文(长单词)自动换行

word-break:break-all; 只对英文起作用，以字母作为换行依据

word-wrap:break-word; 只对英文起作用，以单词作为换行依据

white-space:pre-wrap; 只对中文起作用，强制换行

white-space:nowrap;都起作用，强制不换行

PS:网页中英文单词通过“_”(下划线)和 “-”（中划线）连接的英文单词在编译处理是方式是截然不同的。

下划线是程序命名方法下划线命名法的规范,其他命名规范还有驼峰式命名。属于程序专用的命名规范。可以连接想连的部分为一个变量名，不是单词。

下划线连接单词效果

中划线是英语复合词有连接2个单词的意思，但前后是2个独立单词。

中划线连接单词效果

03、设置表单输入框placeholder的样式

input::-webkit-input-placeholder {
  color:skyblue;
  text-align: center;
}
input::-ms-input-placeholder {
  color:skyblue;
  text-align: center;
}
input::-moz-placeholder {
  color:skyblue;
  text-align: center;
}

CSS样式效果图

04、不固定高度的元素文字垂直居中

兼容IE8：伪元素和inline-block/vertical-align

.box::before {
  content:"";
  display: inline-block;
  height: 100vh;
  vertical-align: middle;
  text-align: center;
}

CSS样式效果图

不兼容IE8以下: flex布局

.box {
  background: skyblue;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

CSS样式效果图

05、文字两端对齐

.wrap {
  margin: 0 auto;
  width: 800px;
  text-align: justify;
  text-justify: distribute-all-lines;
  /* 兼容IE6-8 */
  text-align-last: justify;
  -moz-text-align-last: justify;
}

CSS样式效果图

06、iOS页面中滑动卡顿

body,html {
  -webkit-overflow-scrolling:touch
}

07、设置滚动条样式

 .wrap {
  margin: 0 auto;
  width: 300px;
  height: 200px;
  overflow: auto;
}


.wrap::-webkit-scrollbar {
  /* 整体大小样式 */
  width: 10px;
  height: 10px;
  }


.wrap::-webkit-scrollbar-thumb {
  /* 滚动条里的滑块 */
  border-radius: 10px;
  background-color: skyblue;
  background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,0.2) 25%,
  transparent 25%,
  transparent 50%,
  rgba(255,255,255,0.2) 55%,
  rgba(255,255,255,0.2) 75%,
  transparent 75%,
  transparent);
}


.test::-webkit-scrollbar-track {
/* 滚动条的轨道 */
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: #ededed;
  border-radius: 10px;
}

CSS样式效果图

08、隐藏滚动条但又可以滚动

.wrap {
  margin: 0 auto;
  width: 300px;
  height: 200px;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}


.wrap::-webkit-scrollbar {
/* 整体大小样式 */
  display: none;
}

CSS样式效果图

09、css绘制三角

无边框三角

div {
  width:0;
  height:0;
  border-width: 0 40px 40px;
  border-style: solid;
  border-color: transparent transparent rgba(0,0,0,0.3);
}

CSS样式效果图

带边框三角

div {
  position: relative;
  width:0;
  height:0;
  border-width: 40px 0 40px  40px ;
  border-style: solid;
  border-color:  transparent  black ;
}


div::after {
  content: "";
  position: absolute;
  top:-36px;
  left:-38px;
  border-width: 36px 0 36px  36px ;
  border-style: solid;
  border-color:  transparent red ;
}

CSS样式效果图

10、文字间的间距

text-indent 文章段落首行缩进

letter-spacing 字与字之间的间距

.wrap {
  margin: 0 auto;
  width: 600px;
  text-indent: 2em;
  letter-spacing: 10px;
}

CSS样式效果图

11、禁止用户选中元素

有些时候不想让用户选中内容，复制网站上文字内容。

.wrap { 
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

12、元素占满整个屏幕

以往需要在做全屏遮罩功能的时候会设置height:100%。但是这种做法需要该遮罩层的所有父级元素都逐级设置高度才能使遮罩继承高度属性。所以可以使用100vh单位来实现。

.mask {
  width:100%;
  height: 100vh;
  background: rgba(0,0,0,0.6);
  position: fixed;
  top: 0;
}

CSS样式效果图

以上就是为学员们整理的针对工作中对商品/新闻等标题的样式处理，弹窗做法的一些经常遇到的css样式实现方法。

如果觉得有用可以收藏关注，同时还可以留言说出你想知道或者是遇到的不会的样式处理，我们还将继续推出后续内容，继续为大家解读别的常用css实用技巧以及其他的前端开发新技能，让我们期待下一期吧。

文末领资料

Web前端设计秘籍——30个工作中常用的CSS样式

SS

CSS全称为 Cascading Style Sheets,译为层叠样式表。CSS有三种样式：内联样式，内嵌样式，外联样式。

内联样式

内联样式通过HTML元素的style属性来设置CSS样式，语法如下：

 style="CSS属性：CSS属性值"；

示例代码：

 <!DOCTYPE html>
 <html>
     <head>
         <title>内联样式</title>
         <meta charset="UTF-8">
     </head>
     <body>
         <!-- style="css属性:css属性值;" -->
         <div style="color:red;">启嘉班</div> 
     </body> 
 </html>

* 内联样式的缺点: 只对当前元素有效, 导致CSS代码可能出现冗余

内嵌样式表

通过HTML元素的style属性来设置CSS样式，语法如下：

 <style>
     选择器{
         属性名:属性值；
     }
 </style>

示例代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>内嵌样式</title>
     <style>
         p{
             color: chartreuse;
             font-size: 50px;
         }
        
     
     </style>
 </head>
 <body>
     <p>19级启嘉班</p>
 </body>
 </html>

优点: 相对于内联样式

*通过CSS选择器定位HTML页面中一个或一类元素

缺点:相对于内联样式

* 将CSS代码嵌入到HTML页面中,只能对当前HTML页面有效

* 编码的风格不符合编码原则中的低耦合

* 导致CSS代码可能出现冗余

外联样式

通过HTML元素的<link>元素来设置CSS样式表

1.创建一个CSS文件,用来存储CSS样式内容

2.在HTML页面中通过<link>元素引入外部指定的CSS文件

<link>元素:

* 作用: 用来引入HTML页面外部的资源

属性:

* rel属性: 用来设置外部资源与当前HTML页面的关系

* href属性: 用来设置引入外部资源的路径(相对路径和绝对路径)

语法结构如下：

 <link rel="stylesheet" href="CSS文件路径">

示例代码：

 <link rel="stylesheet" href="style.css">

优点: 相对于内嵌样式表和内联样式

* 将CSS样式与HTML页面进行分离(低耦合)

* 不会出现内嵌样式表或内联样式产生的代码冗余

缺点: 可能对HTML页面的加载造成负担,导致性能下降

下一节更新CSS选择器

在线咨询

上一篇：设计师妹纸，北漂两年半的转行经历（一）-从平面设计师到UI
下一篇：Shopify订单状态JavaScript资产介绍

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

在网页开发中，我们需要掌握的常用HTML标签有哪些？

一、文档类型声明。

二、html主标签。

三、双标签和单标签。

四、head头部标签。

五、body主体标签。

SS

内联样式

内嵌样式表

外联样式

您的项目需求