HTML 基础知识（全网最全总结）

有馬
250 阅读11分钟

第一章 HTML基础

什么是HTML文件？

  • 类似于txt、word文本记录文件
  • 需要使用浏览器打开
  • 展示文字和其他信息
  • 使用标签实现对信息展示方式的加工

什么是HTML？

  • 超文本标记语言：HyperText Markup Language
  • 超文本：指页面内可以包含图片、视频、音频、程序等非文字元素
  • 标记语言：实现信息的格式改变

HTML、CSS、JavaScript 之间的关系

  • HTML：组织内容和结构（布局）

  • CSS：对现有内容进行美化（样式）

  • JS：响应用户的交互（交互）

第二章 HTML概述

HTML标准的网页结构

<!DOCTYPE html> ------ 描述网页文档类型
<html> ------ 网页顶级元素，即根元素
	<head> ------ 网页头元信息，用户不可见部分，描述建站时间作者等内容
	</head>
	<body> ------ 网页的身体，用户可见部分
		<h1>我的第一个标题</h1>
		<p>我的第一个段落</p>
	</body>
</html>

HTML 元素

  • 元素：由开始标签与结束标签包裹的部分 <xxx>..</xxx>

  • 元素格式：

    <标签 属性="值">
<body color="yellow">

  • 标签类型

    双标签：有头尾的标签 <xx>1234</xx> 单标签：只有头没有尾 <xx>或<xx />

  • 属性：属性为HTML元素提供附加信息，属性总是以名称/值对的形式出现。

  • 注释：使用 <!-- --> 可在HTML插入注释，也可作为条件注释或程序识别标签

头部元素

<head> -----  给搜索引擎识别的部分
 <meta name="author"> ----- 网页文档描述
 <title>标签名</title> ----- 浏览器标签页头名、收藏夹标题、搜索引擎结果标题
 <link rel="stylesheet" type="text/css" href="theme.css"> --- 引用外部CSS
 <base href="http://www.w3school.com.cn/i/" target="_blank" /> ----- 页面上的所有链接规定默认地址或默认目标
 <script type="text/javascript">document.write("Hello World!")</script> ----- 用于定义客户端脚本
 <style type="text/css">h1 {color:red}</style> ----- 定义级联样式表，规定在浏览器中如何呈现HTML文档
<style>..</style>  ----- 引入嵌入样式表
</head>
  • meta标签：用来提供有关页面的元信息说明、关键字、作者、语言字符集charset；其属性包括name属性和http-equiv属性。（content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的）
    • name属性：用于描述网页，语法格式是<meta name="参数" content="具体的参数值"> name的参数：Keywords(关键字) robots(机器人向导) description(网站内容描述) author(作者)
      • http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，语法格式是<meta http-equiv="参数" content="参数变量值"> http-equivd的参数：Expires(到期时间) Pragma(缓存允许) Refresh(自动刷新并指向新页面) Set-Cookie(cookie设定) Window-target(强制独立页面显示) content-Type(设定页面使用的字符集)
  • link 标签：定义文档与外部资源的关系，如引用外部CSS
    • rel=stylesheet的作用：rel属性用于设置对象和链接目的间的关系，说白了就是指明你链进来的对象是个什么东西的,而此次Stylesheet定义的是一个外部加载的样式表
    • type="text/css"的作用：告诉浏览器，这段标签内包含的内容是css或text；如果不定义的话，有些CSS效果会被浏览器解释得不一样

元素的两种类型

  • 块级元素 block：一个“层”“容器”或“盒子”，将所要的东西打包在内，分小节方便自己查看（完整独占一行宽度），比如<div> <p> <h1-h6> <ul> <li> ol、dd、dt、dl、table、hr、blockquote、address、pre、menu header、footer、aside、section

  • 行内元素 inline：内联元素，包裹标记或隔离一段中的某些内容，一个文本容器，方便后续CSS美化，使其产生视觉上的变化（不会从新一行开始，只占自身所需宽度大小），无法设置宽和高，比如<span> <b> <a> label、code、abbr、em、b、big、cite、i、q、textarea、select、small、sub、sup，strong、u

  • 行内块元素inline-block：具有inline的优点，又可以设置宽和高，缺点是相邻块间会有空白空隙，比如<img /> <input /> <td>

    div和span都是无任何属性的空元素，在整个HTML标记中没有任何作用，只应用于CSS样式

Style 样式

为元素增加指定style属性，一般把style样式写在head头部文件处以方便修改，有三种方法插入样式：

引入样式表 （推荐）
	<link rel="stylesheet" type="text/css" href="style.css">
嵌入样式表 （一般）
	<head>
		<style type="text/css">
			body{background-color:red;}
			p{margin-left:20px;}
		</style>
	</head>
内联样式表 （不推荐）
	<p style="color:green">

<style>..</style> 里的样式代码可以放到css里，运行效果相同

HTML 框架

  • 框架：将浏览器划分成不同的部分，每部分加载不同的页面，实现同一浏览器中加载多个页面的效果

  • <frameset..></frameset>（放于body或head之外）

    左右框尺寸cols 上下框尺寸rows 边框粗细border 显示边框控制frameborder 边框间距framespacing 拖动控制noresize

  • <frame..></frame>（放于frameset之中）

    框架名name 框架页面来源src 拖动条显示控制scrolling 拖动控制noresize

    frame通过src链接指定本地html文件或指定网站来加载页面

  • <iframe></iframe> 内联框架：在网页内固定一个区域显示另一个网页

使用框架的坏处：

  • 开发人员必须同时跟踪更多的HTML文档
  • 很难打印整张页面
  • <frame> <frameset> <noframes> 在HTML5中已被弃用

补充知识

  • Lorem 一个乱数假文生成器，尽管该短语毫无意义，但它却历史悠久。用以测试所用字体的粗细、设计及其他重要特点。

第三章 HTML样式

基本样式

  • 标题 <h1..></h1> <h1 ~ h6>

    h1 align="center"/"left"/"right"/"justify"

  • 段落 <p..></p>

    p align="center"/"left"/"right"/"justify"

  • 换行 <br> <br /> <nobr>不拆行</nobr>

  • 水平线 <hr> <hr />

    hr size width color align noshade="noshade"

  • 规定文字属性 <font..> color face size

  • 特殊符号 （字符实体Entities） 空格 &nbsp; < &lt; > &gt; & &amp; ¥ &yen; × &times;

  • 主体 <body></body>

    body alink background bgcolor link text vlink （不推荐对其直接使用样式）

  • 总文档 <html></html>

    html xmlns manifest

高级样式

  • 超链接 <a href="url"></a>

    打开方式target 锚点名称name 类型type 媒介media 下载download 字符集charset 坐标coords 链接语言hreflang 关系rel 被关系rev 发送邮件mailto 形状shape

    通过锚name定位跳转到本页面的某个段落位置（相当于书签）：

    <a href="#C1">第六章</a> ---- （点此）
	...
<a name="C1">第六章</a> ---- （跳到此）
<p>本章讲解的内容是...</p>

  • 图片 <img scr="url"> 图片路径src 替换文本alt 对齐方式align 宽度width 高度height 边框粗细border 水平间距hspace 垂直间距vspace 服务器端图像位置映射ismap 客户器端图像可点映射usemap 图像长文档描述longdesc 配合<map><area></map>实现图片映射

  • 表格 <table></table>

    • 属性：

      背景色bgcolor width 边框粗细border bordercolorlight bordercolordark 格间距cellspacing 格边距cellpadding summary rules 围绕边框frame 背景图background 列组合colgroup

    • 表格结构

      行块<tr></tr> 单元块<td></td> 表头块<th></th> 表格标题<caption></caption> 列属性<col></col> 页眉<thead></thead> 主体<tbody></tbody> 页脚<tfoot></tfoot> 合并跨行rowspan 对齐align

    <table border="2"> 
		<tr> /* tr=row th=head td=date */
  			<th>一班</th>
  			<th>二班</th>
  			<th>三班</th>
		</tr>
		<tr>
  			<td>200</td>
  			<td>300</td>
  			<td>100</td>
		</tr>
		<tr>
  			<td>亚军</td>
  			<td>冠军</td>
  			<td>季军</td>
		</tr>
</table>

    显示如下：

    一班二班三班
    200300100
    亚军冠军季军

  • 列表

    • 无序列表

      tpye=实心方块square/实心圆disc/空心圆circle

      <ul tpye="">
	<li>..</li>
	<li>..</li>
</ul>

    • 有序列表

      tpye="A/a/1/I/i" 起始值start 降序reversed

      <ol tpye="A" start="3">
	<li>..</li>
	<li>..</li>
</ol>

    • 特殊列表

      <dl>	/* dl=definition-list dt=title dd=description */
	<dt>中国城市</dt>
	<dd>北京</dd><dd>上海</dd><dd>广州</dd>
	<dt>美国城市</dt>
	<dd>洛杉矶</dd><dd>纽约</dd><dd>华盛顿</dd>
</dl>

  • 表单 <form..></form>

    <form action="接受表单内容的服务器地址" method="获取方式" enctype="编码方式" target="打开方式"> 
【账号】
	用户：<input type="text">
	密码：<input type="password">
【复选框】
	你喜欢的水果有？
	苹果<input type="checkbox">
	雪梨<input type="checkbox" checked(默认选中)>
	香蕉<input type="checkbox">
【单选框】（选项男和女放于sex组中才能从中选择）
	你的性别是？ 
	男<input type="radio" name="sex">
	女<input type="radio" name="sex">
【按钮】
	<input type="button" value="普通按钮">
	<input type="submit" value="提交按钮">
	<input type="reset" value="重置按钮">
	<button type="button">第二种实现按钮的方式</button>
【隐藏域】
	<input type="hidden" value="此信息会隐藏发送出去" name="hid">
【下拉列表】
	请选择你常用的网站？
	<select class="" name="区域组" multiple(加上此属性即可多选)>
		<option>百度</option>
		<option>谷歌</option>
		<option>腾讯</option>
		<option seleced>默认选择项</option>
	</select>
【文本域】（可放于form之外）
	<textarea rows="8" cols="80" name="gerenxinxi">请在此填写个人信息
	</textarea>
</form>

    获取方式：method="get"（将数据附在链接上发送）/ "post"（直接将数据附在表单主体中发送）

    input的属性：

<input type="text" name="定义控件名" value="默认写入文字" placeholder="预期提示信息" size="输入框长度" maxlength="最大可输入字数">

button的作用：当<button>标签放到了<form>标签中（如username与password并存时）会触发提交功能，或者让JS给予反馈作用（如弹出展开内容），能放置文本或图像，单独存在时无实际作用。

文本格式化

  • 文字修饰

    <b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除线</s> <em>强调</em> <sup>上标</sup> <sub>下标</sub> <del>删除线</del> <ins>插入</ins> <small>缩小</small> <strong>加重强调</strong> <big>扩大</big>

  • 计算机输出标签

    <code>代码</code> <samp>代码样本</samp> <kbd>键盘码</kbd> <var>变量</var> 等宽

    • 预格式保留文本布局标记 <pre></pre> 可以保留文本里的源代码，保持原有格式，如用于显示散文段落或者计算机程序语言

    • 代码标记<code></code>

      用于突出某一小段代码，与pre区别是code是行内元素，pre是块级元素。

  • 引用标签

    • 地址标签 <address></address>

      定义文档或文章的作者/拥有者的联系信息，文本会呈现为斜体。

    • 缩写标签 <abbr>

      专门为显示显示英文缩写准备的标签，当鼠标指在缩写文字上面时就会显示其全拼；原缩写标签<acronym>在html5中已被舍弃。

      This is a <abbr title="HyperText Markup Language">HTML</abbr>.

    • 文字方向标签 <bdo>

      带有dir="ltl"(从左往右)/"rtl"(从右往左)属性，会改变输出方向，镜面显示，如Here变成ereH

    • 块引用

      长引用 <blockquote>：使文本上下添加换行，左侧添加缩进

      短引用 <q>：被包裹的文本会添加双引号

    • 定义特殊术语 <dfn>定义</dfn>

    • 著作标题 <cite>引文</cite>

物理字体与逻辑字体的区别：

我们知道字体有大小、颜色、斜、粗、下划线等等属性，称这些为字体的风格。这种风格分为指定字体“样式”的物理风格（如粗、斜、下划线）和指定文本“作用”的逻辑风格（如示例文字、缩小文字）；就像去餐馆吃饭，点菜的时候，A告诉炒菜的师傅“炒得多一点”，这是物理风格，直接指定样式；B告诉炒菜的师傅“炒得辣一点”，这是逻辑风格，指定作用；逻辑风格是W3C组织推荐使用的。

第四章 拓展知识

浏览器前缀

浏览器前缀浏览器
-webkit-Google Chrome, Safari, Android Browser
-moz-Firefox
-o-Opera
-ms-Internet Explorer, Edge
-khtml-Konqueror

flex 伸缩布局

  • 设置flex布局
在父级元素 添加 display: flex;
[注意]设为Flex布局后，子元素的 float、clear、vertical-align 属性将失效。

  • 父元素属性（容器）

    • flex-direction 主轴排列方向
    • flex-wrap 换行方式
    • justify-content 水平对齐方式
    • align-items 垂直对齐方式
    • align-content 多根轴线对齐方式

  • 子元素属性（项目）

    • order 排列顺序（序号越小越排前，默认值为0）
    • align-self 允许单独与其他项目不同的对齐方式（可覆盖align-items属性）
    • flex-grow 相对放大比例（即占据容器比例，默认值为0）
    • flex-shrink 相对缩小比例（默认值为1）
    • flex-basis （定义在分配多余空间前，项目占据的主轴空间）
    flex：flex-grow flex-shrink flex-basis; /* 合并简写 */
/* 一般只设 flex: x; 表示自己占据整体的x份 */

优雅降级和渐进增强

  • 渐进增强 progressive enhancement

    针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

  • 优雅降级 graceful degradation

    一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

  • 区别：渐进增强是向上兼容，优雅降级是向下兼容

  • 建议： 现在互联网发展很快， 连微软公司都抛弃了ie浏览器，转而支持edge这样的高版本浏览器，我们很多情况下没有必要再时刻想着低版本浏览器，而是一开始就构建完整的效果，根据实际情况，修补低版本浏览器问题。

BFC

  • Block formatting context：块级格式化上下文

  • W3C 规范： display属性为block、list-item、table的元素，会产生BFC

  • 触发BFC

    • position 为 absolute / fixed
    • display 为 inline-block / table-cell / table-caption / flex / inline-flex
    • float 不为 none
    • overflow 不为 visible

  • BFC元素所具有的特性

    1. 在BFC中，盒子从顶端开始垂直地一个接一个地排列；
    2. 盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
    3. 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）；
    4. BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘；
    5. 计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。

  • BFC的主要用途

    • 清除元素内部浮动

      把父元素设为BFC即可清理子元素浮动。
最常见用法：
	1.在父元素上设置 overflow: hidden;
	2.对于IE6，加上 zoom:1;

    • 解决外边距合并问题

      盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻盒子的margin会发生重叠，那么创建不属于同一个BFC，就不会发生margin重叠。

    • 制作右侧自适应的盒子问题

      普通流体元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文。

  • 总结

    BFC就是页面上的一个隔离的独立容器，容器里的子元素不会影响到外面的元素，反之也如此。包括浮动和外边距合并等。因此，有了此特性，布局时就不会出现意外情况。

avatar
文章
阅读
粉丝