HTML5+CSS3——第1章 HTML5介绍

字号+ 编辑: Snake 修订: 科学鼠辈 来源: 慕课网 2023-09-10 我要说两句(0)

本文简单的介绍了html与css的关系、HTML5的标签语法、文档结构、对标签的认识以及文件注释……

1-1 制作第一个网页

 图片1.jpg

1-2 html和css的关系

1、css是用来修饰html样式的

2、html本身是有一些默认样式,如果我们想改变html标签的样式,就需要借助css

3、html+css构成了我们网页的基本页面结构和样式

 图片2.jpg

1-3 标签的语法

1. 标签由英文尖括号<和>括起来,如<html>就是一个标签。

2. html中的标签一般都是成对出现的,分开始标签和结束标签。结束标签比开始标签多了一个/。如:

(1) <p></p>

(2) <div></div>

(3) <span></span>

 图片3.jpg

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

 图片4.jpg

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

 图片5.jpg

1-4 html5文档结构

 图片6.jpg

技术点的解释:

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

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

3.<head></head>标签对:标签包含有关HTML文档的信息,可以包含一些辅助性标签。如<title></title>,<link /><meta />,<style></style>,<script></script>等,但是浏览器除了会在标题栏显示<title>元素的内容外,不会向用户显示head元素内的其他任何内容。

4.<body></body>标签对:它是HTML文档的主体部分,在此标签中可以包含<p><h1><br>等众多标签,<body>标签出现在</head>标签之后,且必须在闭标签</html>之前闭合。

1-5认识head标签

 图片7.jpg

文档的头部描述了文档的各种属性和信息,包括文档的标题等,绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 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>

<title>标签的内容“hello world”会在浏览器中的标题栏上显示出来,如下图所示:

 图片8.jpg

1-6认识body标签

在网页上要展示出来的页面内容一定要放在body标签中。如下图的例子:

 图片9.jpg

在浏览器中的显示效果:

 图片10.jpg

1-7html文件注释

代码注释的作用是帮助程序员标注代码的用途,过一段时间后再看你所编写的代码,就能很快想起这段代码的用途。还可以帮助其他程序员很快的读懂你的程序的功能,方便多人合作开发网页代码。

语法:<!--注释文字 -->

注释代码是不会在结果窗口中显示出来的。

阅完此文,您的感想如何?
  • 有用

    0

  • 没用

    0

  • 开心

    0

  • 愤怒

    0

  • 可怜

    0

1.如文章侵犯了您的版权,请发邮件通知本站,该文章将在24小时内删除;
2.本站标注原创的文章,转发时烦请注明来源;
3.交流群: PHP+JS聊天群

相关课文
  • 上传自定义文件的时候查如何填写上传表单中的access, mimeType等字段值

  • HTML5+CSS3——第6章 HTML5表单标签,与浏览者交互

  • HTML5+CSS3——第5章 HTML5图片、链接及表格标签

  • HTML5+CSS3——第4章 HTML5列表标签

我要说说
网上宾友点评