首页 > > 网页制作 > css >

《HTML与CSS 第一章认识HTML》读书笔记

2018-07-22 06:06:20来源：博客园阅读 ()

一、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>

View Code

四、浏览器创建的页面

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

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

六、创建Starbuzz Web页面

 1 <html>
 2     <head>
 3         <title>index</title>
 4     </head>
 5     <body>
 6         <p>
 7         House Blend,$1.49
 8         A smooth,mild blend of coffees from
 9         Mexico,Bolivia and Guatemala.
10         
11         Mocha cafe Latte,$2.25
12         Espresso,steamed milk and chocolate
13         syrup.
14         
15         Cappuccino,$1.89
16         A mixture of espresso,steamed milk
17         and foam.
18         
19         Chai Tea,$1.85
20         A spicy dring made with black tea,
21         spices,milk and honey
22         </p>
23     </body>
24 </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;
}

十七、测试样式

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有