继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

白板的微信
关注TA
已关注
手记 341
粉丝 70
获赞 385

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



十七、测试样式

作者:我李逍遥要做盖世英雄

原文链接:https://www.cnblogs.com/start20180703/p/9258994.html

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP