href的含义：hypertextreference（超文本引用），互联网或计算机上的一个资源的别称
对于内部链接，href 最好使用相对路径，对于外部链接最好使用URL
无论哪种操作系统，HTML中的路径只使用斜杠（/）
<q>用于短引用，是一个内联（inner）元素；
<blockquote>用于长引用，使用后引用部分会自动缩进，是一个块（block）元素；
块元素与内联元素：
- 块元素特立独行，内联元素随波逐流
- 块元素的内容前后分别有一个换行
- 块元素是页面的主要构建模块；内联元素用于标记小段内容
- 设计页面时，先从较大的块元素开始，完善页面时加入内联元素
- 常见的块元素：<h1>~<h6>、<p>、<blockquote>
- 常见的内联元素：<q>、<a>、<em>
void元素（没有实际内容的元素）：<br>、<img>
<br>和<br/>意思完全，与XHTML兼容的页面使用<br/>
选择HTML元素时，总是希望选择与内容结构含义最接近的元素，这样有更大的灵活性、更有用
unordered list = ul，无序列表
ordered list = ol，有序列表
list item = li，列表项
defined list = dl，定义列表
define terms = dt，定义术语
definition description = dd，定义描述
嵌套：整个html文档就是多个的嵌套，要注意嵌套的匹配
字符实体：详见HTML实体 - Unicode 字符百科 (unicode-table.com)
域名与网站名
- www.starbuzzcoffee.com 是网站名，starbuzzcoffee.com是域名
- 一个域名可以用于多个网站：home.starbuzzcoffee.com、employees.starbuzzcoffee.com、......
URL（统一资源定位），以http://www.starbuzzcoffee.com/index.html为例
- http: 协议部分，告诉浏览器使用何种方法获得资源
- www.starbuzzcoffee.com 网站名，告诉浏览器要从互联网上的哪台计算机获取资源
- /index.html 绝对路径，告诉服务器我们要找哪个资源（所有web服务器看到的都是绝对路径）
要从服务器根目录（或任何其他目录）默认地返回一个文件，只需把文件命名为index.html或default.htm，还有其他其他一些可能的默认文件名，如index.php
文件URL：如 file:///C:/Users/ZhangKai/Desktop/JS引擎基本工作流程.png
URL后有一个可选的端口号，web上的所有东西默认传送到80端口
为<a>添加属性 title 可为链接添加信息，在大多数浏览器中，鼠标悬停后能显示链接的工具提示，有的还能读出链接的工具提示
通常不在 <a> 标签中放大量的内容，而把大量的内容放在 title 属性中
提供有意义的链接可以改善页面的可读性
使用 <a> 访问页面中的一个特定点：先使用属性 id 标记目标点，然后在属性 href 指定的路径或URL后添加 "#目标id"即可
所有元素中，属性的顺序都不重要
可以为任何元素添加工具提示（都可添加 title 属性），添加 id 属性，id 在页面中必须唯一
可以链接到一个链接
浏览器会在URL后自动加一个"/"
id名要用一个以字母开头，由字母、数字、横线、下划线、冒号或点号组成，尽量不要有空格的名字
查看源代码是发现链接目标最好的方法
在新窗口（需要配置浏览器的首选项）或者新标签页中打开链接：属性target = _blank
可以指定一个相同的目标名，之后有相同目标名的所有链接都会在同一个标签页中打开
web上常用的3种格式的图像：
- .jpeg 照片和复杂图像使用
  - “有损”格式，不支持透明度、文件小、不支持动画
  - 可表示1600万种不同颜色的图像
- .png 单色图像、logo、几何图形使用
  - “无损”格式、支持透明度
  - 上百万种不同颜色的图像，包含3种：PNG-8、PNG-16、PNG-24，具体取决于颜色数
- .gif 单色图像、logo、几何图形使用
  - “无损”格式、支持一种颜色设置为透明、比.jpeg文件大、支持动画
  - 最多表示256种不同颜色的图像
HTML页面是纯文本，图像绝对无法直接作为页面的一部分，它是单独存在的
获取图像的URL
- 鼠标右键图像——》复制图像地址或复制图像链接——》
- 鼠标右键图像——》在新窗口种打开图像——》从浏览器地址栏获得图像的URL
- 查看源代码，使用域名和图像的相对路径构建图像的URL
使用 <img> 的 alt 属性提示图像信息
使用 width 属性和 height 属性为图像设置宽度和高度（单位为像素数，告诉浏览器为图像预留多大的空间），未指定这两个属性时，浏览器自动确定宽度和高度，最好不要用这两个属性缩放图像（我们希望用HTML来表现结构）
浏览器在缩放图像之前，仍要获取整个大图像
像素数与屏幕上图像大小的关系：一般每英寸96像素（96ppi）,标准的72像素/英寸（72ppi），CSS像素是1英寸的1/96（96ppi），对于一个3“宽x3”高的图像，要使用96（像素）x3（英寸）=288x288像素
有的浏览器可以调整图片的大小以适应页面，但这么会传输不必要的数据，并不好
<img> 是内联元素，未作其他设置时，图像相互之间没有间距，块级元素在未作其他设置时，图像在块元素的前后的垂直方向上显示间距
棋盘图案是图像中的透明区域
transparency，透明度
matte，蒙版，根据背景颜色柔化文本边缘，默认背景色是白色
把一个透明的图像放在web页面中，要确保这个图像的蒙版颜色与web页面的背景色一致
Backwards compatibility，向后兼容性：改变了一个元素或属性的工作方式，浏览器会继续支持你使用的老方式，同时支持新的方式
HTML不会再有版本6、7、8‘、......指定标准的人已经把这个规范变成了一个活的标准，从现在开始它只是HTML
<meta> 告诉浏览器关于页面的一些信息
W3C验证工具The W3C Markup Validation Service可以帮我们检查页面，确保所有标记都是合法的
由于HTML标准的版本还在更新，验证工具得到的验证结果是不固定的
HTML 5 与以前的版本相比：提供了一些新元素和新属性，有很多新特性，允许创建web应用，比以前的版本健壮

CSS规则，例如:

1 p{
2   color:maroon;          //字体颜色为茶红色  
3 }

color：字体颜色
font-family: 字体
把元素的共同样式归组在一起：对多个HTML标签应用一个样式时，多个标签之间用逗号隔开即可
border-bottom: 元素的下边框
text-decoration: 文本装饰

一个元素可以有多个规则，每个规则会在现有样式信息前面添加新的样式信息

 1 //一个选择器
 2 p{
 3   color:maroon;
 4 }
 5 
 6 //另一个选择器
 7 h1,h2{
 8   font-family:sans-serif;
 9   color:maroon;    
10 }

继承：改变父元素的样式，其中的子元素的样式也会跟着改变
不是所有样式都能继承，只有一部分样式能继承：一般来讲，会影响文本外观的样式都能继承，如color、font-family、font-size、font-style等，其他属性不能继承，通常可以根据常识或通过尝试来确定
覆盖继承：总能使用一个更特定的选择器来覆盖从父元素继承的属性
对于CSS，总是使用最特定的那个规则
要在CSS中写注释，只需用"/* ......*/"包围即可

类选择器：结合HTML和CSS，定义一类元素，对属于该类的所有元素应用样式

1 /*<h2>标签的属性 class指定类名为 greentea*/
2 h2.greentea{
3   color:aqua;  
4 }

多个标签通过类选择器应用样式时，它们之间用逗号隔开
省略元素名时，样式会应用到该类的所有成员
一个元素可以加入多个类，把各个类名放在标签的 class 属性中，类名之间用空格分隔，类名的顺序并不重要
多个选择器有相同的特定性时，会选择CSS文件中最后列出的的那个规则
如果CSS文件中有错误，通常这个错误以下的所有其他规则都会被忽略
CSS验证工具：W3C CSS 验证服务
top：控制元素顶部的位置
text-align：文本对齐方式
letter-spacing：字母之间的间距
background-color：背景颜色
font-weight：文本的粗细
left：指定一个元素左边所在的位置
list-style：改变列表项的外观
padding：内边距
line-height：文本元素的行间距
background-image：元素背景图像
没有针对 <blockquote> 的CSS规则
<p> 会覆盖一些元素的颜色
字体系列 font-family
- 衬线（serif）：字母末端的装饰性“小细线”
- sans-serif：没有衬线的字体系列，其在计算机屏幕上更容易识读，如:
  - Verdana
  - Arial Black
  - Trebuchet MS
  - Arial
  - Geneva　　
- serif：有衬线的字体系列，如:
  - Times
  - Times New Roman
  - Georgia
- Monospace字体系列，这个系列中的字体包含固定宽度的字符，主要用于显示软件代码示例
  - Courier
  - Courier New
  - Andale Mono
- Cursive字体系列，看似手写的字体，用于标题
  - Comic Sans
  - Apple Chancery
- Fantasy字体系列，有某种风格的装饰性字体
  - LAST NINJA
  - Impact
使用属性 font-family 可以指定多个字体（一组候选字体或一个字体优先列表），只需输入字体名（要严格按照字体名书写，大小写字母必须一致），并用逗号分隔（最后总是放一个通用的字体系列名，确保至少能使用一个通用的字体，其前所有字体应当与其在同一个字体系列中），浏览器会从第一个字体名开始查看，如果没有就使用下一个字体名中的字体
若一个字体名中包含多个单词，在属性 font-family 中指定时，需要用双引号引起来
serif 和 sans-serif 不是具体的字体名
web 字体：@font-face 规则允许我们定义一种字体的名字和位置，然后在我们的页面中使用
web 字体的标准字体格式：.woff（Web Open Font Format）
其他 web 字体格式：.ttf（TrueType字体）、.otf（OpenType字体）、.eot（Embedded OpenType字体）、.svg（Scalable Vector Graphics，SVG字体）

如何使用 web字体：

 1 /*首先，找到一个字体，把这个字体的文件（最好有多种格式）放到web服务器上或本地项目的文件夹中，*/
 2 ......
 3 
 4 /*在.css文件最上面添加一个@font-face规则（可以认为是内置的CSS规则），*/
 5 @font-face{
 6     font-family:adelia;             //font-family属性指定你要建立的字体名，可使用任何名字，最好使用字体名
 7     src:url(),                        //src属性指定字体文件的位置，可以是URL或本地项目的文件路径
 8           url();             //有多种格式时，要分别指定位置
 9 }
10 
11 /*在CSS规则中使用你建立的字体*/
12 h1{
13    font-family:adelia,sans-serif;      //为以防万一，指定sans-serif作为退路
14 }

其他常见的内置CSS规则
- @import 导入其他CSS文件
- @media 创建特定于某些“媒体”类型的CSS规则，如印刷页、桌面屏幕、手机等
web 字体的缺点：
- 获取 web 字体时，页面性能可能会受到影响
- 有些设备不支持 web 字体
- 过多的 web 字体会增加页面的加载时间
web 字体托管服务
- Browse Fonts - Google Fonts
- ......

调整字体大小（font-size）

1 /*按像素指定字体大小*/
2 body{
3    font-size:14px;                      //设置字体高度为14像素，注意像素数和单位px之间不能有空格
4 }

1 /*用百分数指定字体相对于另一字体（父元素的字体大小）有多大*/
2 body{
3     font-size:14px;
4 }
5 h1{
6     font-size:150%;
7 }

1 /*同%，也是一个相对度量单位，不同的是，em指定比例因子*/
2 body{
3     font-size:14px;
4 }
5 h1{
6     font-size:1.2em;       //14*1.2=16.8px，浏览器将其四舍五入为17px
7 }

使用关键字指定字体大小，浏览器会把这些关键字转换为像素值
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- 以上关键字，每个大小大约比前一个大小大20%，small通常大约为12px，不同浏览器中这些关键字定义可能不一样
技巧：为页面的 <body> 设置一个大小（使用关键字），然后相对于这个大小设置其他的字体大小（使用%或em）
如果使用px设置字体大小，IE用户将无法调整字体大小

在 <body> 中定义字体大小，相当于给页面定义一个默认的字体大小，其他元素中的字体大小可以相对于 <body> 来设置
未指定字体大小时，将使用浏览器默认的字体大小，大多数情况下，<body>的字体大小都为16px
标题的默认大小：
- <h1> 体文本（<body>）的200%
- <h2> ...... 的150%
- <h3> ...... 的120%
- <h4> ...... 的100%
- <h5> ...... 的90%
- <h6> ...... 的60%
在 <body> 中使用相对度量单位时（%或em），相对的是默认的字体大小（通常是16px）

bold 粗体文本
normal 去除粗体样式
bolder/lighter 相对于所继承的值更粗/细一些（没有多少文字支持粗细的微小差别，所以这两个值并没有什么卵用）
还可以将值设置未100~900之间的一个数（100的倍数），不过这个值未得到字体和浏览器的广泛支持，没啥用

为字体增加风格（font-style）
- italic 斜体（并不是所有字体都支持斜体(italic)风格，实际上称为倾斜(oblique)文本）
- oblique 倾斜文本
web 颜色是按构成颜色的红、绿、蓝三个分量所占数量来确定的，每个分量会分别指定一个从0到100%的数值，然后把它们混合起来得到最终的颜色
- 白色（100%，100%，100%）
- 灰色（红、绿、蓝等量混合，不是100%）
- 黑色（0%，0%，0%）
CSS大约只定义了150个颜色名，但实际上我们可以使用一个包含1600万种颜色的调色板
指定颜色的三种方式：
- 颜色名
  - 16种基本颜色名、150种扩展颜色名（具体请看颜色表）
  - 颜色名不区分大小写
- 红、绿、蓝分量（本质）
  - rgb开头，然后在小括号里指定各分量的百分比(或0~255之间的颜色值，255x对应的百分比可得到颜色值)，如rgb(80%，40%，0%)或rgb(204,102,0)
- 十六进制颜色码（最常用）
  - 以#开头，从左到右每两位表示一个分量（红、绿、蓝）
  - 如果每一组分量中两位数字都相同，可以使用简写形式，如 #ccbb00 可简写为 #cb0
  - 每一位都相同时，表示颜色为灰色，按照具体数值从深灰到浅灰
文本装饰（text-decortation）
- line-through 横线从文本中间穿过
- underline 下划线（会误以为是链接，谨慎使用）
- overline 上划线
- none 去除文本装饰
一次可指定多个文本装饰（在一个规则中同时指定）
<del> 标记要删除的内容
<ins> 标记要插入的的内容
line-height 设置行高（各行之间的间距，即行间距（leading））使用单位 em 或百分比或 px ，如：line-height:1.6em，默认相对于字体大小
盒模型（box model）
- CSS将每个元素看作由一个盒子表示
- 外边距提供元素之间的间距，内边距在内容周围增加额外的空间
- 内容区的宽度和高度
- 内边距、边框、外边距三者都是可选的，相互之间没有依赖关系
- 内边距与外边距
  - 都是用来提供更多的可见空间，除了大小，不能对它们指定颜色或加任何装饰
  - 都是透明的，但在呈现背景时有不同：元素的背景会延伸到内边距下面但不会延伸到外边距下面
background-image 设置一个元素的背景图像
background-position 设置图像的位置，可按像素、百分比或使用位置关键字
background-repeat 默认地，背景图像会“平铺”，即反反复复地填满整个背景空间，background-repeat可以控制这种行为
- no-repeat 图像显示一次，不重复
- repeat-x 图像只在水平方向上重复
- repeat-y 图像只在垂直方向上重复
- inherit 按父元素的设置来处理
设置内/外边距的顺序很重要，先设置四周的内/外边距（padding/margin），在对单独的某一边设置内/外边距（如padding-left、margin-right、......）
边框样式（border-style）
- solid 实线
- dotted 虚线（或点线）
- double 双线
- dashed 破折线
- groove 槽线
- inset 内凹
- outset 外凸
- ridge 脊线
边框宽度（border-width），使用关键字或像素来指定
- thin
- medium
- thick
边框颜色（border-color），与设置字体颜色类似
指定某一边的边框样式、宽度、颜色（以上边框为例）
- border-top-color
- border-top-style
- border-top-width
- ......
圆角边框（border-radius）,用一个数指定4个角的半径大小，单位为px
类似边框，可以对某个角或几个角的任意组合设置半径大小，单位为px或em（相对于元素的字体大小）

id 选择器

 1 /*在HTML中为一个 <p>指定 id = footer*/
 2 ......
 3  
 4 /*在CSS中应用样式*/
 5 #footer{
 6     color:red;                  //选择 id 为 footer 的任意元素
 7 }    
 8 
 9 
10 p#footer{
11     color:red;                  //选择一个 id 为 footer 的 <p>元素
12 }

id 与 class 的区别：
- 一个 id 只与页面中的一个元素匹配，但可以属于多个类（你有一个唯一的名字，但可以加入一个或多个俱乐部）
- id 名以一个数字或字母开头，类名以一个字母开头
- id 名必须是唯一的
- id 名和类名都可包含数字、字母、下划线，但不能有空格
引入多个样式表时，顺序很重要，一个样式表会覆盖它上面的样式表中的样式，即最下面的样式表最优先
有时会有一个样式表作为页面的基础样式，要修改样式表，并不是直接修改这个样式表，而是链接这个样式表，然后在它下面链接自己的样式表指定想修改的样式
使用多个样式表可以指定不同的设备使用不同的样式表，通过 media 属性配置一个与媒体匹配的“媒体查询”来指定：
- min-device-width/max-device-width 依赖于设备的实际宽度
- min-width/max-width 表示浏览器窗口的最大/小宽度（而不是屏幕大小）
- orientation 可选横向（landscape）或纵向（portrait）

"媒体查询“还可以直接写在CSS中——使用@media规则

只包含特定于一种媒体类型的CSS规则，其他对所有媒体类型都通用的规则写在@media规则下面

 1 @media screen and (min-device-width:481px){
 2     #guarantee{
 3         ...l...
 4         margin-right:250px;        //屏幕宽度大于480px的设备会使用这些规则
 5     }
 6 }                    
 7 
 8 
 9 @media screen and (max-device-width:481px){
10     #guarantee{
11         ...l...
12         margin-right:30px;        //屏幕宽度小于等于480px的设备会使用这些规则
13     }
14 }
15 
16 
17 @media print{
18     body{
19         ......
20         font-family:Times,serif;//如果要打印页面，就使用这些规则
21     }
22 }                    
23 
24 
25 p.specials{
26         color:red;      //其他通用规则适用于所有页面
27 }
28

更多信息：Media Queries (w3.org)

posted on 2021-08-06 16:54 KK的备忘录阅读(81) 评论(0) 收藏举报

刷新页面返回顶部

公告