HTML基础知识

看我的异次元口袋

于 2024-03-14 10:35:55 发布

阅读量619

点赞数 7

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_72563504/article/details/136699992

版权

HTML简介

HTML超文本标记语言----Hyper Text Markup Language

超文本---链接

标记-----也叫标签，带尖括号的文本

标签语法

·标签成对出现，，中间包裹内容。

·<>里面放英文字母（标签名）

·结束标签比开始标签多一个/

·拓展

·双标签：成对出现的标签

·单标签：只有开始标签，没有结束标签。例如<br>-换行 <hr>-水平线

HTNL基本骨架

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

·html：整个网页

·head：网页头部，存放给浏览器看的代码，例如CSS

·body：网页主体，存放给用户看的代码，例如图片、文字

·title：网页标题

（VS code）快速生成骨架：在（.html)中。！+Enter键

标签的关系

作用：明确代码的书写位置

·父子关系（嵌套关系）

·兄弟关系（并列关系）

注释

注释就是对代码的解释和说明，其目的是让人们能够更加轻松地了解代码。注释是编写程序时，写程序地人给一个语句、程序段、函数的解释或提示，能提高代码的可读性。

在编写HTML代码时，我们经常要在一些关键代码旁做一下注释，，方便理解、方便查找或方便项目组里的其它成员了解你的代码，而且可以方便以后对自己代码的维护，总之在学习和工作中，关键代码都要加注释。

注释标签用来在原文档中插入注释，不会在浏览器中显示

在VScode中添加/删除注释的快捷键：Ctrl+/

常用标签

标题标签

一般用在新闻标题、文章标题、网页区域名称、产品名称等

标签名：h1 ~ h6（双标签）

显示特点：

·文字加粗

·字号逐渐减小

·独占一行（自动换行）

经验：

·h1标签在一个网页中只能用一次，用来放新闻标题或网页的logo

h2-h6没有使用次数的限制

段落标签

一般用在新闻段落、文章段落、产品描述信息等

标签名：p(双标签)

显示特点：

·独占一行（一行不够自动换行）

·段落之间存在间隙

换行与水平线标签

·换行：<br>（单标签）

·水平线：<hr>（单标签）

文本格式化标签

作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、、下划线、删除线等。

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

标签名	效果
b	加粗
i	倾斜
u	下划线
s	删除线

常用表1，因为其标签自带强调含义

<strong>加粗</strong>
<em>倾斜</em>
<ins>下划线</ins>
<del>删除线</del>

图像标签

作用：在网页中插入图片

src用于指定图像的位置和名称，是<img>的必须属性

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

路径

路径指的是查找文件时，从起点到终点经历的路线

路径分类：

·相对路径：从当前文件位置出发查找目标文件

.（一个点）当前文件夹所在文件夹

..（俩点）当前文件上一级文件夹

/ 进入某个文件夹里

·绝对路径：从盘符出发查找目标文件

·windows默认是\，其它系统是/，建议统一写为/

·绝对路径的应用场景：友情链接、超链接

超链接

作用：点击后跳转到其它页面

<a href=" ">超链接文字</a>

属性：

·target="_blank" 在新窗口打开跳转页面

开发初期，不知道超链接的跳转地址，href属性值写#，表示空连接，不会跳转

音频标签

属性	作用	特殊说明
src(必须属性)	音频的URL	支持格式：MP3、Ogg、Wav
controls	显示音频控制面板	属性名和属性值完全一样，可以简写为一个
loop	循环播放	属性名和属性值完全一样，可以简写为一个
autoplay	自动播放	为了提升用户体验，浏览器一般会禁用自动播放功能

视频标签

属性	作用	特殊说明
src(必须属性)	音频的URL	支持格式：MP3、Ogg、Wav
controls	显示音频控制面板	属性名和属性值完全一样，可以简写为一个
loop	循环播放	属性名和属性值完全一样，可以简写为一个
muted	静音播放
autoplay	自动播放	为了提升用户体验，浏览器一般只会在静音状态太下自动播放

列表标签

作用：布局内容排列整齐的区域

列表分类：无须列表（以点开头）、有序列表（以数字）、定义列表（网页下方的帮助中心等）

·无序列表：

标签：ul嵌套li,ul是无须列表，li是列表条目。

<ul>

...

</ul>

注意事项：

·ul标签里只能包含li标签

·li标签里面可以包裹任何内容

·有序列表：

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

<ol>

...

</ol>

注意事项：

·ol标签里只能包含li标签

·li标签里面可以包裹任何内容

·定义列表

一般用于网页底部一个标题对应多个内容的区域

标签：

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

<dl>

<dt>列表子标题</dt>

...

</dl>

注意事项：

·dl标签里只能包含dt和dd标签

·dt和dd标签里面可以包裹任何内容

表格标签

标签：table嵌套tr,tr嵌套td/th,有几行就加几个tr

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

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

<table border="1">
  这里的1是指边框像素1px

表格结构标签

作用：用表格结构标签把内容划分区域，让表格结构更加清晰，语义更清晰。（针对浏览器）

标签名	含义	特殊说明
thead	表格头部	表格头部内容
tbody	表格主体	主要内容区域
tfoot	表格底部	汇总信息区域

合并单元格

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

分类：

跨行合并：

跨列合并：

步骤：

1.明确合并的目标

2.保留最左/最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）

--跨行合并，保留最上单元格，添加属性rowspan

--跨列合并，保留最左单元格，添加属性colspan

3.删除其它单元格(注释掉)

注意：不能跨结构标签合并

表单

作用：收集用户信息。

使用场景：登录页面·注册页面·搜索区域

input标签基本使用

input是单标签，type属性值不同，则功能不同

<input type="...">

type属性值	说明
text	文本框，用于输入单行文字
password	密码框，以“.”的形式
radio	单选框
checkbox	多选框
file	上传文件

文本框：<input type="text">
密码框：<input type="password">
单选框：<input type="radio">
多选框：<input type="checkbox">
上传文件：<input type="file">

可以看出input标签不自动换行

input标签占位文本--提示信息

文本框：<input type="text" placeholder="邮箱/手机号">

·单选框radio

常用属性：

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

<input type="radio" name="gender" checked>男
<input type="radio" name="gender">女

·文件上传

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

<input type="file" multiple>

属性名和属性值相同，简写为一个

·多选框-checkbox

多选框也叫复选框

默认选中：checked

下拉菜单

标签：select嵌套option,select是下拉菜单整体，option是下拉菜单的每一项

城市：<select name="city" id="1213">
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3" selected>深圳</option>

name和id是用于向后端发送数据时的标记作用

文本域

作用：多行输入文本的表单控件

标签：textarea,双标签

<textarea name="" id="" cols="30" rows="10">请输入评论</textarea>

name和id用来向后端发送数据，cols和rows用于设置大小，一般用CSS代替

label标签

作用：用作网页中某个标签的说明文本

经验：用label标签绑定文字和表单控件的关系，增大表单控件的点击范围，增加用户体验

增大点击范围有两种写法

·写法一

·label标签只包裹内容，不包裹表单控件

·设置label标签的for属性值和表单控件的id属性值相同

<input type="radio" id="man" name="gender">
<label for="man">男</label>

·写法二

·使用label标签包裹文字和表单控件，不需要属性

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

按钮-button

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

type属性值不同，则功能不同，如果省略type属性则默认为submit功能

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

注意：按钮的功能要想使用必须把要操作的标签放在表单域form中

<!-- action=""发送数据的地址 -->
<form action="">
    用户名：<input type="text">
    <br><br>
    密码 ：<input type="password">
    <br><br>
    <button type="submit">提交</button>
    <button type="reset">重置</button>
</form>