「Head First HTML 与 CSS」笔记

2017-11-17 本文已影响0人 MrZhisheng

前言

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

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

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

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中的标记数量。

两步创建列表：

将每个列表项放在一个 < li > 元素中
用 < ol > 或 < ul > 元素包围列表项

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

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

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

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

部分元素：

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

4. 连接起来 Web镇之旅

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

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

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

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

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

使用 FTP 连接到服务器
使用 cd 命令把当前目录切换到文件要放置的目录
使用 put 命令将文件上传到服务器
还可以使用 mkdir 命令在服务器上创建一个新的目录
还可以使用 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」笔记

前言

1. 认识HTML Web语言

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

3. 构建模块 Web页面建设

4. 连接起来 Web镇之旅

猜你喜欢

热点阅读

「Head First HTML 与 CSS」笔记

前言

1. 认识HTML Web语言

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

3. 构建模块 Web页面建设

4. 连接起来 Web镇之旅

猜你喜欢

热点阅读

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