关于标记
P6
元素=开始标记 + 内容 +结束标记
CSS
cascading style sheets 层叠样式表
style元素
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 2px dotted black;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
P32:
type=可以省略
px表示像素
#d2b48c是十六进制码
body表示{}中的所有CSS要运用在HTML元素中的内容
2深入了解超文本
HTML ：HT hypertext 超文本
<a>元素 创建指向另一个页面->href属性
通过href属性指定链接的目标文件
hypertxeterference 超文本引用 可以指向各种各样的资源
使用相对路径 …/上一级 最上只能走到网站的根目录
HTML路径统一使用“/” 不论操作系统
<a href="top10.html">Great Movies</a>
也可以连接到WEB上的资源 把href的属性值改为相应的URL地址即可
属性
写法：属性名 等号 双引号括起来的值
注意：不加双引号是不严谨的！
例如
<a href="top10.html">Great Movies</a>
<style type="text/css"
<img src="../images/red.jpg">
3构建模块
<em>强调文本 与<b> <strong> <mark>区别
<b>应用场合如：摘要中的关键字、评论中的产品名称，或其他典型的应该加粗显示的文字（除此之外无其它特别强调）。- 不要将元素与
<strong>、<em>或<mark>元素混淆。<strong元素表示某些重要性的文本，<em>强调文本，而<mark>元素表示某些相关性的文本。<b>元素不传达这样的特殊语义信息；仅在没有其他合适的元素时使用它。 - 类似的，也不要用
<b>元素来标记标题。如果需要表示标题，请使用<h1(en-US)>到<h6 (en-US)>标签。此外，可以通过样式表来改变这些元素的的默认样式，结果就是它们并不一定都是粗体。 - 通过在
<b>元素上添加class属性来表示额外的语义信息是一个很好的方式（例如<b class="lead">来表示段落中的第一句）。这可以在样式需要变动的情况下更轻松地处理不同应用场合的<b>元素，无须改动HTML。 - 以前
<b>元素的意思就是让文本变成粗体。但从 HTML4 开始，不赞成标签表示带样式信息，于是<b>元素的含义发生了变化。 - 如果不是出于语义目的而使用
<b>元素，那么让文本显示粗体更好的方式是使用将 CSS 的font-weight属性设置为"bold"。
<q>元素
短引用 相比直接使用” “ 能够让页面更结构化也更有意义
<blockquote>块引用
<br>换行符
是一种void元素<img>也是
<code>代码
<strong>特别强调的文本
<pre>原样输出文本
列表
<li>元素
list item 是一个块元素 在每个列表项后有换行
每个列表项放在一个li元素中
<ol>
<li>Walla Walla, WA</li>
<li>Magic City, ID</li>
<li>Bountiful, UT</li>
<li>Last Chance, CO</li>
<li>Truth or Consequences, NM</li>
<li>Why, AZ</li>
</ol>
用<ol> or <ul>包围列表项
ol表示有序列表 ul表示无序列表
有序列表浏览器会自动加序号
在<li><ol><li></li></ol></li>嵌套列表
字符实体
特殊字符要使用字符实体
| 字符 | 输入方法 |
|---|---|
| & | & |
| < | < |
| > | > |
可以使用实体名也可以使用实体编号，比如d
块元素与内联元素
| 类型 | 效果 | 举例 |
|---|---|---|
| 块元素 | 单独显示，在内容前后分别有一个换行 | <p> <blockquote> <ol> <ul><li> |
| 内联元素 | 与其他元素的内容放在一起 | <q> <em> |
| void元素 | 没有内容 只有标记组成 | <br> <img> |
4连接起来
URL
统一资源定位符Uniform Resource Locators
协议 网站名 从根文件夹到资源的绝对路径（从根文件夹到指定文件）
请求末尾没加/ 服务器会自动帮加 如果没有指定文件会返回默认文件index.html 或 default.htm 注意没有l
协议 http file
http:// file://
为链接增加标题->title属性
<a>元素中的title属性用来提供链接信息
Read the <a href="http://wickedlysamrt.com/buzz"
title="Read all about caffeine on the Buzz">Caffeine Buzz</a>
技巧：
**保证链接标签有意义 不要使用点击这里 **
保证链接简介 不要把大段文字放在链接里 可以用title属性提供额外的信息
不要把链接放在一起
使用id属性为<a>创建目标
<h2 id="Chai">Chai Tea </h2>
<a href="index.html#Chai">See Chai Tea</a>
这样会直接链接到元素 注意 id必须在这个页面必须是唯一的
注: id属性可以加到任意元素中 不过一般不太需要这么做
不仅可以为文字也可以为图片块元素创建链接
targer属性打开新窗口
<a target="__blank"href="http://"title="ffff"cccc</a>
__blank使浏览器能在新窗口中打开链接
5 为页面添加图像
| 图像格式 | 优缺点 |
|---|---|
| GIF | 无损 支持透明度(但只限一种颜色) GIF往往比JPEG大 256色 |
| PNG | 会压缩 不过不丢信息 “无损” 允许透明 PNG比JPEG大 透明背景反锯齿处理 |
| JPEG | 1600万色 有损 不支持透明度 文件比较小 不支持动画 适合大量连续的颜色 |
照片和复杂图像 JPEG
单色图像 Logo和几何图形 PNG或GIF
<img>元素
src属性可以用相对链接 还可以用URL
src是source的缩写
候选格式alt
防止图像无法打开 可以增加 alt 属性为访问者提示
调整大小 width height属性
<img src="./images/segway1.jpg" alt="是一张segway的照片" width="48" height="100">
缩略图thumbnail
注意<img>是内联元素 所以不会自动换行 除非一行放不下
原1200x800 适合页面 600x400 缩略图 300x200
把缩略图变为链接
1.为照片创建单独的页面 a.jpg 设置一个 a.html
2.把<img>放入到一个<a>元素中 同时加入href
<p>
<a href="./html/seattle_video_med.html">
<img src="./thumbnails/seattle_video_med.jpg" alt="My video iPod"><br>
</a>
<a href="./html/seattle_classic.html">
<img src="./thumbnails/seattle_classic.jpg" alt="A classic ipod"><br>
</a>
<a href="./html/seattle_shuffle.html">
<img src="./thumbnails/seattle_shuffle.jpg" alt="An iPod Shuffle"><br>
</a>
<img src="./thumbnails/seattle_downtown.jpg" alt="downtown">
</p>
当然 也可以直接链接到JPEG图像
<a href="./photos/seattle_downtown.jpg">
<img src="./thumbnails/seattle_downtown.jpg" alt="downtown"><br>
使用PS导出WEB格式的图片 蒙版颜色不同提供背景柔缓文本边缘（这个版本叫杂边？）
如果不柔化边缘会很生硬，有锯齿 反锯齿(anti-aliasing)会柔化边缘
蒙版可以指定背景的颜色 柔化文本时更好看
PNG提供比GIF更好的透明度控制 ，他们都是无损的 ，但比JPEG大
PNG-24(数百万种颜色) PNG-16 PNG-8（256）
6标准和其他
doctype
旧的doctype比较繁琐
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/htm14/strict.dtd"
新的HTML5doctype
<!doctype html>
新的HTML是活标准，具有向后兼容性，不必再考虑版本号
万维网协会W3C（World Wide Web Consortium）
W3C验证工具
<meta>指定字符编码
将<meta>标记放入head中
<meta charset="utf-8">
上述是HTML5的meta标签写法标准 更早版本的meta标记写起来比较复杂
注意事项
1.一定要以<!doctype html>开头 除非在写HTML4.01或XHTML
2.<html>元素 它必须是Web页面的最顶层元素 跟在doctype后面
3.要使用<head> <body> 只有这两个元素能直接放在<html>元素中！！
4.在<head>中指定正确的字符编码<meta charset="utf-8">
5.在<head>中要有<title>
书上247页给出了HTML考古的一些旧语法
1105
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
