《Head First HTML与CSS》笔记 ——1 Web语言

最新推荐文章于 2022-07-28 16:05:44 发布

FlamingCook

最新推荐文章于 2022-07-28 16:05:44 发布

阅读量209

点赞数 1

文章标签： html css web

本文链接：https://blog.csdn.net/weixin_45182000/article/details/110297118

版权

入门

要进入Web世界，就要学会它的语言

HTML代码

假设你要创建一个Web页面，为Head First休闲室做个宣传，下面是你编写的代码：

<html>
  <head>
    <title>Head First Lounge</title>
  </head>
  <body>
    <h1>Welcome to the New and Improved Head First Lounge</h1>
    <img src="images/drinks.gif">
    <p>
       Join us any evening for refreshing, 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>

浏览器创建的页面

浏览器读到你的HTML时，它会翻译文本中的所有标记。标记就是尖括号括起来的词或字符，如<head>, <p>, <h1>等。标记会告诉浏览器文本的结构和含义，所以并不是交给浏览器一大堆的文本。

利用浏览器，你可以用标记告诉浏览器哪些文本是标题，哪些是段落，哪些需要强调，或者图片需要放在什么位置。

下面开看浏览器如何翻译Head First 休闲室中的标记：
在这里插入图片描述

由此可以发现，HTML相当于是一堆可以用来包围文本的标记。HTML(HyperText Markup Language)是超文本标记语言的缩写。
HTML会告诉浏览器文档的结构：标题放在哪，段落放在哪，哪些文本需要强调等。有了这些信息，浏览器会按照内置的默认规则显示各个元素。

不过并不必受制于默认设置，也可以用CSS增加样式和格式化规则，确定字体、颜色、大小和页面的很多其他特征。
浏览器会忽略HTML文档中的制表符、回车和大部分空格，浏览器会根据标记来确定在何处换行或分段。在HTML中使用制表符、回车、空格可以增提高读性。
h1, h2标签标识标题级别，浏览器显示的标题一共有6级，从<h1>到<h6>，字体由大到小。
在HTML中加入注释：把内容放在之间。

动手尝试

创建一个Starbuzz web页面

Starbuzz是一个有名的连锁咖啡店，建立一个Web页面来展示他们的饮品。

在这里插入图片描述
在初学时，建议用文本编辑器来写HTML和CSS的内容，用Chrome浏览。
如果将上图纸巾的内容写在一个txt文本文件中，再将后缀由txt改为html，就可以在浏览器中查看了：

为文本增加结构

为纯文本内容仿照下图加入HTML标签。
在这里插入图片描述
加入HTML标签后的效果：

剖析标记
下面来仔细看一下，这些标记时如何工作的：

匹配标记不需要再同一行上。
有些标记，如<img>会使用一种简写记法，而不用成对的标记。
HTML存在嵌套关系，但有一定的规则（上下级关系）。

初识CSS

HTML提供了一种方法来描述文件中内容的结构。浏览器显示HTML时，会使用自己内置的默认样式来表现这个结构。如果想增加不同的结构，就要用到CSS，利用CSS可以描述要如何表现内容。

认识style元素
要增i骄傲样式，需要在页面中增加一个新的元素，即style元素。下面我们将一个style元素增加到Starbuzz的主页中：

在这里插入图片描述

style元素解析：
在这里插入图片描述

元素的属性，表示一个元素附加信息。属性能提供元素的一些额外信息。

本章小结

在这里插入图片描述

FlamingCook

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
《Head First HTML与CSS》笔记 ——1 Web语言

1 Web语言要进入Web世界，就要学会它的语言HTML代码假设你要创建一个Web页面，为Head First休闲室做个宣传，下面是你编写的代码：<html> <head> <title>Head First Lounge</title> </head> <body> <h1>Welcome to the New and Improved Head First Lounge</h1&
复制链接

扫一扫