HTML基础知识

最新推荐文章于 2024-10-08 17:48:41 发布
最新推荐文章于 2024-10-08 17:48:41 发布
阅读量931 收藏 21
点赞数 19
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_83091579/article/details/136736751
版权
本文详细介绍了HTML的基本概念，包括其简单灵活、可扩展和平台无关性的特点，以及HTML的基本语法，如标签结构（如b,strong,br,hr,p,sub,sup等）、表单元素（input,select,textarea,a标签等）和多媒体标签的使用。
摘要由CSDN通过智能技术生成

一、 认识 HTML 

1.1 HTML 简介

        HTML是目前网络上应用最为广泛的技术之一，也是构成网页文档的主要基石之一。HTML文本是由HTML标签组成的描述性文本，HTML文本可以说明文字、图形、动画、声音、表格、链接等。

        HTML不是编程语言，而是一种描述性的语言，用于描述超文本中内容的显示方式。比如，文字以什么颜色、大小显示，图片以什么尺寸、位置来显示等。这些描述都是用HTML标签来描述的。

1.2 HTML 的特点

HTML有简单灵活、可扩展、平台无关性的特点。

二、HTML基本语法

（用！+   tab即可快速生成初始代码）

<!DOCTYPE html>       ------声明一个html的文档
<html lang="en">      ------网页的开始
<head>                ------网页的头部
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>     ------网页的标题
</head>     ------网页头部的结束
<body>      ------网页内容的开始
    
</body>     ------网页内容的结束
</html>     ------网页的结束

2.1 HTML的常用标签

        html:标签都是成对出现的（单标签和双标签）

2.1.1 b,strong等标签 

<!DOCTYPE html>       
<html lang="en">     
<head>                
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>     
</head>     
<body>     
    <strong>粗体</strong>
    <b>也是粗体</b>
    <em>斜体</em>
    <i>也是斜体</i>
    <u>下划线</u>
    <del>删除线</del>
</body>    
</html>

2.1.2 br、hr标签

br -----可用来换行

hr ------水平分割线，可设置width和size

<!DOCTYPE html>       
<html lang="en">     
<head>                
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>     
</head>     
<body>     
    一行<br>
    两行<br>
    三行
    <hr width="800px" size="9">
</body>    
</html>

2.13 p标签

p标签为段落标签

相邻的两个p标签之间会空出一行

align 属性 字体的位置 left（默认），center，right

可用font标签设置字体

用color设置颜色，其中颜色的表示有三种：一：英文单词  二：#rrggb 三原色 red green blue

<!DOCTYPE html>       
<html lang="en">     
<head>                
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>     
</head>     
<body>     
    <p align="left">
        11111
    </p>
    <p align="center">
        11111
    </p>
    <p align="right">
        11111
    </p>
</body>    
</html>

2.1.4 sub、sup、pre等标签

sub------下标标签

sup-----上标标签

pre------输出原样内容

span------修饰文本的标签-----标准的行内标签

<!DOCTYPE html>       
<html lang="en">     
<head>                
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>     
</head>     
<body>     
    x的二次方:x<sup>2</sup>
    前3项和:a<sub>1</sub>+a<sub>2</sub>+a<sub>3</sub>
    <p>
        11111
        11111
        11111
    </p>
    <pre>
        11111
        11111
        11111
    </pre>
</body>    
</html>

2.1..5 hn，div

hn----n为1-6，从1-6字体越来越小有加粗效果

div-------标准的块级标签------盒子布局
行内标签：不能自动换行，除非这一行内容铺满整个页面才会换行span
块级标签：自动换行，独占一行div   hn   p   hr

<!DOCTYPE html>       
<html lang="en">     
<head>                
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>     
</head>     
<body>     
    <h1>这是一个标题</h1>
    <h2>这是一个标题</h2>
    <h3>这是一个标题</h3>
    <h4>这是一个标题</h4>
    <h5>这是一个标题</h5>
    <h6>这是一个标题</h6>
    <div>
    这是一个块级标签
    </div>
    <div>
    这是一个块级标签
    </div>
    <div>
    这是一个块级标签
    </div>
    <span>
    这是一个行内标签
    </span>
    <span>
    这是一个行内标签
    </span>
    <span>
    这是一个行内标签
    </span>
</body>
</html>

2.2 表单标签

form标签一般会和input标签连用

2.2.1 input标签

格式：

<input type="表单类型" name="表单名称" value="表单值">

其中type可取值为：

type的取值：
text-----文本框
password----密码框
submit-----提交按钮
radio------单选按钮
checkbox-----多选按钮
reset-----重置按钮
button-----普通按钮
image-----图像按钮
file------文件
hidden----隐藏域
email----邮箱域
color-----颜色域
date-----日期
time-----时间
datetime-local-----日期+时间
range------进度条
 

<!DOCTYPE html>       
<html lang="en">     
<head>                
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>     
</head>     
<body>  
    <form action="">
        <p>
        用户名:<input type="text">
        </p>
        <p>
        密码:<input type="password">
        </p>
        <p>
        请选择您的性别：<input type="radio" name="gender">男
        <input type="radio" name="gender">女
        </p>
        <p>
        请选择您的爱好：<input type="checkbox" name="aihao">唱歌
        <input type="checkbox" name="aihao">跳舞
        <input type="checkbox" name="aihao">篮球
        <input type="checkbox" name="aihao">跑步
        </p>
        <input type="submit" value="登录">
        <input type="reset" >
        <input type="button" value="普通">
        <input type="file">
        <input type="hidden"value="1234567"><br>
        请输入您的邮箱：<input type="email">
        <input type="color">
        <input type="date">
        <input type="time">
        <input type="datetime-local">
        <input type="range">
        </form>
        

    </form>
</body>
</html>

其中还存在一些常见的属性比如readonly（只读不写），checked（默认选择），disabled（不可点击），autofocus（默认光标位置），required（不可空白提交）

       <p>
        用户名:<input type="text" required>
        </p>
        <p>
        密码:<input type="password" autofocus>
        </p>
        <p>
        请选择您的性别：<input type="radio" name="gender" checked>男
        <input type="radio" name="gender">女
        </p>

2.2.1.2 select标签和textarea标签

select：

下拉列表框，一般和option标签连用

属性：select------默认被选择中的选项

multiple------以列表的形式展现

<!DOCTYPE html>       
<html lang="en">     
<head>                
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>     
</head>     
<body>  
    <form action="">
        请选择您的收货地址：
        <select name="" id="" multiple>
        <option value="">重庆</option>
        <option value="">成都</option>
        <option value="">贵州</option>
        <option value="" selected>北京</option>
        <option value="">陕西</option>
        </select>
        </form>      
</body>
</html>

textarea：

用于显示文本域，cols（多少列，表示文本域的宽度），rows（多少行，表示文本域的高度）

2.3 常见的属性

a标签------超链接

<a href="https://www.baidu.com/">点击我</a>

vlink ----- 访问过的超文本链接的颜色
alink ---- 激活超文本链接的颜色
link ------ 超文本链接的颜色
text ---- 文本的颜色
bgcolor ----- 背景颜色
background ----- 背景图片

<body>  
    <body vlink="red" alink="green" link="blue" text="black" bgcolor="Plum"
    background="C:\前端\1\21a4462309f790529a7c3b8f77f2a0c77bcbd52a.webp">
    <a href="https://www.baidu.com/">点击我</a>
</body>


2.4 a标签

a标签用来进行页面的跳转

href放的是要跳转的路径

target属性：

值描述
_blank在新窗口中打开被链接文档
_self默认。在相同的框架中打开被链接文档
_parent在父框架集中打开被链接文档
_top在整个窗口中打开被链接文档

<a href="https://www.baidu.com/">点击我</a>
<a href="https://www.baidu.com/" target="_blank">点击我</a>
<a href="https://www.baidu.com/" target="_self">点击我</a>
<a href="https://www.baidu.com/" target="_parent">点击我</a>
<a href="https://www.baidu.com/" target="_top">点击我</a>

锚点：使页面的展示到达某一个指定的地点

#+id名称进行连接

    href="#01"><h3>第一章</h3></a>
    <a href="#02"><h3>第二章</h3></a>
    <a href="#03"><h3>第三章</h3></a>
    <a href="#04"><h3>第四章</h3></a>
    <a href="#05"><h3>第五章</h3></a>
    <a href="#06"><h3>第六章</h3></a>
    <a href="#07"><h3>第七章</h3></a>
    <a href="#08"><h3>第八章</h3></a>
    <p>
    <a href="" id="01">第一章</a><br>
    .....
    </p>
    p>
    <a href="" id="02">第二章</a><br>
    .....
    </p>
    <p>
    <a href="" id="03">第三章</a><br>
    .....
    </p>
    <p>
    <a href="" id="04">第四章</a><br>
    .....
    </p>
    <p>
    <a href="" id="05">第五章</a><br>
    .....
    </p>
    <p>
    <a href="" id="06">第六章</a><br>
    .....
    </p>
    <p>
    <a href="" id="07">第七章</a><br>
    .....
    </p>
    <p>
    <a href="" id="08">第八章</a><br>
    .....
    </p>
    <a href="#top">回到顶部</a>

2.5 img标签

图片常见的格式：GIF JPG PNG BMP等

2.5.1 常见的属性

src------图片路径，分为相对路径和绝对路径

alt-------代替图片文本内容(当浏览器无法打开或图片路径错误时，用一个词或一段话代替本图片)

width------宽度

height------高度

border------边框， 默认为0

align------位置

取值：top ----- 上对齐 middle ----- 居中对齐 bottom ------ 下对齐（默认对齐） right ----- 右对齐 
left ------ 左对齐

 <img src="图片" alt="图片" width="200px" height="10%" border="5"><br>
    上对齐<img src="图片" alt="图片" width="200px" height="10%" align="top"border="1"><br>
    下对齐<img src="图片" alt="图片" width="200px" height="10%" align="bottom"border="1"><br>
    居中对齐<img src="图片" alt="图片" width="200px" height="10%"align="middle" border="1"><br>
    左对齐<img src="图片" alt="图片" width="200px" height="10%" align="left"border="1"><br>
    右对齐<img src="图片" alt="图片" width="200px" height="10%" align="right"border="1"><br>
    默认对齐<img src="图片" alt="图片" width="200px" height="10%" border="1">

title------图片标题------用来显示描述图片的文字

<img src="图片1.png" alt="妹妹你" title="这是一张xxx的图片">

2.5.2 位图

usemap 属性
map标签 一般会和area标签进行连用
area标签 属性：
shape ------- 鼠标点击的形状
coords ----- 表述鼠标点击形状的大小
href ----- 表示要跳转的路径


2.6 多媒体标签

video ---- -- 视频
controls属性 ----- 表示的是播放器的组件
autoplay属性 ---- 表示的自动播放
loop属性 ------ 表示的是循环播放
 

2401_83091579
关注
Html基础知识点.docx
07-23
Html 基础知识点 Html 是一种标记语言，用于创建网页的结构和内容。以下是 Html 基础知识点： 一、Html5 文档类型和字符集 * Html5 文档类型：<!doctype html> * Html5 字符集： 二、Html5 Canvas 元素 * ...
html基础知识1111
03-26
html基础知识1111
HTML基础知识点汇总
12-04
HTML 基础知识点汇总 HTML（Hypertext Markup Language，超文本标记语言）是网页设计的基础语言，它将影像、声音、图片、文字等连接显示出来。HTML 语言使用标记式的指令（Tag），将网页文件组织起来，并由浏览器...
html基础知识
12-19
是关于html的基础知识，初学者可以看看
HTML基础知识讲解！
03-26
HTML 基础知识讲解 HTML 基础知识是网页开发的基础，了解 HTML 基础知识是学习网页开发的必备条件。本文将详细讲解 HTML 基础知识，包括 HTML 标题、HTML 段落、HTML 链接和 HTML 图像等。 HTML 标题 -------- ...
HTML基础知识点学习一
06-30
前端入门基础知识点,HTML知识点整理,用Typora写的
HTML基础知识.txt
11-18
HTML基础知识。 HTML是一种超文本标记语言 负责页面中的结构，定义出页面中的各个组成部分。 HTML是采用纯文本的形式编写，采用HTML标签来识别出页面中的不同部分。
我的HTML基础知识笔记
08-02
前端小白
HTML基础知识2
09-17
这个“HTML基础知识2”压缩包很可能是包含了一些关于HTML学习的基本资料，面向初学者提供指导。 HTML由一系列元素组成，这些元素定义了网页的结构和内容。每个元素由开始标签和结束标签构成，例如`<p>`和`</p>`用于...
【ONE·Web || HTML】
上士闻道，勤而行之。觉纷扰则静坐，觉懒看书则且看书 ♪(´▽｀)
10-05 1094
主要内容：HTML基本知识入门，主要介绍了常见的一些标签使用，以及简单案例演示。
如何通过js加载css和html
wangnanofspirit的博客
10-05 473
加载CSS：可以通过创建<link>标签或使用fetchAPI 来实现。加载HTML：推荐使用fetchAPI，因为它更现代且易于使用。如果需要支持旧浏览器，可以使用。这些方法可以帮助你在运行时动态地加载和应用CSS和HTML资源，从而提高用户体验和页面性能。希望这些示例对你有所帮助！
好玩的水表电表
lulei5153的博客
10-01 2039
【代码】好玩的水表电表。
HTML ASCII：Web 开发中的字符编码基础
wjs2024的博客
10-05 572
ASCII，全称为美国信息交换标准代码（American Standard Code for Information Interchange），是一种用于电子通信的字符编码标准。它最初于1963年提出，用于在不同的计算机系统之间传输文本数据。ASCII码使用7位二进制数来表示128个不同的字符，包括大小写字母、数字、标点符号和控制字符。在HTML（超文本标记语言）中，ASCII编码扮演着重要的角色，因为它为网页内容的显示提供了基础。
HTML流光爱心
兔子王
09-29 3985
HTML语言实现红蓝色流光爱心效果的完整代码。
前端的全栈混合之路Meteor篇：3.0新版本介绍
分享有趣的、贴近生活的CS知识
10-01 1156
Meteor全栈框架3.0版本终于稳定下来了，它的效果约等于webpack+vue+express+socket.io+mongodb+npm+uniapp，学一个搞定全套，值得学习了解下，最后找到适合于自己的技术栈。
Javascript数组研究03_手写实现_fill_filter_find_findIndex_findLast_findLastIndex
qq_33546823的博客
10-03 1238
fill()方法用一个固定值填充一个数组中从起始索引（默认为 0）到终止索引（默认为）内的全部元素。它返回修改后的数组。输入参数value：用来填充数组元素的值。start（可选）：开始填充的位置，默认值为 0，索引处理方法和copyWithin一致。end（可选）：停止填充的位置（不包含该位置），默认值为，索引处理方法和copyWithin方法一致。输出：修改后的原数组。注意事项该方法会改变原数组，是修改方法。对于稀疏数组，空槽也会被value填充。是通用的方法在空数组上不会有任何处理。
前端基础面试题·第四篇——Vue（其二）
最新发布
2301_76380626的博客
10-08 722
路由跳转 接收参数 params传递参数可以用过页面路由对象route的params属性访问到。 2.query传参 query 传参是通过URL的查询字符串来传递参数，这种方式传递的参数是可选的。 这种方式不需要提前配置路由路径，直接在路由跳转时在路径或者配置中传递参数即可。 路由跳转 接收参数 这种方式传递的参数会挂载到页面路由对象route的query对象上。 2. hash和history路由区别 hash路由地址上在路径后面带#号，history路由地址上不带#号. 在
快餐食品检测系统源码分享[一条龙教学YOLOV8标注好的数据集一键训练_70+全套改进创新点发刊_Web前端展示]
m0_73388125的博客
10-08 1154
数据集信息展示在本研究中，我们使用了名为“burger detection”的数据集，以改进YOLOv8在快餐食品检测系统中的表现。该数据集专门针对快餐食品的多样性进行设计，涵盖了六个主要类别，分别是：bbq、bread、bun、hotdog、pattty和patty。这些类别的选择不仅反映了快餐食品的常见种类，还考虑到了它们在实际应用中的重要性，尤其是在餐饮行业的食品识别和分类任务中。数据集的构建过程经过精心设计，确保每个类别的样本数量和质量都能满足深度学习模型训练的需求。
HTML基础知识详解
...它是Web开发的基础，允许开发者通过各种标签...这些只是HTML基础知识的一部分，实际开发中还有表格、列表、链接、图像、表单、框架、多媒体等诸多元素和属性。熟练掌握这些基本概念是成为一名合格的前端开发者的基础。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值