前端学习篇1-HTML

最新推荐文章于 2024-09-29 09:53:09 发布

只有努力的狗狗!!

最新推荐文章于 2024-09-29 09:53:09 发布

阅读量49

点赞数

文章标签：学习前端 html

本文链接：https://blog.csdn.net/m0_53935467/article/details/130633247

版权

文章介绍了HTML的基础知识，包括网页组成、五大浏览器及其渲染引擎、Web标准的重要性。详细讲解了HTML的结构、语法，如标签、注释、图像、音频和视频的处理，以及链接、列表、表格、表单的使用，并提到了语义化标签的概念。接下来将学习CSS。

摘要由CSDN通过智能技术生成

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

基础认识：

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

五大浏览器：

：IE

：火狐

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

：Safari

：Opera

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

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

所以需要一个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>等叫单标签

标签的关系

父子关系（嵌套关系）:

<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

相对路径：

同级文件：目标文件与代码在同一级文件中

直接写目标文件的名字<img src=”1.jpg”>

                    <img src=”./1.jpg”>

下级目录：目标文件在下级目录中（比如在同个目录的images文件夹中）

                    <img src=”images/i.jpg”>

上级目录：到上级目录../



<img src=“./test.jpg” alt=“”>

<img src=“” alt=“替换文本”>