HTML学习.阶段1

`流年づ

已于 2023-03-27 18:52:37 修改

阅读量334

点赞数

分类专栏： HTML学习文章标签： html javascript 前端

于 2022-01-03 01:04:54 首次发布

本文链接：https://blog.csdn.net/qq_63792137/article/details/122269777

版权

HTML学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML学习目录·阶段1

HTML简介
HTML开发工具
HTML文档结构
标签学习
超链接
- 基础
- 锚点链接

HTML简介

HTML(Hypertext Markup Language)超文本标记语言，是一种组织语言的方式，将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便，多用于页面的结构形式中。

超出文本限制（文字，图片，声音，多媒体等形式）
超级链接文本（从一个文件跳跃到另一个文件）

HTML开发工具

vscode：历史悠久，操作简单
安装插件

Auto RenameTag[方便标签的输入与更改]
Chinese (Simplified)(简体中文)Language Pack for Visual Studio[汉化vs]
CSS Peek
open in browser

HTML文档结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<!DOCTYPE html>
声明 html语言版本为html5,告诉浏览器按照html5的标准运行；
<html></html>跟标签，整个HTML中只有一个；
<html lang="en">language的缩写，语言的意思，en是英文，zh—CN是中午；
<head></head>为html的子标签，包含所有的头标签；
<meta charset="UTF-8">charse表示字符集的意思，"UTF-8"包含了几乎世界上所有的文字；
<title></title>头标签中的子标签，其中间内容显示在标题栏（位于窗口最顶部）中；
<body></body>为html子标签，包含所有的文本，图片等信息内容，是网页的主体部分。

标签学习

标签包括单标签和双标签

文本格式标签

作用	标签
加粗	<strong>;文本</strong>或<b>文本</b>
倾斜	<em>文本<em>或<i>文本<i>
删除线	<del>文本</del>或<s>文本</s>
下划线	<ins>文本<ins>或<u>文本</u>

<div>和<span>没有语义，只是一个盒子，用来装内容
<div>(division)分割，分区；<span>跨度，跨距

标题标签

<h1>一级标题<h1>
<h2>二级标题<h2>
…

一级标题

二级标题
...

标题拢共6级，即h1~h6.

段落标签

换行标签

换行内容<br/>

注释标签

<- -注释内容- ->

标签指示简称或缩写

<abbr title=“缩写词全称”>缩写词（例：www）</abbr>

上标：<sup>内容<sup>(例：2^内容a)
下标：<sub>内容<sub>(例：5_内容b)

特殊转义符

详见。

图像标签

<img src=“图片路径” />

图片包含属性

属性	属性值	属性说明
alt	文本	图像不能显示时，文本代替
title	文本	将鼠标放到图片上，提示文本
width	像素	设置图宽
height	像素	设置图高
border	像素	设置图像边框粗细

图片路径问题

图片的磁盘路径斜杠使用：右斜杠"\“，而图片的网络路径使用左斜杠”/"
路径标识

$\color{olive}{相对路径}$

以文档所在位置为准
详见

$\color{olive}{绝对路径}$

绝对路径就是从盘符开始一级一级的往下找，直到找到那个图片，根目录的方式
网络图片路径右击寻找复制粘贴即可

超链接

基础

<a href=“跳转目标” target=“目标窗口弹出方式”>文本或图像</a>
<a>（anchor）锚

外部链接 http://…
内部链接直接输入名称即可
空连接 <a href=“#”>文本或图像</a>
下载链接

<a href=“文件路径”>点击下载</a>
<a href=“文件路径” download=“文件名”>点击下载</a>
txt,png,jpg等这些浏览器支持直接打开的文件是不会执行下载任务的，而是会直接打开文件，这个时候就需要给a标签添加一个属性“download”；

href：用于指定连接的url地址（必须属性）当标签为href属性时，便有超链接的能力
target：用于指定链接页面的打开方式，其中 $\color{red}{-self}$ 为默认值（当前页面打开）， $\color{red}{-blank}$ 在新的窗口打开。