这篇博客简单记录一下我作为一个小白时最开始学习HTML的标签的一些记录和本人的一些总结等
一、HTML骨架
首先HTML有着自己的语言语法骨架格式例如,在使用vscode时编写html文件自己补全的格式
<!DOCTYPE html>
<html lang="en">
<head>
<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>Document</title>
</head>
<body>
</body>
</html>
在这里我们可以看到HTML骨架主要包含着4个主要标签他们分别是
1、html标签,它是所有HTML中标签的根节点
2、head标签,用于存放title,meta,base,style,script,link,在head标签中我们必须要设定的标签就是title
3、title标签,它是让我们的页面拥有一个属于自己的标题,也就是打开页面时页面标签的题目
4、body标签,这是页面的主体部分,用于存放所有的HTML标签,包括p,h,a,strong,img,em等标签
注:
1.<!DOCTYPE html> 这句话是告诉我们使用的HTML版本,我们使用的是html5的版本
2.<meta charset="UTF-8"> 这是字符集,utf-8是目前最常用的字符集编码方式
二、HTML标签的分类以及标签关系
在HTML页面中,带有<>符号的元素被称为HTML标签,标签就是放在<>标签符号中表示某个功能的编码命令。标签主要分为双标签和单标签。而HTML标签关系主要分为嵌套关系和并列关系。
1.双标签
<标签名>内容</标签名> 前者为开始标签,后者为结束标签,两者一同出现,如前面的例子
2.单标签
<标签名 /> 是指用一个标签符号即可完整描述某个功能的标签
3.嵌套关系
<head>
<title></title>
</head>
4.并列关系
<head></head>
<body></body>
为了美化代码,如果两个标签之间的关系是嵌套关系,子元素最好缩进一个tab键的身位。如果是并列关系,最好上下对齐。
三、HTML基础标签 (未特殊注释一般为双标签)
1.标题标签
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>
一般作为标题是用,并且依据重要性递减
2.段落标签
<p>
是HTML文档中最常见的标签,默认情况下,文本会在一个段落中会根据浏览器窗口的大小自动换行
3.水平线标签
<hr> 是一个单标签,在网页中显示默认样式的水平线
4.换行标签
<br> 同样是一个单标签,会自动换行
5.div span标签
div span是没有语义的,是我们网页布局所使用的2个主要的盒子
6.文本格式化标签
<b> ,<strong> 文字以粗体方式显示
<i>,<em>文字以斜体方式显示
<s>,<del>文字以加删除线方式显示
<u>,<ins>文字以加下划线方式显示
7.图像标签
<img src="图像URL"> 改语法中src属性用于指定图像文件的路径和文件名,是必需属性
8.连接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或者图像</a> 相当于创建了一个超链接
9.列表标签
无序列表ul <ul>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
有序列表ol <ol>
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
自定义列表dl <dl>
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
10.表格table
在HTML网页中,要想创建表格,就需要使用表格相关的标签。创建表格的基本语法格式如下:
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
11.表单form
12.input控件
<input>标签是单标签,可以通过对其中type属性的取值设置不同的形式
13.label标签
label标签用于绑定一个表单元素,当点击label标签时,被绑定的表单元素会获得输入焦点,for属性规定label与哪个表单元素绑定
14.textarea控件
通过textarea可以创建多行文本输入框
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
15.下拉菜单
可以创建一个下拉菜单列表,去选择,至少包含一对<option></option>,若在option中定义selected时当前项即为默认选中项
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
16.表单域
在HTML中,form标签被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下:
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
17.多媒体标签
audio:播放音频
<audio src="./music/See You Again.mp3"></audio>
autoplay 自动播放
controls 是否显示默认播放控件
loop 循环播放
video:播放视频
<video src="./video/movie.mp4" controls="controls"></video>
autoplay 自动播放
controls 是否显示默认播放控件
loop 循环播放
width 设置播放窗口宽度
height 设置播放窗口的高度