书籍之 Head First HTML与CSS

最新推荐文章于 2022-07-28 16:05:44 发布

警言

最新推荐文章于 2022-07-28 16:05:44 发布

阅读量3.1k

点赞数 4

分类专栏： Web开发文章标签： Head First HTML与CSS

本文链接：https://blog.csdn.net/xj1009420846/article/details/83476183

版权

Web开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

随书资源下载地址：http://www.wickedlysmart.com/hfhtmlcss/

HTML API学习网址：http://www.w3school.com.cn/h.asp

字符集网址：http://www.w3school.com.cn/tags/html_ref_ascii.asp

这本书讲解了HTML的一些属性值，是Web开发的基础，适合初学者。

1、Web语言：开始了解HTML1

开发工具：Sublime Text （插件Zen Coding + View In Browser），

快速运行：首选项->快捷键->用户

{ "keys": ["f2"], "command": "open_in_browser" },

]

学习之初：只用notepad，之后快速开发用这个Sublime。

元素= 开始标记+内容+结束标记

2.认识HTML中的“HT”：深入理解超文本

1）".." ：回上一级目录

2）对于文件html和图片资源，份文件夹管理。

3）<em> 设置为斜体

3.构建网页：构建模块

1）<q>：短引用，文字前后加 " 引号，用于段落里添加引用，作为其中的一部分。

2）<blockquote>：长引用，创建一个单独的文本块，将文字稍微缩进。用于一段或者多段文字，自成一个新段落。

3）<br> 换行

4）块元素：单独显示，前后有换行的效果，特立独行例如：h1，h2，...,h6，p，blockquote

内联元素：在段落中，随波逐流例如：q，a，em

5）元素分为两大类：

void元素（空元素）：没有实际内容的元素，目的减少HTML标记数量。不需要</>，例如：<br>，<img>

正常元素：例如<p></p> ，<h1> ，<a>

6）列表:

<li>：列表元素，包含在列表，作为一个列表项

<ol>：包围列表项，作为有序列表显示

<ul>：包围列表项，作为无序列表显示

注意：<ul>和<ol>必须包含<li>使用

定义列表：以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

4 Web镇之旅：开始链接

1）域名：网站唯一的名字 eg: www.starbuzzcoffee.com （www.之后的都是域名）

域名可以用于多个网站，域名唯一，但是网站名字不唯一。 eg:corpo.starbuzzcoffee.com ，empl.starbuzzcoffee.com

2）HTTP：超文本传输协议， HyperText Transfer Protocol

URL：统一资源定位符，Uniform Resource Locator，

例如：http://www.starbuzz.com/index.html

协议（http/FTP 告诉游览器使用什么方式获取资源）+ 网站（服务器名+域名组成，告诉游览器从什么计算机获取资源）+ 绝对路径（告诉服务器要找那个网页）

3）在写项目时候，尽量用相对路径。

4）target="_blank" 跳转到新标签页（并且100%有效，根据游览器的设置）

5 认识媒体：给网页添加图像

1）web最常用的图片格式：JPEG，PNG，GIF

JPEG：照片和复杂图像。不支持动画，有损格式

PNG或GIF：单色图像、logo和几何图形，无损格式。PNG更适合透明和多种颜色

GIF：是唯一支持动画的图片格式

2）<img src=""> src属性：制定图片的位置 img是void元素。

属性：

alt：当游览器无法正常显示，会描述这个图像的一些文本

width：图像的宽度

height：图像的高度

3）HTML：用于提供结构 CSS：用来提供表现

4）网页显示的图片都分略缩图和原图，显示网页一般都是略缩图，点击后的网址显示大图。

</a>

6 严格的HTML：遵循标准，合乎规范

1）旧版本：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http;//www.w3.org/TR/html4/strict.dtd"

HTML5 doctype： <!doctype html> 告诉游览器正在使用HTML5

2）构建web应用书籍：《Head First HTML5 Programming》

3）HTML5：在这个版本里面，使用向后兼容性，也就是规则可自定义。在这个版本之后，再也没有HTML6，也可以直接称为HTML。

4）W3C验证工具：http://validator.w3.org/

5）meta制定Unicode：在head之间添加 <meta charset="utf-8">

7 添加一个“X”到HTML：转到XHTML

1）p{color:maroon;}

h1{font-family:sans-serif;color:gray;}

h2{font-family:sans-serif;color:gray;}

h1,h2{ font-family:sans-serif;color:gray; }

css样式分离：创建css脚本，在HTML脚本里面引用css样式。

rel属性：制定了HTML文件与所连接的文件之间的关系。stylesheet 样式表

href属性：文件地址

2）在html里面：<link type="text/css" rel="stylesheet" href="lounge.css">

在css里面：

p.greentea{

color: green;

}

8 添加一些样式：开始学习CSS

1）CSS属性：

font-family: 设置字体，可以写多个，从左往右，那个字体有，用哪个

font-size: 设置字体大小

color: 设置颜色

font-weight:bold:字体的粗细 lighter、normal、bold、bolder

text-decoration:装饰，上划线（underline），下划线（overline），删除线（line-through）

2）web字体：

href属性：文件地址

TrueType字体：.ttf OpenType字体：.otf

这两个字体，后者在前者基础上建立的。

Embedded OpenType字体：.eot 是 otf字体的一种压缩形式，这种格式是专用的Microsoft，仅IE支持。

SVG字体：svg 通用图像格式

Web开放字体：.woff 大多数游览器对此字体提供了支持

3）font-face属性：

@font-face {

font-family: "Emblema One"; /*添加名字*/

src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"),

url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf");

}

4）字体：老版本的游览器IE不支持像素制定字体大小的文本缩放

em：字体大小，类似百分比，是一个相对度量单位

5）font-style：italic 斜体/ oblique 倾斜文本，倾斜，有时候一样有时候不一样，直接用italic

background-color: rgb(80%,40%,0%); rgb开头， 100%是255，r：255*80%

9 扩大你的词汇量：字体和颜色样式

1）盒模型：box model 。css将每个元素看做一个盒子表示，每一个盒子由一个内容区以及可选的内边距、边框和外边距组成。

2）css样式：

css文件里面以.开头

.guarantee{

border-color: black;

border-width:1px;

border-style:solid;

background-color:#a7cece;

}

html里面： <p class="guarantee"></p>

3）边框样式：

border-style: groove;

border-width:thin; / 5px; /*边框宽度*/

border-color:red;

指定一个边的边框： border-top-color，border-top-style，border-top-width

指定边框圆角：border-radius:15px;

4）CSS中使用id号：

属性名#id号{}

在html里面 <p id="guarantee">

举例： p#specilas{ color:red; }

5)平台样式兼容：

a. media属性：根据不同平台调用不同的css文件。在link里面添加：media="screen and (max-device-width:480px)"，media="print" （差异性大，建议分开，便于管理）

b. @media screen and (min-device-width:481px) { } 可以把所有平台的样式代码都放在一起。

10 与元素亲密接触：盒模式

1）<div> 可定义文档中的分区或节（division/section）。<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。把相关的元素归组到一起，放在逻辑区中。

如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

2）简写：例如 border:thin solid #007e7e; 写成一行

3）<div>允许为块级内容创建逻辑划分 <span>将相关的内联内容的逻辑分组

4）伪类：用于向某些选择器添加特殊的效果。所以有点像类，但不调用，所以伪。

#elixirs a:link{color:#007e7e;}

#elixirs a:visited{color:#333333;}

#elixirs a:hover{background:#f88393; color:#0d5353;}

11 高级网站构建：div和 span

1）float 流：需要设置div元素的宽度，设置流向方向，并且移动到合适的位置。（只能向左，向右）

2）clear属性：当元素流入页面时，在这个元素的左边、右边或两边不允许有浮动内容。

3）流体布局：游览器宽度变化，布局就会扩展，填满整个游览器。

冻结布局：用户调整屏幕大小，设计保持原样。

凝胶布局：锁定页面中内容区的宽度，会在游览器中居中。

4）position属性：static(默认值)，absolute(相对于 static 定位以外的第一个父元素进行定位)，fixed(相对于游览器窗口的位置)，relative(相对定位)

5）多行多列：使用表格属性

12 布置元素：布局和排版

1）html5元素：articel，nav，header，footer，time，aside，section，video

2）<video controls autoplay width="512" height="288" src="video/tweetsip.mp4"></video>

controls：播放器会提供一些空间，可以控制视频和音频的播放

视频格式：主流3种

MP4：H.264视频编码，AAC音频编码

Ogg：Theora视频编码，Vorbis音频编码

WebM：Vp8视频编码，Vorbis音频编码

适应多种游览器，需要准备多种格式的资源。

codecs：制定适用那个编码器对视频和音频编码

举例：

</video>

13 开始制作表格：表格和列表

1）table：标记开始表格

tr：标记结束一个表行

td：数据单元格，必须放在一个表行里面

th：表格标头中的一个单元格，必须放在表行里面

caption 元素定义表格标题。

caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

注意表格不能用来提供表现，那是css的工作

2）nth-child(2n+1) 对于第奇数个段落执行该css样式

tr:nth-child(2n+1){

background-color:#fcba7a;

}

3）rowspan：属性规定单元格可横跨的行数。

14 交互活动：XHTML 表单

1）form：创建表单 action：包含web服务器的URL

type="submit" 提交输入 type="radio" 单选钮输入 type="checkbox" 复选框输入

type="comments" 文本区

2）POST 和GET

警言

关注

4
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
书籍之 Head First HTML与CSS

随书资源下载地址：http://www.wickedlysmart.com/hfhtmlcss/HTML API学习网址：http://www.w3school.com.cn/h.asp字符集网址：http://www.w3school.com.cn/tags/html_ref_ascii.asp这本书讲解了HTML的一些属性值，是Web开发的基础，适合初学者。1、Web语言：开始...
复制链接

扫一扫