我们在开发的过程中常用的标签其实很好理解,我们把京东的首页拿来一用
从图中我们可以看到:文字、图片、logo、二维码...
其中文字可以组成词语,段落,或者文章;图片其实就包含了logo、二维码了
其中词语(开发中我们也叫标签)就用<span></sapn>
来表示;段落或者文章我们就用<p></p>
来表示;图片我们就用<img>
来表示,例如:
<span>这是一个标签</span>
<p>这是一段话,一段我想对你说的话,可是一直没有机会,今天我想借这个时间告诉你,我想成为牛X的人</p>
<img src="" alt=""> 复制代码
我们再来看一个东西,人体图,虽然有点丑吧,大家凑合看一下:
一个人分为三部分:头部、身体和尾部,同样在网站中都含有这三部分,我们分别用下面三个来表示:
<header></header> 头
<center></center> 身体(中间)
<footer></footer> 尾部复制代码
我们拿来一个企业网站来看一下:
看到这个网站想必就比较清楚了,一般头部包含的都是logo、公司名、联系方式、导航等等
接下来引出的这个就是logo的标签了,logo我们一般用:
<H1></H1>这个标签了,代表着独一无二的
当我们看到一些书名,或者excel中的一些数据时,就会想到列表这个概念,在编程中也有这个东西,比如说新闻标题就是用列表标签,我们通常用<ul>和<li>,如下
<ul>
<li>这是第一条新闻</li>
<li>这是第二条新闻</li>
<li>这是第三条新闻</li>
</ul>复制代码
其实用的最多的就是段落标签了,用来排版HTML段落,也用于格式化表,那就是
<div>这是一个div标签,也是用的最多的</div>复制代码
我们在京东首页按下键盘F12就可以看到他们的前端代码,我们点击Elements
我这里对标签和属性做了一些整合,希望各位刚入门的小伙伴一定要学会百度,百度是你最好的老师:
基本格式:
<html>…</html> 定义 HTML 文档
<head>…</head> 文档的信息
<meta> HTML 文档的元信息
<title>…</title> 文档的标题
<link> 文档与外部资源的关系
<style>…</style> 文档的样式信息
<body>…</body> 可见的页面内容
<!--…--> 注释复制代码
编辑器中的:
<meta>标签
<meta>的主要作用,是提供网页的元信息。比如:指定网页的搜索关键字。复制代码
<meta http-equiv="refresh" content="5"> //每隔5秒钟,自动刷新网页一次
<meta http-equiv="refresh" content="5;url=https://www.baidu.com/"> //5秒钟后,跳转到百度复制代码
(1)设置网页搜索关键字
<meta name="keywords" content="前端学习,UI设计,java编程,Python" />
复制代码
(2)设置网页描述信息
<meta name="description" content="加入小马,一起学习编程,走向人生巅峰,迎娶白富美”>复制代码
HTML文本修饰标记
<b></b>:加粗bold。如:<b>HTML文件</b>
<i></i>:斜体italic。如:<i>HTML文本</i>
<u></u>:下划线underline。如:<u>HTML文本</u>
<s></s>:删除线strike。如:<s>删除线</s>
<sup></sup>上标。
<sub></sub>下标。复制代码
HTML排版标记
<p></p>表示一个段落。复制代码
<br>换行复制代码
<h1></h1> 一级标题 标题标记
<h2></h2> 一级标题
<h3></h3> 一级标题
.......复制代码
<div>和<span>
<div>是没有任何意义的标记,但是,又是使用最多的标记。<div>一般要与CSS配合使用。<div>是一个块元素。
<span>是没有任何意义的标记,但是,又是使用最多的标记。<span>要与CSS配合使用。<span>是行内元素。复制代码
HTML无序列表
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>复制代码
HTML有序列表
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>复制代码
经常用到就是这些啦!希望大家还要多多百度去学习,每日都要提醒自己,学习使人进步,一点都不假。同时也希望大家不管是工作中还是学习中多多大论沟通,会对你们的学习生涯和工作生涯会有很大的帮助的!