HTML 常用的标签和属性

最新推荐文章于 2024-03-04 15:08:46 发布

weixin_33795743

最新推荐文章于 2024-03-04 15:08:46 发布

阅读量156

点赞数

文章标签：前端 ui java ViewUI

原文链接：https://juejin.im/post/5c763e5cf265da2d9809101b

版权

我们在开发的过程中常用的标签其实很好理解，我们把京东的首页拿来一用

从图中我们可以看到：文字、图片、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>是没有任何意义的标记，但是，又是使用最多的标记。<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>复制代码

经常用到就是这些啦！希望大家还要多多百度去学习，每日都要提醒自己，学习使人进步，一点都不假。同时也希望大家不管是工作中还是学习中多多大论沟通，会对你们的学习生涯和工作生涯会有很大的帮助的！

weixin_33795743

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML 常用的标签和属性

我们在开发的过程中常用的标签其实很好理解，我们把京东的首页拿来一用从图中我们可以看到：文字、图片、logo、二维码...其中文字可以组成词语，段落，或者文章；图片其实就包含了logo、二维码了其中词语（开发中我们也叫标签）就用&lt;span&gt;&lt;/sapn&gt;来表示；段落或者文章我们就用&lt;p&gt;&lt;/p&gt;来表示；图片我们就用&lt;img&gt;来表示，例如：&...
复制链接

扫一扫