Web组成标准、页面基本结构、HTML基础语结构、HTML基础标签

无墨染

于 2022-10-26 12:35:07 发布

阅读量1k

点赞数 1

分类专栏：前端基础文章标签：前端 html vscode javascript css

本文链接：https://blog.csdn.net/J_34770043/article/details/127527058

版权

前端基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、Web组成

web组成标准：

❀ 结构(html)¹

超文本标记语言或超文本链接标示语言（标准通用标记语言下的一个应用）HTML（HyperText Mark-up Language）是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍

在这里插入图片描述

❀ 表现(css)²

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化

在这里插入图片描述

❀ 行为(js)³

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
在这里插入图片描述

二、页面基本结构

<!DOCTYPE html>
<!-- !DOCTYPE   声明文档类型 -->
<html lang="en">
  <!-- html标签，将页面整体包进去了，说明整个页面都是html标记语言 -->
<head>
  <!-- head   头部标签，用来存放页面元信息，可以理解为head是写给浏览器看的 -->
  <meta charset="UTF-8">
  <!-- meta 媒体信息标签   设置编码格式为utf-8   -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- meta  媒体信息标签，设置视口 -->
  <title>页面基本结构</title>
  <!-- title   页签，页眉 -->
</head>
<body>
  <!-- body是页面主体，我们在这些html结构，可以理解为body是写给用户看的 -->
  hello world!
</body>
</html>

三、HTML语法结构

1.单标签：

<标签名属性=‘属性值’ 属性=‘属性值’ />

2.双标签：

<标签名属性=‘属性值’ 属性=‘属性值’></标签名>

3.特点：
<1>双标签成对出现，单标签单个出现，单标签以/结尾，但是/可以省略。
<2>标签写在<>内，标签里边第一个单词为标签名，标签除了标签名之外还可以有属性和属性值。
<3>属性和属性值之间用=号连接，属性值写在’'内。（双标签的属性和属性值写在开始标签内）

四、HTML基础标签

1.标题标签：h1~h6

特点：
<1>双标签，默认独占一行，自带间距
<2>不同标题有不同字号，自带加粗

2.段落标签：p

特点：双标签，默认独占一行，自带间距

3.空格符： 

特点：浏览器默认只是别一个空格，如果我们需要多个空格，可以使用空格符

4.换行符：br

特点：单标签，作用是强制换行

5.分割线：hr

特点：单标签，水平线标签，用于段落与段落之间的分隔

6.加粗：b、strong

特点：双标签，默认不独占一行；strong具有一个强调的语气

7.倾斜：i、em

特点：双标签，默认不独占一行；em具有一个强调的语气

8.下划线：u

特点：双标签，默认不独占一行

9.删除线：s、del

特点：双标签，默认不独占一行；del具有一个强调的语气

10.上标：sup

特点：双标签，默认不独占一行

11.下标：sub

特点：双标签，默认不独占一行

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
    <h4>这是四级标题</h4>
    <h5>这是五级标题</h5>
    <h6>这是六级标题</h6>
    <p>这是文本标签</p>
    <p> &nbsp; &nbsp; &nbsp; &nbsp;前面这是空格符 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex quas quo, in voluptate ad praesentium provident beatae velit qui inventore ipsa asperiores<br>前面这是换行符 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex quas quo, in voluptate ad praesentium provident beatae velit qui inventore ipsa asperiores non rerum tenetur voluptatem id itaque aspernatur reiciendis!</p>
    <hr>
    <hr>
    <hr>
    <p>上面这是分割线</p>
    <p><b>这样可以将文字加粗</b></p>
    <p><strong>这样也可以将文字加粗，不同的是strong具有强调的语气</strong></p>
    <p><i>这样可以将文字倾斜</i></p>
    <p><em>这样也可以将文字倾斜，不同的是em具有强调的语气</em></p>
    <p><u>这是下划线</u></p>
    <p><s>这是删除线</s></p>
    <p><del>这也是删除线，不同的是del具有强调的语气</del></p>
    <p><sub>这是下标</sub></p>
    <p>可以这样用：H<sub>2</sub>O</p>
    <p><sup>这是上标</sup></p>
    <p>可以这样用：3<sup>2</sup></p>
    <br><br><br>
</body>
</html>