【Vichy的学习日记 #1】html基础（1）

最新推荐文章于 2024-07-25 11:26:35 发布

Vichy·White

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量154

点赞数 1

文章标签： html 学习前端

本文链接：https://blog.csdn.net/stunningline/article/details/129699984

版权

*标签

1.双标签（大多数）例：<html></html>
2.单标签（少数）例：<br/>

*标签关系

1.包含关系（父子关系）例：

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

2.并列关系（兄弟关系）例：

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

*基本结构标签

<html></html> 根标签
<head></head> 文档头部
<title></title> 文档标题
<body></body> 文档主体

<!--HTML的基本骨架-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

*常用标签

标签语义
标题标签<h1> ....<h6>
重要程度递减，字号递减
段落标签<p></p>
自动换行且行之间保有空隙
换行<br/>
强制换行

*文本格式化标签

突出重要性，比普通文字更重要

<strong></strong> 加粗
<em></em> 倾斜
<del></del>删除线
<ins></ins> 下划线

*`<div></div>&<span></span>`

无语义，相当于一个用来装内容的盒子
<div>大盒子，一行只能有一个</div>
<span>小盒子，一行能有多个</span>

*图像

格式：<img src="images/2.PNG" />
src（必须属性）：路径和文件名
其他属性：

alt 替换文本：图像不能显示的时候出现的文字
title 提示文本：鼠标移动到图像上的时候出现的文字
width：宽
height：高
border：边框粗细
（3，4，5中单位均为像素）
多个属性均写在img后面，不分先后，格式为key = “value”
例：

<img src="image/2.jpg" width="1024" height="473"  />

*路径

相对路径：

同一级无特殊符号
上一级 …/
下一级 /
绝对路径例：C:/Vichy/image/1.jpg

*超链接`<a></a>`

格式：<a href="跳转目标" target="弹出方式" > 文本或图像 </a>
*target:
_self 默认弹出方式
_blank 新窗口中打开
*链接方式：文本，图像，表格，音频都可以添加
1.外部链接例：

`<a href="https://www.bilibili.com";> bilibili </a>`

2.内部链接例：

<a href="1.html"> 1 </a>

3.空链接例：

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

4.下载链接如果href里面地址为一个文件或者一个压缩包，那么该链接会下载这个文件
5.锚点链接：快速定位
href中，设置#名字的形式例：<a href="#home"> 首页 </a>
目标位置：<h1 id="home"></h1>

*注释

 注释内容不会被执行

*特殊字符

摘自https://blog.csdn.net/wxl2454497677/article/details/107608884