前端——HTML&BFC

HTML

1.HyperText Mackeup Language（超文本标记语言）它不是一种编程语言，是一种描述性的标记语言，用于描述超文本内容的显示方式。比如字体、颜色、大小等。

2.超文本：音频，视频，图片称为超文本。标记 ：<英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成。

3. HTML5，在2014年10月由万维网联盟（W3C）完成标准制定。

4. HTML5的设计目的是为了在移动设备上支持多媒体。
5. TML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程)，HTML页面直接由浏览器解析执行
6. html1 至 html3 是美国军方以及高等研究所用的，并未对外公开。
7. html4.0.1是ie6开始进行兼容，而HTML5是ie9开始兼容

规范：

  • HTML是一个弱势语言
  • HTML不区分大小写
  • HTML页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)

结构：

  • 声明部分：主要作用是用来告诉浏览器这个页面使用的是哪个标准。是HTML5标准。
  • head部分：将页面的一些额外信息告诉服务器。不会显示在页面上。
  • body部分：我们所写的代码必须放在此标签內。

编写HTML的规范
1.所有标记元素都要正确的嵌套，不能交叉嵌套。正确写法举例：<h1><font></font></h1>

2.所有的标记都必须小写。

3.所有的标记都必须关闭。

双边标记：<span></span>
单边标记：<br> 转成 <br /> <hr> 转成 <hr />，还有<img src=“URL” />
4.所有的属性值必须加引号。<h1 id="head"></h1>

5.所有的属性必须有值。<input type="radio" checked="checked" />

HTML的基本语法特征

  • HTML对换行不敏感，对tab不敏感
  • HTML只在乎标签的嵌套结构，嵌套的关系。谁嵌套了谁，谁被谁嵌套了，和换行、tab无关。换不换行、tab不tab，都不影响页面的结构。
  • 也就是说，HTML不是依靠缩进来表示嵌套的，就是看标签的包裹关系。但是，我们发现有良好的缩进，代码更易读。要求大家都正确缩进标签。
  • 单闭合标签无法嵌套到双闭合标签中，只有双闭合嵌套单闭合。

空白折叠现象

  • HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。
  • 标签要严格封闭

<html></html>
<meta />

HTNL5新特性：

  • 新增了语义化标签
  • 新增了表单元素以及相关属性
  • 新增了全局属性
  • Canvas画布
  • Video 和 Audio
  • 2D/3D 制图
  • 本地存储
  • 本地 SQL 数据
  • 地理信息
  • 本地上传

BFC

Block Formarting Context（块级格式化上下文）

它是一个独立的渲染区域，只有Block-level Box参与，它规定了内部的Block-level如何布局，并且与这个区域外部毫无相关。

Box盒子，页面的基础构成元素，分为inline，block和inline-block 三种类型的box。Fornatting Centext 是w3c的规范中一种概念，它是页面中的一块渲染区域，并且有一套渲染规则。它决定其子元素将如何定位。以及和其他元素的关系和相互作用。

生成BFC的元素

  • 根元素
  • float属性不为none
  • position为absolute或fixed
  • display为inline-block
  • overflow不为uisible

BFC布局规则

  • 内部的Box会在垂直方向，一个接一个的放置
  • Box垂直方向的距离，由margin决定属于同一个BFC的两个相邻BOX的margin会发生重叠
  • 每个元素的margin box的左边与包含块border box的左边相接触（对于从左往右的格式化，否则相反），即使存在浮动也是如此。
  • BFC的区域不会与float元素重叠
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素反之也如此。
  • 计算BFC的高度时，浮动元素也参与计算。

HTML head模板

<!DOCTYPE html >
<html lang="zh-CN">  
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap简单示例</title>
    <link href="css/bootstrap.min.css" rel ="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js">
    </script>
    <script src ="js/bootstrap.min.js"></script >
</head >
<body>
</body>

 

posted @   新兵蛋Z  阅读(95)  评论(0)  编辑  收藏  举报
相关博文：
· 前端——CSS字体&文本
· 前端——HTML头标签（head）
· HTML（HyperText Markup Language）
· 前端三件套系例之HTML——HTML5基础
· 前端_HTML基础
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛