Web前端入门学习

欠考虑的话

已于 2023-02-02 11:08:14 修改

阅读量76

点赞数

文章标签：前端学习 html

于 2023-02-02 11:06:48 首次发布

本文链接：https://blog.csdn.net/qq_51112136/article/details/127773065

版权

开发工具选择 VS Code

Web标准的构成

结构：HTML（页面元素和内容）
表现：CSS（网页元素的外观和位置等页面样式）
行为：JavaScript（网页模型的定义与页面交互）

快捷键链接

HTML

HTML页面固定结构

骨架：整体，头部，标题，主体
分别用HTML标签进行描述

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

操作VS code如图所示
输入!的同时回车或者按下Tab键
在这里插入图片描述

1.1语法规范

1.1.1注释

注释的快捷键：

在VS Code中：ctrl + / (再按一次取消注释）

1.1.2 标签

标签的构成

在这里插入图片描述

标签的关系

嵌套关系（父子关系）

<head>
<title></title>
</head>

并列关系（兄弟关系）

<head></head>
<body></body>

标签分类

1.排版标签

标题标签
段落标签
换行标签
水平线标签

文本格式化标签
媒体标签
链接标签

标题标签

在这里插入图片描述

输入h1后直接回车即可得到一级标题在这里插入图片描述
若要设置二级标题以此类推即可

特点

文字自动加粗
文字变大，从h1-h6文字逐渐变小
独占一行

段落标签

<p></p>

特点

段落间存在间隙
独占一行

换行标签

<br>

特点

单标签
让文字强制换行

分割线标签

<hr>

特点

单标签
在页面中显示一条水平线

文本格式化标签

场景让文字加粗，下划线，倾斜，删除线等效果

代码
在这里插入图片描述

媒体标签

图片标签
路径
音频标签
视频标签

1.图片标签

代码

<img src="" alt="">

在这里插入图片描述
属性注意点

标签属性写在开始标签内部
标签上可以同时存在多个属性
属性之间以空格隔开
标签名与属性之间以空格隔开
属性间无顺序之分

路径标签

欠考虑的话

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端入门学习

web前端
复制链接

扫一扫