Html学习

风舞红叶

已于 2024-08-27 00:02:48 修改

阅读量655

点赞数 10

分类专栏：前端文章标签： html 学习前端

于 2024-08-25 22:07:18 首次发布

本文链接：https://blog.csdn.net/weixin_46488959/article/details/141536051

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Web标准的组成

构成	语言	说明
结构	HTML	页面元素和内容
表现	CSS	页面元素的外观和位置等页面样式
行为	JavaScript	页面模型的定义与页面交互

Html

html 页面固定结构

!快捷键，创建html模板

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

ctrl + /注释

标签结构

标签间的关系：

父子（嵌套关系）
兄弟（并列关系）

标签分类

尽量使用语义化标签

标签类型	标签	场景	代码	属性	语义	特点
排版标签
	标题标签	在新闻和文章的页面中。用来突出文章主题	`h`系列标签		1~6 级标题，重要程度一次递减	文字加粗；文字变大，并且从 h1 到 h6 文字逐渐减少；独占一行
	段落标签	用于分段显示	`<p></p>`		段落	段落之间存在间隙；独占一行
	换行标签	让文字强制换行显示	`<br>`		换行	单标签让文字强制换行
	水平线标签	分割不同主题内容的水平线	`<hr>`		主题的分割转换	单标签在页面中显示一条水平线
文本格式化标签		需要让文字加粗、下划线、倾斜、删除线等效果
		加粗	`<b></b>`
			`<strong></strong>`		突出重要性的强调语境
		下划线	`<u></u>`
			`<ins></ins>`		突出重要性的强调语境
		倾斜	`<i></i>`
			`<em></em>`		突出重要性的强调语境
		删除线	`<s></s>`
			`<del></del>`		突出重要性的强调语境
媒体标签
	图片标签	在网页中显示图片	`<img src="" alt="">`	`alt` 替换文本；当图片加载失败时才显示alt的文本		单标签 img标签需要展示对应的效果，需要借助标签的属性进行设置
				`title`提示文本；鼠标悬停时，才显示的文本；不止用于图片标签，可以用于其他标签
				`width`和`height`宽和高；如果只设置其中一个，另一个会自动等比例缩放（图片不会变形）；同时设置，设置不当可能变形
	音频标签	网页中插入音频	`<audio src="" controls></audio>`	`src`音频的路径		支持三种格式：mp3、Wav、Ogg
				`controls`显示播放的控件
				`autoplay`自动播放
				`loop` 循环播放
	视频标签	插入视频	`<video src="" controls></video>`	`autoplay`自动播放（谷歌浏览器中需要配合muted实现静音播放）		支持三种格式：mp4、Wav、Ogg
链接标签	链接标签	点击跳转另一个页面	`<a href="" ></a>`	`href`跳转路径，不知道跳哪里，可以写一个 `#`代表空路径		双标签，内部可以包裹内容如果需要指定点击之后去指定页面，需要设置 a 标签的 href 属性
				`target`目标网页的打开方式 `_self`默认值，当前网页中跳转，覆盖原网页 `_blank`新窗口中跳转（保留原网页）
列表标签		在网页中按照展示关联性的内容
	无序列表	一组无顺序之分的列表	`ul`无序列表整体 `li`无序列表的每一项			列表的每一项默认显示圆点标识 `ul`标签中只允许包含`li`标签 `li`可以包含任意内容
	有序列表	有顺序的列表	`ol`列表整体 `li`列表的每一项			列表的每一项默认显示序号标识 `ol`标签中只允许包含`li`标签 `li`可以包含任意内容
	自定义列表		`dl`自定义列表的整体，用于包裹`dt/dd` `dt`自定义列表的主体 `dd`表示自定义列表的针对主题的每一项内容			`dd`默认显示缩进效果 `dl`标签中只允许`dt/dd` `dd/dt`标签可以包含任意内容
表格标签		行+列的单元格的方式整齐展示数据	`table`表格整体，包裹多个`tr` `tr`表格每一行，用于包裹`td` `td`表格单元格，用于包裹内容			嵌套关系：`table` > `tr` > `td`
				`border`边框宽度 `width`表格宽度 `height`表格高度		样式最好用CSS设置
			`caption`表格大标题，默认表格顶部居中 `th`表头单元格，通常用于表格第一行，默认内部文字加粗			`caption`标签书写在`table`标签内部 `th`标签写在`tr`标签内部（用于替换`td`标签）
			`thead`表格头部 `tbody`表格主题 `tfoot`表格底部			表格结构标签内部用于包裹`tr`标签表格结构标签可以省略
		合并单元格		给要保留的单元格加上属性`rowspan`合并单元格的个数，跨行合并，将多行单元格垂直合并 `colspan`跨列合并，合并单元格数量，多行水平合并		通过左上原则，确认保留谁删除谁上下合并：只保留最上面的，删除其他左右合并：只保留最左的，删除其他只有同一个结构标签中的单元格才能合并
表单标签			`input`	`type`属性	收集信息	根据`type`属性不同，效果不同
				`text`输入单行文本，配合`placeholder`提示用户输入的内容 `password`输入密码，配合`placeholder`提示用户输入的内容		`placeholder`提示用户输入内容
				`radio`单选框，多选一配合`name`进行分组，有相同name的单选框为一组，一组只有一个被选中 `checked`默认选中		`name`对于`radio`有分组功能
				`checkbox`多选框，多选多
				`file`上传文件 `multiple`多文件选择
				`submit`提交按钮		需要配合 `from`标签使用
				`reset`重置按钮		需要配合 `from`标签使用
				`button`普通按钮，默认无功能，配合js添加功能		需要配合 `from`标签使用
			`button`	`type`属性	用户点击按钮
				`submit`提交按钮，点击后提交数据给后端服务器
				`reset`重置按钮，点击之后恢复表单默认值
				`button`普通按钮，默认无功能，配合js添加功能
			`select`	`selected`下拉菜单的默认选中	下拉菜单标签	`select`下拉菜单整体 `option`下拉菜单的每一项
			`textarea`	输入多行文本的表单控件		开发时样式效果用CSS设置
			`label`	`cols`文本域内可见宽度 `rows`文本域内可见行数	常用于绑定内容与表单标签的关系	方式一 1、使用label标签把内容包裹起来 2、在表单标签上添加id属性 3、在label标签的for属性中设置对应id属性值方式二 1、直接使用label标签把内容和表单标签一起包裹起来 2、需要把label标签的for属性删除即可
语义化标签	无语义的布局标签
			`div`			一行只显示一个，独占一行
			`span`			一行可以显示多个
	有语义的布局标签		`header`		网页头部
			`nav`		网页导航
			`footer`		网页底部
			`aside`		网页侧边栏
			`section`		网页区块
			`article`		网页文章