一、Web让广播明星黯然失色

　　　　要建立Web页面，需要创建用超文本标记语言（HyperText Markup Language，HTML）编写的文件，把它们放在一个Web服务器上

二、Web服务器能做什么？

　　Web服务器在互联网上有一份全天候的工作。

　　 服务器就是连接到互联网的计算机。

　　每个服务器会存储HTML文件、图像、声音和其他类型的文件。

　　 你在网上冲浪，单击一个链接来访问某个页面。这个单击会导致浏览器向Web服务器请求一个HTML页面

三、你写的代码（HTML）

<html>

    <head>

        <title>Head First Lounge</title>

    </head>

    <body>

        <h1>Welcome to the Head First Lounge</h1>

        <img src="I:\sss\image\coffee_cup.jpg">

        <p>

            Join us any evening for refreshing elixirs,

            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.Come join us!

        </p>

    </body>

</html>

四、浏览器创建的页面

　　标记就是尖括号括起来的词或字符，它会告诉浏览器文本的结构和含义。

五、你在Starbuzz咖啡馆交好运了

六、创建Starbuzz Web页面

　　

 <html>

     <head>

         <title>index</title>

     </head>

     <body>

         <p>

         House Blend,$1.49

         A smooth,mild blend of coffees from

         Mexico,Bolivia and Guatemala.

         Mocha cafe Latte,$2.25

         Espresso,steamed milk and chocolate

         syrup.

         Cappuccino,$1.89

         A mixture of espresso,steamed milk

         and foam.

         Chai Tea,$1.85

         A spicy dring made with black tea,

         spices,milk and honey

         </p>

     </body>

 </html>

七、创建一个HTML文件

八、现在，再回到Starbuzz

九、保存你的成果

　　创建一个项目文件夹：能描述项目的功能，比如starbuzz

十、在浏览器中打开你的Web页面

十一、测试你的页面

　　现在来增加结构：

<html>

    <head>

        <title>index</title>

    </head>

    <body>

        <h1>Starbuzz Coffee Beverages</h1>

        <h2>House Blend,$1.49</h2>

        <p>A smooth,mild blend of coffees from

        Mexico,Bolivia and Guatemala.</p>

        <h2>Mocha cafe Latte,$2.25</h2>

        <p>Espresso,steamed milk and chocolate

        syrup.</p>

        <h2>Cappuccino,$1.89</h2>

        <p>A mixture of espresso,steamed milk

        and foam.</p>

        <h2>Chai Tea,$1.85</h2>

        <p>A spicy dring made with black tea,

        spices,milk and honey</p>

    </body>

</html>

十二、完工了吗？

　　编写HTML时要把首部和页面主体分开

十三、另一个测试

十四、标记剖析

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

十五、认识style元素

　　CSS是层叠样式表（Cascading Style Sheet）

　　<style>标记有一个（可选的属性），名为type，它能告诉浏览器你在使用什么类型的样式。

　　元素可以有属性？这是什么意思？————通过属性，可以提供一个元素的附加信息。比如说，如果有一个<style>元素，属性允许你准确地指出是什么类型的样式。以后还会看到不同元素的更多属性：你只要记住一点，属性能提供元素的一些额外信息。

　　为什么必须指出样式类型（"text/css"）作为style元素的一个属性？难道还有其他类型的样式吗？————从前，HTML的设计者认为以后应该还会有其他样式，不过如今，呵呵。。。

十六、给Starbuzz网站加点样式......

body{

    background-color:#d2b48c;

    margin-left:20%;

    margin-right:20%;#设置右边距占页面的20%

    border:2px dotted black;#定义页面主体周围的边框是虚线，黑色

    padding:10px 10px 10px 10px#在页面主体周围创建一些内边距

    font-family:sans-serif;

}

十七、测试样式

《HTML与CSS 第一章 认识HTML》读书笔记的更多相关文章

  1. csapp读书笔记-并发编程

    这是基础,理解不能有偏差 如果线程/进程的逻辑控制流在时间上重叠,那么就是并发的.我们可以将并发看成是一种os内核用来运行多个应用程序的实例,但是并发不仅在内核,在应用程序中的角色也很重要. 在应用级 ...

  2. CSAPP 读书笔记 - 2.31练习题

    根据等式(2-14) 假如w = 4 数值范围在-8 ~ 7之间 2^w = 16 x = 5, y = 4的情况下面 x + y = 9 >=2 ^(w-1)  属于第一种情况 sum = x ...

  3. CSAPP读书笔记--第八章 异常控制流

    第八章 异常控制流 2017-11-14 概述 控制转移序列叫做控制流.目前为止,我们学过两种改变控制流的方式: 1)跳转和分支: 2)调用和返回. 但是上面的方法只能控制程序本身,发生以下系统状态的 ...

  4. CSAPP 并发编程读书笔记

    CSAPP 并发编程笔记 并发和并行 并发:Concurrency,只要时间上重叠就算并发,可以是单处理器交替处理 并行:Parallel,属于并发的一种特殊情况(真子集),多核/多 CPU 同时处理 ...

  5. 读书笔记汇总 - SQL必知必会（第4版）

    本系列记录并分享学习SQL的过程,主要内容为SQL的基础概念及练习过程. 书目信息 中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL i ...

  6. 读书笔记--SQL必知必会18--视图

    读书笔记--SQL必知必会18--视图 18.1 视图 视图是虚拟的表,只包含使用时动态检索数据的查询. 也就是说作为视图,它不包含任何列和数据,包含的是一个查询. 18.1.1 为什么使用视图 重用 ...

  7. 《C#本质论》读书笔记（18）多线程处理

    .NET Framework 4.0 看(本质论第3版) .NET Framework 4.5 看(本质论第4版) .NET 4.0为多线程引入了两组新API:TPL(Task Parallel Li ...

  8. C#温故知新：《C#图解教程》读书笔记系列

    一.此书到底何方神圣? 本书是广受赞誉C#图解教程的最新版本.作者在本书中创造了一种全新的可视化叙述方式,以图文并茂的形式.朴实简洁的文字,并辅之以大量表格和代码示例,全面.直观地阐述了C#语言的各种 ...

  9. C#刨根究底：《你必须知道的.NET》读书笔记系列

    一.此书到底何方神圣? <你必须知道的.NET>来自于微软MVP—王涛(网名:AnyTao,博客园大牛之一,其博客地址为:http://anytao.cnblogs.com/)的最新技术心 ...

  10. Web高级征程：《大型网站技术架构》读书笔记系列

    一.此书到底何方神圣? <大型网站技术架构:核心原理与案例分析>通过梳理大型网站技术发展历程,剖析大型网站技术架构模式,深入讲述大型互联网架构设计的核心原理,并通过一组典型网站技术架构设计 ...

随机推荐

  1. Javascript-全局函数和局部函数作用域的理解

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. aop编程之前置通知

    aop( Aspect-Oriented Programming)前置通知原理案例讲解 编程步骤: 定义接口 编写对象(被代理的对象即目标对象) 编写通知(前置通知即目标方法调用前调用) 在beans ...

  3. URL Resources

    Prezi 1. 官网   https://prezi.com/ 2. 入门教程   https://wenku.baidu.com/view/9bb234ac0029bd64783e2c6b.htm ...

  4. tcl脚本

    tcl,全名tool command language,是一种通用的工具语言. 1)每个命令之间,通过换行符或者分号隔开: 2)tcl的每个命令包含一个或者多个单词,默认第一个单词表示命令,第二个单词 ...

  5. HDU 6300

    Problem Description Chiaki has 3n points p1,p2,…,p3n. It is guaranteed that no three points are coll ...

  6. Oracle10g 连接 sqlserver hsodbc dblink 方式 非透明网关

    Oracle10g 连接 sqlserver hsodbc dblink 方式 非透明网关 那个上传图片太麻烦了,发布到百度文库了 http://wenku.baidu.com/view/b38ae8 ...

  7. Redis 的 5 个常见应用场景

    前言Redis 是一个强大的内存型存储,具有丰富的数据结构,使其可以应用于很多方面,包括作为数据库.缓存.消息队列等等. 如果你的印象中Redis只是一个 key-value 存储,那就错过了Redi ...

  8. Subversion客户端接受服务器证书出现“The certificate hostname does not match”的问题

    当使用https://形式的URL连接Apache时,Subversion客户端将会受到两个类型的响应: 1.一个服务器证书 2.一个针对客户端证书的请求 在本人的应用场景主要涉及SVN仓库迁移的操作 ...

  9. 谷歌重磅开源强化学习框架Dopamine吊打OpenAI

    谷歌重磅开源强化学习框架Dopamine吊打OpenAI 近日OpenAI在Dota 2上的表现,让强化学习又火了一把,但是 OpenAI 的强化学习训练环境 OpenAI Gym 却屡遭抱怨,比如不 ...

  10. javamail邮件Multipart支持同时发text和html混合消息，alternative纯文本与超文本共存

    javamail邮件Multipart支持同时发text和html混合消息alternative纯文本与超文本共存 multipart/mixed:附件. multipart/related:内嵌资源 ...