YPE html>

h1>今天是个好日子h1>

在HTML中，

显示效果如下：

2）属性

HTML标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。我们只能在开始标签中，加入属性。通常以名称=值成对的形式出现，比如：name=‘value‘。例如：

h1 align="center">今天是个好日子!!!h1>

在HTML标签中，align 属性表示水平对齐方式，我们可以赋值为 center 表示 居中 。

显示效果如下：

1.2 入门案例

1.2.1 初始页面

1）创建一个标准的初始化页面

1. 右键点击创建新页面

   

    

    

2. 自定义文件名字，比如index

   

    

    

3. 点击ok，页面创建成功。

   

    

    

2）页面说明

1. : 声明文档类型。规定了HTML页面必须遵从的良好规则，从HTML5后，是最短的有效的文档声明。

   文字作为了解资料

   很久以前，早期的HTML(大约1991年2月)，文档类型声明类似于链接，能自动检测错误和其他有用的东西。使用如下：

   br>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   然而现在没有人再这样写，需要保证每一个东西都正常工作已成为历史。

2. ：这个标签包裹了整个完整的页面，是一个根元素（顶级元素）。其他所有元素必须是此元素的后代，每篇HTML文档只有一个根元素。

3. ：这个标签是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。以后的章节能学到更多关于 元素的内容。目前主要了解两个标签：

   1. ：这个标签是页面的元数据信息，设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容，能够避免页面乱码问题。

   2. ：这个标签定义文档标题，位置出现在浏览器标签上，而不是页面正文中。在收藏页面时，它可用来描述页面。

4. ：包含了文档内容，你访问页面时所有显示在页面上的文本，图片，音频，游戏等等。

1.2.2 案例实现

1. 在初始化页面的标签中，加入一对

   标签。
   标签表示文本的一个段落，具有整段文本之间相分离的效果。

   
   html>
     head>
       meta charset="utf-8">
       title>页面标题title>
     head>
     body>
     body>
   html>
   ?

2. 在一对

   标签中，编写文本内容。

   ?
   
   html>
     head>
       meta charset="utf-8">
       title>页面标题title>
     head>
     body>
       p>这是第一个页面p>
     body>
   html>
   ?

3. 打开浏览器查看，效果如下：

1.3 总结

• HTML是一种标记语言，用来组织页面，使用元素和属性。

• 这个元素的主要部分有：

1. 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

2. 开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。

3. 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。

4. 内容（Content）：元素的内容，本例中就是所输入的文本本身。

5. 属性（Attribute）：标签的附加信息。

• 在学习HTML时，要抓住两个方面：

1. 掌握标签所代表的含义。

2. 掌握在标签中加入的属性的含义。

2 基本语法

2.1 关于注释

如同大部分的编程语言一样，在HTML中有一种可用的机制来在代码中书写注释。

为了将一段HTML中的内容置为注释，你需要将其用特殊的记号包括起来， 比如：

p>我在注释外！p>
?

2.2 关于标签

2.2.1 空元素

不是所有元素都拥有开始标签，内容和结束标记。一些元素只有一个标签，叫做空元素。它是在开始标签中进行关闭的。例子如下：

第一行文档br/>
第二行文档br/>

2.2.2 嵌套元素

你也可以把元素放到其它元素之中——这被称作嵌套。比如，我们想要强调第一个，可以将标签包围第一个，这样b标签就是嵌套在了p标签中：

p>这是b>第一个b>页面p>

2.2.3 块级和行内

1）概念

在HTML中有两种重要元素类别，块级元素和内联元素。

• 块级元素：

  独占一行。块级元素（block）在页面中以块的形式展现。相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。比如

  ，

  ---

  ，
• ，
  等。

• 行内元素

  行内显示。行内元素不会导致换行。通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。比如，，， 等。

  注意：一个块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。

   

2）div和span

• 是一个通用的内容容器，并没有任何特殊语义。它可以被用来对其它元素进行分组，一般用于样式化相关的需求。它是一个块级元素。

• 是短语内容的通用行内容器，并没有任何特殊语义。它可以被用来编组元素以达到某种样式。它是一个行内元素。

  注意：div和span在页面布局中有重要作用。

2.3 关于属性

【重点讲解】

属性作为HTML的重要部分，这里强调属性的格式和作用。

标签属性，主要用于拓展标签。属性包含元素的额外信息，这些信息不会出现在实际的内容中。但是可以改变标签的一些行为或者提供数据，属性总是以name = value的格式展现。

• 属性名：同一个标签中，属性名不得重复。

• 大小写：属性和属性值对大小写不敏感。不过W3C标准中，推荐使用小写的属性/属性值。

• 引号：双引号是最常用的，不过使用单引号也没有问题。

• 常用属性：

  属性名	作用
  class	定义元素类名，用来选择和访问特定的元素
  id	定义元素唯一标识符，在整个文档中必须是唯一的
  name	定义元素名称，可以用于提交服务器的表单字段
  value	定义在元素内显示的默认值
  style	定义CSS样式，这些样式会覆盖之前设置的样式（第一天简单了解，第二天主要内容）

2.4 特殊字符

了解讲解：

内容简单，迅速带过。

在HTML中，字符 , >,",‘ 和 & 是特殊字符. 它们是HTML语法自身的一部分, 那么你如何将这些字符包含进你的文本中呢

原义字符	等价字符引用
	<
>	>
"	"
‘	'
&	&
空格

2.5 总结

HTML的基本语法比较简单，在使用的过程中注意写法即可。

3 HTML案例-新闻文本

重点讲解：

1. div布局的基本方式

2. 文本标签的基本使用

文本结构的页面基本是由标题和段落构成的，内容结构化会使读者的阅读体验更轻松。

3.1 案例效果

显示新闻文本。



 

 

3.2 案例分析

3.2.1 div样式布局

文本由几部分构成，我们可以使用div将页面分割布局。先来了解一下，使用div如何进行简单的布局。

在head标签中，通过style标签加入样式。

基本格式：

格式:
style>
    标签名{
        属性名:属性值;
    }
style>
?

多个属性名格式：

style>
    标签名{
        属性名1:属性值1;
        属性名2:属性值2;
        属性名3:属性值3;
    }
style>
?

效果如下：



 

 

div的多样式：

一个属性名可以含有多个值，同时设置多样式。

格式:

style>
    标签名{
        属性名:属性值1 属性值2 属性值3; 
    }
style>
?

【提示】

为了布局方便，我们通常可以先设置边框的样式，进行布局。结束后，再去掉边框，直观展示完整界面。

3.2.2 文本标签

使用文本内容标签设置文字基本样式。

标签名	作用
p	表示文本的一个段落
h	表示文档标题， – ，呈现了六个不同的级别的标题， 级别最高，而 级别最低
hr