HTML ｜ 青训营

用户551661149242
141 阅读4分钟

HTML

学习笔记

基础概念

1.网页由文字、图片、音频、视频、超链接组成

2.通过浏览器转化 前端的代码 为客户看到的网页

3.常见的五大浏览器：IE浏览器、火狐浏览器（Firefox）、谷歌浏览器(Chrome)、Safari浏览器、欧朋浏览器(Opera)

4.渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分 *注意：*渲染引擎不同，导致解析相同代码的速度、性能、效果也不同的

5.Web标准的构成：

  • 结构：HTML 页面的元素和内容
  • 表现：CSS 网页元素的外观和位置等页面样式（如颜色、大小）
  • 行为：JS (JavaScript) 网页模型的定义与页面交互（让画面动起来）

HTML初体验

1.HTML（超文本标记语言）遵循语法规则

例：

<strong>xxxxxx</strong>

标签标记用‘<>’,有开始有结束

2.HTML页面固定结构

网页中的固定结构是要通过特点的HTML标签进行描述的

<html>

网页的标题

<body>

网页的主体内容

</body>

</html>

3.开发工具

VS Code(Visual Studio Code)

新建的文件要加“.html”后缀

新建文件后，输入 ！+ ENTER/TAB键，html骨架自动出现

CTRL+s 存储文件，文件未保存的时候，文件名旁边会显示一个小圆点

ALT+B 跳转到网页

语法规范

  1. 注释 CTRL+/ 按一次有注释，再按一次注释取消

  2. HTML标签的构成 image-20230627231533215 <br>换行 <hr>分割线 单标签：不需要确定开始结束，只有开始即可 双标签：需要确定开始结束

  3. 标签与标签之间的关系 父子关系（嵌套关系）

兄弟关系（并列关系）

排版标签

  1. 标题标签 image-20230627232916594

如果要复制n个同级标题，可以 h2*n + ENTER/TAB 输入标题标签的简便方法： 例：h1+ENTER/TAB CTRL+F2 批量文本替换

  1. 段落标签 image-20230628090447540 ALT+Z 自动换行（查看—自动换行) CSS可以改变段落中的间隙 HTML框架，CSS表达，JS行为
  2. 换行标签 image-20230628091759714 在想要换行的文字后加
  3. 水平线标签 image-20230628091959251 在想要加分割线的位置加

文本格式化标签

image-20230628092346586

突出重要性的强调语境时，用右侧的标签（方便程序员理解） 但是左右两侧标签显示的效果没有区别

媒体标签

  1. 图片标签

    image-20230628092938967 image-20230628093940815 引号里写"./"+图片的文件名（如果图片在当前文件夹) 属性：

    1. src属性
    2. alt属性 image-20230628094512898
    3. title属性 image-20230628094634520
    4. width和height属性 image-20230628094823523 一般只需给出一个值

  2. 路径

    路径分为： 绝对路径（了解） 相对路径（常用） image-20230628095732124 image-20230628100158506

    同级目录： 当前文件和目标文件在同一目录中 下级目录： 目标文件在下级目录中 image-20230628100818599 "/"表示image是文件夹 上级目录： 目标文件在上级目录中 image-20230628101245799

    3.音频标签

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

    4.视频标签 image-20230713182527289

    image-20230713204242821

链接标签

image-20230714115910381 image-20230714124352144

href= 跳转地址

image-20230714125916521

index.html 首页

列表标签

  1. 应用场景：要求排列规整

  2. 分类： image-20230714142611112

  3. 无序列表 image-20230714142838734

    <ul>
        <li>榴莲</li>
        <li>香蕉</li>
        <li>苹果</li>
    </ul>

    4.有序列表

    image-20230714143423786

    <ol>
        <li>张三：100</li>
        <li>李四:80</li>
        <li>王二麻子:75</li>
    </ol>

    5.自定义列表 image-20230718121516769 注：

    1. dd前会默认显示缩进效果
    2. dl标签只允许包含dt/dd标签
    3. dt/dd标签可以包含任意内容
avatar
文章
阅读
粉丝