html基础标签-CSDN博客

本文链接：https://blog.csdn.net/weixin_73807171/article/details/132027273

本文介绍了HTML的基础知识，包括HTML是一种超文本标记语言，HTML5的基本文档格式，以及一些常用的基础和进阶标签，如加粗、倾斜、链接和图片标签等。此外，还提到了路径处理、锚点、滚动标签和div布局的概念。文章特别强调了HTML在构建网页结构中的重要性。

摘要由CSDN通过智能技术生成

前端html基础标签

HTML简介
- HTML5 文档的基本格式
- - HTML基础标签
  - - HTML常用标签
    - - HTML媒体

HTML简介

1.HTML是一种超文本标记语言。
“超文本”就是指页面内可以包含图片、链接，甚至音乐、程
序等非文字元素。
2.HTML不是一种编程语言
3.HTML5 是 HTML的最新版本
常用的：WebStorm 、notepad、Ecliipse、text sublime、
Dreamweaver 等

HTML5 文档的基本格式

<!DOCTYPE html>
<!-- 版本声明 -->
<html lang="en">
    <!-- html 最外层 -->
<head>
    <!-- head 头部-->
    <meta charset="UTF-8">
    <!-- 编码方式  utf-8 全国通用的编码方式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="./img/1.ico">
    <!-- 给显示框添加logo照片 -->
    <title>html第一课</title>
    <!-- 标题 -->
</head>

HTML基础标签

加粗： <b></b> <strong></strong>
倾斜： <i></i> <em></em>
删除线: <del></del>
下划线: <ins></ins>
上标: <sup></sup>
下标： <sub></sub>
缩写： <abbr title=""></abbr>
标记： <mark></mark>
文本： <span></span>
标题： <h*>标题标签</h*> h1-h6:从大到小的标题标签
换行: <br />
字体标签： <font></font>
段落标签： <p></p>

HTML常用标签

1路径
相对路径：相对路径是指以当前文件或文件夹为基准，指定目标文件或文件夹的位置。它们通常使用相对于当前工作目录的位置来表示。相对路径不包含完整的路径，而是根据当前位置来定位文件或文件夹。
相对路径的优点是可以简化文件路径的表示。
绝对路径:绝对路径是一个文件或目录在文件系统中的完整路径，从根目录开始一直到目标文件或目录的路径。它包含了所有必要的信息，可以准确地定位到一个文件或目录。

Window 对斜线进行了处理，所以/和\都能够引入成功，但是网络地
址只能写斜线。
2图片标签
<img>
属性：
src：引入图片地址
alt：替换文本
tittle：提示信息
width：宽
height：高
3链接标签

<a href="url"> </a>

属性：
href 地址
target 目标位置
target属性值
_black:新窗口打开
new：新窗口打开
_top：顶级窗口打开
a标签的作用

1打开外部文件
<a href="http://www.baidu.com">百度一下</a>
2打开内部文件
<a href="test1.html">test1 文件</a>
3打开一张图片
<a href="images/tulips.jpg">打开一张图片</a>
4书写简单的 javascript
<a href="javascript:alert('这是一个弹框！')">提示框</a>
5锚点 ①创建锚点
<a name="top"></a>
<a id="top2"></a>
②引用锚点
<a href='#top'>返回顶部</a>

4 滚动标签
marquee 滚动字幕
属性：
direction：方向（left、right）
behavior：滚动方式（scroll、slide、 alternate）
scrollamount：速度，值是正数默认为 6
scrolldelay：时间，值是正数默认为 0。单位毫秒
οnmοuseοver=“stop()” ：鼠标悬浮停止移动
οnmοuseοut=“start()”：鼠标离开开始移动
5水平线
hr属性
width: 长度（px|%）
align 水平位置(left 左|center 中|right 右）
color ：线的颜色
size：粗细（px）
6div快标签
div 元素是通用的块元素，内部可以包含其他各种元素包括其他 div
元素；并且可以通过 CSS 设置样式来完成复杂的页面的布局通过一
个简单的实例了解 div 布局是如何实现的