HTML常用标签以及少部分HTML5新增标签学习记录

这篇博客简单记录一下我作为一个小白时最开始学习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 设置播放窗口的高度

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值