search

zilongxuan001 / LearnFreecode

0 stars 0 forks source link

Head First HTML 与 CSS #335

Closed zilongxuan001 closed 6 years ago

zilongxuan001 commented 6 years ago

介绍 《Head First HTML与CSS》，Elisabeth Robson & Eric Freeman 著，徐阳 丁晓峰等译，第二版 O‘REILLY Media, Inc 授权中国电力出版社出版，2013年9月。

zilongxuan001 commented 6 years ago

chapter1:理解HTML

制作Starbuzz网站

制作文本版本

  1. 将文字输入到notepad中，【编码】选择【以utf-8格式编码】，保存为index.html。 
    
Starbuzz Coffee Beverages

House Blend, $1.49 A smooth, mild blend of coffees from Mexico, Bolivia and Guatemela.

Mocha Cafe Latte, $2.35 Espresso, steamed milk and chocolate syrup.

Cappuccino, $1.89 A mixture of expresso, steamed milk and foam.

Chai Tea, $1.85 A spicy drink made with black tea, spices, milk and honey.


2.双击打开index.html，在浏览器中显示如下
![image](https://user-images.githubusercontent.com/19257507/39911655-be768050-552e-11e8-903d-4d9a81f795af.png)

###  加上HTML标记
添加`<h>``<p>`元素

添加`<html>`、`<head>`、`<title>`、`<body>`元素
Starbuzz Coffee

Starbuzz Coffee Beverages

House Blend, $1.49

A smooth, mild blend of coffees from Mexico, Bolivia and Guatemela.

Mocha Cafe Latte, $2.35

Espresso, steamed milk and chocolate syrup.

Cappuccino, $1.89

A mixture of expresso, steamed milk and foam.

Chai Tea, $1.85

A spicy drink made with black tea, spices, milk and honey.


效果如下
![image](https://user-images.githubusercontent.com/19257507/39912139-4f185722-5530-11e8-9c07-34837237713d.png)

资料来源：
《Head+First+HTML与CSS（第2版）》，P23
![image](https://user-images.githubusercontent.com/19257507/39912020-d70e7414-552f-11e8-8b1c-16c9415739ab.png)

###  制作一个mission页面

制作一个mission页面，保存为`mission.html`
Starbuzz Coffee's Mission

Starbuzz Coffee's Mission

To provide all the caffeine that you need to power your life.

Just drink it.

浏览器显示如下
![image](https://user-images.githubusercontent.com/19257507/39916329-b749e688-553c-11e8-8334-4c4e16a454d5.png)

###  增加`<style>`元素

资料来源
《Head+First+HTML与CSS（第2版）》，P29
![image](https://user-images.githubusercontent.com/19257507/39916395-e7e80946-553c-11e8-823a-151a90a85661.png)

###  添加CSS
在style里加上body的属性。
Starbuzz Coffee

Starbuzz Coffee Beverages

House Blend, $1.49

A smooth, mild blend of coffees from Mexico, Bolivia and Guatemela.

Mocha Cafe Latte, $2.35

Espresso, steamed milk and chocolate syrup.

Cappuccino, $1.89

A mixture of expresso, steamed milk and foam.

Chai Tea, $1.85

A spicy drink made with black tea, spices, milk and honey.

结果如下
![image](https://user-images.githubusercontent.com/19257507/39918940-ab9373f6-5544-11e8-9681-6e6570e6c706.png)

资料来源：
《Head+First+HTML与CSS（第2版）》，P31
![image](https://user-images.githubusercontent.com/19257507/39918911-8ff3ee78-5544-11e8-80d2-bfdbb6bcd448.png)

###  更新mission页面
在`mission.html`里添加css的body属性。
Starbuzz Coffee's Mission

Starbuzz Coffee's Mission

To provide all the caffeine that you need to power your life.

Just drink it.


效果如下
![image](https://user-images.githubusercontent.com/19257507/39919311-bcfd0a2a-5545-11e8-8872-1ea917331dcb.png)
zilongxuan001 commented 6 years ago

chapter2: 深入了解HTML的HT

制作lounge页面

创建三个页面：lounge.html，directions.html，elixir.html。其中lounge.html为主页，放在lunge文件夹下，directions.html放在about文件夹下，elixir.html放在beverages文件夹下，图片放入images文件夹下。 文档结构如下 image

image image image

制作步骤

1.首先制作网页 2.加上链接 3.网页和图片放入文件夹 4.修改链接

正确的建立网站步骤

1.规划文档结构

2.设计页面内容

lounge.html

代码

<html>
  <head>
    <title>Head First Lounge</title>
  </head>
  <body>
    <h1>Welcome to the New and Improved Head First Lounge</h1>
    <img src="images/drinks.gif">
    <p>
       Join us any evening for 
       refreshing  <a href="beverages/elixir.html">elixirs</a>, 
       conversation and maybe a game or two of 
       <em>Dance Dance Revolution</em>.
       Wireless access is always provided;  
       BYOWS (Bring your own web server).
    </p>
    <h2>Directions</h2>
    <p>
      You'll find us right in the center of downtown Webville.   
      If you need help finding us, check out 
      our <a href="about/directions.html">detailed directions</a>. 
      Come join us!
    </p>
  </body>
</html>

浏览显示 image

directions.html

代码

<html>
  <head>
    <title>Head First Lounge Directions</title>
  </head>
  <body>
    <h1>Directions</h1>
    <p>Take the 305 S exit to Webville - go 0.4 mi</p>
    <p>Continue on 305 - go 12 mi</p>
    <p>Turn right at Structure Ave N - go 0.6 mi</p>
    <p>Turn right and head toward Structure Ave N - go 0.0 mi</p>
    <p>Turn right at Structure Ave N - go 0.7 mi</p>
    <p>Continue on Structure Ave S - go 0.2 mi</p>
    <p>Turn right at SW Presentation Way - go 0.0 mi</p>
  </body>
</html>

浏览器显示 image

elixir.html

代码

<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">
      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>
    <h2>Raspberry Ice Concentration</h2>
    <p>
      <img src="../images/lightblue.jpg">
      Combining raspberry juice with lemon grass,
      citrus peel and rosehips, this icy drink
      will make your mind feel clear and crisp.
    </p>
    <h2>Blueberry Bliss Elixir</h2>
    <p>
      <img src="../images/blue.jpg">
      Blueberries and cherry essence mixed into a base
      of elderflower herb tea will put you in a relaxed
      state of bliss in no time.
    </p>
    <h2>Cranberry Antioxidant Blast</h2>
    <p>
      <img src="../images/red.jpg">
      Wake up to the flavors of cranberry and hibiscus
      in this vitamin C rich elixir.
    </p>
    <p>
        <a href="../lounge.html">Back to the Lounge</a>
    </p>
  </body>
</html>

浏览显示

image

zilongxuan001 commented 6 years ago

chapter3：Web页面建设

Web页面建设

为一本日志建立网站。 学习

如何从无到有的建立网页

草图→略图→网页

草图：将内容根据结构分组，形成组块 略图：隐去内容，创建空白内容区，贴上元素 网页：标签+内容(文字/图片)，形成网页。（设计页面时，先写块元素，再写内联元素完善）

草图

image

来源： Head First HTML与CSS，P80

略图

image

image

来源： Head First HTML与CSS，P81-82

网页

image

来源： Head First HTML与CSS，P83

内联元素和块元素

<a>既可以是内联元素，也可以是块元素 <br> 属于块元素和内联元素的模糊地段 <li> 块元素，里面可以嵌套其他元素。

zilongxuan001 commented 6 years ago

主要内容

本章学习如何把网站发到网上，包括

网站与域名

找托管商，买域名，买服务器。

www.baidu.com是网站名

baidu.com是域名，买一个域名相当于买了一块地，网站相当于地上的房子。一块地可以盖很多房子。

域名前可以加很多名字，比如news.baidu.com/，map.baidu.com/，xueshu.baidu.com/

image

来源：Head First HTML与CSS (第二版) P160

回到“主要内容”

搬家

把本地本地文件传到服务器。使用搬家工具（即文件传输工具）FTP（File Transfer Protocol）。

下载FTP应用，通过FTP应用，连接服务器，找到目标文件夹（或称之目录），将文件传输过去。如果本地有文件夹，则在服务器上新建相同名称的文件夹，进入该文件夹，将文件传进去。

回到“主要内容”

FTP常用命令

注意事项

小型网站一般都是先在本地编辑文件，测试文件，然后上传到服务器。

大型网站是在本地编辑文件，然后在测试网站中测试，测试成功后发布到真实网站。

测试工具： Dreameweaver，Coda等工具

不要在服务器中直接修改。

回到“主要内容”

URL

Web地址，即URL（ Uniform Resource Locations，统一资源定位符） URL结构 image

回到“主要内容”

HTTP

HTTP，即HyperText Transfer Protocol（超文本传输协议），其实就是一个通道。

电脑通过HTTP向服务器发出请求，服务器 根据请求找到文档，通过HTTP把文档发给电脑。

回到“主要内容”

绝对路径

绝对路径，是在协议和网站名之后的部分，告诉服务器如何从跟文件夹到特定的文件或页面。

格式 /文件夹名/文件夹名/文件名

协议部分告诉浏览器使用什么方法获得资源（多是HTTP协议）

网站部分（服务器名+域名）告诉浏览器从互联网上的哪个计算机获得资源

绝对路径告诉服务器要找到哪个文件夹下找哪个页面。

同一网站内的页面链接，使用相对路径；其他网站链接，使用URL。

浏览器会根据相对路径创建一个绝对路径。

如果浏览器访问的是目录（即文件夹），则会在后面直接加上/，比如www.baidu.com/。服务器会返回该目录的默认文件（index.html或者default.html）。

回到“主要内容”

a的三个属性

<a>里title属性的作用

如果在<a>里加上title属性，当鼠标放在<a></a>的文本内容上时，会显示title的内容

作用：对于视力有问题的人，浏览器会读出title的内容

另外，可以为任何元素添加title属性，作为工具提示。

代码

Read the <a href="http://wickedlysmart.com/buzz" title="Read all about caffeine on the Buzz">Caffeine Buzz</a>

浏览器显示 image

<a>的id属性链接页面的目标位置

1.在目标位置建立id，<a id="cha"></a>

2.在需要引用的地方，建立<a href="index.html#cha"></a>，index.html指的是目标网页名称，可以是当前网页，或另外网页，如<a href="http://baidu.com/index.html#cha"></a>。如果是首页，也可以写成<a href="http://baidu.com/#cha"></a>。

3.点击引动的地方，就可以跳跃到目标位置。

<a>的target属性打开新窗口

<a target="_blank"></a>，可以新建窗口打开链接。

<a>的href属性

href属性放链接时，网站内部链接最好用相对路径，外部使用URL。

回到“主要内容”