美文网首页
「Head First HTML 与 CSS」笔记

「Head First HTML 与 CSS」笔记

作者: MrZhisheng | 来源:发表于2017-11-17 15:49 被阅读0次

    前言

    技巧在于要让你的大脑认为你学习的新东西确实很重要,对你的生活有很大影响。

    尽一切可能让大脑活动起来。

    上床睡觉之前不要再看别的书,至少不要看其他有难度的东西。学习中有很一部分是在你合上书之后完成的(特别是,要把学到的知识长久地记住,这往往无法在看书的过程中做到)。你的大脑也需要有自己的时间,这样才能再做一些处理。如果在这段时间内你又往大脑里灌输了新的知识,那么你刚才学的一些东西就会丢掉。


    1. 认识HTML Web语言

    <html>
        <head>
            <title>页面名称</title>
            <style> type="text/css">
                body {
                        background-color: #d2b48c;
                        margin-left: 20%;
                        margin-right: 20%;
                        border: 2px dotted black;
                        padding: 10px 10px 10px 10px;
                        font-family: sans-serif;
                     }
            </style>
        </head>
        
        <body>
            <h1>标题一</h1>
            <img src="drinks.gif">
            <p>
                正文
            </p>
            
            <h2>标题二</h2>
            <p>
                正文
            </p>
        </body>
    </html>
    

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

    <h>Starbuzz Coffee Veverage</h>
    

    整个称为一个元素,元素=开机标记+内容+结束标记

    元素 <style>


    2. 深入了解超文本 认识HTML中的「 HT 」

    HT : hypertext

    <a href="direction.html">detailed</a>
    

    <a> 元素的内容会称为Web页面中可单击的文本,href 属性告诉浏览器连接的目标文件。

    href: hypertextreference「 超文本引用 」

    路径
    需要上行一个文件夹用 .. ,下行 /

    eg: <a href="../lounge.html">Back to the Lounge</a>
    

    3. 构建模块 Web页面建设

    <html>
    <head>
        <title>My Trip Around the USA on a Segway</title>
    </head>
    <body>
    
        <h1>Segway'n SUA</h1>
        <p>
            Documenting my trip around the US on my very own Segway!
        </p>
        
        <h2>August 20, 2012</h2>
        <img src="images/segway2.jpg">
        <p>
            Well I made it 1200 miles already, and I passed through 
            some interesting places on the way: 
        </P>
        
        <ol>
            <li>Walla Walla, WA,</li> 
            <li>Magic City, ID, </li>
            <li>Bountiful, UT, </li>
            <li>Last Chance, CO, </li>
            <li>Why, AZ </li>
            <li>Truth or Consequences, NM.</li>
        </ol>
        
        <h2>July 14, 2012</h2>
        <p>
            I saw some Burma Shave style sings on the side of the 
            road today:
        </p>
        <blockquote>
            Passing cars, <br>
            When you can't see,<br> 
            May get you, <br>
            A glimpse, <br>
            Of eternity.<br>
        </blockquote>
        <p>
            I definitely won't be passing any cars.
        </p>
        
        <h2>June 2, 2012</h2>
        <img src="images/segway1.jpg">
        <p>
            My first day of the trip! I can't believe I fianlly got
            everything packed and ready to go. Because I'm on a 
            Segway, I wasn't able to bing a whole lot with me:
        </P>
        <ul>
            <li>cell phone,</li> 
            <li>iPod, </li>
            <li>digital camera,</li> 
            <li>protein bar. </li>
        </ul>
        <P>
            Just the the essentials. As Lao Tzu would have said, 
            <q>A journey of a thousane miles begins with one Segway.</q>
        </p>
        
        <p>
            <dl>
                <dt>Burma Share Sings</dt>
                    <dd>Road signs sommon in the U.S. in the 1920s and 
                    1930s advertising shaveing products.</dd>
                <dt>Route 66</dt>
                    <dd>Most famous road in the U.S. highway system.</dd>
            </dl>
        </P>
    </body>
    </html>
    

    <q>To be or ont to be</q>
    <q> 元素 :单句引用

     <blockquote>
        Passing cars,<br>
        When you can't see,<br>
        May get you,<br>
        A glimpse,<br>
        Of eternity.<br>
    </blockquote>
    

    <blockquote> 段落引用

    元素 <br>: 换行

    块(block)元素特立独行,内联(inline)元素随波逐流。

    设计为没有任何内容的元素称为 void 元素。需要使用 void 元素时,如 <br><img> , 只需使用一个开始标记。这是一种简写形式,可以减少HTML中的标记数量。

    两步创建列表:

    1. 将每个列表项放在一个 < li > 元素中
    2. < ol >< ul > 元素包围列表项

    ul= unordered list
    ol= ordered list
    ll= list item

    把一个元素放在另一个元素中称为「 嵌套 」。

    可以用一种称为字符实体(character entity)的简单缩写来制定 <>等特殊字符。例如,> 字符的缩写是 「 &ampgt; 」 , < 字符的缩写是 「 &amplt;」 。(&符号的字符实体为 &ampamp;)

    完整字符实体可以查看unicode字符表。

    部分元素:

    • <em> 斜体文本
    • <strong> 加粗文本
    • <pre> 希望浏览器按你输入的方式原样显示文本。
    • <code> 显示计算机程序代码

    4. 连接起来 Web镇之旅

    在Web上发布你自己的网站:

    1. 找一家托管公司(提供服务器)
    2. 买一个域名(pzsnice.com)
    3. 把文件传到托管服务器上(服务器搭建Web服务器后才能使用)

    域名和网站名是两码事。www.pzsnice.com 是一个网站名,pzsnice.com 是域名。一个域名可以搭建很多网站,比如
    pzsnice.com 就可以搭建 www.pzsnice.com, home.pzsnice.com, out.pzsnice.com 等网站。

    把文件复制到服务器根文件夹:
    大多数服务器都支持一种叫 FTP 的文件传输方式。(FTP:文件传输协议 File Transfer Protocol)

    FTP 应用有些是命令行应用,有些有晚辈的图形界面。

    1. 使用 FTP 连接到服务器
    2. 使用 cd 命令把当前目录切换到文件要放置的目录
    3. 使用 put 命令将文件上传到服务器
    4. 还可以使用 mkdir 命令在服务器上创建一个新的目录
    5. 还可以使用 get 命令获取文件

    FTP 命令:

    • dir: 得到当前目录的文件列表
    • cd :进入文件夹(或称 切换到另一目录)
    • ..:退出本文件夹(切换到上一层目录)
    • pwd:显示当前目录
    • put <filename>:将指定的文件传送到服务器
    • get <filename>:从服务器获取指定的文件
    • bye:退出

    CWD: Chang Working Directory 目录转换成功

    URL:统一资源定位符(Uniform Resource Locator),是一个全局位置们可以用来定位 Web 上的任意资源,包括 HTML 页面、音频、视频和很多其他形式的 Web 内容。另外,除了指定资源的位置, URL 还可以指定用来获取资源的协议。

    HTTP:超文本传输协议(HyperText Transfer Protocol)。这是 Web 上传输超文本文档的公认的一种方法(协议)。尽管「 超文本文档 」通常指HTML页面,但这个协议实际上还可以用来传输图像或 Web 页面可能需要的任何其他文件。
    HTTP 是一个简单的请求和响应协议。工作流程:

    什么是绝对路径?
    在 URL 中就是协议(如 HTTP )和网站名(www.xxx.com)之后的最后一部分。绝对路径说明如何从根文件夹到达某个特定的页面或文件。(通常用「/」表示根)

    相关文章

      网友评论

          本文标题:「Head First HTML 与 CSS」笔记

          本文链接:https://www.haomeiwen.com/subject/qvejvxtx.html