web前端 HTML常用标签,标签分类

1、什么是标签
#1、在HTML中规定标签使用英文的的尖括号即<和>包起来，如<html>、<head>、<body>都是标签，
#2. HTML中标签通常情况下是成对出现的，分为开始标签和结束标签，结束标签比开始标签多了一个/，开始标签和结束标签之间的就是标签的内容。
#3、有些标签功能比较简单，使用一个标签即可，这种标签叫做自闭和标签，例如:

<br/> <hr/> <input/> <img/>

2、固定的文档结构组织（！Tab）

<!DOCTYPE HTML>
<html><head>...</head><body>...</body>
</html>

3、固定的文档结构组织–各部分解释
#1、是文档声明，必须写在HTML文档的第一行，位于标签之前，表明该文档是HTML5文档。
#2、称为根标签，所有的网页标签都在中。
#3、标签用于定义文档的头部，它是所有头部元素的容器。常见的头部元素有、

4、web前端组成(解耦和)
html:标签(), 指令（<!..>）, 实体(字符实体原生–显示转义)
css:选择器:由标签/类/id单独或组合出现作用域:{}内部区域样式块:满足css链接语法的各种样式
javascript(LiveScript -> JavaScript):BOM:js操作浏览器DOM:js操作页面文档ES:js语法(ECAMScript)

<!doctype html>
<html>
<head><meta charset='utf-8'><title>first</title>
</head>
<body>
</body>
</html>

一、 head内常用标签
1、meta相关

<meta name="Description" content="具体描述。。。">
<meta name="Keywords" content="网易，邮箱，游戏，新闻">
#移动适配
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />#3秒后跳转
<meta http-equiv="refresh" content="3,url=http://www.baidu.com">#三秒刷新
<meta http-equiv="refresh" content="3">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta charset="gbk">

2、非meta标签

<title>百度一下，你就知道</title>
<link rel="icon" href="https://www.baidu.com/favicon.ico"><!-- logo图片 --><!-- <link rel="icon" type="image/x-icon" href="https://www.baidu.com/favicon.ico"> --><link rel="shortcut icon" type="image/x-icon" href="icon.png">
#定义内部样式
<style></style>
#引入外部样式文件
<link rel="stylesheet" href="mystyle.css">
#定义JavaScript代码或引入JavaScript文件
<script src="hello.js"></script>

二、老版本的

#1、<br> 换行
#2、<hr> 分割线
#3、<font> 修改文字大小，颜色<font color="red" size="10px">我是哈哈哈</font>
#4、<b> 加粗     <strong>
#5、<u> 下划线   <ins>
#6、<i> 倾斜  <em>
#7、<s> 删除线  <del>

三、h系列标签(只有h1:出于SEO考虑)
h系列标签从h1-h6共6个，h1用作主标题（代表最重要的），其实是h2。。。

四、p标签

<p>论颜值，鹤立鸡群</p>  <pre></pre>

五、img标签
#1、用法

<img src="图片地址" alt="图片加载失败时显示的内容" title = "鼠标悬停到图片上时显示的内容" />

#2、注意
2.1 src:网络地址/本地地址，本地地址可以用绝对或相对路径，但通常用相对路径，相对路径是以html文件当前所在路径为基准进行的
2.2 图片的格式可以是png、jpg和gif
2.3 默认的宽高显示,只要指定了一个值，系统会根据该值计算另外一个值，并且都是等比拉伸的，图片将不会变形

六、a标签
#1、超链接标签是超文本文件的精髓，可以控制页面与页面之间的跳转，语法如下

<a href="跳转到的目标页面地址" target="是否在新页面中打开" title="鼠标悬浮显示的内容">需要展现给用户查看的内容/也可以是图片</a>

#2、注意：
2.1 a标签不仅可以标记文字，也可以标记图片

<a href="https://www.baidu.com"><img src="mv.png" />百度一下，你就知道</a>

2.2 a标签必须有href属性，href的值必须是http://或https://开头
2.3 a标签还可以跳转到自己的页面

<a href="a/b/c/aaa.html">锤你胸口</a>

2.4 target="_blank"代表在新页面中打开，_self。
如果页面中大量的a标签都需要设置target="_blank",那么我们可以在head标签内新增一个base标签进行统一设置

   <base target="_blank">
如果a标签自己设置了target，那么就以自己的为准，否则就会参照base的设置

2.5 title=“鼠标悬浮显示的内容”

假链接
#1、什么是假链接？
就是点击之后不会跳转的链接，我们称之为假链接
#2、假链接存在的意义：
在企业开发前期，其他界面都还没有写出来，
那么我们就不知道应该跳转到什么地方，所以就只能使用假链接来代替
#3、假链接的定义格式
1、href="#" :会自动回到网页的顶部
2、href=“javascript:” ：不会返回顶部

页面内锚点
#1、要想通过a标签跳转到指定的位置，那么必须告诉a标签一个独一无二的身份证号码，
这样a标签才能在当前界面中找到需要跳转到的目标位置
#2、如何为html中的标签绑定一个独一无二的身份证号码呢？
在html中，每一个标签都有一个名称叫做id的属性
这个属性就是用来给标签指定一个独一无二的身份证号码的
#3、所以要想实现通过a标签跳转到指定的位置，分为两步
3.1、给目标位置的标签添加一个id属性，然后指定一个独一无二的值
3.2、告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少
#4、a标签除了可以跳转当前页面，还可以跳转到其他页面的指定位置

七、标签分类
#1、容器类标签
容器类标签可以简单的理解为能嵌套其它所有标签的标签。
常见容器级的标签:
h系列
ul>li
ol>li
dl>dt+dd
div
#2、文本类标签
文本级的标签对应容器级标签，只能嵌套文字/图片/超链接的标签。
常见文本级的标签:

p
span
strong
em
ins
del

web前端 HTML常用标签,标签分类相关推荐

Web前端开发常用的开发工具
Web的发展日新月异,这也使得Web开发者不得不加快脚步,学习新的技术和编程语言.尤其是对于那些大量流量入口的网站来说,跟上技术发展趋势更是尤为重要.为了使得Web开发人员能够更加专注于业务层面的开发 ...
Web前端开发常用的十款开发工具汇总
今天小编要跟大家分享关于Web前端开发常用的十款开发工具汇总 1.Glitch https://glitch.com 好的,这不仅仅是一个工具,还是一个非常棒的编码平台以及一个很棒的技术社区.我可以在 ...
web前端开发常用浏览器介绍及运行配置
1.web前端开发常用浏览器介绍浏览器是用来检索展示以及传递web信息的应用程序,市面上比较常见的浏览器有IE浏览器.火狐浏览器.谷歌浏览器.Safari浏览器和欧朋浏览器等,其中IE.火狐和谷歌是 ...
web前端开发常用的10个高端CSS UI开源框架
随着人们对体验的极致追求,web页面设计也面临着新的挑战,不仅需要更人性化的设计理念,还需要设计出更酷炫的页面.作为web前端开发人员,运用开源资源,更快更好地实现一些现代化的界面,是必备技能之一.下 ...
html5默认加载s文件夹,『总结』web前端开发常用代码整理
IE条件注释条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. 条件注释只能用于IE5以上,IE1 ...
Web前端十种常用的技术
Web前端应用十种常用技术,随着JS与XHTML的应用普及,越来越多的web界面应用技术出现在网站上,比如我们常见的日历控件,搜索下拉框等,这些web界面应用技术大大的丰富了网站的表现形式,本文将为您 ...
Web前端最常用的技能整理，附最新前端学习资料和视频教程
一.框架与组件 bootstrap等UI框架设计与实现伸缩布局:grid网格布局基础UI样式:元素reset.按钮.图片.菜单.表单组件UI样式:按钮组.字体图标.下拉菜单.输入框组.导航组.面 ...
分享Web前端开发常用的6种编程语言及其优势！
Web前端是互联网时代软件产品研发中不可缺少的一种专业研发角色.从狭义上讲,Web前端工程师使用HTML.CSS.Java等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端.移动端网页,处 ...
Web前端开发常用必备工具（一）
一个称手的工具可谓是事半功倍,对程序员来说,更是离不开各种各样的实用小工具,你现在的工具用的还称手吗?你还在为没有好用的工具而发愁吗? 蓉妹儿在这里给你分享一些Web前端开发的常用必备工具,还没安装的 ...

web前端 HTML常用标签,标签分类

web前端 HTML常用标签,标签分类相关推荐

最新文章

热门文章