various

HTML

Web标准的构成

标准 说明
结构 结构用于对网页元素进行整理和分类，主要指HTML标签语法
表现 表现用于设置网页元素的版式、颜色、大小等外观样式，主要指CSS
行为 行为是指网页模型的定义及交互的编写，主要用JavaScript

头部信息

具体标签

特殊符号

特殊字符 描述 字符代码
`` 空格  
< 小于 &lt;
> 大于 &gt;
& 和 &amp;
￥ 人民币 &yen;
© 版权 &copy;
® 注册标签 &reg;
° 摄氏度 &deg;
± 加减 &plusmn;
× 乘号 &times;
÷ 除号 &divide;
² 平方 &sup2;
³ 立方 &sup3;

Emmet语法

快速生成HTML结构语法

  1. 生成标签，直接输入标签名按tab即可 div+Tab生成<div></div>
  2. 生成多个相同标签，加上*号。div*2生成<div></div><div></div>
  3. 父子关系用>。ul>li生成<ul><li></li></ul>
  4. 兄弟关系用+。div+p生成<div></div><p></p>
  5. 生成带类或id的#id或.class，默认生成div。#idfs生成<div id="idfs"></div>，p#fs生成<p id="fs"></p>
  6. 自增用$。.d$*3生成<div class="d1"></div><div class="d2"></div><div class="d3"></div>
  7. 标签中的内容用{}。p{$}*2生成<p>1</p><p>2</p>

块元素和行内元素

块元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>是典型的块元素。

特点：

注意：

行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>最典型的行内元素。有的地方称行内元素为内联元素。

特点：

注意：

行内块元素

在行内元素中有几个特殊的标签<img />、<input />、<td>，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

特点：

比较

|元素模式|一行是否可以放多个|可否设置宽度和高度|默认宽度|包含| |–|–|–|–|–| |块级元素|×|√|容器的100%|容器级可以包含任何标签| |行内元素|√|×|自身内容的宽度|容纳文本或者其他行内元素| |行内块元素|√|√|自身内容的宽度||

CSS的元素显示模式

元素显示模式的转换
单行文字垂直居中

行高=盒子高度

网页布局

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

设置了浮动之后：

实际开发中页面布局的整体思路

为了提高网页制作的效率，布局时通常由以下的整体思路：

  1. 必须确定页面的版心(可视区)，我们测量可以得知
  2. 分析页面中的行模块，以及每个行模块中的列模块。其实页面布局第一原则
  3. 一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置。页面布局第二原则
  4. 制作HTML结构，我们还是遵循先有结构，后又样式的原则。结构永远最重要
  5. 所以，先理清布局结构，再写代码尤为重要。这需要我们多写多积累

导航栏注意点： 实际开发中，不会直接用一堆a，而是用li包含链接li+a的做法。

  1. li+a语义更清晰，一看就是有条理的列表型内容
  2. 如果直接用a，搜索引擎容易辨别有堆砌关键字的嫌疑(故意堆砌关键字容易被搜索引擎降权)，从而影响网站排名。

经验记录

不完全准确经验：

html form 的 target 可以设置为某个iframe的name。那么submit结果就会显示在对应的iframe中

但是这样的话，如果method=post，发送的请求就有origin；如果method=get，发送的请求就没有origin。

This site is open source. Improve this page.