Web之HTML（上）

「已注销」

已于 2022-05-16 23:38:55 修改

阅读量181

点赞数 1

文章标签：前端 html5 html

于 2022-05-14 22:31:22 首次发布

本文链接：https://blog.csdn.net/Zxy_zzz/article/details/124775360

版权

一、HTML介绍

超文本标记语言，描述网页的一种语言。
超文本：加入图片、声音、动画、多媒体等
从一个文件跳转到另一个文件（超级链接文本）

二、Web标准

一系列标准的集合

Web标准构成：

结构：网页元素整理——html
表现：外观样式——CSS
行为：交互——Javascript

三、HTML标签

HTML基本语法概述

尖括号包围的关键词如<html>
成对出现如<html></html>

标签关系

包含（父子关系）：

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

并列关系：

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

HTML基本结构标签

<html>页面中最大的标签、根标签</html>
<head>文档的头部</head>
<title>文档的标题</title>
<body>文档的主体</body>

HTML常用标签

1.标题标签<h1>-<h6>：

<h1>标题一共六级选，</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减，</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>

2.段落标签和换行标签：

段落：<p></p>把HTML文档分割为若干段落

特点：文本在一个段落中会根据浏览器窗口的大小自动换行
段落与段落之间保有空隙

换行：<br />强制换行

特点：单标签
只是简单地开始新的一行

实例：

<!DOCTYPE html>
<html lang="en">

<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>
    <p>在中国IT教育行业发展的轨迹中，<br />能始终秉承着初心做教育的企业为数不多，而在李开复老师的心中，传智播客就是其中之一。在11年的风雨历程中，传智播客在中国IT教育行业留下了“为莘莘学子改变命运而讲课，为千万学生少走弯路而著书”的独特烙印。同时，传智播客也凭借着良好的口碑、更注重品质的教学及优秀的业绩增长成功吸引了众多知名投资者们的青睐，其中不乏创新工场、经纬、君度、蓝图、北城壹号等多个投资机构。</p>
    <p>不久前，传智播客新加入了几位知名股东，其中包括创投圈的大咖——创新工场的李开复老师。在中国，李开复老师至少影响了70和80后两代人，然而翻开他的履历，我们并没有看到诸如马云、马化腾那样堪称传奇的成功经历，我们看到的只是一位厚积薄发、深耕在世界IT互联网行业多年的“导师”：</p>
</body>

</html>

3.文本格式化标签：

为文字设置粗体、斜体或下划线等效果，突出重要性

<!DOCTYPE html>
<html lang="en">

<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>文本格式化标签</title>
</head>

<body>
    我是<strong>加粗</strong>的文字 我是
    <b>加粗</b>的文字 我是
    <em>倾斜</em>的文字 我是
    <i>倾斜</i>的文字 我是
    <del>删除线</del> 我是
    <s>删除线</s> 我是
    <ins>下划线</ins> 我是
    <u>下划线</u>
</body>

</html>

4.<div><span>标签：

没有语义，是一个盒子，用来装内容。

<div>大盒子自己独占一行
<span>小盒子一行多个

5.图片标签和路径：

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

路径：

（1）目录文件夹和根目录：
目录文件夹：放所使用的素材
根目录：打开目录文件夹的第一层

（2）VS Code中打开目录文件夹

相对路径：图片相对于HTML页面的位置
同一级：同一个文件夹下，<img src="图片名"/>
下一级：<img src="文件夹/图片名">
上一级：<img src="../图片名">

绝对路径：指目录下的路径，电脑中的位置或者完整的网络地址

实例：

<!DOCTYPE html>
<html lang="en">

<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>图像标签</title>
</head>

<body>
    <h4> 图像标签的使用:</h4>
    <img src="qq.jpg" />
    <h4> alt 替换文本 图像显示不出来的时候用文字替换:</h4>
    <img src="qq1.jpg" alt="我是zxy" />
    <h4> title 提示文本 鼠标放到图像上,提示的文字:</h4>
    <img src="qq.jpg" title="我是zxy" />

    <h4> width 给图像设定宽度:</h4>
    <img src="qq.jpg" title="我是zxy" width="500" />
    <h4> height 给图像设定高度:</h4>
    <img src="qq.jpg" title="我是zxy" height="100" />
    <h4> border 给图像设定边框:</h4>
    <img src="qq.jpg" title="我是zxy" border="15" />
</body>

</html>

6.超链接标签：

链接的语法：<a href="跳转目标" target="目标窗口的弹出方式">文本或图像 </a>
target 打开窗口的方式默认的值是 _self 当前窗口打开页面 _blank 新窗口打开页面

外部链接：<a href="http://www.qq.com" target="_blank"> 腾讯</a>

内部链接：网站内部页面之间的相互链接 <a href="02-第一个页面.html" target="_blank">第一个页面</a>

空链接：# <a href="#">名称</a>

下载链接：地址链接的是文件 .exe 或者是 zip 等压缩包形式

网页元素的链接：<a href="http://www.baidu.com（网址）"><img src="qq.jpg（图片名）" /></a>

锚点链接：点击链接，快速定位

在链接文本href属性中，设置<a herf="#名字">目标名字</a>
在目标位置标签，添加id属性<h3 id="名字">目标名字<h3/>

实例：

<!DOCTYPE html>
<html lang="en">

<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>
    <h4>1.外部链接</h4>
    <a href="http://www.qq.com" target="_blank"> 腾讯</a> target 打开窗口的方式 默认的值是 _self 当前窗口打开页面 _blank 新窗口打开页面
    <a href="http://www.itcast.cn" target="_blank">传智播客</a>
    <h4>2.内部链接: 网站内部页面之间的相互链接</h4>
    <a href="02-第一个页面.html" target="_blank">第一个页面</a>
    <a href="02-第一个页面.html" target="_self">第一个页面1</a>
    <h4>3.空链接:#</h4>
    <a href="#">公司地址</a>
    <h4>4.下载链接: 地址链接的是 文件 .exe 或者是 zip 等压缩包形式</h4>
    <a href="qq.zip">下载文件</a>
    <h4>5.网页元素的链接</h4>
    <a href="http://www.baidu.com"><img src="qq.jpg" /></a>
</body>

</html>