Head first html 笔记

一、书籍源码

bethrobson/Head-First-HTML

二、学习笔记

chapter1

基本格式和组织结构

<html>
    <head>
        <title>Document</title>  //网页标题
    </head>
    <body>
        I am mossbaoo !  //网页内容
    </body>
</html>

文本显示

<html>
  <head>
    <title>Starbuzz Coffee's Mission</title>
  </head> 
  <body>
    <h1>Starbuzz Coffee's Mission</h1>
    <p>To provide all the caffeine that you need to power your life.</p>
    <p>Just drink it.</p>
  </body>
</html>

其中<h1> </h1>表示一级标题，同理<h2> </h2>则表示二级标题，<p> </p>表示新的一个段落

head 说明
- head：包含页面有关的一些信息，其中只能放置<title>、<meta>、<style>元素，必须包含<title>元素

chapter2

显示图片
- 可借助
  <img src="lightblue.jpg">
  实现
- 当<img src="*.jpg">在<p> </p>里面时则图片和文字在同一段落
- 换行可借助</br>来实现
插入超链接:

 <a href="url">Link text</a>

<html>
  <head>
    <title>Head First Lounge Elixirs</title>
  </head>
  <body>
    <h1>Our Elixirs</h1>

    <h2>Green Tea Cooler</h2>
    <p>
      <img src="../images/green.jpg">
	  </br>  // 实现换行
      Chock full of vitamins and minerals, this elixir
      combines the healthful benefits of green tea with
      a twist of chamomile blossoms and ginger root.
    </p>
	<p>
		<a href="../lounge.html">Back to the Lounge</a>
	</p>
  </body>
</html>

另外可设置图片的尺寸，也可在css中设置，一般不推荐设置成固定尺寸

<img src="../images/green.jpg" width="48" height="100">

字体加粗、倾斜
- 通过<strong> </strong>来实现加粗
- 通过<em> </em>实现倾斜
```
<em>Dance Dance Revolution</em>
```
设置字体大小和颜色
- 可以通过style对整个段落文字进行设置
```
<p style="color:red;font-size:16px;">挺好</p>
```
- 效果如下
  
  挺好
- 采用<span> </span>也可对段落中部分文字进行大小和颜色设置
```
<p>
只有
<span style="color:red;background-color:gray;">几个字</span>
有背景颜色跟字的颜色</p>
```
- 设定字符的编码格式:web中常用 utf-8
```
<meta charset="utf-8">
```

chapter 3

文字前项目符号

数字编号(不需在<p> </p>里面)

<ol>
  <li>Walla Walla, WA</li> 
  <li>Magic City, ID</li> 
</ol>

圈点项目编号

<ul>
  <li>cellphone</li> 
  <li>and a protein bar</li>
</ul>

chaper4

设置文本为css格式

<style type="text/css">
    body { //在此设置这个css的特性，并应用于后面的body}
</style>

另外css样式的属性中可有：

    background-color: #d2b48c;  //背景颜色
    margin-left: 20%;  //margin 设置外边距
    margin-right: 20%;
    border: 1px dotted gray;  //依次设置边框的width，style，color
    padding: 10px 10px 10px 10px; //从边界再往内缩进的尺寸，这部分不显示内容
    font-family: sans-serif; //字体设置，属性也可设置为:"宋体"

另外也可将css属性设置为一个类，其后用于其他

<html>
    <head> 
      <style type="text/css"> 
        .ceshi {font-size:14px;              
        color:#FF0000;}/*这里是设置CSS的样式内容*/ 
      </style> 
    </head> 
    
    <body> 
      <div class="ceshi"> 我是div css测试内容</div>
    </body> 
</html>

chapter5

多张图片并排放置:一个段落放置多张图片

<p>
    <img src="thumbnails/seattle_video_med.jpg" alt="My video iPod in Seattle, WA"> //alt表示图片无法显示的时候，替换显示的文字
    <img src="thumbnails/seattle_classic.jpg" alt="A classic iPod in Seattle, WA">
</p>

给图片插入超链接，实现点击图片跳转
- herf后面接着的是超链接，后面<img…>是添加了超链接的图片

<a href="html/britain.html">
    <img src="thumbnails/britain.jpg" alt="An iPod in Birmingham at a telephone box">
</a>

chapter 7

css文件初步

在html文件的属性中添加<link type，这代替了原来的style设置，将设置放置到了css文件中，具体如下：

  <head>
    <meta charset="utf-8">
    <title>Head First Lounge</title>
	<link type="text/css" rel="stylesheet" href="lounge.css"> // stylesheet表示这要链接到样式表，所以取此属性
  </head>

在其中调用了lounge.css文件中的格式配置信息，该文件的内容如下,其中包含标题和文本段落的格式：

body {
	font-family: sans-serif;  // body 为内容主体，其设置被body中的所有元素（如H1,H2,P）继承
}

h1, h2 {    
	color: gray;
}
// 一个元素可以有很多规则，上面是合简写相同的规则
h1 { 
	border-bottom: 1px solid black;  // 在文字下面加入下划线
}

p {
	color: maroon; // 将段落文本设置为茶红色
}

Html中的元素

// 格式：
// 元素名 { 属性名：属性值}
// p表示段落文本，类似的有：H1表示一级标题
P {
    backgound-color: red;
    border: 1px solid gray;   //表示有一个边框
}

html中的组成结构图如下：
```
        html
         |      
        body
/   /    |   \   \
h1  p    p   h2   p
    |   /  \      |
   img  a  em     a
```
- 当设置了上层（如body）属性，其子类均会继承；但也可以对子类重新对同一属性进行赋值，修改其属性
在css文件中可再增加类，例如给段落文本元素p增加一个类greentea
```
// 格式为：元素名.类名 { 属性：属性值}
p.greentea {
    color: green;
}
```
- 在css文件中设置好样式之后，使用如下
```
<p class="greentea">   // 设置文本属性
    You'll find us right in the center 
    of downtown Webville. 
</p>
```
- 另外，可以不在类名前面加元素名称，则可被所有元素使用,如下所示：
```
.greentea {
    color: green;
}
```
- 另外，一个元素也可以具有多个类的属性：
```
// 假设创建了三个类： greentea raspberry blueberry
// 则在html中被一个元素拥有，可写为：
<p class = "greentea raspberry blueberry">
```
- 当继承的多个类，对同一属性的取值存在不一致时:
  - 首先考虑哪个规则比其他规则更特定，例如某一个类值属于该元素，相对于其他类属于所有元素则更特定
  - 特定等级相同，则考虑html中放置的先后顺序，取最后一个类的属性值

css中的常见属性

color  //设置文本元素的颜色
background-color  //设置背景颜色
top  // 控制元素顶部的位置
left // 指定元素左边所在的位置
padding //内边距：元素边缘和内容之间的空间
font-size //设置文本大小
font-weight //设置文本的粗细，例如粗体
font-style  //可设置文本为斜体
border  //在元素周围加表框，可以是实现边框，凸起边框，虚线边框等
text-align  //设置文本对其方式
letter-spacing  //设置字母之间的间距
list-style  //可改变列表项的外观
background-image  //在元素后面放置一个图像

chapter 8

字体类型

可设置不同类型，当第一种找不到则往后找

body{
    font-family: Verdana, Genava, Arial, sans-serif
}

获取web字体

// 规则以：@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");  // 字体下载的两个链接，从前往后，一旦找到一个即可 
}

使用web字体方式：

h1 {
  font-family:     "Emblema One", sans-serif;
}

字体大小：

可设置body中的字体大小，然后其他问题相对其一个大小尺寸倍数

body {
    font-size: 14px
    //font-size: small
}

h1 {
    font-size: 220%  //相对继承的父本字体2.2倍大小
}

h2 {
    font-size: 1.2em  //表示1.2倍大小，等同于120%
}

其他字体属性

扫描二维码关注公众号，回复： 4529760 查看本文章

斜体

blockquote {
    font-style: italic; //斜体风格
}

粗细

 font-weight: bold; //粗体
font-weight: normal; //继承父本的字体格式

装饰

h1 {
    text-decoration: underline  //设置下划线
    // text-decoration: line-through;  //文本中间有穿过的横线
    // text-decoration: underline overline; //具有 一个上划线和一个下划线
    // 或者设置属性值为: none
}

指定背景或字体颜色

按名称制定颜色

body {
    background-color: silver
    // 其他颜色还可为：
    // Black, Blue, Gray, Navy
    // Yellow, White, Red, Maroon
    // Green,Purple,Olive,Lime
}

按红绿蓝分量来指定颜色

body {
    background-color: rgb(80%, 40%, 0%);
    //background-color: rgb(200, 100, 0); 指定0-255的数值
}

使用十六进制码表示颜色：可通过: 在线颜色表查找

    body {
        background-color: #cc6600;
        //分别用两位十六进制数表示红绿蓝取值大小
    }

chapter 9

盒模型

内边距：通过padding先设置，再用padding-left等可对单一方向进行设置
外边距：通过margin进行设置，在用margin-left对单一方形进行设置
设置背景图片：

background-image: url(images/background.gif);  //前面加url()

设置背景图片位置和是否重复：

background-position: top left; //置于左上角 ，也可按像素指定
background-repeat： no-repeat; //不重复，也可：repeat-x等

边框样式

border-style: groove;  //槽线式
// outset (外凸)
// dashed、dotted、solid、double、ridge

边框宽度

border-width: thin; // 5px
// border-top-width: thin  //指定某一边的边框宽度

边框颜色

border-color: red; // #ff0000
border-right-color: red; //指定某一边的颜色

指定边框圆角

border-radius: 15px;
// border-top-left-radius: 15px; //设置左上角边框为15个像素圆角

id: 与class类似，但id具有唯一特性

// 唯一特性说明：
// 一个元素不能有多个id，另外页面上不孕系多个元素具有相同的id

//css中id创建方法：类似class
#footer {
    color: red
}

//或者表述某个元素专属类
p#footer {
    color: red
}

//id在html文件中的使用
<p id="footer">
    our guarantee: 
</p>

混合样式表

为了满足不同的需要（例如不同显示设备，不同个性化需求），可以用多个样式表

<head>
<meta charset="utf-8">
<title>Head First Lounge</title>
<link type="text/css" rel="stylesheet" href="lounge.css" 
      media="screen and (min-width: 481px)">
<link type="text/css" rel="stylesheet" href="lounge-mobile.css" 
      media="screen and (max-width: 480px)">
<link type="text/css" rel="stylesheet" href="lounge-print.css" media="print">
</head>

其中media后面带着是查找的条件，表示输出的设备和设备平面宽度等，媒体查询规则在 css文件中也有定义：

@media screen and (max-width: 480px) {
    #guarantee {
        line-height:         1.9em;
    }
}

一、书籍源码

二、学习笔记

chapter1

chapter2

chapter 3

chaper4

chapter5

chapter 7

chapter 8

chapter 9

猜你喜欢