Web_DAY1

html骨架#

html标签：网页的整体
head标签：网页的头部
title标签：网页的标题
body标签：网页的身体

<html>
    <head>
        <title>网页标题</title>
    </head>
    <body>
        网页主体内容
    </body>
</html>

开发工具：VScode

html标签#

  • 常见标签由两部分组成，称之为双标签，前部分叫开始标签,后部分叫结束标签，两部分之间叫包裹内容

    <strong>文字加粗</strong>

  • 少数标签由一部分组成，称之为单标签，无法包裹内容，如：

    <br>换行
<hr>分割线

html标签之间关系#

父子关系（嵌套关系）

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

兄弟关系（并列关系）

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

排版标签#

标题标签#

<body>
    <h1>hello world</h1>
    <h2>good night</h2>
</body>

语义：1~6级标题，重要程度依次递减
特点：

  • 文字都有加粗

  • 文字都有变大，并且从h1 → h6文字逐渐减小

  • 独占一行

  • 注意点：h1标签对于网页尤为重要，开发中有特定的使用场景，如：新闻的标题、网页的logo部分

段落标签#

<p>段落内容</p>

语义：段落
特点：

  • 段落之间存在间隙
  • 独占一行

换行标签#

<br>

语义：换行
特点：

  • 单标签
  • 让文字强制换行

水平线标签#

<hr>

语义：主题的分割转换
特点：

  • 单标签
  • 在页面中显示一条水平线

文本格式化标签#

标签 说明
b 加粗
u 下划线
i 倾斜
s 删除线

媒体标签#

图片标签#

场景：在网页中显示图片
代码：

<img src = " " alt = " ">

特点:

  • 单标签
  • img标签需要展示对应的效果，需要借助标签的属性进行设置！

属性注意点：

  1. 标签的属性写在开始标签内部
  2. 标签上可以同时存在多个属性
  3. 属性之间以空格隔开
  4. 标签名与属性之间必须以空格隔开
  5. 属性之间没有顺序之分
图片标签属性

src属性
属性值：目标图片路径

alt属性
属性值：替换文本（图片加载失败时）

title属性
属性值：提示文本（鼠标悬停于图片上）
注：title不仅可用于图片标签

width和height属性
属性值：宽度或高度
注：如果只设置一个，另一个将等比例放大

路径#

相对路径有哪三种情况：

  • 同级目录：直接写：目标文件名字
  • 下级目录：直接写：文件夹名/目标文件名字
  • 上级目录：直接下：../目标文件名字！

VSCode中路径的快捷操作

  • 同级和下级目录：./ 之后选择即可
  • 上级目录：../ 之后选择即可

音频标签#

<audio src = " " controls autoplay loop></audio>
属性名 功能
src 路径
controls 显示控件
autoplay 自动播放(部分不支持)
loop 循环

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

视频标签#

<video src = " " controls autoplay loop></video>

属性同音频

视频标签目前支持三种格式：MP4 、WebM 、Ogg

链接标签#

<a href = ",/page.html" target = "_blank">name</a>

href：目标网页
注：可填写"#"表示空链接，点击返回网页顶部

target：目标网页打开方式

取值 效果
_self 默认值，当前窗口跳转
_blank 新窗口跳转
posted @   Exungsh💫  阅读(30)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示
AI IDE Trae
主题色彩