一、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. IT新起之秀

    辞职以后自己比较迷茫,不知道自己能干什么,09年毕业到现在虽然工作经验有7.8年,但是感觉自己什么都不会,除了自己能下车间别的好像也做不成,没有一技之长.我更像是一个经验用了7.8年而不是有7.8年的 ...

  2. mariadb中创建外键时的一个奇怪的情况

    在建表语句中,将参照的定义放到对应的属性后面,类似于这样: create table tbl2 (id int references tbl1(id)); 发现并没有成功创建外键. 而将参照的定义放到 ...

  3. ubuntu安装mysql,redis,python-mysqldb

    sudo apt-get install mysql-server sudo apt-get install redis-server sudo apt-get install python-redi ...

  4. uvalive 11865 Stream My Contest

    题意: 有一个网络中心,和许多个城市,网络中心以及城市之间有若干条边,这些边有两个属性,最大带宽和修建费用. 现在要用最多不超过C的费用修建网络,使得每个城市都有网络连接,最大化最小带宽. 带宽限制是 ...

  5. Java基础语法(二 )

    五.运算符 *算术运算符 *赋值运算符 *关系运算符 *逻辑运算符 *位运算符 *三目运算符 算术运算符 *+,-,*,/都是比较简单的操作 *+的几种作用: 加法 正数 字符串连接符 *除法的时候要 ...

  6. [openjudge-动态规划]摘花生

    题目描述 描述 Hello Kitty 想摘点花生送给她喜欢的米老鼠.她来到一片有网格状道路的矩形花生地(如下图),从西北角进去,东南角出来.地里每个道路的交叉点上都有种着一株花生苗,上面有若干颗花生 ...

  7. django之视图view小知识

    CBV简版流程 AddPublisher.as_view() ——> view 函数 当请求来的时候才执行view view中执行: 1. 先实例化AddPublisher,给self def ...

  8. 孤立森林(Isolation Forest)

    前言随着机器学习近年来的流行,尤其是深度学习的火热.机器学习算法在很多领域的应用越来越普遍.最近,我在一家广告公司做广告点击反作弊算法研究工作.想到了异常检测算法,并且上网调研发现有一个算法非常火爆, ...

  9. Hive常用语句

    文章目录 1 显示分区 2 添加分区 3 删除分区 4 修改分区 5 添加列 6 修改列 7 修改表属性 8 表的重命名 显示分区 show partitions iteblog; 添加分区 ALTE ...

  10. go语言,golang学习笔记1 官网下载安装,中文社区,开发工具LiteIDE

    go语言,golang学习笔记1 官网下载安装,中文社区,开发工具LiteIDE Go语言是谷歌2009发布的专门针对多处理器系统应用程序的编程进行了优化,使用Go编译的程序可以媲美C或C++代码的速 ...