通过本文, 你将了解到制作中的那些元素解释, 命名, 布局, CSS 重置, 选择框架和设定等一系列前端入门知识. 学习什么我觉得做好笔记很关键, 平时遇到问题多多记录下来.
一. 名词解释
横切
在固定页面的宽度 (按栅格化进行) 并且对高度没有限制的容器称为一个标准横切
留白
两个容器或碎片之间的上, 下, 左, 右的空白距离
继承
元素可以从其父级元素中获得一些可为自己使用的属性或值.
图片定位
把图片元素放置到一个静态的, 相对的, 绝对的, 或固定的位置中, 利用 CSS 中对图片进行遮罩属性, 多用于页面中的修饰图
底图
页面中在标签中使用的背景图
齐底 (图) 线
用于区分横切或碎片结束的线或图.
页面结构
页面的基础框架, 由横切, 布局元素组成
焦点区(图)
最易注意的区域
导航
在页面中具有导向性的链接集合
头图
页面主题图片
间距
碎片或文字间的距离
行高
文字段落中行与行之间的距离
首行缩进
文字段落首行缩进
浮动
使被定义的区域脱离正常的页面文档流
碎片
由文字, 图片组合成的内容区域
通栏广告
与页面内容区同宽的广告区域
功能按钮
具有交互属性的按钮
私有样式
当前页面独立使用的样式, 不具备公用性
水平 (垂直) 居中
在页面中的某个元素处于父级的上下或左右的相同距离
标准头(尾)
定义相同的页面头或尾元素集合
二. 文本格式化
段落: p
斜体: address(联系信息)em(强调)i(突出不同)cite(引用)dfn(首次定义术语)
粗体: strong(重要)b(提醒)
图片块: figure
引述文段, 段落缩进: blockquote
背景颜色: mark
虚线下划线: abbr
上标下标: sub/sup
下划线: ins
删除线: del(标记已删除内容)s(标记不准确内容)
等宽字体: code
预格式化: pre
字号减小, 表注释: small
时间: time
换行: br
html5 定义区块: header nav article section aside footer div span
三. 表单表格
<form method="post" action="show.php" enctype="multipart/form-data">...</form>
表单元素的组织:<fieldset>...</fieldset><fieldset>...</fieldset>
创建各种框: <input type="text" id="name" name="name" class="zky" required="required" placeholder="请输入" value="http://" autofocus="autofocus" size="12" maxlength="20" pattern=".." />
注: text→password/url/tel/email
Id: 为了让对应的标签识别, 添加 CSS
Name: 为了让服务器和脚本识别, 通常与 id 设为一样
Size: 文本框大小
Maxlength: 能输入的最大字符数
Pattern: 正则表达式
- <input tupe="radio/checkbox" id="aaa" name="zky" value="beijing" />
- <label for="aaa">
- 北京
- </label>
- <input tupe="radio/checkbox" id="bbb" name="zky" value="shanghai" />
- <label for="bbb">
- 上海
- </label>
- <select id="zky" name="zky" size="12" multiple="multiple">
- <option value="beijing">
- 北京
- </option>
- <option value="shanghai">
- 上海
- </option>
- <option value="chengdu">
- 成都
- </option>
- </select>
- 禁用表单元素:<input ...disabled>
- 创建提交按钮:<input type="submit" value="点此提交" />
- <table>
- <caption>
- </caption>
- <thead>
- <tr>
- <th scope="rowgroup">
- ..
- </th>
- <th scope="col">
- ..
- </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <th scope="row">
- ..
- </th>
- <td rowspan="3">
- ..
- </td>
- <td>
- ..
- </td>
- </tr>
- </tbody>
- </table>
- {
- -moz-border-radius-topleft:50px;
- -webkit-border-top-left-radius:50px;
- border-top-left-radius:50px;
- } (左上角, 角的半径是 50px)
- {
- border-radius:50px;
- }(所有角简写)
- <video controls="controls">
- <source src="1.mp4" type="video/mp4">
- <source src="1.webm" type="video/webm">
- <object type="application/x-shockwave-flash" data="1.swf?videourl=1.mp4&control=true">
- <param name="movie" value="1.swf?videourl=1.mp4&control=true">
- </object>
- // 嵌入 Flash 动画
- <a href="1.mp4">
- 下载该视频
- </a>
- </video>
- ) <(<)
- ) >(>)
- /* 全局 CSS 定义 */
- body{
- margin:0 auto;padding:0;background:#FFF;color:#666;font:12px '宋体';
- }
- div,form,ul,ol,li,span,p,dl,dt,dd,img{
- margin:0;padding:0;border:0;
- }
- h1,h2,h3,h4,h5,h6{
- margin:0;padding:0;font-size:12px;font-weight:normal;
- }
- ul,ol,li{
- list-style:none
- }
- table,td,input,textarea{
- font-size:12px
- }
- .clear {
- clear:both;
- height:0;
- font-size:0;
- line-height:0
- }
- .clear {
- border-top: 1px solid transparent !important;
- margin-top: -1px !important;
- border-top: 0px;
- margin-top: 0px;
- height: 0px;
- clear: both;
- background: none;
- font-size: 0px;
- visibility: hidden;
- }
- .clear{
- clear:both;
- font-size:1px;
- width:1px;
- height:0;
- visibility:hidden;
- margin-top:0px!important;
- *margin-top:-1px;
- line-height:0
- }
- .clear{
- zoom:1;
- }
- .clear:after {
- clear:both;
- height:0;
- overflow:hidden;
- display:block;
- visibility:hidden;
- content:".";
- }
- .claer {
- height:auto;
- _height:200px;
- min-height:200px;
- verflow:auto;
- zoom:1;
- _overflow:visible;
- }
- <div class="">
- <ul class="clear">
- <li>
- <a href="#">
- 送水送气
- </a>
- </li>
- <li>
- <a href="#">
- 送花服务
- </a>
- </li>
- <li>
- <a href="#">
- 宾馆住宿
- </a>
- </li>
- <li>
- <a href="#">
- 家电维修
- </a>
- </li>
- <li>
- <a href="#">
- 餐饮电话
- </a>
- </li>
- <li>
- <a href="#">
- 电脑网络
- </a>
- </li>
- </ul>
- </div>
- /* 全局 CSS 定义 */
- //code from http://caibaojian.com/frontend-base.htmlbody{
- text-align:center;margin:0 auto;padding:0;background:#FFF;color:#666;font:12px '宋体';
- }
- div,form,ul,ol,li,span,p,dl,dt,dd,img{
- margin:0;padding:0;border:0;
- }
- ......
来源: http://www.jianshu.com/p/df8e9df6e6de