html入门第一课 -----＜a标签＞＜div标签＞＜img标签＞

聪明大王haha

已于 2023-03-14 09:12:38 修改

阅读量789

点赞数 3

文章标签： html 前端 javascript

于 2023-03-13 23:33:08 首次发布

本文链接：https://blog.csdn.net/m0_73971424/article/details/129508265

版权

1.什么叫做html

HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。

HTML一直被用作万维网的信息表示语言，使用HTML描述的文件需要通过web浏览器显示出效果。

使用HTML，将所需要表达的信息按某种规则写成HTML文件（包含HTML 标签及文本内容）

通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即我们所见到的网页

2 入门实例

新建一个test.html文件，内容如下

（输入英文感叹号! 再回车即可建立）

<!DOCTYPE html> 声明为 HTML5 文档
<head> 元素包含了文档的元数据，<meta charset="utf-8"> 定义网页编码格式为 utf-8
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容

二、前期准备工作

1）吃饭的家伙

VSCode： 免费开源、插件⾮常多

安装：百度搜索【 vscode 】、全是英⽂那⼀⾏、闭上眼睛⼀直点回⻋

2）插件的安装

汉化插件：

侧边栏的第五个、输⼊【chinese】、点击install

快速打开⽹⻚：

输⼊【open in browser】、点击install

-----> 重启编译器

3）创建第⼀个⽹站

A、首先创建⼀个空⽩的⽂件夹、拖⼊vscode的图标中

B、点击【新建⽂件】、输⼊⽂件名（英⽂）、后缀【html】

4）什么是⽹站？

⼀个⽹站 = 多个⽹⻚；

⼀个⽹⻚ = html+css+js = 1个html⽂件

html：负责⽹⻚显示的内容

HTML是用来标记内容的（重在内容组织上）

css：负责⽹⻚显示内容的属性

CSS是用来修饰内容样式的（重在内容样式美化展示上）

JavaScript（脚本）：负责⽹⻚显示内容的逻辑

JavaScript是用来做交互的主要是用来扩展文档交互能力的，使静态的HTML具有一定的交互行为

HTML与CSS及JS的关系

这三者99%的情况下都是搭配使用的，但也不是绝对的

5）快捷键

ctrl+c、ctrl+v：复制粘贴

ctrl+s：保存

ctrl+r：刷新

ctrl+/：注释（程序做标注，不会被执⾏）

ctrl+z：撤销

ctrl+上下箭头上下滚动页面

cshift+K 删除某一行

Alt+ ↑ / ↓ 移动某一行

Shift+Alt + ↓ / ↑ 复制某一行

ctrl + Enter 跳转下一行开头

shift + ctrl + enter 跳转上一行开头

英⽂感叹号！：快速创建⼀个标准的⽹⻚格式（重点）

6）⽹⻚的布局

A、第⼀象限：每⼀个html标签都是⼀个矩阵，会平⾏于xy轴

B、⽂档流原则

a、每⼀个标签在⽹⻚中都会占据⼀定的⽹⻚位置，这个位置被称为⽂档流位置

b、遵循从左到右、从上到下的排列原则

C、分割思想

将⼀个⽹⻚尽可能的切割成你能够解决的最⼩单元

有利于我们更好地理清思路化繁为简降低整体代码难度更好地写出代码

⼆、html：负责⽹⻚显示的内容

（1）概念：超⽂本标记语⾔

超⽂本：⽂本+⾮⽂本（图⽚、⾳频、视频）

标记：标签<>

（2）格式

 <标签名 属性1=值1 属性2=值2...>内容</标签名>

（3）html = head+body

（4）a：跳转标签

<a href="/*要跳转的网址*/" target="/*跳转方式*/">/*内容*/</a>
/*target若是blank则新建一个网页 若是self则在当前网页跳转*/

a、href：跳转链接

b、target：_self （在当前⽹⻚中跳转）

c、⽂档流⼤⼩计算规则：内容有多⼤，⽂档流位置就有多⼤

（5）div：容器标签

A、⽂档流⼤⼩计算规则：

宽度：⼀定占据⽹⻚的⼀整⾏

⾼度：a、默认情况下，⾼度由内容决定

b、如果⼿动指定了div的⾼度height，那么⾼度固定，默认失效

（6）img：图⽚标签

<img src="" alt="">

a、src：图⽚路径

⽹络路径：拷⻉图⽚地址

b、alt：图⽚路径⽆效的时候的提示⽂字

c、⽂档流⼤⼩计算规则：图⽚有多⼤，⽂档流位置就有多⼤

d、图⽚居中

给图⽚设置⼀个⽗容器div，设置div内容居中

三、CSS的书写

A、给需要设置css的标签添加属性【class选择器】，命名规范(英⽂+数字)

B、在head中，添加style标签，⽤于书写css代码（如果已经存在style了，不需要重复创建）

C、格式

D、【点语法】⽤于连接html代码与css代码

例

<!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>
<style>
    .a1{
        color: blue;
        font-size: 100px;
    }

</style>
<body>
   <div class="a1">haha</div>
</body>
</html>

运行结果