《Head First HTML CSS》

一、HTML

1、HTML(HyperText Markup Language),建立网页结构
2、CSS(Cascading Style Sheets),控制网页表现
3、通过HTML,我们利用标记来标示内容提供结构
4、元素=开始标记+内容+结束标记
5、元素可以有属性,属性可以提供一个元素的附加信息
6、所有页面都要有一个<html>元素,其中要有一个<head>元素和一个<body>元素
7、可以在<style>元素中写CSS规则,为HTML增加CSS,<style>元素要放在<head>元素里
8、大多数空白符(制表符、回车、空格)都会被浏览器忽略

二、HyperText

1、使用<a>元素创建一个超文本链接,链接到另一个Web页面。<a>元素的内容会成为Web页面中可单击的文本,href属性告诉浏览器链接的目标文件
2、利用属性,可以指定一个元素的附加信息。属性的写法:首先是属性名,后面是一个等于号,然后是用双引号括起来的属性值
3、Web浏览器只认识每个元素的一组预定义的属性
4、使用/分隔路径中的各个部分
5、使用..可以链接到源文件上层文件夹中的一个文件

三、Build

1、<h1>、<p>、<blockquote>、<ol>、<ul>、<li>都是块元素,单独显示,在内容前后分别有一个换行
2、<a>、<q>、<em>、<img>、<input>是内联元素,元素中的内容与其包含元素的其余内容一起显示
3、块元素特立独行、内联元素随波逐流
4、void元素没有内容(确切的讲,void元素是在开始标记和结束标记之间没有任何内容的元素),只有一个标记组成
5、ol(ordered list) ul(unordered list) li(list item)
6、<ol>和<ul>元素被设计为只能包含<li>元素,可以在列表中建立嵌套列表,将<ol>或<ul>元素放在<li>元素中
7、要对HTML内容中特殊字符使用字符实体

四、Link

1、在所有元素中,属性的顺序都不重要
2、域名是一个唯一的名字,用来唯一标识网站
3、URL(Uniform Resource Locator,统一资源定位符)是一个全局地址,可以用来定位Web上的任意资源
4、<a>元素的href属性中可以使用相对路径或者URL。对于网站内的其他页面,最好使用相对路径,对外部链接使用URL
5、为了便于访问,可以在<a>元素中使用title属性提供链接的一个描述,可以为任何元素增加title属性
6、可以使用id属性在页面中创建一个目标。使用#后面加一个目标id,可以链接到页面中的那个位置,在一个页面中id必须唯一
7、target属性告诉浏览器在哪里打开Web页面,使用相同target名的所有链接都会在同一窗口打开,_blank则始终使用一个新窗口

五、Image

1、Web上最常用的3种图像格式:JPEG、PNG和GIF
2、JPEG:适合照片和复杂图像、1600万种颜色、有损格式、不支持透明度、不支持动画,文件较小
3、PNG:适合单色图像、百万种颜色、无损格式、支持透明、不支持动画,文件稍大
4、GIF:适合单色图像、256种颜色、无损格式、支持透明、支持动画、文件较大
5、浏览器对<img>元素的处理与其他HTML元素稍有不同,读取HTML页面后,浏览器会从Web服务器获取各个图像并显示
6、利用src属性指定图像文件的位置,可以使用相对路径包含自己网站中的图像,或者使用URL包含其他网站的图像
7、alt属性是<img>元素的必要属性
8、直接使用width和height属性调整页面上图像的大小,浏览器在缩放图像前,仍然要获取整个大图像

六、Standard

1、文档类型定义(doctype)用来告诉浏览器使用HTML版本:<!doctype html>
2、<head>元素中的<meta>标记告诉浏览器关于一个Web页面的额外信息,如内容类型和字符编码:<meta charset="utf-8">

七、CSS

1、CSS包含一些简单语句,称为规则,每个规则为选择的元素提供样式,典型的规则包括一个选择器,以及一个或多个属性和值
2、选择器指定规则将应用到哪些元素,通过用逗号分隔元素名,可以一次选择多个元素
3、只能对body中的元素增加样式
4、在CSS中把注释包围在/*和*/之间
5、在HTML中包含CSS,可以使用<style>标记,也可以使用<link>链接到一个外部样式表
6、可以使用class属性将元素增加到一个类
7、可以通过在元素名和类名之间加一个.选择该类中的特定元素,可以使用.classname选择该类的所有元素
8、元素可以加入多个类,把各个类名放在class属性中,各个类名之间用空格分隔,类名的顺序不重要
9、如果多个选择器选择一个元素,则使用最特定的规则,如特定程度相同,使用CSS文件中最后列出的规则

八、Font&Color

1、color属性为文本设置颜色 (name、%、#)
2、font-family属性定制页面中使用的字体
3、font-size属性控制字体大小 (px、%、em、keyword:xx-small、x-small、small、medium、large、x-larger、xx-large),指定字体大小时,选择一个关键字(推荐small或medium),指定它作为body规则中的字体大小,即页面的默认字体大小,使用%或em,相对于body字体大小指定其他元素的字体大小
4、font-weight属性控制字体粗细 (lighter、normal、bold、bolder)
5、font-style属性为文本增加风格 (italic、oblique)
6、text-decoration属性为文本增加更多风格 (none、underline、overline、line-through)
7、line-height属性指定文本中各行之间的垂直间距
8、CSS内置规则:
@font-face可以获取Web字体,并为它分配font-family名字
@import允许导入其他CSS文件
@media允许创建特定于某些类型的CSS规则

九、BoxModel

1、盒模型(BoxModel)是CSS看待元素的一种方式,从内而外,内容区(content area)、内边距(padding)、边框(border)、外边距(margin)
2、内边距是在内容区周围增加额外的空间,外边距提供元素之间的间距。如果有一个边框,内边距在边框内,外边距在边框外
3、元素的背景颜色或背景图像会延伸到内边距下,但不会延伸到外边距
4、使用id属性为元素指定一个唯一的名字,一个页面上有给定id的元素只能有一个
5、一个元素不能有多个id,一个页面也不允许多个元素的id相同
6、样式表的顺序很重要,一个样式表会覆盖在它上面链接的样式表中的样式
7、可以在<link>元素中使用媒体查询或者使用CSS中的@media规则指定设备

内容:
background-color
background-image: url(path、URL)
background-repeat:(repeat、no-repeat、repeat-x、repeat-y、inherit)
background-position
background:color image repeat
内边距:
padding: top right bottom left
边框:
border-color
border-style:(solid、double、groove、outset、dotted、dashed、inset、ridge)
border-width:(px、keyword:thin、medium、thick)
border-radius
border:color width style(顺序任意)
外边距:
margin: top right bottom left
margin: top&bottom right&left
margin: top&right&bottom&left

十、div&span

1、<div>元素用于将相关的元素归组为一个逻辑区,可以将需要共同样式的元素归组
2、<span>元素用于将相关的内联元素和文本归组在一起
3、width属性指定元素内容区的宽度
4、text-align属性对块元素中的所有内联内容对齐,直接在内联元素上使用不起作用
5、可以使用子孙选择器选择嵌套在其他元素中的元素
6、子孙选择器会选择一个元素中嵌套的所有相应元素
7、有些元素有不同的状态,可以用伪类单独为各个状态指向样式,如<a>元素有link、visited、hover、focus、active

十一、Flow

1、浏览器使用流在页面上放置元素,块元素从上向下流,各元素之间有一个换行,默认每个块元素会占浏览器窗口的整个宽度,内联元素在块元素内部从左上方流向右下方
2、正常页面流中的两个块元素上下相邻的外边距会折叠为最大外边距的大小

CSS布局

1、浮动布局

浮动元素放在块元素之上,不会影响正常的页面流。内联元素内容会考虑浮动元素的边界,围绕浮动元素
float属性:浮动元素会从正常流中取出,浮动到左边或者右边
width属性:如果要浮动一个元素,必须为这个元素设置一个宽度
clear属性:当元素流入页面时,元素左右不允许有浮动内容,设置了此属性的元素会下移

2、凝胶布局

内容的宽度是固定的,不会随着浏览器窗口扩展或收缩
width属性
auto属性

3、绝对布局

一个元素绝对定位时,浏览器将此元素从流中完全删除,对其他元素没有任何影响
position属性
1、static(静态):默认,所有内容正常流入页面
2、absolute(绝对):将元素从流中取出,相对于最近的父元素指定绝对位置
3、fixed(固定):将元素放在一个相对于浏览器窗口的固定位置
4、relative(相对):相对其包含元素定位

4、表格布局

display属性:(table、table-row、table-cell)
border-spacing
vertical-align

十二、HTML5

1、<nav>:所包含的内容将作为页面的导航链接
2、<header>:将标题、Logo和署名等通常放在页面或区块最上方的内容组织在一起
3、<footer>:将诸如文档信息、法律措辞和版权说明等通常放在页面或区块最下方的内容组织在一起
4、<section>:一个主题性内容分组,通常包含一个首部<header>和底部<footer>
5、<aside>:用于表示不作为页面主内容的次要内容,如插图和边栏
6、<article>:用于类似博客帖子、论坛帖子和新闻报道等独立的内容
7、<time>:用来标记时间和日期
8、<video>:为页面增加视频

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,634评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,951评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,427评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,770评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,835评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,799评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,768评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,544评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,979评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,271评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,427评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,121评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,756评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,375评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,579评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,410评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,315评论 2 352