标签的语义化及标题标签|学习笔记

简介: 快速学习标签的语义化及标题标签

开发者学堂课程【HTML 入门与实战标签的语义化及标题标签 】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/593


标签的语义化及标题标签

 

内容简介:

一、HTML标签的语义化

       1. 存在语义化标签的原因

      2. 遵循的原则

二、HTML标签

       1.  排版标签

 

一、HTML标签的语义化

1.HTML标签的语义化:是指标签的含义

存在语义化标签的原因:

      · 方便代码的阅读和维护。

      · 同时让浏览器或是网络爬虫可以很好地解析,从而更好分析其中的内容

      · 使用语义化标签会具有更好地搜索引擎优化核心,合适的地方给一个最为合理的标签。

 

语义是否良好,当我们去掉CSS之后,网页结构依然组织有序,并且有良好的可读性。

2.遵循的原则:先确定语义的HTML,再选合适的CSS

二、HTML

首先HTMLCSS是两种完全不同的语言,

1. 排版标签

排版标签主要和CSS搭配使用,显示网页结构的标签,是网页布局最常用的标签。

· 标题标签(熟记)

单词缩写:head 头部、标题

为了使网页更具有语义化,经常会在页面中用到标题标签,HTML提供了6个等级的标题,即<h1><h2><h3><h4><h5><h6>

标题标签语义: 作为标题使用,并且依据重要性递减。

其基本语法格式如下:

<hn>  标题文本  </hn>

 

输入格式如下:

image.png 

<h7>显示原来的等级,所以,标题最小等级为<h6>

               在浏览器中打开如下图:

image.png

相关文章
|
3月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
62 13
|
5月前
|
Kubernetes 算法 调度
k8s 标签-2
k8s 标签-2
39 2
|
7月前
with标签
with标签
49 2
|
7月前
|
Python
for...in...标签
for...in...标签。
29 1
|
7月前
|
前端开发
HTML图片音频视频标签、超链接标签、列表标签和布局标签示例
HTML图片音频视频标签、超链接标签、列表标签和布局标签示例
95 0
HTML的基本知识(二)——段落标签、强制换行标签、水平线标签、图片标签
HTML的基本知识(二)——段落标签、强制换行标签、水平线标签、图片标签
|
前端开发
HTML基础教程7——表格标签和语义化标签
表格用<table>标签实现,内部主要有<tr>和<td>标签,其中表示行,表示列,属性border的值表示表格边框线的粗细,属性cellspacing的值表示内框和外框之间的距离,属性cellpadding的值表示内框的大小。
HTML基础教程7——表格标签和语义化标签
|
图计算 开发者
打标签_生成标签| 学习笔记
快速学习打标签_生成标签
打标签_生成标签| 学习笔记
|
分布式计算 图计算 Spark
打标签_完成| 学习笔记
快速学习打标签_完成
打标签_完成| 学习笔记
|
数据采集 前端开发 开发者
标签的语义化及标题标签|学习笔记
快速学习标签的语义化及标题标签
112 0
标签的语义化及标题标签|学习笔记