*HTML & CSS*读书笔记
◉HTML 1、结构 网页使用HTML HyperText Markup Language 来描述页面结构 超文本标记语言允许对文本建立链接，允许对文本进行标记 网页开头都有一个DOCTYPE 文档类型 声明，告诉浏览器此页使用的HTML版本 在HTML中添加注释使用<!—— 注释文本 ——> HTML使用元素 <p>paragraph</p> 来描述页面内容的结构信息 元素由起始标签 <p> 、结束标签 </p> 和其间内容组成 HTML使用属性 <p lang=“en-us”> 来描述元素内容的附加信息 属性由属性名称 lang 和属性值 en-us 组成 HTML具有白色空间折叠特性，连续空格或换行都会显示为一个空格 <html>用来描述整个页面，<head>用来描述页面首部，<body>用来描述页面主体 添加页面标题使用<title>元素，元素位于<head>元素中 添加页面信息使用<meta />元素，元素位于<head>元素中 －name=description｜keywords｜robots content=———｜—，—，—｜noindex/nofollow －http-equiv=author｜pragma｜expires content=———｜no-cache｜Fri，04 Apr 2015 11:11:11GMT 2、文本 结构化标记用来描述文本结构信息 －<h6>标题 <p>段落 －<b>粗体 <i>斜体 －<s>删除线 <u>下划线 －<sup>上标 <sub>下标 －<br />换行符 <hr />水平线 语义化标记用来描述文本语义信息 －<abbr >词汇缩写title＝“” <address>联系详情 －<strong>着重强调 <em>一般强调 －<del>删除 <ins>插入 －<blockquote>长引用 <q>短引用 cite＝“url” －<cite>引文 <dfn>定义 3、列表 有序列表 <ol> －列表项目 <li> 无序列表 <ul> －列表项目 <li> 定义列表 <dl> －定义术语 <dt> －定义描述 <dd> 4、链接 添加链接使用<a>元素 <a>元素通过href属性指明链接跳转页面，通过target属性指明链接打开方式 链接文本尽量明确具体 href属性 －指向其他网站 href＝“绝对url” －指向同一网站其他页面 href＝“相对url” －指向当前页面特定位置 href＝“＃id值” －指向其他页面特定位置 href＝“url/＃id值” －指向email地址 href＝“mailto：email” target属性 －在新窗口中打开链接 target＝“_blank” 5、图像 添加图像使用 <img />元素 <img />元素通过src属性指明图像来源，通过alt属性描述图像内容 创建图像基本原则 －使用正确的格式来保存图像 JPEG：多色 GIF：动画 PNG：透明 －使用正确的大小来保存图像 使用像素衡量图像／使用缩放或裁剪匹配页面 为图像添加说明使用<figure>元素 <figure> <img /> <br /> <figcaption>图像说明文本</figcaption> </figure> 6、表格 添加表格使用<table>元素 表格按照行的顺序逐行绘制，行用<tr>元素表示 表格数据用<td>元素表示 表格标题用<th>元素表示，可以通过scope属性表明标题是行标题 row 还是列标题 col 如需要跨行或跨列，可以使用rowspan属性或colspan属性，属性值为所跨的行数或列数 长表格可以用<thead>表示第一行，用<tbody>表示主体内容，用<tfoot>表示最后一行 7、表单 添加表单使用<form>元素，表单控件位于<form>元素中 表单中的信息以“名称／值”的形式进行发送 <form>元素通过action属性指明接收表单信息的web服务器，通过method属性表明提交表单是只为了检索信息 get 还是为了添加或删除信息 post 表单控件类型 －添加文本 <input /> type=text/password/email/url/search name＝ maxlength= 最长字符 placeholder= 占位文本 required= 表单验证 <textarea> name= －进行选择 <input /> type=radio/checkbox name= value= checked= 选中选项 <select> <option> name= value＝ (size= ) 选项显示数 selected＝ 选中选项 (multiple= ) 多选 －提交表单 <input /> type=submit name= value= <input /> type=image src= width= height= －上传文件/日期 <input /> type=file/date name= －隐藏控件 <input /> type=hidden name= value= 为表单添加按钮使用<button>元素，可在其间结合使用文本和图像 为表单添加说明使用<label>元素 <label>Age<input type=“text” name=“age” /></label> <input id=“m” type=“radio” name=“gender” value=“m” /><label for=“m”>Male</label> 为表单添加组合使用<fieldset>元素 <fieldset> <legend>控件组标题</legend> 表单控件 表单控件 </fieldset> 8、其他标记 每个HTML元素都可以附带id属性，用来对某一个元素进行标识 每个HTML元素都可以附带class属性，用来对某一类元素进行标识 －如果某一个元素属于不同类，可以用空格将类名隔开 块级元素在浏览器显示中总是另起一行，如<h1>、<p>、<ul> 内联元素在浏览器显示中总是与邻近元素出现在同一行内，如<a>、<b>、<img> <div>元素将文本和元素集中在一个块级元素中 <span>元素将文本和元素集中在一个内联元素中 添加内联框架使用<iframe>元素，内联框架在页面上划出一定区域用来显示其他页面 <iframe>元素通过src属性指明显示页面地址，通过width和height属性指明框架宽高，通过seamless属性指明框架是否需要滚动条，添加此属性则表明不需滚动条 有些字符用于编写HTML代码而成为保留字符，需要使用转义字符来实现显示 －< > & × ÷ －" &lsquo &rdquo －¢ £ ¥ &euro －© ® &trade 9、Flash、视频和音频 添加Flash使用JavaScript脚本，添加视频使用<video>元素，添加音频使用<audio>元素 <video> <audio> src src poster 图像显示 －－ width,height －－ controls controls 播放控件 preload none/auto/metadata preload 预加载 autoplay autoplay 自动播放 loop loop 重新播放 添加多个视频源／音频源使用<source />元素替代src属性 －<source src=“video/文件名.mp4” type=‘video/mp4;codecs=“ ”’ /> －<source src=“audio/文件名.mp3” type=“video/mp3” /> ◉CSS 10、CSS简介 网页使用CSS Cascading Style Sheet 来控制页面呈现 层叠样式表设想在元素周围有一个看不见的盒子，可通过规则来控制 一条CSS规则包含两个部分：选择器和声明，选择器指明要应用规则的元素，声明指明这些元素的表现和布局 －h1，p｛color：yellow；｝ －同一条规则可以应用在多个元素上，其间用逗号隔开 －一条声明包含两个部分：属性和值，两者用冒号隔开 －任意一条声明内可以指定多个属性，其间用分号隔开 在CSS中添加注释使用／* 注释文本 *／ 在页面中添加CSS规则可使用外部CSS文件（推荐使用），也可使用内部CSS代码 －外部 <link href= type=“text/css” rel=“stylesheet” /> －内部 <style type=“text/css”> ########### </style> CSS选择器类型 －基本选择器 通用选择器＊｛｝匹配所有元素 类型选择器p｛｝匹配某一类型元素 类选择器.class｛｝匹配class属性相同的元素 ID选择器＃id｛｝匹配id属性相同的元素 子元素选择器p>a｛｝匹配指定元素的直接子元素 后代选择器p a｛｝匹配指定元素的后代元素 相邻兄弟选择器h1+p｛｝匹配指定元素的下一个元素 普通兄弟选择器h1～p｛｝匹配指定元素的下一类元素 －特性选择器 简单选择器p［class］匹配一种具有特定属性的元素 精确选择器p［class＝“css”］匹配一个具有特定属性值的元素，该属性值唯一 部分选择器p［class～＝“css”］匹配一个具有特定属性值的元素，该属性值不唯一 开头选择器p［attr^=“c”］匹配一个具有特定属性值的元素，该属性值以某字符串开头 包含选择器p［attr*=“css”］匹配一个具有特定属性值的元素，该属性值包含某字符串 结尾选择器p［attr$=“s”］匹配一个具有特定属性值的元素，该属性值以某字符串结尾 伪元素 就像在代码中加入了额外的元素 －首字母 :first-letter｛｝／首行文本 :first-line｛｝ 伪类 就像是一个类特性的额外的值 －未访链接 :link｛｝／已访链接 :visited｛｝ －悬停 :hover｛｝／操作 :active｛｝/获取焦点 :focus｛｝ CSS优先级原则 －就近性原则：如果两个选择器完全相同，那么后出现的选择器优先级更高 －具体性原则：如果一个选择器比其他选择器更加具体，那么具体的选择器优先级更高 －重要性原则：如果在任意属性值后添加 ！important ，那么这条规则更重要 11、颜色 指定颜色方式 －RGB值 rgba(90,90,90,0.5) 红 绿 蓝 不透明 －HSL值 hsla(0,0%,78%,0.5) 色调 饱和度|灰色 亮度|黑色 不透明 －十六进制编码 #eeeeee 红 绿 蓝 －颜色名称 DarkCyan 为使文本清晰易读，确保前景色 color 和背景色 background-color 之间有足够对比度 －白色背景－灰黑色文本 －黑色背景－灰白色文本 12、文本 文字属性 －字体系列 font-family Georgia,Times,serif 衬线字体 适用于长文本 Arial,Verdana,sans-serif 无衬线字体 适用于短文本 “Courier New”,Courier,monospace 等宽字体 适用于代码显示 “Comic Sans MS”,cursive 草书字体 适用于手写风格 Impact,fantasy 虚幻字体 适用于装饰 －字体大小 font-size 12px 像素 200% 百分数 默认16px 1.3em EM值 1em相当于1个字母m的宽度 －字体粗细 font-weight normal 常规 bold 粗体 －字体样式 font-style normal 常规 italic 斜体 oblique 倾斜 文本属性 －文本切换 text-transform uppercase 大写 lowercase 小写 capitalize 单词首字母大写 －文本装饰 text-decoration none 无 underline 下划线 overline 上划线 line-through 穿越线 blink 闪烁 －文本对齐 text-align left 左对齐 right 右对齐 center 居中对齐 justify 两端对齐 －垂直对齐 vertical-align 用于内联元素（如<img>）与文本的垂直对齐 top/text-top 顶部对齐 middle 中间对齐 baseline 基线对齐 bottom/text-bottom 底部对齐 －文本缩进 text-indent 20px －文本投影 text-shadow 1px 1px 0px #111111 水平偏移 垂直偏移 模糊距离 颜色 －文本间距 行间距 line-height 1.4em 单词间距 word-spacing 0.25em 字母间距 letter-spacing 0.1em 13、盒子 CSS采用盒子模型来处理每个HTML元素 控制盒子大小 －盒子宽度 width 宽度限制 min-width/max-width －盒子高度 height 高度限制 min-height/max-height －内容溢出 overflow：hidden 隐藏/scroll 滚动 控制盒子边框、内边距、外边距 －边框 border：2px dotted #000000 边框宽度 border-width：2px｜thin/midium/thick｜2px 1px｜2px 1px 3px 2px －border-top-width／border-right-width／border-bottom-width／border-left-width 边框样式 border-style：solid 实线/dotted 方形点线/dashed 虚线/double 双实线/groove 雕入/ridge 浮出/inset 嵌入/outset 凸出/hidden 隐藏/none 无 －border-top-style／border-right-style／border-bottom-style／border-left-style 边框图像 border-image：url(“images/dots.gif”) 11 11 11 11 stretch/repeat/round 图像URL 切割位置 伸展/重复/自适应重复 边框颜色 border-color：#000000｜＃000000 #111111#222222 #333333 －border-top-color／border-right-color／border-bottom-color／border-left-color 边框圆角border-radius：2px｜2px 1px｜2px 1px 3px 2px｜1em 2em 1em 2em/2em 1em 2em 1em －border-top/bottom-right/left-radius：2px 1px －内边距 padding：2px｜2px 1px｜2px 1px 3px 2px padding-top／padding-right／padding-bottom／padding-left －外边距 margin：2px｜2px 1px｜2px 1px 3px 2px margin-top／margin-right／margin-bottom／margin-left －如果为一个盒子指定了宽高，那么盒子的边框、内边距、外边距会增加到它的宽高上 －如果想为一个盒子在包含此盒的外部元素内居中显示，指定盒子宽度并将其左右两侧的外边距设置为auto，并在包含此盒的元素中添加text-align属性，设定其值为center 控制盒子阴影 －盒子投影 box-shadow (inset) 1px 1px 2px 2px #111111 （内阴影）水平偏移 垂直偏移 模糊距离 阴影扩展 颜色 －显示／隐藏盒子 盒子显示 visibility －hidden 使盒子隐藏，并在该盒子位置留下空白/ visible 显示 －li｛display：inline；margin-right：10px；｝ li.hide｛visibility：hidden；｝ 元素显示 display 内联元素与块级元素转换 －inline 使块级元素表现得像内联元素 －block 使内联元素表现得像块级元素 －inline-block 使块级元素像内联元素那样浮动并保持其他块级元素特征 －none 使元素隐藏，就像没有这个元素一样 －li｛display：inline；margin-right：10px；｝ li.hide｛display：none；｝ 14、列表、表格和表单 列表属性 －列表标记 list-style：inside circle 列表标记类型 list-style-type：(ul)none/disc/circle/square ol)decimal/decimal-leading-zero/upper-alpha/lower-alpha/upper-roman/lower-roman 列表标记图像 list-style-image:(ul)url(“images/star.png”) 列表标记位置 list-style-position：outside/inside 表格属性 －表格宽度 table｛width:600px;｝ －空单元格 table｛empty-cells:show/hide;｝ －单元格间距 th，td｛border-spacing:5px｜5px 15px;｝ －单元格合并 th，td｛border-collapse:collapse/separate; ｝ －定义表格样式技巧 设置单元格内边距 th，td｛padding:7px 10px 10px 10px;｝ 区分标题 －粗体大写显示 th｛text-transform:uppercase;letter-spacing:0.1em;font-size:90%;｝ －添加背景色或下划线 th｛border-bottom:2px solid #111;border-top:1px solid#999;｝ 交替改变表格行的背景色 tr.class｛background-color:#efefef;｝ 悬停高亮显示当前表格行 tr:hover｛background-color:#c3e6e5;｝ 向右对齐数字 .number｛text-align:right;｝ 表单属性 －定义单行文本框样式 input｛ font-size:120%; color:#5a5854; back-ground-color:#f2f2f2; border:1px solid #bdbdbd; border-radius:5px; padding:5px 5px 5px 30px; background-repeat:no-repeat; background-position:8px 9px; display:block; margin-bottom:10px;｝ input:focus,input:hover｛ back-ground-color:#ffffff; border:1px solid #b1e1e4;｝ input#email｛ background-image:url(“images/email.png”);｝ input#password｛ background-image:url(“images/password.png”);｝ －定义提交按钮样式 input#submit｛ color:#444444; text-shadow:0px 1px 1px #ffffff; border-bottom:2px solid #b2b2b2; background-color:#b9e4e3;｝ input#submit:hover｛ color:#333333; border:1px solid #a4a4a4; border-top:2px solid #b2b2b2;｝ 光标属性 －光标类型 cursor：auto/default/crosshair/pointer/move/text/wait/help/url(“cursor.gif”) 15、布局 控制元素的位置 position －普通流 static 每个块级元素都换行显示 －相对定位 relative 以其在普通流中所处的位置进行移动 位移属性 top/bottom:10px｜right/left:10px －绝对定位 absolute 脱离普通流，不影响周围元素的位置，随着页面的滚动而移动 －固定定位 fixed 脱离普通流，不影响周围元素的位置，不随着页面的滚动而移动 位移属性 top/bottom:0px｜right/left:0px 控制元素的层次 z-index －当使用相对定位、绝对定位或固定定位时，元素可能重叠，后出现元素会位于先出现元素上面 －可使用z-index属性控制元素层次，该属性值是一个数字，数字越大，元素属性越靠前 控制元素的浮动 float －浮动 float：left/right 将元素定位到其包含元素的最左侧或最右侧 －清除浮动 clear：left/right /both/none 表明该元素左侧或右侧不允许浮动元素出现 －如果一个包含元素只包含浮动元素，其高度可能会被看成0像素，需在其样式中添加两条CSS规则 overflow:auto｜width:100% －使用浮动将元素并排 p｛width:230px; float:left; margin:5px; padding:5px; background-color:#efefef;｝ p.clear｛clear:left;｝ －使用浮动创建多列式布局 .col1,.col2,.col3｛width:300px; float:left; margin;｝ 理解页面的布局 －屏幕分辨率指一个屏幕在面积内所能显示的点数 －首屏页面宽度约为960～1000像素，高度约为570～600像素 －固定宽度布局保持固定宽度，通常以像素作为衡量单位 －流体布局通过伸展或收缩来适应屏幕，通常使用百分数 －网格有助于创建页面布局，最常见的布局网格为960像素网格 －可在一个页面中引用多个CSS文件 ＊html <link /> <link /> <link /> ＊html <link /> css @import url( ) @import url( ) 16、图像 控制图像大小 width｜height 设置背景图像 background:(#ffffff) url( ) no-repeat center top, (#ffffff) url( ) no-repeat center top,(#ffffff) url( ) no-repeat center top 顶层→底层 －背景颜色 background-color －背景图像 background-image: url( )｜渐变-moz/webkit/0-linear-gradient(#fff,#000) －背景重复 background-repeat:repeat/repeat-x/repeat-y/no-repeat －背景绑定 background-attachment:fixed/scroll －背景位置 background-position:left/center/right top/center/bottom｜0% 50% 控制图像翻转 －html <a class="button" id="add-to-basket">Add to basket</a> <a class="button" id="framing-options">Framing options</a> －css a.button { height: 36px; background-image: url("images/button-sprite.jpg"); text-indent: -9999px; display: inline-block;} a#add-to-basket { width: 174px; background-position: 0px 0px;} a#framing-options { width: 210px; background-position: -175px 0px;} a#add-to-basket:hover { background-position: 0px -40px;} a#framing-options:hover { background-position: -175px -40px;} a#add-to-basket:active { background-position: 0px -80px;} a#framing-options:active { background-position: -175px -80px;} 背景图像最好是低对比度的，如果是高对比度的，最好在文本下层插入半透明背景色 17、HTML5布局 添加页眉使用<header>元素，添加页脚使用<footer>元素 添加导航使用<nav>元素 添加文章使用<article>元素，添加附属信息使用<aside>元素 组合标题使用<hgroup>元素 把部分组合成整体使用<div>元素，就像一个容器 把整体分解成部分使用<section>元素，就像一把剪刀 ◉实用信息 18、建站过程和设计方法 网站为谁而建？ －个人：年龄、性别、国家、地区、教育程度、家庭状况、收入、职业、上网频率、上网设备 －企业：规模、职务、建站目的、建站预算 人们为什么要访问你的网站？ －什么动机？→什么目标？→什么行动？ 怎么构建网站？ －网站地图→线框图→高保真原型 怎么设计网站？ －形成视觉层次 大小：较大的尺寸更容易引起注意 颜色：明亮的颜色更容易引起注意 样式：独特的样式更容易引起注意 表现：合适的图像更容易引起注意 －分组 通过空白分组 通过背景色分组 通过边框分组 －保持一致 19、实用信息 搜索引擎优化 －站内优化：在页面网址、页面描述、页面标题、标题、正文、链接文本、图像说明添加关键词 －站外优化 网站分析 －常用分析工具：Google Analytics －多少人访问了你的网站、他们如何找到你的网站、他们来你的网站做了什么 网站构建 －为将网站上传到Web，需要注册一个域名并使用Web托管 －为了让人们看到网站，需要使用文件传输协议 FTP 将网站文件上传到Web服务器
