HTML（1）

最新推荐文章于 2023-09-19 12:43:50 发布

oopslb

最新推荐文章于 2023-09-19 12:43:50 发布

阅读量116

点赞数

本文链接：https://blog.youkuaiyun.com/imzxww/article/details/110680126

版权

Web标准的构成

主要包括结构、表现和行为三个方面

标准	说明
结构	结构用于网页元素进行整理和分类，现阶段主要是HTML
表现	表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
行为	行为是指网页模型的定义以及交互的编写，现阶段主要学的是JavaScript

文档类型声明标签

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

<!DOCTYPE html >

这句代码的意思是：当前页面采取的是HTML5版本来显示网页

lang语言种类

用来定义当前文档显示的语言

1、en定义语言为英语

2、zh-CN定义语言为中文

定义为en就是英文网页，定义为zh-CN就是中文网页

这个属性对浏览器和搜索引擎有用

字符集

字符集是多个字符的集合，以便计算机能够识别和存储各种文字

用<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码

<meta charset="UTF-8">

标题标签	<h1></h1>
段落标签	<p></p>
换行标签	<br />

文本格式化标签

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

<div>和<span>标签

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

div是division的缩写，表示分割、分区。span意为跨度、跨距

特点：

1、<div>标签用来布局，但是现在一行只能放一个<div>。大盒子

2、<span>标签用来布局，一行上可以多个<span>。小盒子

图像标签和路径

1、图像标签

在HTML标签中，<img>标签用于定义HTML页面中的图像

<img src="图像URL" />

src是<img>标签的必须属性，它用于指定图像文件的路径和文件名

图像标签的其他属性：

属性	属性值	说明
alt	文本	替换文本。图像不能显示时，显示的文字
title	文本	提示文本。鼠标放在图像上，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

宽度和高度通常只设置一个，另一个自动缩放

2、路径

相对路径：举例图片相对于HTML页面的位置

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级如<img src="baidu.gif" />
下一级路径	/	图像文件位于HTML文件下一级如<img src="images/baidu.gif" />
上一级路径	../	图像文件位于HTML文件上一级如<img src="../baidu.gif" />

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

超链接标签

在HTML标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。

1、链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

属性	作用
href	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开放方式，其中_self为默认值(在当前窗口打开)，_blank在新窗口中打开方式

2、链接分类
1、外部链接，例如<a href="http://www.baidu.com">百度</a>

2、内部链接：网站内部页面之间的相互链接，直接链接内部页面即可

3、空连接

4、下载链接

5、网页元素链接

6、锚点链接：点我们点击链接，可以快速定位到页面某个位置

在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第2集</a>

找到目标标签，里面添加一个id属性=刚才的名字，如：<h3 id="two">第2集介绍</h3>