HTML学习笔记

智者不ru爱河

已于 2022-02-17 18:29:15 修改

阅读量369

点赞数 1

分类专栏：前端开发文章标签： html 前端

于 2022-02-06 16:32:15 首次发布

本文链接：https://blog.csdn.net/weixin_44800419/article/details/122799189

版权

前端开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML学习笔记

1. HTML介绍

HTML的全称为超文本标记语言(Hyper Text Markup Language)，是一种标记语言且不区分大小写。
学习网站：https://www.w3school.com.cn/

2. HTML主体结构

<!DOCTYPE html> <!-- 声明头 -->
<html>
    <!-- 头标签 -->
    <head> <!-- 基本必需元素-->
    </head>
    <!-- 体标签 -->
    <body><!-- 基本必需元素-->
    </body>
</html>

3. Head标签中常用标签

Head 标签是HTML文档中最基本必需的元素中主要是声明一些与该页面有关的信息和属性，

<head lang="en">
    <!-- lang 属性表示语言(language)的意思，用于对当前页面主要语言的声明;当 lang="en" 时表示英文，当 lang=“zh-cn" 时表示中文。主要作用市使搜索引擎能够得知本站点/页面是中文或英文，更容易被收入到数据库中。-->
    <title></title> 设置页面显示的名称
    <meta charset="utf-8" /> 设置页面的字符集
    <!-- http-equiv 告知浏览器的行为 -->
    <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 设置页面的字符集
        <meta http-equiv="refresh" content="5;url=https://www.baidu.com" /> 设置5S后自动跳转到目标网站
        <meta http-equiv="refresh" content="5" /> 设置浏览器5s刷新一次 
    <!-- name 属性告知浏览器相应的内容例如关键字，描述内容 -->
     <meta name="keywords" content="关键字1，关键字2" /> 设置网站的关键字，多个关键字之间用逗号分隔。
     <meta name="desription" content="描述内容" /> 设置网站的描述

Link 表签用于定义两个文档之间的连接关系
<!--
常用属性：
	rel="表示文档与被连接文档之间的关系"
	type="被链接文档的类型" 具体可参考:https://www.w3school.com.cn/media/media_mimeref.asp
	href="被链接文档的地址"
-->
<link rel="icon" type="" href="" /> 加载显示标题的图标
<link rel="stylesheet" type="text/css" href="" /> 引入外部文件加载CSS样式

<!--直接加载CSS样式-->
<style>
	<!--CSS样式内容-->
</style> 

<!--直接加载JS脚本-->
<script>
	<!--JS脚本内容-->
</script>

</head>

4. Body标签中常用标签

4.1 文本格式标签

<P></P>
<!-- 段落标签
	常用属性：align 控制段落对齐方式： left 默认居左、center 居中、right 居右
			title 设置段落标题，只在鼠标移动到该段落时显示
-->

<b></b> <!-- 加粗标签：单纯加粗 -->
<strong></strong> <!-- 加粗标签：强调意思 -->
<i></i> <!-- 斜体标签 -->
<em></em> <!-- 斜体效果 -->
<br /> 换行标签
<hr /> 水平标签
<!--
	常用属性：
	align 对齐方式(默认居中)
	width 水平线的长度,百分比及像素都可以
	size 水平线的高度
	color 水平线的颜色
-->
<u></u> 下划线标签
<del></del> 删除线标签
<hn></hn> n表示1-6 定义不同级别的标题,H1字体最大,H5字体最小
<bdo></bdo> 设置文本显示方向的标签 
<!-- 属性: dir=ltr/rtl ltr: left to right(从左到右)l: right to left(从右到左) 
<p><bdo dir="rtl">abcdefg</bdo></p> ====> abcdefg
-->
<sub></sub> 定义下标的标签
<sup></sup> 定义上标的标签
<!--
[注] 上面两个标签包括的是要上或下标的内容如
H<sub>2</sub>O
10<sup>2</sup>
-->
<detalis></detalis> 详细信息展现标签,需要搭配summary标签定义展示的标题,详细信息可在标签内部使用p标签来定义
<summary></summary> 为detalis标签定义展示的标题
<dialog></dialog> 定义对话框或者其他可交互式的控件 单独无交互功能,在Chrome中需要设置open = "true" 才支持
<pre></pre> 原格式输出标签 
[注] 若编辑器中显示的效果和浏览器中的效果不一样,需要用记事本打开编辑
<figure></figure> 用于对元素的组合使用作为一个独立的整体,多用于图片和图片描述的组合
<figcaption></figcaption> 用于将标题和<figure>标签相互关联,用于显示描述信息
<mark></mark> 用于标记或突出显示的文本
<small></small> 定义小号字体
<ins></ins> 定义已经被插入文档中的文本,与 <del> 一同使用，来描述文档中的更新和修正。

4.2 布局标签(无实际意义)

<div></div> 无意义的块级标签
<span></span> 无意义的行内元素
<!--行内元素和块状元素的一个重要区别就是行内元素无法设置width,heigh属性)-->
<header></header> 定义网页头部
<footer></footer> 定义网页底部
<nav></nav> 定义网页导航
<aside></aside> 定义网页侧边栏
<section></section> 定义一个区块
<article></article> 定义独立内容
<address></address> 定义地址
<center></center> 居中HTML5不推荐使用

4.3 列表标签

定义无序列表
<ul> 
    <!-- 属性:type 规定列表中使用的标记类型
		 值  :disc 默认实心圆
			  circle 空心圆
			  none 符号不显示
			  square 方块
	-->
</ul>

定义有序列表
<ol>
    <!-- 
	属性: reversed 倒叙
		 start 规定有序列表起始值
		 type 规定在列表中使用的标记类型
		 1 表示项目使用数字标号(1,2,3,4...)
		 a 表示项目使用小写字母标号(a,b,c,d...)
		 A 表示项目使用大写字母标号(A,B,C,D...)
		 i 表示项目使用小写罗马数字标号
		 I 表示项目使用大写罗马数字标号
	-->
</ol>
<li></li> 用于ul或者ol中定义列表项

定义定义列表
<dl></dl> 定义定义列表,搭配<dt>和<dd>使用
<dt></dt> 定义一个定义列表中的项目
<dd></dd> 定义一个定义列表对项目的描述

4.4 超链接标签

<a></a> 定义一个超链接
<!--	
常用属性:
1.target: 窗口打开方式
值:
_blank 在新窗口打开被链接的文档
_self 在当前窗口打开链接的文档
_top 在框架的顶部打开被链接的文档(在整个窗口打开被链接的文档)
2.href: 页面跳转的地址
[注]对于路径作为跳转地址
相对路径:
	相对于自身进行查找,在跳转时不需要添加协议
	./ 当前目录
	../ 上级目录
绝对路径:
	绝对路径要从系统的根目录进行查找,需要添加对应的协议
-->

锚点
使用<a></a>标签来定义锚点,在页面中快速定位内容
实现:
	1.在需要快速查找的内容位置定义一个a标签,并使用id属性设置锚点
	2.在需要跳转的a标签href属性的最后添加#后面跟描点名称来来实现快速定位

4.5 多媒体标签

4.5.1 progress 标签

<progress></progress> 进度条标签
<!-- 需要配合属性:
	min 最小值
	max 最大值
	value 当前值
-->

效果:

4.5.2 meter 标签

<meter></meter> 警示条标签
<!-- 需要配合属性
	min 最小值
	max 最大值
	low 警告的最小值
	hight 警告的最大值
	optimum 良好值
	value 当前值
-->
[注]默认的min和max值分别为0和1,除非当前值在此范围内,不然都要重新设置范围

效果:

4.5.3 img 标签

<img /> 定义图像标签
<!-- 常用属性:
	scr 设置图像的路径
	[注]若使用绝对路径,建议加上对应的协议
	width 设置图像的宽度
	height 设置图像的高度
	title 设施图片标题,鼠标移动时会显示
	alt 设置对该图片的文本描述,不显示但可以被阅读器所识别
	[注]图像的宽度和高度同时设置会导致图像不是等比例放缩,建议只设置高或宽确保图像等比例放缩
	ismap 将鼠标的点击左边传输到服务器
	[注]只有在 <img> 元素是一个拥有有效 href 属性的 <a> 元素的后代元素的情况下(img 标签嵌套在 a 标签中且 a 标签拥有有效		href，这个属性才会被允许使用。
	usemap 用于实现图像映射(带有可点击区域的图像),需要搭配 map 标签使用
	[注]如果 <img> 元素是 <a> 或 <button> 元素的后代元素则不能使用这个属性。
-->

4.5.4 map 标签

<map></map> 定义图像映射
属性: name
值:自定义
属性: id
值: 自定义
具体使用:给name或id属性赋值,在 img 标签中设置 usemap 属性值并通过#来查找对应的name或id属性,建立映射关系
[注]map标签需要搭配area标签确定具体的映射区域

4.5.5 area 标签

<area /> 定义图像映射中的区域
<!-- 常用属性
	shape 定义区域的形状:
	rect 矩形;ircle 圆;poly 多边形;default 整张图
	coords 定义区域的坐标
	矩形:左上和右下左边坐标;圆:设置圆心点和半径;多边形:设置多个坐标点围成多边形
	href 点击区域跳转的目标
	target 打开的方式
-->

图像映射具体代码:

<img src="" usemap="#test1" />
<map name="test1">
	<area shap="rect" coords="20,20,30,30" href="" target="_blank">
</map>

4.5.6 audio 标签

<audio></audio> 加载音频
<!-- 常用属性
	autoplay 自动播放
	controls 播放控件 必加
	src 声音地址
	loop 循环播放
	preload 提前加载
-->

4.5.7 video 标签

<video></video> 加载视频
<!-- 常用属性
	src 视频地址
	controls 播放控件
	height 视频高度
	width 视频宽度
	poster 定义视频封面
	autoplay 自动播放
-->
<source />标签可以搭配 video 标签指定不同类型的相同的资源
常用属性:
src:指明资源的地址
type:指明资源的类型,参考MIME

4.6表格标签

<table></table> 定义一个表格
<!-- 常用属性:
	border 设置表格的边框大小
	align 设置表格位置 left center right
	width 设置表格的宽度
	height 设置表格的高度
	background 设置表格的背景图片
	bgcolor 设置表格的背景颜色
	bordercolor 设置表格的边框颜色
	cellspacing 单元格之间的间距
	cellpadding 单元格内容和单元格边界的间距
-->
<!-- 以下标签嵌套在 table 标签内 -->
<caption></caption> 定义表格的标题
<tr></tr> 定义表格中的一行
<!-- 常用属性:
	height 设置行高
	align 设置行内容对齐方式 left right center
	valign 设置行内容垂直对齐方式 top middle bottom
	bgcolor 行的背景颜色
-->
<td></td> 定义表格中的一个单元格
<!-- 常用属性:
	width / height 设置宽/高
	align 设置内容对齐方式
	valign 设置垂直对齐方式
	bgcolor 单元格的背景色
	colspan 设置单元格跨列合并
	rowspan 设置单元格跨行合并
-->
<th></th> 定义表格内的表头元素,默认呈现居中加粗效果

[注]关于单元格跨行/列合并的代码和效果

    <table border="1px" align="center">
        <tr>
            <td colspan="2">1111</td>
            <!-- <td>2222</td> -->
            <td>3333</td>
        </tr>
        <tr>
            <td rowspan="2">1111</td>
            <td>2222</td>
            <td>3333</td>
        </tr>
        <tr>
            <!-- <td>1111</td> -->
            <td>2222</td>
            <td>3333</td>
        </tr>
    </table>

效果图:

<!-- 表格布局标签 -->
<thead></thead> 设置表格头部
<tbody></tbody> 设置表格主题内容
<tfoot></tfoot> 设置表格的底部

4.7 表单标签

4.7.1 Form表单域

<form></form> 定义一个用户可输入并提交的表单域
<!-- 必须属性 -->
action 数据提交到某个指定页面
method 数据提交方式
	get 适用于数据量少的提交,提交的数据以参数的形式出现在URL中
	post 使用于数据量大的提交,数据不会直接显示只在http头中显示

<!-- form表单相关属性 -->
<input /> 定义一个表单输入元素(控件)
<!-- 必须属性
	name 定义表单项的名称
	value 定义此表单项的默认值
	type 代表一个输入域的显示方式(输入型,选择型,点击型)
	type的取值:
	type="text"普通文本域
	type="password" 密码域
	type="radio" 单选 
	[注]如果要实现单选name的值需要保持一致才会产生排斥效果
	type="checkbox" 复选框 
	[注]复选框实现时,name的值必须加中括号,比如 name="hobby[]"代表一组数据
	type="file" 文件选取表单
	type="reset" 重置按钮 清空表单信息还原默认状态
	type="hidden" 代表隐藏域 可以用来传输一些隐藏的信息到服务器中
	type="image" 使用图片俩显示提交按钮,使用src属性指定图片位置,类似于img标签
	type="button" 普通按钮(给JS使用)
	type="submit" 提交按钮 把信息传输到服务器,可以使用value属性来显示提交按钮上的文字信息
-->
<button></button> 提交按钮
属性:type
值:submit 提交按钮;button 没有意义的按钮
<label></label> 为input元素定义标注(绑定元素)
实现绑定元素:
	1.直接将内容和input标签包含在一块
	2.在lable标签中定义一个for属性,在input标签定义一个id属性,两个属性值相同即可实现关联
<!--
[例1]:
<label>Do you like peas?
  <input type="checkbox" name="peas">
</label>
[例2]:
<label for="peas">Do you like peas?</label>
<input type="checkbox" id="peas">
-->
[注]将一个 <label> 和一个 <input> 元素相关联主要有这些优点：
1.标签文本不仅与其相应的文本输入元素在视觉上相关联，程序中也是如此。 这意味着，当用户聚焦到这个表单输入元素时，屏幕阅读器可以读出标签，让使用辅助技术的用户更容易理解应输入什么数据。
2.你可以点击关联的标签来聚焦或者激活这个输入元素，就像直接点击输入元素一样。这扩大了元素的可点击区域，让包括使用触屏设备在内的用户更容易激活这个元素。
<textarea></textarea> 多行文本输入域
    name 为多行文本输入域定义名称
    rows 定义多行文本输入域默认显示的行数
    cols 定义多行文本输入域默认显示的列数
    注意:textarea 没有value属性，获取的只是两个标签中的内容,默认显示的也是标签中的内容
<select></select> 定义下拉列表,需要搭配 option 标签和 optgroup 标签
    name 为该下拉列表定义的名称
<option></option> 为下拉列表定义列表项
    value 为该列表项定义默认值
<!-- 如果列表项中没有设置value属性，那么点击提交时，将获取 option 标签中间的内容，若设置则获取的时 value 值-->
<optgroup></optgroup> option 分组标签,为下拉列表定义分组
    lable 定义分组的名称
<fieldset></fieldset> 将 form 表单内的相关元素进行分组,可以搭配 legend 标签
<legend></legend> 为 fieldset 标签定义分组的标题
<datalist></datalist> 定义可选数列表,通过option标签定义备选项

可选数据列表代码实现

<form>
    <input type="text" name="" value="" list="data">
    <datalist id="data"> <!--通过定义id属性和input标签中的list属性将两者进行关联 -->
    	<option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
    </datalist>
</form>

[注] 表单分离技术

为了排版的方便,在H5中表单标签允许脱离 form 表单之外,但是要现实提交需要满足一下两个条件:

1.为form标签添加id属性,属性值自定义

2.为脱离表单的标签各自定义一个form属性并且值和(1)中id属性值相同

代码实现

    <form id="myform" action="" method="get"></form>
    <input type="text" name="user" id="" form="myform" />
    <input type="submit" value="提交" form="myform" />

4.7.2 表单相关属性

1.checked 实现单选框和复选框的默认选择 用于input标签中
2.selected 为下拉列表定义默认选中的选项 用于option标签中
min 用于设置表单的最小值（适用于数值类型的表单 number range）
max 用于设置表单的最大值（适用于数值类型的表单 number range）
readonly 只读 输入域可以选择，但无法修改
disabled 禁用 输入域无法获取焦点，无法选择，以灰色显示
autofocus 自动获取焦点属性
placeholder 表单信息提示，用于代替表单中value属性并且设定的默认值不会随表单的提交而提交
required 强制用户必须为该表单赋值否则出现提示信息
multiple 设定当前表单允许同时选中多个，适用于input[type=file]
	[注]如果要实现多选，那么必须要在name属性后加[]表示一个数组
pattern 用于自定义验证规则（需要配合正则表达式）
step 设定跳过的数字或者设定2个数值之间的间隔（数值表单中）
novalidate 取消表单验证
formaction 用于在提交按钮中修改当前表单的提交页面
formmethod 用于在提交按钮中修改当前表单的提交方式
formenctype 用于在提交按钮中修改当前表单的提交数据编码类型
formnovalidate 用于在提交按钮中取消当前的表单验证
tabindex tab建切换索引属性

4.7.3 新增表单类型

新增表单类型 type值等于

4.7.3.1 date 标签

标签设置日期选取表单

4.7.3.2 time 标签

标签设置时间选取表单

4.7.3.3 week 标签

标签设置周选取表单

4.7.3.4 month 标签

标签设置月份选取表单

4.7.3.5 datetime-local 标签

标签设置完整日期选取表单

4.7.3.6 email 标签

标签设置当前表单的验证方式为email验证

4.7.3.7 url 标签

标签设置当前表单的验证方式为url验证

4.7.3.8 number 标签

标签设置当前表单的验证方式为数值验证

min: 设置初始值

max: 设置终止值

4.7.3.9 range 标签

标签设置当前表单的验证方式必须在指定范围内

min: 设置下限

max: 设置上限

4.7.3.10 search 标签

标签设置当前表单为搜索表单

4.7.3.11 color 标签

标签设置当前表单为颜色选取

4.7.3.12 tel 标签

标签设置当前表单验证方式为电话号码

5. 全局属性

ConteEditable 内容可编辑属性
- 设定该属性的内容允许在页面中直接修改
- 页面中的内容修改只是临时性的修改
designMode 页面可编辑属性(标签无法使用,只能用于JS中)

==[注]==该属性不是任何标签的属性,而是文档属性,如果文档设置该属性为on,则页面中的所有元素均可以编辑
```
<script>
    document.designMode='on';
</script>
```

6. 框架属性

<iframe></iframe> 在页面中开辟一块空间链接一个子页面
属性:
	src:引入子页面的地址
	width:设置宽度
	height: 设置高度
<frameset></frameset> 代表body标签定义框架页，并且框架将会分为多少行或者多少列
属性:
	cols:定义框架页含有都多少列和列的大小（每个值使用逗号分隔，值为像素或者百分比）
	rows:定义框架页含有都多少行和行的大小
<frame></frame>
属性:
	src:定义内容的地址
	name:为每一个框架也定义一个名称（在一个框架也链接到另一个框架页时使用）

智者不ru爱河

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记

HTML学习笔记文章目录HTML学习笔记1. HTML介绍2. HTML主体结构3. Head标签中常用标签4. Body标签中常用标签4.1 文本格式标签4.2 布局标签(无实际意义)4.3 列表标签4.4 超链接标签4.5 多媒体标签4.5.1 progress 标签4.5.2 meter 标签4.5.3 img 标签4.5.4 map 标签4.5.5 area 标签4.5.6 audio 标签4.5.7 video 标签4.6表格标签4.7 表单标签4.7.1 Form表单域4.7.2 表单相关属
复制链接

扫一扫