《Head First HTML and CSS 》学习笔记——1、Web语言

最新推荐文章于 2022-05-09 21:37:40 发布

Stephen-wzw

最新推荐文章于 2022-05-09 21:37:40 发布

阅读量239

点赞数

本文链接：https://blog.csdn.net/weixin_51370367/article/details/113409021

版权

《Head First HTML and CSS》学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

认识HTML

超文本标记语言(HyperText Markup Language)，简称HTML。

Web工作流程

要建立Web页面，需要创建HTML文件，把他们放在一个Web服务器上
一旦把文件放在Web服务器上，任何浏览器就能通过互联网得到你的Web页面

Web服务器能做什么

每个服务器会存储HTML文件、图像、声音和其他类型的文件
服务器就是一个连接到互联网的计算机，在等待来自浏览器的请求
浏览器发出请求，要求得到HTML页面或其他资源
如果服务器能找到这个资源，会把它发送给浏览器

服务器能存储资源并响应浏览器的请求。

Web浏览器能做什么

单机一个链接访问某个页面
浏览器向Web服务器请求一个HTML页面
获取页面，在浏览器中显示

浏览器能向服务器发送请求。

从Head First Lounge 学到的

<html>                                                <!--告诉浏览器HTML从这里开始-->
  <head>                                              <!--页面“head”开始-->
    <title>Head First Lounge</title>                  <!--为页面指定一个标题-->
  </head>                                             <!--head结束-->
    <body>                                            <!--页面主体开始-->
      <h1>Welcome to the Head First Lounge</h1>       <!--一级标题-->
      <img src="drinks.gif">                          <!--图像-->
      <p>                                             <!--开始一个段落-->
        Join us any evening for refreshing elixirs,
        conversation and maybe a game or
        two of <em>Dance Dance Revolution</em>.       <!--强调Dance Dance Revolution-->
        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>                                              <!--告诉浏览器HTML在这里结束-->

HTML：超文本标记语言
- HTML提供了一种“标示文本”的方法
- 超文本体现在超链接上，超越文本的限制
浏览器怎么确定如何显示HTML
- HTML会告诉浏览器文档的结构，然后按内置的默认规则显示各个元素
- 可以用CSS设置自己的样式
缩进和空格
- 浏览器会忽略HTML文档中的制表符、回车和大部分空格（多个空格只保留一个）。根据标记来确定在哪里换行或分段
- 插入自己的格式是为了帮助理解HTML文档
标题：浏览器共有六级标题，从<h1>到<h6>
<html>标记：告诉浏览器你的文档确实是一个HTML文件
注释：

Starbuzz 咖啡馆

<html>
  <head>
    <title>Starbuzz Coffee</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 Caffe Latte, $2.35</h2>
    <p>Espresso, steamed milk and chocolate syrup.</p>

    <h2>Cappuccino, $1.89</h2>
    <p>A mixture of espresso, steamed milk and milk foam.</p>

    <h2>Chai Tea, $1.85</h2>
    <p>A spicy drink made with black tea, spices, milk and honey.</p>
  </body>
</html>

标记剖析：

<h1> Starbuzz Coffee Beverages</h1>，标记包含标记名，标记名两边有尖括号；这整个称为元素，由开始标记、结束标记和标记之间的内容组成
元素 = 开始标记 + 内容 + 结束标记

认识CSS

前面已经学习了基本的HTML结构，以及一些简单的标记，现在来了解它的表现：CSS。CSS是层叠样式表（cascading style sheets），提供一种方法来告诉浏览器页面中的元素如何显示。

style元素

<style>元素放在HTML的首部里，<style>标记还有一个（可选的）属性，名为type，它能告诉浏览器你在使用什么类型的样式。由于要使用CSS，所以可以指定"text/css"类型。

<style type="text/css">
	
</style>

元素属性，可以提供一个元素的附加信息。
type是必须的吗？以前，HTML的设计者认为以后应该还会有其他样式，不过现在事实表明，不加type属性浏览器也知道你指的是CSS。

给 Starbuzz 加点样式

<html>
  <head>
    <title>Starbuzz Coffee</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>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 Caffe Latte, $2.35</h2>
    <p>Espresso, steamed milk and chocolate syrup.</p>

    <h2>Cappuccino, $1.89</h2>
    <p>A mixture of espresso, steamed milk and milk foam.</p>

    <h2>Chai Tea, $1.85</h2>
    <p>A spicy drink made with black tea, spices, milk and honey.</p>
  </body>
</html>

CSS中的"body"表示其中所有的CSS要应用于HTML <body> 元素中的内容。
background-color: #d2b48c设置背景为土黄色。
margin-left: 20%; margin-right: 20%设置左右外边距分别占页面的20%。
border: 2px dotted black定义页面主体周围的边框是虚线，颜色为黑色，粗细为2px。
padding: 10px 10px 10px 10px定义页面主体周围的内边距。
font-family: sans-serif定义文本使用的字体。

练习：给 mission 加点样式

<html>
  <head>
    <title>Mission</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>Starbuzz Coffee's Mission</h1>
    
    <p>To provide all the caffeine that you need to power your life.</p>
    
    <p>Just drink it.</p>
  </body>
</html>