HTML和CSS的基础学习

最新推荐文章于 2024-10-02 17:15:49 发布

ycs12354

最新推荐文章于 2024-10-02 17:15:49 发布

阅读量149

点赞数

文章标签： html css 学习

本文链接：https://blog.csdn.net/ycs12354/article/details/127406465

版权

这篇博客详细介绍了HTML的学习目标、编辑器的使用、基础语法和常见标签，包括VSCode配置、快捷键、HTML结构、标签属性、文本修饰、图片标签、链接和注释。还提到了HTML语义化的重要性以及标题和段落的使用。

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

篇目一：HTML之拨云见日

学习目标：{HTML CSS 切图流程 PC企业站布局 PC游戏站布局}

如何学好前端？答：感兴趣，够努力

了解什么是HTML CSS——是做网站的编程语言
浏览器中把代码解析后的样子就是我们看到的网站
如何看到原始代码?——鼠标右键点击+源代码
如何去写，写在哪里——记事本，文本文档后缀改为 demo.html
知识点：一个网站是由n个网页构成的

我们可以利用VS Code 编辑器来编写网页
第一步，下载此编辑器
下载完毕后，安装插件View In Browser，Open In Browser，语言包

在扩展处搜索这三个插件

编辑器如何使用？

首先在工具栏中找到文件→首选项→设置
创建文件夹，对其进行重命名
记得一定要保存，否则在网页上看不见内容
对内容进行编辑和修改

举例，在笔记3_demo.html中编写“哈哈哈”

然后鼠标右击标头，然后点击倒数第二行Open In Default Browser

之后，就可以在浏览器上看到你的创作内容了

下面，我们来学习几个快捷键的用法

Ctrl+S 保存 shift+end 从头选中一行
Ctrl+W 关闭程序 shift+tab 向后缩进
Ctrl+N 新建 shift+home 从尾部选中一行
Ctrl+O 打开 shift+alt+↓ 快速复制一行
Ctrl+Z 撤销 shift+tab 向后缩进
Ctrl+F 查找 alt+鼠标左键多光标
Ctrl+X 剪切 Ctrl+D 选择相同元素的下一个
Ctrl+C 复制
Ctrl+V 粘贴
Ctrl+A 全选

VSCode中搜索程序的使用，可以搜索到所选文本的全部内容，相当于查询替换

Chrome浏览器

深入了解网站开发

UI工程师
web前端开发工程师
web后端开发工程师
HTML：结构
CSS：样式
JavaScript：行为

写网页代码，首先是结果，然后是样式，最后是行为

HTML基础结构与属性

超文本标记语言

超文本：文本内容和非文本内容（图片，视频，音频等）

标记：<单词>

语言：编程语言

标记也叫标签：<header> <footer>

写法分为单标签和双标签

单标签 <header>
双标签 <header> </header>

创建标签的快捷键：单词 +tab

标签是可以上下排列，也可以组合嵌套

HTML常见的标签可以在网站寻找

标签的属性：来修饰标签的，设置当前标签的一些功能

<标签属性=“值” 属性2=“值2“>

HTML初始代码：每个HTML都有的代码

快捷键：！+tab键

<!DOCTYPE html> ：文档声明

<html lang="en"> ：html文件的最外层标签,包括所有的HTML标签代码表示英文

<head>

<title>Document</title> ：标题

</head>

<body> 显示网页内容的区域

</body>

</html>

HTML注释

写法： 在浏览器看不到，在编辑器里看得到
意义：1.把暂时不用的代码注释起来，方便以后使用。 2.对开发人员进行提示

快捷添加注释和删除注释：

ctrl + / （第二次删除）
shift + alt + a

HTML语义化

好处

在没有CSS情况下，页面也能呈现出很好的内容结构
有利于SEO，让搜索引擎爬虫更好理解网页
有利于其他设备解析
便于团队的开发与维护

标题与段落

标题双标签：<h1></h1> .....<h6></h6>

在一个网页中，h1最重要，只能出现一个

h5，h6不经常使用

段落双标签： <p></p>

文本修饰标签

<strong>:表示强调，对文本进行加粗双标签

<em>: 强调，对文本进行斜体双标签

区别：1.写法和展示效果 2.strong的强调性比em强

<sub> , <sup> :下标文本上标文本

下标：双标签
上标：双标签相当于平方的位置

<del> , <ins>: 删除文本，插入文本，相当于删除线和下划线

一般情况下，两者配合使用

图片标签与图片属性

<img> :图片单标签

src 引入图片的地址
alt 当图片出现问题时，可以显示一段友好的提示文字
title 提示信息
width height 图片的大小

src 引入图片的地址引入文件的地址路径

相对路径：

在路径中表示当前路径
在路径中表示上一级路径

绝对路径 ：

来源于硬盘，网络，尽量避免写反斜线

跳转链接

<a> 双标签

href属性链接的地址
target属性可以改变链接打开的方式，默认的情况下：在当前页面打开_self 新窗口_blank

<base> 单标签

改变链接的默认行为的，写在head当中

跳转锚点

在当前页面跳转，href=后加#，段落h后加id=....

或段落上一行加<a name=.....>

特殊符号

&+字符解决冲突，作业尖括号，添加多个空格实现

无序列表

<ul>,<li>:列表的最外层容器，列表项，必须是组合出现的

有序列表

<ol>,<li>:列表最外层容器，列表项，用的比较少，可以用无序列表代替

定义列表

<dl>:定义列表
<dt>:定义专业术语或名词
<dd>:对名词进行解释和描述