html5基本结构

最新推荐文章于 2024-03-14 22:19:54 发布

原创最新推荐文章于 2024-03-14 22:19:54 发布 · 765 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #html #前端

HTML第一部分专栏收录该内容

1 篇文章

订阅专栏

这篇博客是菜鸟小白学习前端的第一天笔记，重点介绍了HTML5的基本结构和文本标签，包括语法和一些重要的文本展示元素。

菜鸟小白学习前端第一天（html）超详细笔记，努力加油

html5的基本结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>文档的标题</title>
</head>
<body>
</body>

<!DOCTYPE HTML>    定义文档类型为html
<html>   定义文档类型为html
<head>  头部标签（头部描述区域）
<title> 文档的标题
<meta>  控制网页的原信息，一个页面可以有多个meta
charset=“”是html一个属性，定义编码格式用的
UTF-8   万国码，所有国家语言包含在内
<body>   主题区域（显示页面区域的内容）

html5的语法

1.双标记（常规标记）
  -有开始的标签，也有结束的标签<标记 属性=“属性值”></标记>
2.单标记（空标记）
  -只有开始标签，没有结束标签<标记>或者<标记/>
3.标签之间的位置关系
  -兄弟关系  并列关系  同辈关系 同级关系
  <div></div>
  <div></div>
  -父子关系，嵌套关系，包含关系，祖先和后代关系
  -注：嵌套标签的时候，不能交叉嵌套
            最开始写的谁，结束就写谁
  <div>
     <p></p>
  </div>

文本标签

1.标题标签：自带文字大小和加粗的效果
<h1></h1>一级标题，一般用来放logo，但不是绝对的
<h2></h2>二级标题
<h3></h3>三级标题
<h4></h4>四级标题
<h5></h5>五级标题
<h6></h6>六级标题

2.段落标签：默认具有段间距
<p></p> 

3.加粗标签：只是加粗没有其它含义的时候可以用b标签
           -当更强调它的重要性可以用strong
<b></b> 只是加粗的意思
<strong></strong>更具有语义化（更加强调的意思）

4.倾斜标签：只是单纯的倾斜就用i
<i></i> 只是倾斜的意思
<em></em> 更具有语义化（更加强调的意思）

5.下划线标签：只是单纯的下划线就用u
<u></u>只是下划线的意思
<ins></ins>更具有语义化（更加强调的意思）

6.删除线标签：只是单纯删除线就用s
<s></s>只是删除线的意思
<del></del>更具有语义化（更加强调的意思）

7.强制换行标签:它是一个空标记(单标签)
<br>

8.水平线：用的不多
<hr>

9.上标：<sup></sup>
  下标：<sub></sub>


html 注释语句：提示作用，提示自己，提示看你代码的人
<!-- 注释内容 -->

文本标签（重要）

1.<span></span>默认本身没有任何效果，用的比较多（重要）

2.<div></div>  默认情况下是独占一行的，区域划分的（重要）
                -div里可以嵌套div，可以嵌套任何其他标签