HTMl&CSS 基础（一） | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第1天

前端与HTML

本堂课的重点内容

了解什么是前端
认识HTML以及学习HTML中一些常见的标签

问题

什么是前端？

网页上为用户呈现的部分。运行在客户端，不占用服务端资源。

前端技术栈

HTML(内容) CSS(样式) JavaScript(行为) 等

HTML（结构标准）：构建网页页面结构、构建网页所有元素和内容。
CSS（表现标准）：负责页面中元素外观样式。（包括位置、大小、边距、背景颜色、字体颜色大小等）
JavaScript(行为标准)：控制页面元素，完成页面交互等。

常用的开发工具：

Hbuilder 下载地址：HBuilderX-高效极客技巧 (dcloud.io)

VS Code

下载地址：Visual Studio Code

HTML：

HTML概念

HyperText Markup Language

译为超文本标记语言，是一种标记语言。

主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述。

HTML网页的结构

<html>
    <head>
        <title>网页标题部分</title>
    </head>
    <body>
        网页中的主体内容部分
    </body>
</html>

标签的学习

常用的HTML标签:h1~h6标签、p标签、div标签、ol/ul>li标签、input标签、img等。

h1-h6标签：

特点：从1~6级标签，大小依次递减，文字加粗，块级元素（独占一行）。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

p标签

特点：用于文章分段，块级元素（独占一行）。

<p>一段文字</p>

img标签

img为内联元素

<img src="" alt="">

其中：src为属性名，""中内容为属性值，src=""为标签属性

标签的属性写在标签内部，标签上可以同时存在多个属性，每个属性之间以空格相见分隔开，标签名与属性之间必须以空格隔开，属性之间没有顺序之分

图片的路径

绝对路径： 本地磁盘地址或网址

相对路径：

<img src="目标图片.jpg">
<img src="./目标图片.jpg">

<img src="../目标图片.jpg">

<img src="文件夹/目标图片.jpg">

图片的常用属性：

图片的常用属性
属性	说明
scr	图片的路径
alt	当图片加载失败时显示的文字
title	当鼠标悬停时显示的文字
height	图片的高度
width	图片的宽度

ol>li标签

有序列表（块级元素）

<ol>
    <li>列表一</li>
    <li>列表二</li>
    <li>列表三</li>
    <li>列表四</li>
</ol>

ul>li标签

无序列表（块级元素）

<ul>
    <li>列表一</li>
    <li>列表二</li>
    <li>列表三</li>
    <li>列表四</li>
</ul>

总结

今天是开课的第一天，学了HTML并运行了第一个界面，发现前端开发十分有趣，兴趣才能促进学习，继续努力。

学到这我想大家也对HTML有了初步的认识了吧，不如现在就开始动手练习练习吧

如果你有任何建议都可以在评论区留言，或发电子邮箱，欢迎大家评论留言(ˆ⌣ˆ）

作者：Yifan

日期：2022年7月24日

电子邮箱：1279640748@qq.com

HTMl&CSS 基础 | 青训营笔记