前端学习基础-HTML

7_lining

已于 2022-06-22 21:17:45 修改

阅读量121

点赞数

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

于 2022-06-21 21:23:00 首次发布

本文链接：https://blog.csdn.net/weixin_56213139/article/details/125398561

版权

前端基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML学习笔记

本笔记参考了pink老师的前端基础教学视频提炼并整合，视频链接

HTML常用标签

文档类型声明标签，采用html5版本显示页面
```
<!DOCTYPE html>
```
语言标签(含有语言标签可以让浏览器翻译为该语言，但不翻译的话所有语言都可以正常显示)
```
<html lang="en"> 
```
中文是zh-CN
字符集

在<head>标签内，通过<meta>标签的charset属性规定html文件应该使用哪种字符编码
```
<meta charset="UTF-8">
```
UTF-8为万国码
标题标签

每个标签独占一行
```
<h1>我是一级标题</h1>
```
段落标签

vscode中使用alt+z来自动换行

文本在一个段落中会根据浏览器窗口的大小自动换行

段落和段落中会有较大的空隙
```
<p>内容</p>
```
换行标签(break)

单目标签，在一段中强制某个区域后的文字换行显示
```
<br />
```
与<p>的明显区别就是没有大的空隙

HTML文本格式化标签

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

shift+alt+下方向键：可以直接复制这一行内容到下一行

无语义盒子标签

盒子用来装内容

<div>这是头部</div>
<span>今日价格</span>

divison指分割分区。span指跨度跨距

<div>标签用来布局，一个独占一行，大盒子</div>
<span>不用占一行，可以有多个</span>

图像标签和路径

<img src="img.jpg"/>

图像标签的其他属性

属性	属性值	说明
src	图片路径	必须属性
alt	文本	如果图片无法显示，则代替图片的文字
title	文本	提示文本，鼠标放在图片上显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

<img src="img.jpg" alt="我是上海的" title="上海"/>

宽度和高度一般修改一个，否则会变形。修改一个另一个会等比例改变。

属性之间以空格分开

边框一般在css中设定

目录文件夹：即为普通文件夹，但是存放了页面制作的相关素材

实际中会新建一个文件夹来存放这些图片

相对路径：以文件所在位置为参考，建立出的目录路径。图片相对于HTML文件所在的位置

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

../的作用可以看作是让他回到上一级

绝对路径：在计算机中直接的位置

一般引用网页的直接图片地址

超链接标签

1.语法格式

anchor n.锚

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

herf用于指定链接目标的url地址，为必须属性

target指定链接页面的打开方式，其中_self为默认在原页面打开替换，_blank为重新打开一个页面

2.链接分类

1.外部链接: 例如

<a href="http:// www.baidu.com "> 百度</a>

2.内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如

<a href="index.html"> 首页 </a>

3.空链接: 如果当时没有确定链接目标时，可以先用一个空的来代替

<a href="#"> 首页 </a >

4.下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件

<a href="img.jpg"></a>

5.网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.

6.锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.

在链接文本的 href 属性中，设置属性值为 #名字的形式，如

<a href="#two"> 第2集 </a>

找到目标位置标签，里面添加一个 id 属性 = 刚才的名字 ，如：

<h3 id="two">第2集介绍</h3>

HTML 中的注释和特殊字符

1.HTML中的注释以“”结束。

注释标签里面的内容是给程序猿看的, 这个代码是不执行不显示到页面中的

可能写起来比较麻烦，直接用快捷键ctrl + /

2.在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。

记住空格、大于和小于号即可

<和>分别译为less than和greater than