为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 《HTML与CSS 第一章 认识HTML》读书笔记

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

2019.01.06 20:15 1147浏览

一、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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
手记
粉丝
69
获赞与收藏
383

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消