本文记录在学习HeadFirstHTMLCSS2一书中,值得回顾的地方
第一章:开始了解HTML
- 几个名词和概念:HTML、HTML元素、标记、属性、CSS
- HTML:是HyperText MarkUp Language的简写,中文全名:超文本标记语言,看到这里的MarkUp,知道大名鼎鼎的MarkDown为什么这么起名字了。
- HTML元素,通常由:开始标记 + 内容 + 结束标记,三部分组成。
- 标记拥有属性,如下:
<h1 id='myH1'>我是标题</h1>
- CSS:中文全称为层叠样式表,用来控制HTML的表现
- 关于忽略:大多数空白字符,如制表符、回车、空格,都会被HTML忽略,但如果是code、pre元素,则不同:
我是pre元素,内容中可以有多个空格 。
我是code元素,内容中可以有空格 ,但只有一个空格位
第二章:深入了解超文本
- href的概念: 是HyperText Reference的简称,中文名:超文本引用
- a元素:可在元素内容中包裹其他元素,如图片,单击元素也可跳转指定链接
<a> <img src='xxx' /> </a>
- 文件夹和文件的命名中尽量不要出现空格,容易引发错误
第三章:创建网页:构建模块
- q元素代表
引用
,通常是对内容加引号,具体表现取决于浏览器 -
blockquote元素,长引用,区别于q元素的短引用
- 几个概念:
- 块元素 block,单独显示,前后都有换行
- 内联元素 inline,不换行
- br元素,你可以把它看成一个回车符,它没有内容,不需要结束标记,这类元素叫做
void元素
,img元素也属于此类。 - ol,有序列表,ul,无序列表,他们必须和li元素配合使用。
- dl,定义列表,列表中每一项都有一个定义术语dt和一个定义描述dd
<dl>
<dt>爱因斯坦</dt>
<dd>德国著名物理学家</dd>
<dt>门捷列夫</dt>
<dd>苏联,化学家</dd>
</dl>
显示为:
-
爱因斯坦
- 德国著名物理学家 门捷列夫
- 苏联,化学家
- 常用字符实体清单
- time元素,中间可以包裹时间,
第四章:WEB镇之旅:开始链接
- www.baidu.com,其中baidu.com是域名,www.baidu.com是网站名,www是服务器名,一个域名可以演变成多个网站名,例如ditu.baidu.com,waimai.baidu.com
- 在浏览器里输入的WEB地址统称为URL,即统一资源定位符,Uniformed Resource Locators
- 其中https://指用于获取资源的协议,www.baidu.com代表网站名,/index.html指根文件到资源的绝对路径,http为超文本传输协议
- 如果URL指向的是WEB服务器中的一个文件夹而不是文件,例如:https://www.baidu.com/images/,这个时候,web服务器会尝试查找目录中的一个默认文件,例如index.html或default.html
- 为a元素设置title属性,可以更好的提示访问者这个链接的指向,事实上,可以为任何元素指定title属性(鼠标移上去可显示提示信息)
- 在a元素的href属性中使用#,跳转至当前页面指定的锚点,锚点是怎么设置的呢?很简单,为元素添加id属性即可。例如:
跳转至第一章 - 设置a元素的target属性为"_blank",将在新窗口中打开一个链接,如果target设置一个指定的命名,例如coffee,那么这个新窗口会被命名为coffee,后续其他a元素被点击时,如target也是coffee,将在相同的窗口打开。
第五章:为你的页面增加图像
- 常用图片格式:JPEG、PNG、GIF,它们区别如下:
JPEG | PNG | GIF |
---|---|---|
照片及复杂图像使用 | 单色图像和几何图像 | 单色图像或几何图像 |
不支持动画 | 不支持动画 | 支持动画 |
比较小 | 比较大 | 比较大 |
不支持透明 | 任意颜色可透明 | 单个颜色可透明 |
有损存储 | 无损存储 | 无损存储 |
- 使用img元素的最佳实践:
- 利用工具调整图片大小,使之适应浏览器,避免无谓的下载过高分辨率的图片
- 设置width和height两个属性,使之与调整后的图片相同,因为使用了固定的尺寸,避免了页面布局的二次渲染
- 使用alt属性设置替代
- 如果把一个透明的图像放在WEB页面中,则需要确保这个图像的蒙版颜色与web页面背景色一致
第六章:标准及其他,严肃的HTML
- HTML不再会有6、7、8版本,从H5开始,版本就是动态的了
- 利用meta可以指定字符编码,字符编码提供一种方法,它可以在计算机上表示某种语言的所有字母、数字和其他字符。Unicode可以表示所有语言。
<meta charset='utf-8'>
- uft-8是Unicode系列中的一个编码,web页面一般使用utf-8,因此html文本文件应保存成utf-8的格式
第七章:CSS入门
- 选择器之间加逗号,可为多个元素指定样式:h1,h2{}
- sans-serif,这种字体没有衬线,看起来会比较清晰
- 继承,子元素会继承父元素的CSS属性,但不是所有属性都能继承,一般来说,影响外观的属性能被继承,你可以根据常识来判断
- 类选择器,p.classname
第八章:增加字体和颜色样式
- 认识几种常见的字体系列
- serif 含有衬线的字体,优雅,代表:times new roma
- sans serif 不含有衬线的字体,清晰,代表:Arial,WEB页面常用
- monospace 每个字符宽度相同,常用于代码显示
- cusive 类似手写
- fantasy 含有某种风格的字体
- font family 通常会列举同一个系列的字体,例如,Verdana, Geneva, Arial, sans-serif,最后一个总是放通用的字体系列名
- 在css中,使用@font-face{font-family:‘xxx’;src:‘http://xxx’}来指定自定义的字体
- 字体大小设置最佳实践
- 在body中设置浏览器的通用大小,推荐small,medium
- 然后其他地方使用em,或百分比,可保证一致性
第九章:盒模型
- css中inherit的含义是继承,指的是按父元素的设置来处理
- background-image和img,前者仅仅是作为元素的背景,后者是插入图片,两者功能定位是不一样的
- border-style,常用四种:
- solid 实线
- double 双线
- dotted 虚线
- dashed 破折线
- groove 槽线
- insert 内凹
- outset 外凸
- ridge 脊线
- p#footer,id为footer的段落样式
- ,在css引入中使用媒体查询
- media=‘screen and (max-device-width:480px)’ screen指的是有屏幕的设备(排除打印机、3d眼镜、盲文阅读器等)
- 各类设备的一般像素:
- 智能手机 480*640
- 平板电脑 1024*768
- 桌面PC 1280*960
- 互联网电视 2650*1600
第十章:DIV和SPAN
- div h2 {color:black} 选择器(中间空格):父元素为div的所有h2元素,再如:#elixire h2 {}
- #elixires>h2,选择器间加>表示直系子元素, 更多延伸:#elixirs div div {}, .myDiv nth
- 更多选择器
- 使用数字排列法确定层叠样式的最终结果,根据[id选择器的数量] [类和伪类的数量] [元素选择器的数量]形成的数字,数字越大,优先级越高,例如 #myDiv .myDivClass . myBlock div p 数字为[1][2][2],即122
第11章:布局和定位
-
首先要理解flow元素流的概念,块元素流向默认是从上到下,内联元素的流向是从左上到右下
-
浏览器中上下放置两个块元素时,外边距会折叠,即会取两者之间的最大者
-
当一个元素嵌套在另一个元素之中,且外元素未设置边框,那么,内外元素的外边距会折叠
-
float详解
- 尽可能远的向左或向右浮动一个元素,然后它下面的所有内容会绕流这个元素
- 对于所有的浮动元素有一个要求,它必须有一个宽度
- 它会从文档流中删除,下面的块元素会填充空白区域,而内联元素会考虑这个浮动元素的边界,并尽量绕开它,包括块中的内联元素
- 为一个元素设置clear属性,可以使得该元素左边、右边、或者两边
#footer{ clear: right; }
-
position的默认值是static,也就是说在文档流中,Relative也会让元素正常的流入文档中,但是在页面显示之前要进行偏移
第12章:HTML5标记
- 语义化标签:header,footer,nav,aside,article,video,time
- time 标签的内容可能不符合时间的标准格式,这种情况下,需要使用datetime属性
<time datetime='2019-10-01'>2019年10月1日</time>
- video元素
- 类似于img元素
- autoplay 可以设置自动播放
- 视频格式:google chrome要使用.webm格式,对于Safari,应使用.mp4(H.264格式)FireFox & Opera 使用.ogv
- controls属性为true,播放器会提供一些控制视频和音频播放的控件
- poster,默认海报,视频未播放之前显示
- preload 预加载
- 容器:WebM,MP4,Ogg,包含视频编码和音频编码,为了尽可能兼容,你可以在video元素下添加source元素,并为每个source指定src
- 尝试一下其他的新元素
- mark 突出显示某些文本
- audio
- figure 用来定义照片图表等独立的内容
- progress
第13章:表格与更多列表
- 利用nth-child(even) 和nth-child(odd)可以轻松实现隔行着色,nth-child(3n) 和nth-child(3n+1)
- list-style-image 可以指定url来定制化标记图像