【博学谷学习记录】超强总结，用心分享|前端学习总结-第一周

咸蛋不会翻身

已于 2023-06-05 12:57:06 修改

阅读量309

点赞数

分类专栏：【博学谷学习记录】超强总结，用心分享文章标签：前端学习 html

于 2022-08-21 16:12:06 首次发布

本文链接：https://blog.csdn.net/qq_36145110/article/details/126450365

版权

【博学谷学习记录】超强总结，用心分享专栏收录该内容

21 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML的基本框架结构，包括`<html>`、`<head>`和`<body>`，并深入剖析了各种标签如标题标签、段落标签、换行与水平线、表单元素等的用法。重点讲解了单双标签的区别，以及常用的表单组件如`<input>`、`<select>`和`<button>`。

摘要由CSDN通过智能技术生成

一、HTML

1.html框架

<!DOCTYPE html>
<html lang="en">
    <!-- html 是整体框架-->
<head>
    <!-- heed 是html框架内的头部-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTM框架</title>
</head>
<body>
    <!-- body 是html框架内的身体，通常元素标签代码都写在这里 -->
</body>
</html>

2.html标签

2.1、标签分为单标签和双标签，比如<br>就是一个单标签，标签代表的意思是换行，而<strong></strong>就是一个双标签，标签代表的意思是给文本加粗。

2.2、标签的种类

名称	标签	类型	说明
标题标签	h1	双标签	<h1>到<h6>，显示效果随着数字的增大而减小， h1显示的效果最大
段落标签	p	双标签	特点是不换行，之间有缝隙
换行标签	br	单标签	强制换一行
水平线标签	hr	单标签	在页面上画一条水平分割线
加粗	b	双标签	都是给文本加粗，但是需要体现文本重要时请使用strong
加粗	strong	双标签	都是给文本加粗，但是需要体现文本重要时请使用strong
下划线	u	双标签	都是给文本添加下划线
下划线	ins	双标签	都是给文本添加下划线
倾斜	i	双标签	都是让文本倾斜
倾斜	em	双标签	都是让文本倾斜
删除线	s	双标签	都是给文本添加删除线
删除线	del	双标签	都是给文本添加删除线
图片	img	单标签	src是图片的路径， alt是替换文本，当图片显示失败的时候，就会宣誓alt的内容
音乐	audio	单标签	src是音乐文件的路径，controls是音乐的进度条
视频	video	单标签	src是视频文件的路径，controls是视频的进度条
标签	a	双标签	href是跳转链接，target是跳转方式，当target为_self时是当前窗口加载跳转链接，当target为_blanck时，是新建窗口加载跳转链接。
无序列表	ul	双标签	ul表示无序列表的整体，用于包裹li标签
无序列表	li	双标签	li表示无序列表的每一项，用于包含每一行
有序列表	ol	双标签	ol表示有序列表的整体，用于包裹li标签
有序列表	li	双标签	li表示无序列表的每一项，用于包含每一行
自定义列表	dl	双标签	dl表示自定义列表的整体，用于包裹dt和dd
	dt		dt表示自定义列表的主题
	dd		dd表示自定义列表针对主题的每一项
表格	table	双标签	表示表格的整体，可用于包含多个tr
	tr		表示表格的每一行，可用于包裹td或th
	th		td的标题样式
	td		表示表格单元格，用于包裹内容
	caption		表格的大标题
	thead		表格的头部，用来包裹标题
	tbody		表格的主体
	tfoot		表格的底部
文本框	<input type="text" placeholder="请输入文本">	单标签	input类型下的文本框 placeholder是提示文本
密码框	<input type="password" placeholder="请输入密码">	单标签	input类型的密码框 placeholder是提示文本
单选框	<input type="radio" name="单选框" checked>	单标签	checked属性存在的时候代表默认选中
多选框	<input type="checkbox" name="多选框" checked>	单标签	checked属性存在的时候代表默认选中
上传文件	<input type="file" name="单个文件上传" >	单标签	multiple属性存在时，代表可上传多个文件，否则只能选择上传一个
提交按钮	<input type="submit" value="提交按钮">	单标签	只有在form的包含下才能提交表单数据
提交按钮	<button type="submit">我是可以包含图片的提交按钮</button>	双标签	只有在form的包含下才能提交表单数据，双标签的特性下，可以包含图片
重置按钮	<input type="reset" value="重置按钮">	单标签	只有在form的包含下才能重置表单数据
重置按钮	<button type="reset">我是可以包含图片的重置按钮</button>	双标签	只有在form的包含下才能重置表单数据，双标签的特性下，可以包含图片
普通按钮	<input type="button" value="普通按钮">	单标签	没有什么特殊功能，但是搭配上js代码可以让他无所不能
普通按钮	<button>我是一个普通按钮，但是我可以根据js千变万化</button>	双标签	没有什么特殊功能，但是搭配上js代码可以让他无所不能
表单	form	双标签	可以包含 input button等元素标签，算是限定了一个范围，提交数据的时候省时省力。
下拉菜单	select	双标签	下拉菜单的整体
下拉菜单	option	双标签	下拉菜单的每一项内容，selected属性存在的时候，代表默认选中
文本域	textarea	双标签	一个可以显示多行文本的文本框
绑定标签	label	双标签	绑定内容与表单标签的关系
盒子	div	双标签	一行只显示一个，独占一行
盒子	span	双标签	一行显示多个
网页头部	header	双标签	手机端的网页头部
网页导航	nav	双标签	手机端的网格员导航
网页底部	footer	双标签	手机端的网页底部
网页侧边栏	aside	双标签	手机端的网页侧边栏
网页区块	section	双标签	手机端的网页区块
网页文章	article	双标签	手机端的网页文章