文章目录

  • html和css的关系
  • 标签的语法
  • html5文档结构
  • head标签
  • body标签
  • html文件注释


html和css的关系

1、css是用来修饰html的样式
2、html本身是有一些默认样式,如果我们想改变html标签的样式,就需要借助css
3、html+css构成了我们网页的基本页面结构和样式

标签的语法

1. 标签由英文尖括号<和>括起来，如就是一个标签。
2. html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个/。

HTML5介绍_css

3. 标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如： <div> 里嵌套
4. <p>，那么</p>必须放在</div>的前面,如下图所示

HTML5介绍_HTML_02

5. HTML标签不区分大小写，<h1>和<H1>是一样的，但建议小写，因为大部分程序员
都以小写为准。

html5文档结构

<!DOCTYPE html>  <!--文档类型声明，表示该文件为 HTML5文件。<!DOCTYPE> 
声明必须是 HTML 文档的第一行，位于 <html> 标签之前-->

<html>      <!-- <html>标签位于HTML文档的最前面，用来标识HTML文档的开始；
</html>标签位于HTML文档的最后面，用来标识HTML 文档的结束；这两个标签对成
对存在，中间的部分是文档的头部和主题。-->

    <head>     <!-- 标签包含有关HTML文档的信息，可以包含一些辅助性标签。
    如<title></title>，<link /><meta />，<style></style>，<script></s
    cript>等，但是浏览器除了会在标题栏显示<title>元素的内容外，不会向用户显示
    head元素内的其他任何内容。-->
    
        <meta charset="UTF-8">
        <title>认识html文件基本结构</title>
    </head>
    
    <body>          <!-- 它是HTML文档的主体部分，在此标签中可以包含<p>
    <h1><br>等众多标签，<body>标签出现在</head>标签之后，且必须在闭标签
    </html>之前闭合。-->
        <h1>Hello Word！</h1>
    </body>
</html>

head标签

1.head标签为双标签，有尾标签，<head></head>。
2、head标签表示头部标签,通常用来嵌套meta、title、style等标签。
3、<title>标签：在<title>和</title>标签之间的文字内容是网页的标题信息，
它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网
页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每
个网页的内容都是不同的，每个网页都应该有一个独一无二的title。
4、<meta charset="UTF-8">设置当前文件字符编码
5、style标签：双标签中设置当前文件样式
例如title标签：
<head>
    <title>hello world</title>
</head>

HTML5介绍_HTML_03

body标签

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>了不起的盖茨比</title>
</head>

<body>
    <!-- 标题标签 -->
    <h1>了不起的盖茨比</h1>
    <!-- 段落标签 -->
    <p>1922年的春天，一个想要成名名叫尼克•卡拉威（托比•马奎尔Tobey Maguire
     饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐
     流行，走私为王，股票飞涨的时代。为了追寻他的<span>美国梦</span>，他
     搬入纽约附近一海湾居住。</p>
    <!-- 段落标签 -->
    <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以
    诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的
    气质亦为那个奢靡年代的不二注解。</p>
</body>

</html>

HTML5介绍_css_04

html文件注释

语法：

<!--注释文字 -->