HTML介绍

最新推荐文章于 2024-03-22 21:30:00 发布

‬‬‫‍‍‭‪‏‏‪2‌6——‫‏‬‏

最新推荐文章于 2024-03-22 21:30:00 发布

阅读量56

点赞数 1

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_68531139/article/details/125750906

版权

一、页面的三大组成部分

结构：给页面搭建基本的框架结构。 html ，类比于建房子的时候要搭的地基跟钢筋。
表现：页面的美化，装饰。 css 相当于给房子加背景和家具的排列布局。
行为：页面的轮播图，. javascript 相当于房子加灯的开关。
结构层html和表现层css，是 W3C 制定的规范，万维网联名。行为层js，是 ECMA 制定的规范，欧洲计算机协会。

二、HTML介绍

1、什么是HTML

HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言。
通过HTML标记（标签）对网页中的文本、图片、多媒体等内容进行描述。

说明：
- “超文本”：不仅能承载简单的文字、还能包含超链接、图片、音频、视频等。
- “标记语言”：标记语言是由一套标记标签组成的。

2、HTML文档——网页

HTML文档也被称为网页

后缀名.html
文件名格式：
主文件名.后缀名
创建HTML文档
1）新建一个后缀名为.html的文件
2）添加基本结构：英文状态下!回车
1. 输入HTML：5

3、标记（标签）

构成网页的基本单位

标签：由尖括号括起来的关键词
- 单标签：<标签名 >或 <标签名 />
- 双标签：<开始标签名>[内容]</结束标签名>
元素：标签及内容的整体
属性

<标签名 属性名1="属性值1"  属性名2="属性值2"></标签名>

<后面的第一个单词叫做标签的名字，标签名空格之后的叫做标签的属性。

属性由属性名和属性值组成，属性名和属性值用等号连接
属性值用引号引起来。多个属性之间用空格隔开。

4、HTML注释

注释即对代码的解释和说明，不会被浏览器解析执行
注释内容不会出现在网页中，只是对代码的一个说明
语法

<!-- html注释内容 -->
HTML中的注释以`<!--`开头，以`-->`结束，开始和结束中间为注释内容。

ctrl + /
alt + shift + a: 可以在一行代码的后面进行注释

5、HTML文档的基本结构

<!DOCTYPE html>
<!-- 
    <!doctype> 文件类型定义DTD 
    作用：告诉浏览器该文档的版本信息，让浏览器解析器知道使用哪种语法解析文档
    文档第一代码是HTML5标准网页声明，告知浏览器用HTML5标准解析此网页。
    不是标签，是声明语句
    必须写在HTML文档的第一行
-->
<html lang="en">
<!-- 
 网页的根元素 
 定义整个HTML文档，包含head和body
  lang属性
- 作用：定义当前文档显示文字的语言
- 语法：lang=“en”
  (lang是language的简写)
- 取值:
  en定义语言为英语
  zh-CN定义语言为中文   -->
<head>
    <!--
网页的头部信息 其内容不会显示在网页中
定义文档的头部，包含文档的标题（title），可以包含文档脚本（script），样式（style），meta信息以及更多的其他信息。
-->
    <meta charset="UTF-8">
    <!-- 
文档字符集
字符集(Character set)是多个字符的集合，便于计算机识别和存储各种文字。
在<head>标签内,通过<meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。
            charset属性:设置编码方式
            UTF-8：万国码，通用性较好
(2)常用的字符集
- UTF-8被称为万国码，包含全世界所有国家需要用到的字符
- GB2312简单中文，包括6763个汉字
- GBK包含全部中文字符，是GB2312的扩展，加入对繁体字的支持，兼容GB2312
- BIG5繁体中文，港澳台等用
        -->
    <title>标题</title>
    <!--
网页标题
添加到收藏夹时的标题显示在搜索引擎结果中的页面标题。
-->
</head>
<body>
    <!-- 网页的主体内容     定义文档的主体，在浏览器窗口中可以看到的所有内容都包含在它内部。-->
    父子关系——嵌套关系
    兄弟关系——并列关系
</body>
</html>

三、常用HTML标签

1）块级标签

div标签
搭建网页结构的基本标签——盒子；无语义标签

<div>[内容]</div>
<div> 文字内容</div>
<div>
    <div></div>
</div>

- 特性
    - 宽度默认撑满整个父元素
    - 高度默认由内容撑开
    - 独立成行——垂直布局
    作用：可以用来划分页面的区块，里面嵌套任何的标签

h系列标签：标题标签
标题标签中文字大小依次减小，重要程度依次减弱。
注意事项：h1标题一个页面中只有一个，h2~h6是可以有多个的。

    <h1>title1</h1>
    <h2>title2</h2>
    <h3>title3</h3>
    <h4>title4</h4>
    <h5>title5</h5>
    <h6>title6</h6>
    - 特性
    - 宽度默认撑满整个父元素
    - 高度默认由内容撑开
    - 独立成行——垂直布局
    - 自带外间距
    - 自带加粗效果
    应用场景：
    - logo
    - 文章页标题、内容章节标题
    - 产品标题
    - 模块标题等

p标签：段落标记

<p>[文字]</p>
- 特性
    - 宽度默认撑满整个父元素
    - 高度默认由内容撑开
    - 独立成行——垂直布局
    - 自带外间距
    应用场景：文章中的段落、页面中的文字块
      注意：p标签不能嵌套块级标签，例如：div，p,h1~h6

hr标签：水平分割线块级标记
- 特性
  - 默认自带间距、自带边框
  作用：在页面中显示一条水平线

‬‬‫‍‍‭‪‏‏‪2‌6——‫‏‬‏

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML介绍

HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言。通过HTML标记（标签）对网页中的文本、图片、多媒体等内容进行描述。说明：HTML文档也被称为网页构成网页的基本单位
复制链接

扫一扫