前端学习篇1-HTML

朴灿烈づ我的快乐病毒、 2023-10-10 17:39 60阅读 0赞

> 主要是一些学习的大致路线，没有列举全部，可以根据给出的关键词搜索文档全面掌握

## 基础认识： ##

>  *  网页组成和五大浏览器，明确Web标准的构成，使用HTML骨架搭建出一个网页

**五大浏览器：**

：IE

：火狐

：谷歌程序员最喜欢的浏览器 快捷开发代码/调试错误

：Safari

：Opera

1.  **渲染引擎：**（了解）浏览器中专门对代码进行解析 渲染的部分。

浏览器厂商不同会有不同的内核，渲染引擎不同，解析相同代码的速度、性能和效果也不同

所以需要一个web标准

**Web标准：**不同浏览器渲染引擎不一样，对代码解析的效果需要统一

Web标准：HTML 结构 页面元素和内容

CSS 表现 网页元素外观和位置等样式

JS 行为 网页模型的与页面交互

**HTML页面的固定结构**：<html>标签里的内容

## HTML语法 ##

> 初始页面补全删除：！+enter
> 
> 注释：注释快捷键 VS Code中 ctrl+/

<!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>
        
    </body>
    </html>

### html标签的构成 ###

<开始标签>包裹内容</结束标签>

如<strong>变粗字体</strong>

像strong这样成对出现的叫双标签

像<br>、<hr>等叫单标签

**标签的关系**

1.  父子关系（嵌套关系）:

<head>

</head>

兄弟关系（并列关系）:

<head>

</head>

<body>

</body>

**标题标签**

H系列标签：h1-h6 1~6级标题 重要程度依次递减

**段落标签**：

用于分段标签<p></p> 段落之间存在间隙

**换行标签**：</br>

**水平线标签**<hr>一般用于文章标题底下，标题和文章内容之间的分隔

**文本格式化标签**

需要让文字加粗、倾斜、下划线、删除等

标签：

b 加粗 strong

u 下划线 ins

I 倾斜 em

s 删除线 del

**图片的处理**

img 标签

src属性名=“属性值“

目标路径(当前路径下，其他路径自己看一下)——》这里是相对路径，

> 路径引用
> 
> 绝对路径：
> 
> 盘符开头：D:\\day01\\images\\i.jpg
> 
> 完整的网址：[https://www.adhaldhal/images/logo.jpg][https_www.adhaldhal_images_logo.jpg]
> 
> 相对路径：
> 
> 同级文件：目标文件与代码在同一级文件中
> 
> 直接写目标文件的名字<img src=”1.jpg”>
> 
> <img src=”./1.jpg”>
> 
> 下级目录：目标文件在下级目录中（比如在同个目录的images文件夹中）
> 
> <img src=”images/i.jpg”>
> 
> 上级目录：到上级目录../
> 
> <img src=“./test.jpg” alt=“”>
> 
> <img src=“” alt=“替换文本”>

**图片的其他属性**

title：悬停文本

width和height宽高

**音频标签：**

audio src引入音频文件

<audio src=”./”></audio>(某些浏览器音频是不自动播放的)

其他属性 controls 播放控件

autoplay

loop

**视频标签**：

其他属性：同音频

**链接标签**：<a href=”./目标网页”>超链接</a>