一、html元素标签语义化
提到html元素的标签,第一个想到的就是标签语义化。
现在来聊聊什么是标签语义化:
它指的是使用具有明确意义的html元素的标签来组织和描述网页内容,以便更直观地表达内容的含义和结构,让标签的用途和作用更加明确。通俗来讲就是用正确的标签做正确的事情。
语义化的优点如下:
提高代码的可读性:使用语义化标签可以让开发者和阅读代码的人更容易理解网页的结构和内容。
优化搜索引擎(SEO):搜索引擎可以更准确地理解网页内容,从而提高网页在搜索结果中的排名。
增强代码维护性:清晰的结构为开发者维护和更新网页提供便利。
改善可访问性:辅助技术(如屏幕阅读器)可以更好地解析网页,为视障用户提供更好的体验。
二、创建html文件
1. 操作步骤
在桌面新建文件夹,打开文件夹或将文件夹添加到工作区。
在新建文件夹下,新建文件1.html
。
2. 分析html文档结构
一个html文档通常包含以下基本部分:
-
<!DOCTYPE html>
:文档类型声明,告诉浏览器这是一个HTML5文档。 -
<html>
:根元素,包含整个HTML文档。 -
<head>
:包含文档的元数据,如标题、字符集、样式表和脚本。 -
<title>
:定义文档的标题,显示在浏览器标签上。 -
<body>
:包含文档的可见内容。
三、html标签
html元素可以通过它们的标签分为两类:单标签(也称为空元素)和双标签(具有开始和结束标签的元素)。
下面是一些常用的标签:
-
单标签(空元素):这些元素不包含任何内容,因此没有结束标签。它们通常用于插入不包含数据的元素或行内元素。一些常见的单标签元素包括:
<br>
:换行元素,用于在文本中创建一个新行。写法:<br/>
<hr>
:水平线元素,用于在页面上绘制一条水平线。写法:<hr/>
<img>
:图像元素,用于在页面上嵌入图像;它包含src
属性来指定图像的URL。
写法:<img src="" />
<input>
:输入元素,用于创建不同类型的输入字段;它具有多个属性,如type
、name
、value
等。常规写法:<input type="" name="" value />
...... -
双标签:这些元素由开始标签和结束标签组成,它们之间可以包含文本、数据或其他html元素。例如:
<p></p>
:段落元素,用于定义文本段落。<div></div>
:文档中的一个区段或容器,用于布局和样式化页面。<span></span>
:行内元素,用于对文本的一部分进行标记和样式化。<p></p>
:段落元素,用于定义文本段落。<div></div>
:文档中的一个区段或容器,用于布局和样式化页面。<ol></ol>
:定义有序列表。<ul></ul>
:定义无序列表。<li></li>
:定义列表项。<a>...</a>
:段落元素,用于定义文本段落。<h1>...</h1>
:h1到h6 定义标题。<button>...</button>
:定义可点击按钮。
......
- 双标签也可以写成单标签的形式
例如:<span />如果span标签里不写东西,可以写成单标签形式。