前端+HTML

最新推荐文章于 2024-07-14 10:34:53 发布

Cd_image

最新推荐文章于 2024-07-14 10:34:53 发布

阅读量48

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/weixin_55804800/article/details/127655073

版权

web标准

保证不同浏览器打开效果一样

html(超文本标记语言):页面元素和内容——结构
css：网页元素的外观和位置等页面样式（颜色，大小）——表现
javascript：网页模式的定义和页面交互——行为

骨架结构

HTML标签：网页的整体
head标签：网页的头部
body标签：网页的身体
title标签：网页的标题
快捷键：！+tab（enter）

语法规则

html的注释

快捷键：Ctrl+/ 加上注释、撤销注释

快捷键：Ctrl+K+C

HTML标签的结构

双标签：<开始标签>内容</结束标签>

单标签：<开始标签>内容

标签的关系

父子关系（嵌套关系）

<head> <title></title> </head>
兄弟关系（并列关系）

<head></head>

<body></body>

排版标签

标题标签

直到h6

快捷键：Ctrl+D，就是同时选中同一个字母或数字

特点：

文字加粗
独占一行
从h1到h6逐渐变小

代码

<!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>
<h1>一</h1>  
<h3>二</h3>
<h3>三</h3>

</body>
</html>

段落标签

在文章中用于分段显示
<p></P>
特点：
- 段落之间存在间隙
- 独占一行

代码

<!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>
<p>天气网讯,今天(22日)海南天气还不错,阳光时不时露脸,体感上也比较舒适。<br>不过,很快风雨又要来了,因为据最新预报显示,
    目前一个热带低压正在发展中,预计今年第22号台风尼格或将生成,而随着它的移动,未来将进入南海,然后给南海带来风雨影响。
</p>
<p>
    今天要快点洗衣服晒被子咯~<hr>
</p>
</body>
</html>

换行标签

让文字强制换行
<br>
特点：
- 单标签
- 让文字强制换行

水平线标签

分割不同主题内容的水平线
<hr>
特点：
- 单标签
- 在页面中显示一条水平线

文本格式化标签

让文字加粗、下划线、倾斜、删除线等效果
代码： b--加粗 strong--加粗

u--下划线 ins--下划线

i--倾斜 em--倾斜

s--删除线 del--删除

右边的应用情景：

突出重要性的强调语境，比如：突出价格
主要是为了开发人员，能够了解到内容的重要性
写的时候比较推荐语义更强的标签

代码

<!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>
        <b>作为S12八强赛的宿命对决,,</b><strong>虽然不少观众都不认为RNG能击败T1,但这0-3被淘汰的结果</strong>
        <u>又有几个人预料到了呢？</u><ins>在赛前,Uzi都认为这可能会是RNG在S赛上最有可能击败T1的一次,</ins>但是很可惜,
        <i>RNG不仅没能击败T1,甚至连一场都没有拿下。</i><em>对于这个结果,粉丝们是无力的。</em>因为这一次的RNG输得很惨,
        <s>给人的感觉就是技不如人,</s><del>远没有S7输给SKT的那种可惜不甘之意。</del>
    </p>
</body>
</html>

媒体标签

图片标签

在网页中显示图片
代码：<img src="./图片名称" alt="" title="">
属性名：

src:属性名，路径

src=""：属性标签，属性名+属性值

alt:题目，内容，主题；当图片加载失败时，才会显示alt的文本内容，成功时则不会显示

title:当鼠标放到图片上时，会显示的内容（悬停显示的内容）

width:宽度

height:高度
- 注意点：
  
  如果只设置了其中一个属性值，图片就会自动等比例缩放（图片不会变形）
  
  如果同时设置两个的属性值，但是设置不当的话可能会导致图片变形
特点：
- 单标签
- img标签需要展示对应的效果，需要借助标签的属性进行设置
属性注意点：
- 标签的属性写在开始标签内部
- 标签上可以存在多个属性
- 属性之间用空格隔开
- 标签名与属性之间必须以空格隔开
- 属性之间没有顺序之分

<!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>
 <img src="1.jpeg" alt="图片" title="我是一张图片" width="200" height="">   
</body>
</html>

路径

页面加载图片时，需要找到对应的图片
绝对路径（了解）
- 指目录下的绝对位置，可直接到达目标位置，通常从盘符开始
- 盘符开头：C：\day01\image\1.jpg
- 完整的网络路径：inforec-20221021-861df6d5ee47e842b1a06e2d2d8adc20.jpg (644×644) (yiyouliao.com)
相对路径（常用）
- 从当前文件开始出发找目标文件的过程
相对路径分类：
- 同级目录：当前文件和目标文件在同一目录中
  
  代码：方法一：<img src="目标图片.jpg">
  
  方法二：<img src="./目标图片jpg">
- 下级目录: 目标文件在下级目录中
  
  代码：<img src="目标文件所在的文件夹的名字/目标图片">
- 上级目录
  
  目标文件在上级目录中
  
  代码：<img src="../">
  
  ../返回上一级

音频标签

在页面中插入音频
代码：<audio src="" controls></audio>
常见属性： src:音频路径

controls:显示播放的控件

autoplay:自动播放（部分浏览器不支持）

loop：循环播放

音频标签目前支持的三种格式： MP3、wav 、Ogg

代码

<!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>
    <audio src="./EXO (엑소) - 脚印 .mp3" controls autoplay loop>大气史诗氛围音乐</audio>
</body>
</html>

视频标签

在页面中插入视频
代码：<video src="" controls></video>

blank
常见属性： src：视频路径

controls：显示播放控件

autoplay:自动播放（谷歌必须加上muted实现静音播放）

loop：循环播放
音频标签目前支持的三种格式： MP4、WebM、Ogg

代码

<!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>
   <video src="./HOME;RUN.mp4" controls ></video> 
</body>
</html>

链接标签

点击之后从一个页面跳转到另一个页面
称为：a链接、超链接、锚链接
代码：<a href=""></a>

超链接
href：跳转地址
target：目标网页的打开形式
- 取值：
  - _self:默认值，在当前窗口中跳转（覆盖原网页）
  - _blank:在新窗口跳转（保留原网页）
代码：百度
特点：
- 双标签，内部可以包裹内容
- 如果需要a标签点击之后去指定页面，需要设置a标签的href属性

在网站开发的初期，在还不知道跳转地址的时候，href的值书写#（空连接）

代码

<!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>
    <a href="https://www.baidu.com/"> 百度</a>
    <br>
    <a href="./标题标签.html">跳转到标题标签</a>
    <br>
    <a href="#">空连接</a>
    <br>
    <a href="https://www.baidu.com/" target=_blank>百度</a>
</body>
</html>