HTML语法规范与标签(二)


网络386 阅0 评

一、HTML语法规范

1.基本语法概述

  1.HTML标签是由尖括号包围的关键词,例如<html>
  2.HTML标签通常是成对出现的,例如<html>和</html>,我们称为双标签。标签中第一个标签是开始标签,第二个标签是结束标签。
  3.有些特殊标签必须是单个标签(极少情况),例如<br />,我们称为单标签。

2.标签关系

双标签可以分为两类:包含关系和并列关系
包含关系:

<head>
    <title> </title>
</head>...

并列关系:

<head> </head>
<body> </body>

Test
Test

二、HTML基本结构标签

1.第一个HTML

 每个网页都会有一个基本的结构标签(也称为骨架标签),页面内容也是在这些基本标签上书写。

标签名定义说明
<html></html>HTML标签页面最大的标签,我们称为根标签
<head></head>文档的头部注意在head标签中我们必须要设置的标签是title
<title></title>文档的标题让页面拥有一个属于自己的网页标题
<body></body>文档的主体元素包含文档所有内容,页面内容基本都是放在body里面的

第一个HTML网页

<html>
  <head>
    <title>我的第一个页面</title>
  </head>
  <body>
    你我之间,黑马洗练,月薪过万,一飞冲天!
  </body>
</html>

2.文档类型声明标签

 <!DOCTYPE>文档类型声明,作用就是告诉浏览器使用哪种HTML版本来显示网页

<!DOCTYPE html>

  这句话的意思讲就是:当前页面采取的是HTML5版本来显示网页。
注意:
  1.<!DOCTYPE>声明位于文档的最前面的位置,处于<html>标签之前。
  2.<!DOCTYPE>不是一个HTML标签,它是文档类型声明标签

3.lang语言种类

  用来定义当前文档显示的语言。
  1.en定义语言为英文。
  2.zh-CN定义语言为中文
  其实对于文档显示来说,定义成en的文档也可以显示中文,定义成zh-CN的文档也可以显示英文。这个属性对浏览器和搜索引擎(百度、谷歌等)还是有作用的。

4.字符集

  字符集(Character set)是多个字符的集合。以便于计算机能够识别和存储各种文字。
  在<head>标签内,可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。

<meta charset="UTF-8" />

charset常用的值:GB2312BIG5GBKUTF-8,其中UTF-8也被称为万国码,基本包含了全世界所有国家需要用到的字符。

三、HTML常用标签

1.标题标签

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

<h1>我是一级标题</h1>

标签语义: 作为标题使用,并依据重要性递减。
特点:
  1.加了标题的文字会变得加粗。字号也会一次变大。
  2.一个标题独占一行。

2.段落和换行标签

  标签语义: 可以把HTML文档分割为若干段落。

<p>我是一个段落标签</p>

特点:
  1.文本在一个段落中会根据浏览器窗口大小自动换行。
  2.段落与段落之间有空隙。

标签语义: 强制换行。

<br />

特点:
  1.<br />是一个单标签。
  2.<br />标签只是简单的开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距。

3.文本格式化标签

  标签语义:突出重要性,比普通文字更重要。

语义标签说明
加粗<strong></strong><b></b>更推荐使用<strong>
倾斜<em></em>或<i></i>更推荐使用<em>
删除线<del></del><s></s>更推荐使用<del>
下划线<ins></ins<u></u>翁推荐使用<ins>

4.<div><span>标签

  <div<span>是没有语义的,他们就是一个盒子,用来装内容的。

<div>这是头部</div>
<span>今日价格</span>

特点:
  1.<div></div>标签用来布局,但是现在一行只能放一个<div></div>
  2.<span></span>标签用来布局,一行上可以放多个<span></span>

5.图像标签

<img scr="图像URL" />

scr<img>标签的必须属性,它用于指定图像文件的路径和文件名。
所谓属性:简单理解就是这个图像标签的特性。
图像标签的其他属性:

属性属性值说明
scr图片路径必须属性
alt文本替换文本,图像不能显示的文字
title文本提示文本,鼠标放到图像上显示的文字
width像素设置图像的宽的
height像素设置图像的高度
border像素设置图像边框的粗细

图像标签注意:
  1.图像标签可以拥有多个属性,必须标签名的后面。
  2.属性之间不分先后顺序,标签名与属性、属性与属性之间均与空格分开。
  3.属性采用键值对的格式,即key="value"的格式,属性="属性值"。

6.路径问题

路径分为两类: 相对路径和绝对路径。
重点学习相对路径:

相对路径分类符号说明
同一级路径 文件位于html文件同一级
下一级路径/文件位于html文件下一级
上一级路径../文件位于html文件上一级

7.超链接标签

1.链接语法格式

<a href="跳转目标" target="目标弹出方式">内容</a>

注意: tarlget用于指定链接页面打开方式,其中_self为默认值,_blank为在新窗口打开方式。
2.链接的分类
(1)外部链接:链接地址一般为具体的网站地址
(2)内部链接:网站内部页面之间的相互链接,直接链接内部页面名称即可。
(3)空链接:如果没有确定链接目标时,链接地址填写#
(4)下载链接:如果href里面地址是一个文件或压缩包,会下载这个文件。
(5)网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接。
(6)锚点链接:点我们点击链接,可以快速定位到页面中的某个位置。
$在链接文本的href属性中,设置属性值为#名字的形式。
$找到目标位置标签,里面添加一个id属性=刚才的名字。

最后更新 2023-02-28
评论 ( 0 )
OωO
隐私评论