【HTML5+CSS3自学笔记】第一节:HTML5介绍

举报
琪哥能酷 发表于 2022/12/26 15:59:57 2022/12/26
【摘要】 初识HTML5

学习材料来源:慕课网-初识HTML(5)+CSS(3)-升级版 by:五月的夏天

htmlcss的关系

单纯的html标签长什么样:

代码如下:

<p>我是一个p标签</p>

 

经过css修饰过后html标签:

代码如下:

  p {
        color: red;
        border: 1px solid blue;
        width: 140px;
        height: 40px;
    }

 

技术点的解释:

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

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

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

 

文字居中

text-align:center;

文字颜色

color:#930;

文字大小

font-size:12px;


标签的语法

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

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

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

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


Html5文档结构

技术点的解释:

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>之前闭合。


认识head标签

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

下面这些标签可用在 head 部分:

1、head标签为双标签,有尾标签,<head></head>

2、head标签表示头部标签,通常用来嵌套metatitlestyle等标签。

3、<title>标签:在<title>和</title>标签之间的文字内容是网页的标题信息,它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出网页的主题。每个网页的内容都是不同的,每个网页都应该有一个独一无二的title。

4、<meta charset="UTF-8">设置当前文件字符编码

5、style标签:双标签中设置当前文件样式

例如title标签:

<head>
    <title>hello world</title>
</head>


认识body标签

html文件注释

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。