HTML简介

Web标准的构成

  • 主要包括结构（Structure）、表现（presentation）和行为（behevior）三个方面
标准 说明
结构 结构用于对网页元素进行整理和分类，主要指的是HTML
表现 表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
行为 行为是指网页模型的定义与交互的缩写，主要指的是Javascript
  • Web标准提出的最佳体验方案：结构、样式、行为相分离
  • 简单理解：结构要写到HTML中，样式写到CSS中，行为写到JS中

HTML基本结构标签

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

HTML常用标签

标题标签

  • 用法
1
2
3
4
5
6
<h1>我是一级标题<h1>
<h2>我是二级标题<h2>
<h3>我是三级标题<h3>
<h4>我是四级标题<h4>
<h5>我是五级标题<h5>
<h6>我是六级标题<h6>
  • 标签语义：作为标题使用，并且依据重要性递减
  • 特点
    • 加了标题的文字会变得加粗，字号变大
    • 一个标题独占一行

段落标签

  • 用法
1
<p>我是一个段落标签</p>
  • 单词paragraph的缩写，意为段落
  • 标签语义：可以把html文档分割为若干段落
  • 特点
    • 文本在一个段落中会根据浏览器窗口的大小自动换行
    • 段落与段落之间保有空隙

换行标签

  • 用法
1
</br>
  • 单词break的缩写，意味打断，换行
  • 标签语义：强制换行
  • 特点
    • </br>是个单标签
    • </br>标签只是简单的开始新的一行，跟段落不一样，段落之间会插入一些垂直的距离

文本格式化标签

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

标签语义：突出重要性，比普通文字更加重要

div和span标签

  • 用法
1
2
<div>这是头部</div>
<span>今日价格</span>
  • 标签语义
    • div是division的缩写，表示分割，分区
    • span意为跨度、跨距
  • 特点
    • <div>标签用来布局，但是一行智能放一个<div>。 大盒子
    • <span>标签用来布局，一行上可以放多个<span>。 小盒子

图像标签用法

1
<img src="图像url">
  • img是单词image的缩写，意为图像
  • src是<img>的必须属性，它用于指定图像文件的路径和文件名。
  • 所谓属性：简单解释就是属于这个图像标签的特性
  • 图像标签的其他属性：
属性 属性值 说明
src 图片路径 必须属性
alt 文本 替换文本，图片不能正常显示时显示该文本
title 文本 提示文本，鼠标放到图像上时候悬浮显示
width 像素 设置图像的宽度
height 像素 设置图像的高度
border 像素 设置图像的边框宽度

路径用法

相对路径

  • 相对路径：以引用文件所在位置为参考基础，而建立出的目录路径
  • 简单来说：图片相对于HTML页面的位置
相对路径分类 符号 说明
同一级路径 图像文件位于HTML文件同一级，如<img src="baidu.gif">
下一级路径 / 图像文件位于HTML文件下一级，如<img src="img/baidu.gif">
上一级路径 ../ 图像文件位于HTML文件上一级，如<img src="../baidu.gif">

绝对路径

  • 绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径
  • 例如：”D:\web\img\loogo.gif”或完整的网络地址：htttp://www.itcast.cn/images/logo.gif

超链接标签

链接的语法格式

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

  • 用法：

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

  • <a>的单词为anchor，意为“锚”

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

链接分类

链接类型 说明
外部链接 例如 < a href=”http:// www.baidu.com “> 百度。
内部链接 网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href=”index.html”> 首页 。
空链接 如果当时没有确定链接目标时，< a href=”#”> 首页 。
下载链接 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
网页元素链接 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接
锚点链接 锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置。
锚点链接 在链接文本的 href 属性中，设置属性值为 #名字 的形式，如<a href="#two"> 第2集 </a>
锚点链接 找到目标位置标签，里面添加一个 id 属性 = 刚才的名字 ，如：<h3 id="two">第2集介绍</h3>

注释

  • html中的中的注释以“”结束。
  • 用法：
1
<!-- 注释语句 -->	快捷键: ctrl +	/

特殊字符

  • 重点记住空格、大于号、小于号这三个即可（MD中也是这个）

image-20211203161730650