HTML的标签结构

HTML介绍

HTML超文本标记语言
它负责网页的三要素之中的结构
html使用标签的形式来标识网页中的不同组成部分
所谓超文本就是指超链接，使用链接可以让我们从一个页面跳转到另一个页面。

HTML的基本结构

<!DOCTYPE html>

这个是文档声明，这个是HTML5的文档声明。针对其他类型的如HTML4等可以去官网浏览

标签介绍

1.标签的格式
<标签名>封装的数据</标签名>
2.标签名大小写不敏感
3.标签拥有自己的属性
a.分为基本属性：bgcolor="red"
b.事件属性：o nclick=“alter('你好！')”
4.标签分为，单标签和双标签
a.单标签格式：<标签名/>
b.双标签格式：<标签名>封装的数据</标签名>

标签常用语法

<!-- ①标签不能交叉嵌套 -->
	正确：<div><span>早安，尚硅谷</span></div>
	错误：<div><span>早安，尚硅谷</div></span>
	<hr />

	<!-- ②标签必须正确关闭(闭合) -->
	<!-- i.有文本内容的标签： -->
	正确：<div>早安，尚硅谷</div>
	错误：<div>早安，尚硅谷
	<hr />
	
	<!-- ii.没有文本内容的标签： -->
	正确：<br />1
	错误：<br >2
	<hr />
	
	<!-- ③属性必须有值，属性值必须加引号 -->
	正确：<font color="blue">早安，尚硅谷</font>
	错误：<font color=blue>早安，尚硅谷</font>
	错误：<font color>早安，尚硅谷</font>
	<hr />
		
	<!-- ④注释不能嵌套 -->
	正确：<!-- 注释内容 --> <br/>
	错误：<!-- 注释内容 <!-- 注释内容 -->-->
	<hr />

<!DOCTYPE html>文档类型声明：作用是告诉浏览器使用的是那种HTML版本来显示网页。
<html lang="en">
en：用来定义当前文档显示的语言。
 <meta charset="UTF-8">：是多个字符的集合，以便计算机能够识别和存储各种文字。

保证不会乱码。

示例代码

<!DOCTYPE html> <!-- 声明、约束-->
<html lang="en"><!--html标签标识html的开始  lang="en"标识英文，lang="zh_CN"标识中文
                                hhtml 一般分为两部分，分别为head和body -->
<head> <!--    标识头部信息，一般包含三部分内容，title标签，css样式，js代码 -->
    <meta charset="UTF-8"> <!--    标识当前页面使用UTF-8字符集解析这个页面,防止页面乱码 -->
<!--  页面刷新效果-->
  <meta http-equiv="refresh" content="3;https://www.baidu.com"/>
<!--  页面作者-->
  <meta name="author" content="qingmu;126@qq.com" />
<!--  设置页面关键字检索-->
  <meta name="keywords" content="青木">
<!--  页面描述-->
  <meta name="description" content="马士兵教育详情页">
<!--  引入外部资源-->
  <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/icon"/>
    <title>Title</title> <!--    标识标题-->
</head>
<body> <!--body 是整个html页面显示的主体内容-->
hello world

</body>
</html>

语义化标签的作用

1.代码的可读性强清晰
2.有利于SEO（搜索引擎优化）爬虫、代码、机器人
3.方便设备解析（屏幕阅读器、盲人阅读器）

块级元素：独占一行

块元素可以写块元素和行内元素

h1、p、div

行内元素：不独占一行

行内元素可以写行内元素不可以写块级元素

input、span

盒子标签

<div>一个人独占一行</div>
<span>用来进行布局，一行上可以有多个<span></span>
是没有语义的，他们就是盒子，用来装内容的。

图像标签：用于定义HTML页面中的图像

<img src="语法规范.html">
src：照片的路径
alt：替换文本，照片不能正常显示的时候，替换的文本信息
titile：提示文本。，鼠标放到图像上的，提示文字信息。
height：高度
width：宽度
border：设置边框

图像标签需要注意：
1.图像标签拥有多个属性，必须写在img标签后面。
2.属性之间不分先后顺序，标签名和属性，属性与属性之间使用空格分开。
3.属性采用键值对的方式，即key=value的格式，

目录文件夹：就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如：html文件，图片等。
根目录：打开目录文件夹的第一层就是根目录
相对路径：以引用文件所在位置作为参考基础，而建立的目录路径
绝对路径：指的是目录下的绝对路径，直接到达目标位置，通常从盘符开始的路径

超链接标签

<a></a>
href:链接的地址
target:打开方式，_self默认值，_blank打开新的窗口

锚点连接
<a href="#two"></a>
<h3 id="two"></h3>

注释

<!--注释内容-->
空格
&nbsp;

表格的作用

用来展示和显示数据使用

<table>
    <tr>
        <td>
            单元格文字
        </td>
        <td>
            
        </td>
    </tr>
</table>

posted @ 2021-09-02 02:39 King-DA 阅读(76) 评论(0) 收藏举报

刷新页面返回顶部

King-D

king-d