网站开发注意事项
Posted 范少坤的博客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网站开发注意事项相关的知识，希望对你有一定的参考价值。
一、常用实体（字符转义）
\'<\' == \'<\' \'©\' == \'©\'
\'>\' == \'>\' \'"\' == \'"\'
\' \' == \' \' \'®\' == \'®\'
\'&&\' == \'&\' \'™\' == \'™\'
二、图片
选择时，需要考虑 效果 与 文件体积
<img src="路径" title="鼠标悬浮显示的文字" alt="图片不显示时，显示的文字，被搜索引擎收录" />
img 标签可以设置属性 width="50px", height="90px"，只设置一项时，图片按比例缩放。
图片特点：
JPEG（jpg） ---- 支持的颜色多，可压缩，但不支持透明
GIF ---- 支持的颜色少，支持动态图，支持简单的透明（要求颜色单一，形状规整，不然效果很差）
PNG ---- 支持颜色多，并支持复杂的透明
SVG ---- 可缩放矢量图，体积小，放大不失真，但似乎色彩不是特别丰富
ICON ---- 文字亦是图片，所以颜色单一，放大不失真，体积以 Byte 计
三、内联 与 块
html 5 中已经没有块元素，内联元素的说法了，但是元素的特点并没有变
块元素 ---- div （无语义，常用于页面布局），p（段落），h（标题）
特点：不受 width 的值的影响，独占一行。
内联元素 ---- span（常用于修饰文字），a，img（行内块元素），iframe
特点：只占自身大小，可以设置水平方向的 padding ，margin 值，无法设置 width，height
一般使用规范：
a 元素可以包裹除他本身之外的任何元素
p 元素内不要包裹块元素
一般来说用块元素去包裹内联元素
通过 CSS 修改类型
display：inline 内联元素
display：block 块元素
display：inline-block 行内块元素（可设置 height 的行内元素）
display：none 隐藏且不占用文档中的位置（visibility: hidden 隐藏但占位置）
四、HTML 标签
- <meta />
设置网页编码
<meta charset="UTF-8" />
设置关键字
<meta name="keywords" content="HTML, CSS,JS" />
设置网页描述
<meta name="description" content="这是我的大乱炖笔记" />
设置请求重定向(5秒后跳转)
<meta http-equiv="refresh" content="5;url=https://www.baidu.com" />
- <a></a>
href 属性取值
href="#" ---- 回页面顶部
href="#id" ---- 到对应id的元素所在的位置
href="mailto：shinekidd@163.com" ---- 给我发邮件
target 属性取值
target="_self" ---- 在当标签打开链接（默认）
target="_blank" ---- 在新标签打开链接
在 iframe 中打开
<a href="https://www.baidu.com" target="baidu">打开百度首页</a> <iframe src="https://www.tencent.com" name="baidu" width="300px" height="500px"></iframe>
为不同状态的 a 标签设置样式（书写样式 a:hover，a:active 时不可交换顺序）
a:link 未访问之前的样式
a:visited 访问后的样式（只能设置字体颜色）
a:hover 鼠标悬浮时的样式
a:active 点击刹那的样式
- <strong></strong>
强调标签里的内容 样式 -- 加粗（<b></b> 样式加粗，无语义）
- <em></em>
标签里内容语气上的强调 样式 -- 斜体（<i></i> 样式斜体，无语义）
- <small></small>
多用于合同小字，版权声明之类的文本 样式 -- 比父标签的字体小
- <cite></cite>
引用书名，歌名，电影名（表示参考） 样式 -- 内容斜体
- <q></q>
引用句子，行内引用（短引用） 样式 -- 内容带双引号
- <blockquote></blockquote>
引用很多句子，块级引用（长引用） 样式 -- 独占一行
- <sup></sup>
设置上标 样式 -- 博客园[1]
- <sub></sub>
设置下标 样式 -- H2O
- <del></del>
表示删除内容 样式 -- ¥999
- <ins></ins>
表示插入的内容 样式 -- 内容带下划线
- <pre></pre>
预格式，常与 code 连用 样式 -- 保留文本格式（换行，空格）
- <code></code>
常与 pre 连用，插入代码块 样式 -- 单独使用没啥特别的效果
- <ul></ul>
无序列表多用与页面菜单布局
type 属性取值：
type="disc" --- 列表项为实心圆点（默认）
type="square" --- 列表项为实心方块
type="circle" --- 列表项为空心圆点
- <ol></ol>
带序号的列表
type 属性取值：
type="1" --- 列表项为数字（默认）
type="i" --- 列表项为小写罗马字
type="I" --- 列表项为大写罗马字
type="a" --- 列表项为小写字母
type="A" --- 列表项为大写字母
- <dl></dl>
<dl>
<dt>西红柿炒鸡蛋</dt>
<dd>新鲜的西红柿，洗净，切成片，鸡蛋打碎。。。。。。。</dd>
</dl>
定义列表，列表项 dt 是被定义的内容，dd 是对定义内容的描述（表现为缩进2个字符）。对菜谱的描述，人物的描述中会用到
- <table></table>
<table>
<thead>
<tr>
<th>row1</th>
<th>row2</th>
<th>row3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>sum:</td>
<td colspan="2">6</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td rowspan="2">0</td>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
表格的列数，由列数最多的那个 tr 决定。th 是特别的 td，在表头中。样式 -- 文字居中，加粗。tfoot 与 tbody 交换位置是可以的。
td 属性 colspan -- 横向合并单元格，值为要合并的 td 个数，属性 rowspan -- 纵向合并单元格，值为要合并的 td 个数（纵向合并只能向下合并）
表格边框，可给 td，table 分别设置 border。给 table 设置 border-spacing 指定二者 border 之间的距离；给 table 设置 border-collapse: collapse 可以合并(重叠)二者的边框。
注：给 table 设置 border-collapse: collapse 后，border-spacing 自动失效
- <form></form>
<form action="/xxx/query" method="post" onsubmit="return false">
<fieldset>
<legend>登录</legend>
<label for="user">用户名</label>
<input type="text" name="user" id="user" autocomplete="off">
<br>
<label for="lock">密 码</label>
<input type="password" name="lock" id="lock">
</fieldset>
<br>
<fieldset>
<legend>调查问卷</legend>
<label for="pic">选择头像: </label>
<input type="file" name="pic" id="pic">
<br> <br>
性别 :
<input type="radio" name="sex" value="female" id="female"><label for="female">女</label>
<input type="radio" name="sex" value="male" id="male" checked="checked"><label for="male">男</label>
<br> <br>
兴趣 :
<input type="checkbox" name="hobby" value="swim" id="swim"><label for="swim">游泳</label>
<input type="checkbox" name="hobby" value="sleep" id="sleep" checked="checked"><label for="sleep">睡觉</label>
<input type="checkbox" name="hobby" value="eat" id="eat"><label for="eat">吃饭</label>
<br> <br>
居住地 :
<select name="city">
<option value="shenzhen">深圳</option>
<option value="guangzhou" selected="selected">广州</option>
</select>
<br> <br>
说点啥 :
<textarea name="msg" cols="30" rows="8"></textarea>
</fieldset>
<input type="reset" value="重置">
<input type="submit" value="提交">
<input type="button" value="按钮">
</form>
input 属性 type 可选值 text，password，radio，file，checkbox，reset，submit，button。type 是 radio 时，要保持 name 是相同的，作为按钮时，没有 name 属性。
如果希望某项被默认选中，设置 checked="checked" 属性（input 元素） 或 设置 selected="selected" 属性（select 元素）。
select 元素设置 multiple="multiple" 属性，可按 Ctrl 键多选，给 option 套父元素 <optgroup label="groupName"></optgroup> 可对元素进行分组.
属性 autocomplete="off" 禁止浏览器显示历史输入记录，属性 disabled="true" 可以设置禁用输入，属性 readonly="true" 可以设置为只读。但js 仍然能对其取值，赋值。
label 的属性 for 绑定对应的输入，点击该标签即可聚焦到输入框 或 选中选框，输入框的属性 placeholder="message" 可以在输入框内显示提示信息 "message"，逐渐取代 label 元素
textarea 文本域，属性 cols 定义列数，属性 rows 定义行数。样式 resize: none; 禁止缩放文本域。
fieldset 元素可对表单进行分组，组名写在 legend 元素中。
默认的提交方式在 form 元素设置 action（提交地址），method（提交方式），提交后会自动跳转，禁用默认提交方式只要给 form 设置属性 onsubmit="return false"
Jquery 的 Ajax 能识别数据是否从 form 元素中获取的，建议把要提交的数据放在 form 元素中，以防出现不必要的麻烦
- <frameset></frameset>
<frameset rows="50%, 50%">
<frame src="https://www.baidu.com"></frame>
<frameset cols="50%, 50%">
<frame src="https://www.tencent.com"></frame>
<frame src="https://www.baidu.com"></frame>
</frameset>
</frameset>
frameset 元素中可以引入多个 frame，但是一定要给 frameset 设置 rows 属性 或是 cols 属性，frameset 之间互相嵌套。
frameset 不能和 body 出现在同一个页面中。frameset 和 iframe 中的内容不能被搜索引擎检索，而且 frameset 中不能自定义内容。
五、CSS
- 选择器权重（优先级）
!important：最高 （慎用）
内联样式： 1000
id选择器：100
类和伪类：10
元素选择器：1
通配选择器：0
继承样式：无
注：多个选择器组合时，权重回叠加，但是，仍然无法超越其上一级。（例如：11个元素选择器叠加，无法超过伪类）
- 长度单位
像素 px ----
em ---- 相对与 当前元素 所在的 父元素 的字体大小（1em = 1font-size）
rem ---- 相对与 根 节点（html）的字体大小（CSS3）
- 颜色单位
String 用于描述颜色的英文单词 \'green\' \'red\' \'blue\'
RGB rgb(dec, dec, dec) 三组10进制的数 （或百分比）+ 不透明度 。例：rgba(33, 55, 88, .6), rgb(20%, 40%, 60%)
HEX #ffffff（#fff）三组16进制的数组合而成
HSLA 和 PS 中的调色一样 （IE8 及以下不支持） hsla(0, 20%, 70%, .5)
H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%
A：Alpha透明度。取值0~1之间。
- 字体 font
浏览器默认的字体大小一般是 16px，不同的浏览器默认的字体样式不同，所，通常会给 html 设置一个 font-family 来统一显示效果
字体分类：
serif --- 衬线字体
sans-serif --- 非衬线字体
monospace --- 等宽字体
cursive --- 草书字体
fantasy --- 虚幻字体
设置字体样式：
font-family: Arial, "Microsoft YaHei", sans-serif; --- 设置多种预期的字体类型（具体，大类均可），以防计算机中没有安装某字体。
font-stlye: normal | italic | oblique --- italic 和 oblique 显示效果都是斜体
font-weight: normal | bold | 100~900 --- (一般计算计安装 400（normal） 和 700（bold） 的字体)
font-variant: normal | small-caps --- 转成小型的大写字母
简写字体样式：
font: italic small-caps bold 30px/1.5 "微软雅黑"；
注：此处指定行高 1.5 倍（也可以用具体的数值 px） ，不指定则会使用默认行高。之前如果设置了 line-height 将被此处覆盖，简写 font 样式需格外注意
color: #ccc; --- 字体颜色需要单独设置
- 文版样式
text-transform 改变显示的样式，也只是样式，本质没变
text-transform: none; -- 默认
text-transform: capitalize; -- 首字母显示大写
text-transform: uppercase; -- 所有字母显示大写
text-transform: lowercase; -- 所有字母显示小写
text-decration
text-decoration: none; -- 默认
text-decoration: underline; -- 下划线
text-decoration: overline; -- 上画线
text-decoration: line-through; -- 删除线
letter-spacing 字符间距
word-spacing （英文）单词间距 -- （识别空格来判断是不是单词）
text-align 文本对齐方式
text-align: left; -- 左对齐（默认）
text-align: right; -- 右对齐
text-align: center; -- 居中
text-align: justify; -- 两端对齐（调整空格来实现的）
text-indent 设置（只针对）首行缩进（一般设置 2em），取取值可以隐藏文本，只让 SE 能检索而不显示
- 盒模型 box
盒子组成：
margin -- 盒子外边距
border -- 盒子边框
padding -- 盒子内边距
content -- 盒子内容
盒子的可见宽大小 = border * 2 + padding * 2 + content
对于样式盒子的样式 width
IE --- width = border * 2 + padding * 2 + content
W3C --- width = content
请在 html 中声明 DTD ，让 IE 使用 W3C 的盒子模型，另外，box-sizing: border-box; 样式可以让你在布局时省去很多麻烦
边框 border
border-style: solid | dotted | dashed | double 四种可选样式（CSS3 提供了 border-image）
注：在设置 border 时，要同时指定 width ， color ， style ，统一不同浏览器默认显示样式，content 的背景是会延伸到 padding 的
外边距 margin
margin-top -- 设置该值为正值（负值），该盒子下移动（上移），并驱使它下面的盒子下移（上移），但它上面的盒子不动（会被它覆盖）
margin-bottom -- 设置该值为正值（负值），该盒子不动，它下面的盒子下移（上移并会覆盖该盒子）
margin-left，margin-right -- 对于块元素独占一行，设置该值对下面的元素没啥影响，对与 行内块 元素，类比 margin-top，margin-bottom
让 块 元素水平居中：margin-left: auto; margin-right: auto; 或 margin: 30px auto;
注：行内元素无法设置垂直外边距值，但可设置 padding 值，设置垂直方向 padding 值不会挤推其它元素，只会覆盖其它元素，设置水平 margin、padding 值对水平方向的元素有挤推的影响
垂直方向外边距重叠
网页中 垂直方向 的 相邻的 兄弟 元素之间的外边距会重叠，而不是相加，重叠后，取较大值
如果 父子 元素 垂直方向 的外边距 相邻 重叠了，则子元素的外边距会设置给父元素
给父元素设置 border，或者给父元素设置 ::before{content: ""}，父子元素外边距不再是相邻重叠的
浏览器默认样式
浏览器自动为许多元素设置了 margin 和 padding 值，如 body 四边有 8px 的外边距，p 有上下外边距之类的，各个浏览器还有区别
统一样式： *{margin: 0; padding: 0}, 或是引入 reset.css
- 溢出 overflow
父元素无法容纳子元素时，子元素会溢出
overflow:visible; -- 不做处理，溢出后可见 （默认）
overflow:hidden; -- 溢出的内容被隐藏，不显示
overflow:scroll; -- 不论是否溢出，均给父元素添加水平和垂直方向滚动条
overflow:auto; -- 根据是否溢出，和溢出的方向，自动为父元素添加滚动条
overflow-x，overflow-y 可以指定水平和垂直方向的溢出样式
- 文档流
文档流在网页的最底层，它表示是一个页面中的位置，我们创建的元素默认处在文档流中
元素在文档流中的特点：
块元素
当元素的宽度，高度为自动（auto）时，指定 padding，border 不影响盒子的可见宽的大小，元素的宽度为父元素的 100%，高度被其子元素撑开，独占一行，自上而下排列
行内（内联）元素
自占自身大小，从左至右排列，一行不足以容纳时，自动换行，其高度被其子元素撑开
元素浮动特点
设置 float: none | left | right 元素浮动会脱离文档流，不占原来(文档流中)的位置。遇到 父元素的边框 或 其它浮动的元素 则停止。文字会环绕在浮动元素周围。
浮动的 行内快 元素会占用在 浮动方向上的 没有浮动 的兄弟元素的位置，而一个素浮动后，下面的元素上移，被浮动的元素覆盖。
如果浮动元素上边有一个 没有浮动 的 块 元素，则浮动元素不会超过这个块元素，浮动元素也不会超过它的 浮动的 兄弟元素
浮动元素的 width，height 默认是被内容撑开的，和文档流中的块元素不同
内联（行内）元素浮动后，可以设置它的 with，height，所以浮动后块元素和内联元素一样了
浮动用途：
对块元素水平布局，如 ul 列表项 li 水平排列
display: inline-block; 也能使 li 水平排列，但是如果 li 标签书写时换行了，列表项之间会有一个空格，虽然可以给父元素设置 font-size: 0 来去除空格...）
浮动带来的问题：
父元素高度塌陷
文档流中，未指定父元素 height 值时（灵活的布局中，一般不设置指定父元素 height 值），父元素高度由子元素撑起，子元素浮动后，父元素就没有高度，其下面的元素上移，布局乱
下面的未浮动的元素上移，被楼上浮动的元素覆盖，布局乱
解决方法
据 W3C 标准中，页面中的元素都有一个隐含的属性 Block Formatting Context，默认是关闭的，开启后有如下属性
父元素的垂直外边距不会和子元素重叠
开启该属性的元素不会被浮动元素覆盖
开启该属性的父元素的 height 可以被浮动的子元素撑开
开启 Block Formatting Context 的方式
1. 设置元素浮动； 2. 设置元素绝对定位； 3. 设置元素的 display 为 inline-block； 4. 设置 overflow 为非 visible 的值
上述的四个方法都有些副作用，设置 overflow 的副作用最小
IE 6 不支持 Block Formatting Context ，但它有个隐含属性 hasLayout
给元素设置 zoom: 1; 即可开启 hasLayout 属性 （其它浏览器会忽略这个属性）
清除浮动对下面未浮动的元素的影响
对受影响的元素设置 clear: left | right | both
clear: left -- 清除左侧浮动的元素对当前元素的影响，当前元素不超过左侧浮动元素
clear: right -- 清除右侧浮动的元素对当前元素的影响，当前元素不超过右侧浮动元素
clear: both -- 清除左右两边对当前元素影响最大的那个的影响，当前元素不超过两侧浮动元素
鉴于 clear 的功效，只要浮动子元素下面的元素设置 clear，这个带 clear 样式的元素可以撑起父元素的 height
在不增加不必要的子元素的前提下，给父元素设置 ::after{content: ""; display: table; clear: both}，即可解决父元素塌陷的问题
- 定位 position
position: static; -- 定位不开启（默认）
position: relative; -- 相对定位，相对其自身在文档流中原来的位置定位，未脱离文档流，提高一个层级，
指定偏移量后可覆盖未定位的元素，仍然占用原来的位置，不会改变块或是内联元素的类型
position: absolute; -- 绝对定位，相对与开启了定位的祖先元素定位（祖先都未开启定位，则相对与 body 定位），
脱离文档流，提高一个层级，不再占文档中流中的位置，内联元素开启后变成块元素，height 默认被内容撑开
position: fixed; -- 固定定位（特殊的绝对定位）,相对与浏览器窗口定位，且不随滚动条滚动（IE 6 不支持）
- 层级 z-index
开启同一种定位后，定位有重叠，且元素的层级一样时，写在下边的 盒子 覆盖上面的 盒子 在浏览器中优先显示，
手动的给元素设置层级 z-index ，可修改显示的优先级
注：没有开启定位的元素不能设置 z-index，父元素的层级再高，也不能覆盖其子元素
- 不透明度 opacity
opacity 的值在 0~1 之间，0 表示 完全透明，1 表示 完全不透明。（IE 8 及以下不支持）
兼容低版本 IE 的写法 filter: alpha(opacity=0~100);
- 背景图片 background-image
background-image: url("./image/test.jpg");
图片默认从元素的左上角开始重复平铺。
设置背景图片重复
background-repeat: repeat; -- 双方向重复平铺（默认）
background-repeat: no-repeat; -- 不重复
background-repeat: repeat-x; -- 沿 x 方向重复平铺
background-repeat: repeat-y; -- 沿 y 方向重复平铺
设置背景图片在元素中的位置
background-position: left | right | top | bottom | center 及两两不矛盾的组合均可
background-position: -10px 80px; 指定确切的偏移量（CSS-Sprite 图的用法）
设置背景图片是否随页面滚动
background-attachment: scroll | fixed 默认是 scroll，一般给 body 设置背景图片时，会用 fixed
简写背景属性
background: color | image | repeat | position | attachment
注：简写属性时，未指定的属性将采用默认值，会覆盖之前的非简写属性。建议把非简写属性写在下面
- CSS-Hack
只在某些浏览器中执行的特殊代码
IE 中的条件 hack，只对 IE 有效，且 IE 10 及以上的版本不支持，用于处理低版本 IE 兼容性问题。
<!--[if lt IE 9]> 此处内容会被 IE 9 一下的 IE 浏览器 解析 <![end if]-->
除了 if lt IE 9 的写法，还有类似的 if gt IE 8，if lte IE 9, if gte IE 8, if IE，if !IE
IE 中的样式 hack
在样式前加下划线（只有 IE 6 及以下支持），例如： _background:{};
在样式前加星号（IE 7及以下支持），例如： *background:{};
以上是关于网站开发注意事项的主要内容，如果未能解决你的问题，请参考以下文章