02_HTML入门

2021-10-19

字数统计: 1.3k字 | 阅读时长≈ 5分

网页与网站
- html语言编写网页
  - 标签—-标记
    - 单个标签
    - 标签对
    - 属性

HTML

HyperText Mark-up Language 超文本标记语言。 .html

01、什么是 HTML？

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
02、HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

03、HTML 文档 = 网页

HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：

<html>
<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>
</html>

例子解释

<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落

<!DOCTYPE html> <!--html文档声明，声明此文档是一个html5的文档-->
<html lang="ch">   <!--html文档开标签-->
    <head><!--html文档的设置标签，文档的设置及资源引用，都写在这个标签中-->
        <meta charset="UTF-8"><!--设置网页编码-->
        <title></title>       <!--设置网页的标题-->
    <body><!--html文档的主体标签，网页上显示的内容，都写在这个标签中-->
        <p>你好！欢迎访问我的个人主页！</p> <!--<p>为段落标签-->
    </body>
</html><!--html文档开标签-->

快捷键：快速创建html文档。” ! +tab”

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
</html>

HTML 元素语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

嵌套的 HTML 元素

大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）。
HTML 文档由相互嵌套的 HTML 元素构成。

块元素标签（行元素）和内联元素标签（行内元素）

标签在页面上会显示一个方块。除了显示成方块，他们一般分为下面两类：

块元素：在布局中默认会独占一行，宽度默认等于父级的宽度，块元素后的元素需换行排列。
内联元素：元素之间可以排列在一行，设置宽高无效，它的宽度有内容撑开，元素之间默认有最小间距，而且是基线对齐（文字底部对齐）。

Html 标签入门

标签语法：

学习html语言就是学习标签的用法，html常用的标签有20多个，学会这些标签的使用，就基本学会了HTML的使用。

常用块元素标签

标题标签
段落标签
通用块容器标签

<meta> 元素

可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

属性值描述45charsetcharacter encoding定义文档的字符编码。 5contentsome_text定义与 http-equiv 或 name 属性相关的元信息。45http-equiv

content-type
expires
refresh
set-cookie

把 content 属性关联到 HTTP 头部。45name

author
description
keywords
generator
revised
others

把 content 属性关联到一个名称。45schemesome_text定义用于翻译 content 属性值的格式。不支持。4

Html 布局入门

网页布局原理

标签在网页中会显示成一个个的方块，先按照行的方式，把网页划分成多个行，再到行里面划分列，

div通用块容器标签先划分行。
也就是在表示行的标签中再嵌套标签来表示列。
整体按照先整体，后局部，先大后小的顺序来书写结构。
标签的语义化。
- 目的
  - 01、进行SEO优化。
  - 02、方便代码的阅读和维护。
- 带语义的标签
  - h1-h6: 表示标题
  - p：表示段落
  - img：表示图片
  - a：表示链接
- 不带语义的标签
  - **div: **表示一块内容
  - span：表示行内的一块内容

本文作者： 梁俊可
本文链接： http://ljk3d.com/2021/10/19/webNote/htmlAndCss/02_HTML入门/
版权声明： 梁俊可工作室