HTML笔记

最新推荐文章于 2024-09-17 09:12:39 发布

诸诸小队

最新推荐文章于 2024-09-17 09:12:39 发布

阅读量67

点赞数

文章标签： html 笔记前端

本文链接：https://blog.csdn.net/m0_62770945/article/details/130898963

版权

什么是HTML

HTML的全称为超文本标记语言(Hyper Text Markup Language)，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一。

HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

HTML基本骨架

<html>
<head>
    <title>网页标题</title>
</head>
<body>
    /*网页主体内容*/
</body>
</html>

html：整个网页
head：网页头部，用来存放给浏览器看的信息，例如css
body：网页主体，用来存放给用户看的信息，例如图片，文字

各类标签

标题标签

标签名：h1~h6（双标签）
显示特点：

文字加粗
字号逐渐减小
独占一行（换行）

注意：

h1标签在一个网页中只能用一次，用来放新闻标题或网页的logo
h2~h6没有使用次数的限制

段落标签

标签名：p（双标签）
显示特点：

独占一行
段落之间存在间隙

换行和水平线标签

特点：单标签

<body>
    <br>/*换行*/
    <hr>/*水平线*/
</body>

文本格式化标签

标签名	效果
strong	加粗
em	倾斜
ins	下划线
del	~~删除线~~

strong、em、ins、del标签自带强调含义，不建议用其他同种效果的标签

图像标签-基本使用

在网页中插入图片

<img src="图片的URL">

src用于指定图像的位置和名称，是图像标签的必须属性。

加在src后面的属性

属性	作用	说明
alt	替换文本	图片无法显示的时候显示的文字
title	提示文本	鼠标悬停在图片上面的时候显示的文字
width	图片的宽度	值为数字，没有单位
height	图片的高度	值为数字，没有单位

路径

查找文件时，从起点到终点经历的路线
分类：

相对路径：从当前文件位置出发查找目标文件
- /表示进入某个文件夹里面文件夹名字/
- 一个.表示当前文件所在的文件夹 ./，两个.表示上一个文件夹
绝对路径：从盘符出发查找目标文件

超链接

点击跳转到其他页面

<body>
    <a href="#">跳转到。。。</a>/*#为空链接，用于前期开发时点击不跳转，后期会替换成要跳转的地址*/
</body>

href属性是超链接的必须属性
拓展
超链接默认是在当前窗口跳转页面，添加target = “_blank”实现新窗口打开页面

多媒体标签

音频标签

<audio src="音频的URL"></audio>

常见属性

属性	作用	特殊说明
src（必须属性）	音频URL	支持格式：MP3、Ogg、Wav
controls	显示音频控制板
loop	循环播放
autoplay	自动播放	为了提升用户体验，浏览器一般会禁用自动播放功能

视频标签

<video src="视频的URL"></video>

常见属性

属性	作用	特殊说明
src（必须属性）	视频URL	支持格式：MP4、Ogg、WebM
controls	显示视频控制面板
loop	循环播放
muted	静音播放
autoplay	自动播放	为了提升用户体验，浏览器支持在静音状态自动播放

列表

无序列表

布局排列整齐的不需要规定顺序的区域

标签：ul嵌套li，ul是无序列表，li是列表条目

例如：

            <ul>
                <li><img src="./小米手机2.jpg"></li>
                <li><img src="./小米手机3.jpg"></li>
                <li><img src="./小米手机4.jpg"></li>
                <li><img src="./小米手机1.jpg"></li>
                <li><img src="./小米手机2.jpg"></li>
                <li><img src="./小米手机3.jpg"></li>
                <li><img src="./小米手机4.jpg"></li>
            </ul>

注意：

ul标签里面只能包裹li标签
li标签里面可以包裹任何内容

有序列表

布局排列整齐的需要规定顺序的区域

标签：ol嵌套li，ol是有序列表，li是列表条目

            <ol>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ol>

注意：

ol标签里面只能包裹li标签
li标签里面可以包裹任何内容

定义列表

dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的描述/详情

    <dl>
        <dt>列表标题</dt>
        <dd>列表描述/详情</dd>
        <dd>.....</dd>
    </dl>

注意：

dl标签里面只能包含dt和dd
dt和dd标签里面可以包含任何内容

表格

标签：table嵌套tr，tr嵌套td / th。

标签名	说明
table	表格
tr	行
th	表头单元格
td	内容单元格

提示：在网页中，表格默认没有边框线，使用border属性可以为表格添加边框线

合并单元格

将多个单元格合并成一个单元格，以合并同类信息

明确合并的目标
保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
- 跨行合并，保留最上单元格，添加属性rowspan
- 跨列合并，保留最左单元格，添加属性colspan
删除其他单元格

表单-input标签

<input type="...">

type属性值	说明
text	文本框，用于输入单行文本
password	密码框
radio	单选框
checkbox	多选框
file	上传文件

input标签占位文本

在这里插入图片描述

<input type="..."placeholder="支持QQ号/邮箱/手机号登录">

文本框和密码框都可以使用

单选框radio

属性名	作用	特殊说明
name	控件名称	控件分组，同组只能选中一个（单选功能）
checked	默认选中	属性名和属性值相同，简写为一个单词

在这里插入图片描述

上传文件-file

默认情况下，文件上传表单控件只能上传一个文件，添加multiple属性可以实现文件多选功能

<input type="flie" multiple>

多选框-checkbox

默认选中（一开始就勾选）：checked。

下拉菜单

select嵌套option
在这里插入图片描述

文本域

自动换行
在这里插入图片描述

label标签-增大点击范围

写法一
- labei标签只包裹内容，不包裹表单控件
- 设置label标签的for属性值和表单控件的id属性值相同

相当于点击男这个字也会选中

写法二（如下）

<body>
    <input type="radio" name="gender" id="man">
    <label for="man">男</label>/*写法一*/
    <label><input type="radio" name="gender">女</label>/*写法二*/
</body>

支持label标签增大点击范围的表单控件：文本框、密码框、上传文件、单选、多选框、下拉菜单、文本域等等

按钮

<button type="">按钮</button>

type属性值	说明
submit	提交按钮，点击后可以提交数据到后台（默认功能）
reset	重置按钮，点击后将表单控件恢复默认值
button	普通按钮，默认没有功能，配合javascript使用

无语义的布局标签

div,span标签

作用：布局网页（划分网页区域，摆放内容）
- div：独占一行
- span：不换行

<div>div标签，独占一行</div>
<span>span标签，不换行</span>

字符实体

作用：在网页中显示预留字符

显示结果	描述	实体名称
	空格	&nbsp
<	小于号	&lt
>	大于号	&gt

<body>甘雨晗&nbsp&nbsp&nbsp甘雨晗</body>/*中间有三个空格*/