HTML标签

html标签分类

html标签又叫做html元素,它分为块级元素内联元素(也可以叫做行内元素),都是html规范中的概念。

标题 h1 h2 h3 h4 h5 h6
列表 ol ul li dl dt dd
排版标签 p div hr center pre
表格 table
表单 form

块级元素

块级元素是指本身属性为display:block;的元素。因为它自身的特点,我们通常使用块级元素来进行大布局(大结构)的搭建。

块级元素的特点:

独占一行,每一个块级元素都会从新的一行重新开始,从上到下排布
可以直接控制宽度、高度以及盒子模型的相关css属性
在不设置宽度的情况下,块级元素的宽度是它父级元素内容的宽度
在不设置高度的情况下,块级元素的高度是它本身内容的高度

内联元素

粗体 斜体 上下标 划线
字体 b em sup del/s
strong i sub u
排版 span br
超链接 a
图片 img

内联元素是指本身属性为display:inline;的元素。因为它自身的特点,我们通常使用块级元素来进行文字、小图标(小结构)的搭建。

内联元素的特点:

和其他内联元素从左到右在一行显示
不能直接控制宽度、高度以及盒子模型的相关css属性,但是直接设置内外边距的左右值是可以的
内联元素的宽高是由本身内容的大小决定(文字、图片等)
内联元素只能容纳文本或者其他内联元素(此处请注意,不要在内联元素中嵌套块级元素)

文本级和容器级

除此之外,从HTML的角度来讲,标签还可以分为文本级和容器级

  • 文本级标签:p、span、a、b、i、u、em。
  • 容器级标签:div、h系列、li、dt、dd。

文本及标签的意思是标签中只可以放文本,不可以放其他内容。你会发现除了p之外,所有的文本级标签,都是行内元素。p是个文本级,但是是个块级元素。 

PS:为甚么说p是文本级标签呢?因为p里面只能放文字&图片&表单元素,p里面不能放h和ul,p里面也不能放p。

html中的特殊字符

  •  :空格 (non-breaking spacing,不断打空格)
  • <:小于号(less than)
  • >:大于号(greater than)
  • &:符号&
  • ":双引号
  • ':单引号
  • ©:版权©
  • ™:商标

要求大家背过的特殊字符:

 、<、>、&copy

比如说,你想把<p>作为一个文本在页面上显示,直接写<p>是肯定不行的,因为这代表的是一个段落标签,所以这里需要用到转义字符。应该这么写:

这是一个HTML语言的&lt;p&gt;标签

效果显示:

如果还想知道其它的HTML特殊字符:HTML特殊字符参考表

百万年薪python之路 -- HTML标签的更多相关文章

  1. 百万年薪python之路 -- 前端CSS样式

    CSS样式 控制高度和宽度 width宽度 height高度 块级标签能设置高度和宽度,而内联标签不能设置高度和宽度,内联标签的高度宽度由标签内部的内容来决定. 示例: <!DOCTYPE ht ...

  2. 百万年薪python之路 -- 面向对象之继承

    面向对象之继承 1.什么是面向对象的继承 继承(英语:inheritance)是面向对象软件技术当中的一个概念. 通俗易懂的理解是:子承父业,合法继承家产 专业的理解是:子类可以完全使用父类的方法和属 ...

  3. 百万年薪python之路 -- re模块

    re模块 re模块是python用来描述正则表达式的一个模块. 正则表达式本身也和python没有什么关系,就是匹配字符串内容的一种规则. 官方定义:正则表达式是对字符串操作的一种逻辑公式,就是用事先 ...

  4. 百万年薪python之路 -- 数据库初始

    一. 数据库初始 1. 为什么要有数据库? ​ 先来一个场景: ​ 假设现在你已经是某大型互联网公司的高级程序员,让你写一个火车票购票系统,来hold住十一期间全国的购票需求,你怎么写? 由于在同一时 ...

  5. 百万年薪python之路 -- 并发编程之 协程

    协程 一. 协程的引入 本节的主题是基于单线程来实现并发,即只用一个主线程(很明显可利用的cpu只有一个)情况下实现并发,为此我们需要先回顾下并发的本质:切换+保存状态 cpu正在运行一个任务,会在两 ...

  6. 百万年薪python之路 -- RBAC角色权限设计

    RBAC(Role-Based Access Control,基于角色的访问控制),就是用户通过角色与权限进行关联.简单地说,一个用户拥有若干角色,每一个角色拥有若干权限.这样,就构造成"用 ...

  7. 百万年薪python之路 -- JS的BOM与DOM对象

    BOM对象 location对象 location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载 ...

  8. 百万年薪python之路 -- JS基础介绍及数据类型

    JS代码的引入 方式1: <script> alert('兽人永不为奴!') </script> 方式2:外部文件引入 src属性值为js文件路径 <script src ...

  9. 百万年薪python之路 -- 前端CSS基础介绍

    一. CSS介绍 CSS定义 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 语法结构 div{ color: green ...

随机推荐

  1. 【面试】我是如何在面试别人Redis相关知识时“软怼”他的

    事出有因 Redis是一个分布式NoSQL数据库,因其数据都存储在内存中,所以访问速度极快,因此几乎所有公司都拿它做缓存使用,所以Redis常被称为分布式缓存. 一次我的一个同事让我帮他看Redis相 ...

  2. 【linux】【jenkins】jenkins构建、mvn或者npm打包、docker运行、失败自动回滚脚本

    小白对jenkins运维的使用有点简单的想法,这里开个记录贴记录下. 由于未找到jenkins构建失败后执行其他脚本的插件,也暂时没有使用其他运维工具.所以想自己写一个shell脚本,一是方便其他人使 ...

  3. 【linux】【PostgreSQL】PostgreSQL安装

    前言 PostgreSQL是一种特性非常齐全的自由软件的对象-关系型数据库管理系统(ORDBMS),是以加州大学计算机系开发的POSTGRES,4.2版本为基础的对象关系型数据库管理系统.POSTGR ...

  4. 【深度学习】Focal Loss 与 GHM——解决样本不平衡问题

    Focal Loss 与 GHM Focal Loss Focal Loss 的提出主要是为了解决难易样本数量不平衡(注意:这有别于正负样本数量不均衡问题)问题.下面以目标检测应用场景来说明. 一些 ...

  5. Spring框架学习笔记(3)——SpringMVC框架

    SpringMVC框架是基于Spring框架,可以让我们更为方便的进行Web的开发,实现前后端分离 思路和原理 我们之前仿照SpringMVC定义了一个自定义MVC框架,两者的思路其实都是一样的. 建 ...

  6. java实现图片验证码

    一.验证码生成类 package hbi.tech.utils; import javax.imageio.ImageIO; import java.awt.*; import java.awt.im ...

  7. 【ADO.NET基础】——数据库连接

    SQL Sever连接字符串 (1)标准的安全连接 Data Source=myServerAddress;Initial Catalog=myDataBase;User Id=myUsername; ...

  8. 免费申请 HTTPS 证书,开启全站 HTTPS

    作者:HelloGitHub-追梦人物 文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 HTTP 报文以明文形式传输,如果你的网站只支持 HTTP 协议,那么就有可能遭受到安 ...

  9. python线程实现异步任务

    了解异步编程 楼主在工作中遇到了以下问题,开发接口爬取数据代码完成之后要写入redis缓存,但是在写入缓存的过程花费2-3s,进行这样就大大影响了接口的性能,于是想到了使用异步存储. 传统的同步编程是 ...

  10. Thinkphp5.0第五篇

    原样输出 使用literal标签防止模板标签被解析 例如 {literal} {$name}<br/> {/literal} 模板单行注释 {//注释内容} 多行注释 {/*注释内容*/} ...