html常用知识学习

黑球啊

已于 2022-06-19 14:41:57 修改

阅读量212

点赞数

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

于 2022-06-16 23:02:28 首次发布

本文链接：https://blog.csdn.net/weixin_52563771/article/details/125324181

版权

前端学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

vscode介绍以及插件的安装

打开 Visual Studio Code，点击侧栏扩展选项
这里以安装中文插件为例，在搜索框中输入 Chinese
选择第一个 Chinese(Simplified），未安装插件则会在标签右下方显示安装二字，点击安装，等待安装完后重启 Visual Studio Code 即可。

常用插件

1、Auto Close Tag (必备)

自动闭合 HTML/XML 标签

2、Auto Rename Tag (必备)

自动完成另一侧标签的同步修改

3、HTML CSS Support (必备)

智能提示 CSS 类名以及 id

4、HTML Snippets (必备)

智能提示 HTML 标签，以及标签含义

1、创建页面（见视频演示）

2、HTML简介

HTML指超文本标记语言（Hyper Text Markup Language),用来描述网页的一种语言。是一种标记语言（markup language）。
HTML 页面也称为 HTML 文档 。HTML 文档的的后缀名必须是.html 或 .htm，浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。

超文本含义：

可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。
可以从一个文件跳转到另一个文件，与世界各地主机的文本链接（超文本链接）。

3、HTML基本知识

3.1 HTML基本语法

HTML标签是由尖括号包围的关键词 例：<a>
HTML通常是成对出现的（双标签），第一个标签为开始标签，第二个为结束标签。
有些特殊标签必须是单标签，（如<hr>为分割线单标签)

3.2 HTML标签关系

包含关系(父子关系）

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

并列关系

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

3.3 HTML基本结构标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

骨架标签说明：

标签名	定义及说明
`<html></html>`	HTML标签（页面中最大的标签，也称跟根标签）
`<head></head>`	文档的头部（其中必须设置title标签）
`<title></title>`	文档的标题（网页标题）
`<body></body>`	文档的主体（包含文档的所有内容）

4、HTML基本标签

W3Cshool HTML教程

4.1 标题标签

为了使网页更具有语义化，在页面中常会用到标题标签。
共有六种重要性依次递减的标题标签

<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>

输出为：
在这里插入图片描述

4.2 段落标签

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

在HTML标签中<p>用于定义段落，将文档分割为若干段落。

特点如下：

文本会根据网页页面大小自动换行。
段落与段落之间保有空隙。

4.3 文本格式化标签

有时文字需要设置粗体，斜体或下划线等效果，来突出重要性。

语义	标签
加粗	`<strong></strong>或<b></b>`
倾斜	`<em></em>或<i></i>`
删除线	`<del></del>或<s></s>`
下划线	`<ins></ins>或<u></u>`

4.4 div与span标签

<div>我是第一种盒子标签</div>
<span>我是第二种盒子标签</span>

两者皆为盒子标签，用于网页布局。两者都没有语义的，它们就是一个盒子，用来装内容的。
div为division的缩写，表示分割、分区
span表示跨度、跨距。

两者区别：

<div>为块级元素，包含元素会自动换行，故一行只能放一个<div>，为大盒子。
<span>为行内元素，前后内容不会换行，故一行可以放多个<span>，为小盒子。且<span>可以作为<div>的子元素。
<div>可以通过CSS来设置width、height与margin值等，而<span>标签的宽度与高度受其本身内容控制随其内容的改变而改变。

4.5 图像标签

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

<img src="图像URL">
<img src="" alt="" title="" width="" height="" border="">

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

属性	属性值以及说明
src	图片路径/必须属性
alt	文本/为图片不能显示时的文字
title	文本/提示文本，当鼠标放于图像上显示的文字
width	设置图像的宽度
height	设置图像的高度
border	设置图像的边框粗细

4.6 链接标签

<a>标签用于定义超链接，在HTML中的链接，正确的说法应该称作"锚点"。
锚点的作用简单来说就是定位，点击锚点，不仅能让我们能指向文档，还能指向页面里的特定段落，更能当作"精准链接"的便利工具。再通俗一点，它就像书籍里的目录页码或者章节，在需要到指定页面的特定内容时，锚点是最好的方法。

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

属性	作用
href（必须属性）	用于指定链接目标的URL地址，具有超链接的功能
target	用于指定链接页面的打开方式，其中_self为默认值（表示在当前窗口打开链接页面）,_ blank(表示在新窗口打开所链接页面）

4.7 换行标签以及分隔线标签

<br> //换行标签
<hr> //分割线标签

<br>标签插入一个简单的换行符。
<hr> 标签定义 HTML 页面中的主题变化（比如话题的转移），并显示为一条水平线。

<hr> 元素被用来分隔 HTML 页面中的内容（或者定义一个变化）。

4.8 列表标签

列表具有整齐、整洁、有序的特点，有利于页面的布局。

无序列表:

<ul>标签表示HTML中的无序列表，使用粗体圆点进行标记。
<li>标签用来定义列表项。

基本语法：

<ul>
	<li>Coffee</li>
	<li>Milk</li>
	<li>tea</li>
</ul>

说明：

无序列表的各个列表项没有顺序级别之分，为并列关系。
<ul></ul>中只能嵌套<li></li>标签，不能在其中输入其他标签或者文字。
<li>内部可以使用段落、换行符、图片、链接以及其他列表可以容纳任何元素

有序列表:
<ol>标签用于定义有序列表，列表项目使用数字进行标记。
<li>标签用来定义列表项。

基本语法：

<ol>
	<li>Coffee</li>
	<li>Milk</li>
	<li>tea</li>
</ol>

黑球啊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html常用知识学习

常用插件1、Auto Close Tag (必备)2、Auto Rename Tag (必备)3、HTML CSS Support (必备)4、HTML Snippets (必备)超文本含义：并列关系3.3 HTML基本结构标签骨架标签说明：W3Cshool HTML教程共有六种在大小依次减小的标题标签输出为：在HTML标签中用于定义段落，将文档分割为若干段落。特点如下：有时文字需要设置粗体，斜体或下划线等效果，来突出重要性。两者皆为盒子标签，用于网页布局。两者都没有语义的，它们就
复制链接

扫一扫