web前端开发HTML01（HTML H5新特性、文档结构、标签分类、长度单位、超链接、路径、img）

Insomeop

已于 2023-08-17 11:38:19 修改

阅读量220

点赞数 2

文章标签： html 前端笔记 html5

于 2023-07-13 16:10:19 首次发布

本文链接：https://blog.csdn.net/qq_68510847/article/details/131698930

版权

1、HTML5的新特性

用以绘画的canvas元素
用以媒介播放的video和audio元素
对本地离线存储有更好的支持
新的语义化标签例如：article、footer、header、nav、section
新的表单控件例如：calendar、date、time、email、url、search

2、HTML文档结构

无论是html还是其它后缀的动态页面[jsp]其html语言结构都是这样的，只是在命名网页文件时以不同的后缀结尾。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>网页名</title>
</head>
<body>
    
</body>
</html>

2.1 HTML文档声明

任何一个标准的HTML页面，第一行一定是一个以<!DOCTYPE ...开头的语句，位于<html>标签之前。

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

HTML5的文档声明

<!DOCTYPE html>

2.2 HTML文档根标签

<html>元素是 HTML 页面的根元素:

此元素可告知浏览器其自身是一个 HTML 文档。

<html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。文档的头部由 <head> 标签定义，而主体由 <body> 标签定义。

2.3 HTML`<head>`头部

<head></head>标签包含了文档的元(meta)数据，用于定义文档的头部，它是所有头部元素的容器。<head>可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

下面这些标签可用在head部分：<base>,<link>,<meta>,<script>,<style>,以及<title>。

标签	描述
base	描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接：base会对Html文档中所有URL产生作用，慎用！
link	定义文档与外部资源的关系，通常用于链接到样式表。
meta	META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
script	用以引入外部js和定义内部js代码
style	定义了HTML文档的样式文件引用地址，在这里你也可以直接添加样式来渲染HTML文档。
title	定义文档的标题，是head部分中唯一必需的元素。

2.4 HTML`<body>`主体

body元素定义文档的主体。

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

注：在浏览器上按F12键就可以开启调试模式，能够看到页面的源码

3、HTML标签分类

分为块级元素、行内元素(内联元素)和行内块元素

3.1 块级标签

属性样式为：display:block;

特点：

独占一行，每一个块级元素都会从新的一行重新开始，从上到下排布
可以直接控制宽度、高度及盒子模型的相关CSS属性
在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度
在不设置高度的情况下，块级元素的高度是它本身内容的高度

常用的块级元素：

标签	描述
div	常用块级容器，也是css layout的主要标签
h1-h6	标题标签
hr	水平分割线
ol	有序列表
ul	无序列表
li	列表项
dl	自定义列表
dt	自定义列表项
dd	定义描述
table	表格
p	段落
form	交互表单

3.2 行内标签

属性样式为：display:inline

特点：

从左到右依次排列，在一行显示
不能直接控制宽高和盒子模型的相关CSS属性，但是可以直接设置内外边距的左右值
宽高是由本身内容的大小决定
只能容纳文本或其他内联元素(请不要在内联元素中嵌套块级元素)

常见的行内元素：

标签	描述
span	常用内联容器，定义文本内区块
a	锚点，超链接
b	加粗
strong	加粗
i	斜体
em	斜体
del	文档中已被删除的文本
br	强制换行
u	下划线
textarea	多行文本输入框
input	输入框
select	下拉列表
sub	下标
sup	上标
small	小字体文本

3.3 行内块标签

属性为：display:inline-block

特点：

元素排列在一行
宽度默认由内容决定
元素间默认有间距
支持宽高、内外边距的所有样式的设置

常见的行内块标签：

标签	描述
img	图片标签

⭐删除盒子默认间距的方法

float、给父元素设置font-size:0、给父元素设置属性display:flex

/*在/**/中的内容是被注释掉的内容，并不会显示也不会起作用*/
<style>
    div {
        display: inline-block;
        /* float: left; */      /*第一种*/
    }

    /*第二种*/
    
    /* .box{
    font-size: 0;            
    } */

    .box{
        display: flex;        /*第三种*/
    }

    .box1 {
        width: 200px;
        height: 200px;
        border: 1px solid rosybrown;
    }

    .box2 {
        width: 200px;
        height: 200px;
        border: 1px solid royalblue;
    }
</style>

<!--
    <div class="box1">box1</div>
    <div class="box2">box2</div>
-->
<div class="box">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</div>

效果图：

使用前

在这里插入图片描述

使用后

在这里插入图片描述

4、长度单位

4.1 绝对长度单位

px，像素，不会因视口的改变而改变。

还有in、cm、mm，但是几乎不用。

4.2 相对字体的长度

em，1em=16px ，根据当前字体的大小来改变

它会逐级向上相乘，所以如果一个设置了fontsize:1.1em的元素在另一个设置了font-size:1.1em的元素里，而这个元素又在另一个设置了fontsize:1.1em的元素里，那么最后计算的结果是1.1X1.1X1.1=1.331rem（根em）.

rem，与em的区别就是它是相对于根元素来改变的，并不会像em一样那么麻烦

还有points、pica、ex、ch，但不常用

4.3 可视区百分比长度单位

vw，可视区宽度单位，1vw=可视区宽度的百分之一

vh，可视区高度单位

vmin，vmin的值是当前vw和vh中较小的值，在移动端开发时，可以保证转换横屏和竖屏的时候，布局不会改变大小

vmax ，vmax的值是当前vw和vh中较大的值

4.4 百分比单位

%，以百分比为单位的长度是相对于父元素的。

⭐百分比和可视区百分比

百分比在没有父元素的情况下，父元素就是body，而body默认有外边距，所以和4.3是不一样的(除非去除body的外边距)

实例：

    <style>
        /* body{
            margin: 0;
        } */
        .box1{
            border: 1px solid rosybrown;
            width: 50%;
        }
        .box2{
            border: 1px solid royalblue;
            width: 50vw;
        }
    </style>
</head>
<body>
    <div class="box1">百分比</div>
    <div class="box2">可视区百分比</div>
</body>

效果图：

在这里插入图片描述

消除body的外边距后：

在这里插入图片描述

5、超链接

点击链接可以从一个页面跳转到另一个页面。当把鼠标移动到链接上时，箭头会变成一只小手。

默认情况下，链接的形式：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。

(也可以通过css属性来设置自己喜欢的样式)

基本语法

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

target属性

属性值	描述
_self	在当前窗口打开链接（默认）
_blank	在新窗口打开链接
_parent	这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。
_top	这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
framename	在指定的框架中打开被链接文档。

href属性

链接本地文档，href=“本地文档的路径”；

<a href="删除.html"></a>
友情链接，href=“友情链接网站的网址”，必须加上http或https；

<a href="https://www.baidu.com/">百度一下</a>
图片链接，超链接的标签内容是图片；

<a href="https://www.baidu.com/"><img src="图片地址">点击图片打开百度</a>
建立电子邮件的链接；

🤍href="mailto:邮箱地址";(调用本地邮箱)

🤍href="tencent://message/?uin=qq号"(调用qq发起对话)
链接本页面的某个位置;

🤍设置锚点 <a name="锚点名">内容</a>

🤍链接指向锚点 <a href="#锚点名">跳转到某点</a>

⭐锚点定位

通过创建锚点链接，用户能够快速定位到目标内容。

① 使用<a href="#id名">链接文本</a>创建链接文本

<a href="#one">唐诗三百首</a>

② 使用相应的id名标注跳转目标的位置

<h3 id="one">唐诗三百首</h3>

(和href属性的最后一个是同一个功能，两个都可实现)

6、相对路径和绝对路径

6.1 绝对路径

绝对路径以web站点根目录为参考基础的目录路径。当所有网页引用同一个文件时，所使用的路径是一样的D:\web\img.gif,或完整的网络地址。http://www.baidu.com/img。

6.2 相对路径

从当前位置出发，到指定目标的位置的路径。所以，当保存于不同目录的网页引用同一个文件时，所使用的路径并不相同，故称之为相对路径。

/开头：代表根目录； ./开头：代表当前所在目录；../开头：代表上一层目录。

7、HTML图像标签

在HTML中，图像由<img>标签定义。是空标签，它只包含属性，并且没有闭合标签。

<img src="url" alt="some_text">

img标签属性：

src属性：用来指定图片地址的来源，可以是本地图片，也可以是网络图片来源；
width和height属性，用来设置图片宽高，单位是px或%（css代替使用）；
alt属性：用来为图像定义一串预备的可替换的文本，在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。
title属性：当鼠标移入图片的时候显示的文字内容；

请注意，从技术上讲，<img>标签并不会在网页中插入图像，而是从网页上链接图像。

🧠以后会持续更新的~~~~

Insomeop

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
web前端开发HTML01（HTML H5新特性、文档结构、标签分类、长度单位、超链接、路径、img）

HTML的基础知识，是我在学习时做的笔记，除了标题的知识外，还有一些小的知识点：删除盒子默认间距、锚点定位、百分比和可视区百分比的区别。
复制链接

扫一扫