体验html_体验html文档-优快云博客

本文详细介绍了HTML文档的基本结构，包括<!DOCTYPE>声明、<head>和<body>部分，以及HTML标签的分类，如块级元素、行内元素和行内块元素。还讲解了长度单位的使用，如像素、百分比和相对单位，并举例说明。此外，文章还涵盖了HTML注释、文档快捷语法以及超链接和锚点的创建方法，是学习HTML的基础教程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

三 html文档结构

1.html文件定义

网页文件既HTML文件，任何一个类型的文件都有指定的后缀，那么html文件的后缀名就是.html或.htm；

2.html的结构

整个html包括头部和组成

和人一样，网页也由头部和身体组成

<!DOCTYPE html>
<html lang="en">
<head>
   
    <title>Document</title>
</head>
<body>
    
</body>
</html>

3.html文档声明

1 任何一个标准的html页面，第一行一定是一个以 标签之前。

<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

意思是声明当前的文档是html文档

2 HTML 标签

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

3.html <head>头部

标签包含了文档的元（meta）数据，用于定义文档的头部，它是所有头部元素的容器。

头部中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

base标签：描述了基本的链接地址，如果a标签中没有设置地址的话，设置了base地址，a标签会自动跳转到base所设置的地址去。
link标签：定义文档与外部资源的关系（连入CSS样式表或者JS样式表）还可以定义浏览器窗口tab页上的logo图标
script：引入外部JS样式
style：引入外部CSS样式
title: 定义文档的标题，
meta：提供了一些元数据。表示基本的配置项目

<head>
<base href="http://www.baidu.com">                                             链接到百度
<link rel="stylesheet" href="./01-css.css">                                    链接外部的CSS样式
<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico"
type="image/x-icon">                                                           定义tab页的logo图标
<meta charset="UTF-8">                                                         charset表示字符编码
<meta name="keywords" content="第一个,html,自己">                                定义网页的关键字
<meta name="description" content="我的第一个html">                               定义网页的描述内容
  <meta name="auther" content="橘子">                                           还可以定义网页的作者

4.html主体

body 元素定义文档的主体。

body 元素包含了可见的页面内容（比如文本、超链接、图像、表格和列表…)

四，标签分类

1.块级标签

块级元素是指本身样式属性为display:block;的元素。因为它自身的特点，我们通常使用块级元素来进行大布局（大结构）的搭建。

块级元素的特点：

1.独占一行

2.可以设置宽高

3.没有宽度时默认为父级宽度

4.没有高度时是本身内容的高度

常用的块级元素有：div,h,p,li,dl,ol,dd,table…

2.行内元素

内联元素是指本身属性为display:inline;的元素。因为它自身的特点，我们通常使用块级元素来进行文字、小图标（小结构）的搭建。

行内元素的特点：

1.一行可以显示多个

2.不可以设置宽高

3.由内容自动撑开

常见的行内元素由：span,a,b,strong,i,em,del,u,input,select…

3.行内块元素

行内块元素是指本身属性为display:inline-block;的元素。

行内块元素有的特点：

1.一行可以显示多个

2.可以设置宽高

3.没有设置宽高，默认由内容撑开

4.元素间有默认间距

常见的行内块元素有：img

五.长度单位

1.绝对长度单位

1.px 像素是绝对长度单位，设置后不能随着网页大小的改变而改变（常用）

2.in 英寸是一个物理度量单位，在CSS中英寸直接映射成像素。

3.cm 厘米也是直接映射成为像素

4.mm 毫米直接映射成为像素

<div style="width: 100px;height: 100px;"></div>

2.相对长度单位

em 相对单位相对于字号大小的一倍不会随着网页的大小而改变，但会随着字号的大小改变。
rem 相对单位相对于html的（根目录）的字体大小的一倍。
vm 相对单位相对于视口的百分之几。会随着网页的大小改变而改变。
vmin 相对单位相对于视口的百分之几（当前的vh vw 最小的值）在移动端布局中，由竖屏转换为横屏时，元素的本身（比如文字）的尺寸大小都一样。

案例一
<div style="width:10em;height: 10em;font-size: 10px; border: 1px solid pink;">2</div>
案例二
<div style="width: 10rem;height: 10rem;border: 1px solid orange;">3</div>
案例三
<div style="width: 40vw; height: 40vw;border: 1px solid greenyellow;">4</div>
案例四
<div style="width: 20vw; border: 1px solid skyblue; ">5</div>

3 怪异长度单位

百分比 %（父元素的百分之几）当视口发生改变时，百分比的长度可能不会改变。

以百分比为单位的长度值是基于具有相同属性的父元素的长度值。例如，如果一个元素呈现的宽度

是450px，子元素的宽度设为50%，那么子元素呈现的宽度为225px。

<div style="width: 50%;height: 50px;border:1px solid green;">1</div>

4.html注释

ctrl+/是注释的快捷键

上班的时候必要的东西都要写注释包括类名，方法名都要写注释

5 HTML文档快捷语法

标签名+tab键是创建标签的快捷方式
标签名+{} 可以显示标签和标签中的内容
标签名+[属性名=属性值] 可以显示标签以及标签的属性
标签名*数值：一次性创建多个标签
标签名[属性名=值$] 数值 $ 可以表示从1开始往后依次增加的数字$必须结合来使用,表示从1开始的数值
父标签>子标签：创建父标签及其子标签
标签名1+标签名2：创建兄弟标签
块级创建表格 table>tr数值>td{内容}数值 table>tr乘以数值>td乘以{内容}数值

案例1
<div></div>
案例二
<p>我是内容</p>
<div>我是一个盒子</div>
案例三
<div id="one"></div>
<p id="two"></p>
案例三
<div class="name">我是盒子</div>
<p class="p-1">我是p标签</p>
案例四
 <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <div></div>
    <div></div>
案例五
 <div id="div-1"></div>
 <div id="div-2"></div>
 <div id="div-3"></div>
 <div class="div1">这是第1个div</div>
 <div class="div2">这是第2个div</div>
 <div class="div3">这是第3个div</div>
案例六
<div>
    <p></p>
</div>
<div class="one">
    <p class="one"></p>
</div>
案例七
  <div></div>
  <p></p>
  <div></div>
  <div></div>
  <p></p>
  <p></p>
案例八
    <table>
        <tr>
            <td>我是表格内容</td>
            <td>我是表格内容</td>
            <td>我是表格内容</td>
        </tr>
        <tr>
            <td>我是表格内容</td>
            <td>我是表格内容</td>
            <td>我是表格内容</td>
        </tr>
        <tr>
            <td>我是表格内容</td>
            <td>我是表格内容</td>
            <td>我是表格内容</td>
        </tr>
    </table>

6.标签及属性语法

1.标签语法规则

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

双标签

<开始标签 属性="属性值尽量用双引号"。。。>标签内容</结束标签>

单标签

<开始标签 属性=""。。。。。>
    例如：
    <img src="./01.jpg" alt="图片加载不出来啦">

空元素

没有内容的html元素就被成为空元素，空元素是在开始标签中关闭的

例如：<br> <hr>

2.属性语法规则

属性是html元素提供的附加信息

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，**比如：**name="value（又称键值对）

六，html标签元素

1.HTML基础块标签

1.标题标签

h1-h6系列是标题标签。h1-h6字体逐渐减小，h系列标签默认加粗并且独占一行

注意不要因为字体样式的大小随意设置h系列标签

2.段落标签

p 段落标签默认独占一行且外边距较大

<p> 这是一段 段落标签中的文字</p>

3.水平线标签

<hr>

标签在 HTML 页面中创建一条水平线。

水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。

学完这些东西，练习一下吧。

练习一下h系列标签和p标签吧，中间用hr分隔开

2.html基础布局标签

1.div标签

div 元素是块级元素，它是用于组合html元素的容器。 div除了具有本身的特性之外，对div本身内容里面的标签没有影响，没有任何渲染功能。

 <div style="width: 100px; height: 100px; border:1px solid black">
        <p>我是p标签</p>
    </div>

2.基础行内标签

1.范围标签

<span>标签被用来组合文档中的行内元素。

原价998，现价99元，快冲吧

2.换行标签

<br>可插入一个简单的换行符。此标签是空标签。

    宇宙的有趣<br>
    我才不在意<br>
    我在意的是<br>
    你牵我的手<br>
    而乱跳的心<br>

3.超链接

基本用法

<a href="链接地址" target="目标窗口位置"> 链接热点文本或图像 </a>

属性	值	描述
href	URL	规定链接指向的页面的 URL。
target	_blank	_blank :浏览器总在一个新打开、未命名的窗口中载入目标文档。
target	_parent	_parent :这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。
target	_self	这个目标的值对所有没有指定目标的标签是默认目标，它使得目标文档载入并显示在相同的框架或窗口中作为源文档
target	_top	这个目标使得文档载入包含的框架并将文档载入整个浏览器窗口