HTML初学第一周_一周入门html-CSDN博客

本文链接：https://blog.csdn.net/qq_74288625/article/details/127380606

HTML+CSS系列教程

① 拨云见日

① 拨云见日

一. 基本知识

1. 什么是HTML和CSS

是做网站的编程语言。

2. 查看源代码

通过鼠标右键选择查看网页源代码。

3. 网站

由N个网页组成(类似于电视剧）。

4. 创建HTML文件

在你想要添加的路径下，新建一个文本文档，将其后缀名改为html。

5.宇宙第一编辑器—VS Code

⑴ 定义

VS Code，全称 Visual Studio Code，来自微软，是一个开源的、基于 Electron 的轻量代码编辑器。

⑵ 下载

下载地址

⑶ 必要的插件

语言包，open in browser，View In Browser

⑷ 注意事项

文件编辑完要记得保存

⑸ 使用方法

可以参考VS Code使用方法
常用快捷键
在这里插入图片描述

6.Chrome浏览器（最主流的浏览器）

⑴下载

下载地址

7.深入网站开发

UI设计师:设计稿
web前段开发工程师（HS开发）— 设计稿→代码（HTML+CSS）
web后端开发工程师（存储数据）— 数据库里的数据→显示到页面
HTML负责网站结构
CSS负责网站样式

8.Web前段的三大核心技术

HTML：结构
CSS：样式
Javascript：行为

二. HTML

1.定义

超文本(文本内容+非文本内容)标记语言（HyperText Markup Language），标准通用标记语言下的一个应用。是网页制作必备的编程语言。

2.标记（标签）

⑴.写法

分为两种：Ⅰ.单标签，如：<header> Ⅱ.双标签，如<header></header>

⑵.创建标签的快捷键

单词+Tab键

⑶.标签是可以上下排列，也可以组合嵌套的。

⑷.标签属性

来修饰标签的，设置当前标签的一些功能。

3.初始代码

⑴.定义

每个.html文件都有的代码（要符合html文件的规范写法）

⑵.快捷键

！+Tab键

⑶.一些常用代码

在这里插入图片描述

<!DOCTYPE html> 文档声明：告诉浏览器这是一个html文件
<html lang="en">html文件的最外层标签:包裹着所有html标签代码 lang="en"表示是一个英文网站
lang="zh-CN"表示一个中文网站
<meta charest="UTF-8"> 元信息：是编写网页中的一些赋值信息 charest="UTF-8"国际编码，让网页不出现乱码的情况
<title>Document</title> 设置网页标题

3.HTML注释

⑴.定义

注释的代码，只有在文件中看得到，但是浏览器显示不出来。

⑵.写法

<!-- 注释的内容 -->

⑷.意义

Ⅰ.把暂时不用的代码注释起来，方便以后使用。
Ⅱ.对开发人员进行提示。

⑸.快捷键

Ctrl+/
shift+alt+a

4.HTML语义化

⑴.定义

根据网页中内容的结构，选择适合的HTML标签进行编写。

⑵.好处

Ⅰ.没有CSS的情况下，页面也能呈现出很好的内容结构。
Ⅱ.有利于SEO，让搜索引擎爬虫更好的理解网页。
Ⅲ.方便其他设备解析（如屏幕阅读器、盲人阅读器等）。
Ⅳ.便于团队开发与维护。

⑶.标题与段落

标题 → 双标签 :<h1></h1> ... <h6></h6>
注意：在一个网页中，h1标题最重要，并且.html文件中只能出现一次h1标签。
段落→双标签：<p></p>

⑷文本修饰标签

强调 →双标签： <strong></strong>（加粗，强调性更强）、<em></em>（斜体，强调性较弱）
下标：<sub></sub>
上标：<sup></sup>
删除：<del></del>
插入：<ins></ins>
注意：一般情况下，删除文本都是和插入文本配合使用的。