您的位置：首页 > Web前端 > CSS

HTML&CSS基础篇之三：HTML基础结构之ML篇

2017-06-30 16:42 465 查看

基础结构

代码：

<html>
<head>
<title>Starbuzz Coffee</title>
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
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 Cafe 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 foam.</p>

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


HTML结构概述

<html></html>
标记以包围你的HTML，用此通知浏览器文件的内容是HTML。

头部由
<head></head>
标记及它们之间的内容组成。

主体由
<body></body>
标记及它们之间的内容组成；主体包含了网页的所有内容和结构-你在浏览器中看到的那些部分。

备注：

<head></head>
标记，这两个头部标记内包含了网页的信息，如标题。通过头部告诉浏览器有关的网页的信息。

<title></title>
标题标记嵌入到头部。标题显示在浏览器顶部。

解剖标记

<h1>Starbuzz Coffee Beverages</h1>


标记通常由尖括号及标记名组成，尖括号
<
和
>
。

通常在部分内容周围添加标记。

这个是用来结束标题的结束标记。在这里 
</h1>
用来结束
<h1>
标题，它之所以是个结束标记。因为它出下载内容后面，而且在
h1
之前还多了一个
/
。所有结束标记都有 
/
。

整个语句称为一个元素，在这里我们称其为
<h1>
元素。一个元素由闭合标记及它们之间的内容组成。 元素=开始标记+内容+ 结束标记。

关于嵌套

HTML 标记经常这样嵌套。每一个HTML有一个主体，主体又包含了一个段落等，这是自然，很正常的。许多HTML元素会在它们的标记之间嵌入另外一个元素。后续研究说明。

Q&A

关于浏览器如何显示HTML：

HTML告诉浏览器文档的结构：哪里是标题，哪里是段落，哪里需要强调等。在得到以上信息后，浏览器会按照默认的规则来显示每一个元素（注意是默认规则），可以通过CSS来添加自己的样式和格式规则。

关于制表符，回车，空格

浏览器显示HTML文件时会忽略制表符，回车，还有大多数的空格；在书写时添加制表符，回车，空格增加了代码的可读性，方便后续维护。

hx 一共有6个 h1~h6,字体由大变小。

关于
<html></html>


通知浏览器这个是一个html文件。

注释书写方式

<!--注释-->


元素的属性

属性用来为一个元素提供附加信息

关于CSS

CSS是级联样式表：用于描述如何表现内容

<style>
元素放置在HTML的头部中。

像其他元素一样
<style>
元素有开始标记
<style>
和结束标记
</style>
。

<Style>
标记还需要一个type的属性，用来告诉浏览器你所使用的样式的种类。由于使用CSS 因此指定为’text/css’类型。

要点

HTML和CSS使用来创建网页的语言。

Web服务器存储并提供由HTML和CSS创建的网页。浏览器接收网页并基于HTML和CSS显示其中的内容。

HTML是超文本标记语言（HyperText Markup Language）的缩写，用来结构化网页。

CSS是级联样式表（Cascading Style Sheet）的缩写。用来控制

HTML的外观。

我们使用HTML来标记内容， 用标记提供结构。我们称匹配标记和它们之间的内容为元素。

一个元素由一下三部分组成：一个开始标记、内容和一个结束标记。有一些元素<如
<img>
是列外。

开始标记可以拥有属性。比如type和align。

结束标记的左尖括号之后，标记名之前有一个”/”,用来区别与开始标记。

网页通常应该有一个
<html>
元素， 并伴随有一个
<head>
元素和一个
<body>
元素。

网页的信息来源于
<head>
元素。

写入
<body>
元素的内容就是在浏览器中所能看见的东西。

浏览器忽略大多数的空白（制表符、回车、空格），但是可以用它们让你的HTML更具有可读性。

通过在
<style>
元素中输入CSS规则，给HTML网页添加CSS。
<style>
元素通常嵌在
<head>
元素.

在 HTML中用CSS指定每个元素样式特性。

基于Head First HTML 整理
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航