1.什么是HTML,CSS
HTML：超文本标记语言 (Hyper Text Markup Language)
Html是超文本标记语言，是用来描述 web文档的一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。html文件是asci文本，包括格式标记和超级文本链的嵌入代码。Html是网页设计的基础。在网站结构中，静态网页被称为基于 HTML的网页。
CSS：css全称Cascading Style Sheets，中文意思为“层叠样式表”，是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言，是用来表示html样式的一种编程语言，是可以做到网页和内容进行分离的一种样式语言。
网站就是浏览器将代码解析之后得到的结果，通过鼠标右键可以选择查看网站的源代码、
网站：由N多个网页组成，每一个网页都是一个.html文件，网站由这N个.html文件组成
2.宇宙第一编辑器 VS Code
全称：Visual Studio Code
特点：开源，基于Electron的轻量代码编辑器
免费且好用，谁用谁知道
基本操作：
设置：文件➡首选项→设置（）
保存：ctrl+s
全选：CTRL+a
剪切：ctrl+x
复制：ctrl+c
粘贴：ctrl+v
撤销与前进：ctrl+z，ctrl+y
从头选中一行：shift+end
从尾部选中一行：shift+home
快速复制一行：shift+alt+↓
快速移一行：ait+↑/↓
向后缩进：tab
向前缩进：tab+shift
VSCode扩展
多光标：alt+鼠标左键
选择相同元素的下一个：crtl+D
3.浏览器
chrome浏览器
4.网站的开发
技术人员
UI设计师
提供网页设计稿
web前端开发工程师（H5开发）
将UI设计师提供的设计稿转化为代码
数据库内数据→显示到页面
利用三大技术：
HTML:结构
CSS:样式
JavaScript:行为
HTML在网页上提供静态内容。JavaScript向静态网页添加动态功能。
html是网页制作的基础，做出来的是静态的，js是脚本，跟html结合起来生成功能更强大的网页。可以处理一些动态的逻辑问题。
JavaScript可以被嵌入HTML中，但HTML无法嵌入JavaScript中。
web后端开发工程师
5.三大核心技术
HTML：
超文本 标记 语言
超文本：文本内容+非文本内容（图片,视频，音频等）
标记：<单词>
语言：编程语言
标记也叫做
标签：
常见标签：
tab+单词→<单词>
标签的属性：<标签 属性="值“ 属性2=”值2“>
HTML语法
每个.html文件都有HTML初始代码
<!doctype HTML>:文档声明
< htmllang=”en“>：最外层标签，包裹所有标签代码
// An highlighted block
<!DOCTYPE html>
<htmllang=“en”> lang=“en”表示是一个英文网站
<head>
<meta charset="UTF-8"> 元信息：缩写网页中的赋值信息 charset="UTF-8"是国际编码，使网页不会出现乱码
<title>Document</title>
</head>
</body>
<body>
显示网页内容的区域
</html>
HTML注释
写法：<！-- 注释内容–>在浏览器中看不到，只能在代码中看到注释内容。
意义：
1.把暂时不用的代码注释起来方便日后使用
2.对开发人员进行提示
快捷添加与删除注释：
1.ctrl+/
2.shift+alt+a
HTML 语义化
根据网页中内容的结构选择合适的html标签编写
好处：
1.没有CSS依旧能呈现出很好的内容结构
2.有利于SEO，让搜索引擎爬虫更好的理解网页
3.方便其他设备解析（屏幕阅读器，盲人阅读器等）。
4.方便团队的开发与维护
HTML标题与段落
标题 →双标签：< h1>标题 < /h1>…< h6>标题< /h6>
h1标题最重要且一个.html文件中仅能存在一个
其他无限制
h5 ,h6并不常用
段落→双标签：< p>段落内容 < /p>
例如：
<h1>李浩洋自我介绍</h1>
<h2>基本信息</h2>
<h3>今年18，练习时长两年半，唱跳rap样样都不行。喜欢看书，没事就想吃东西，一吃就不想停下来，生活费损耗严重。</h3>
<h4>没啥好说的，网课好折磨啊啊啊啊啊，代码怎么这么难打，刚入门我就爱上了，嘎嘎嘎</h4>
<p>于2022年9月正式入学，十月听了四叶草演讲当即决定加入</p>
<p>所以这东西什么时候是个头？</p>
文本修饰标签：
强调→双标签：
文本加粗：< strong>内容< /strong>
字体变斜：< em>内容< /em>
strong的强调性强于em
下标：< sub>< /sub>
上标：< sup>< /sup>
删除，插入文本：
< del>< /del>
< ins>< /ins>
注意：一般情况下删除与插入文本配合使用
图片标签与属性
< img>：图片→单标签
src：引入图片地址
alt：图片出现问题时可以出现友好提示语
title：鼠标移动到图片上时出现提示信息
width，height：图片的尺寸
引入文件的地址路径
相对路径：
. 在路径中表示当前路径
. .在路径中表示上一级路径
示例
绝对路径：引入文件所在的详细路径
引入文件时的路径正反斜线都可以识别出来，但尽量避免使用反斜线，保证格式的规范
引入地址是网络地址时反斜线无法被识别
跳转链接
< a>标签→：双标签
href：链接的地址
target：改变链接打开方式
默认情况下： -self 在当前页面打开 -blank 在新窗口打开
base→单标签：改变链接的默认行为
跳转锚点
实现一
#号+id属性
实现二
#号+name属性
name属性加给的是a标签
特殊符号
解决部分按键冲突以及添加多个空格的实现
列表标签
1.无序列表→双标签：ul li （两者必须组合出现并且之间不能有其他标签，其内部可以出现标签）
要符合嵌套的规范
type属性：改变前面标记的样式
一般用CSS去控制
2.有序列表：ol li （需要组合出现）
用到的很少，无序列表更常用，无序列表可以代替有序列表
type属性：改变前面标记的样式
一般用CSS去控制
3.定义列表：列表需要添加标题和对标题进行描述的内容
< dl>:定义列表
< dt>：定义专业术语或名词
< dd>：对名词进行解释和描述
CSS
JavaScript
示例：
<style>
div{color: yellow;font-style:italic}
</style>
<div>李浩洋</div>
<script>
let div = document.querySelector("div");
let timer = null;
let flag = ture;
div.onmouseover= function(){
timer = setInterval(()=>{
if(flag){
div.style.color="blue"
div.style.fonstyle="normal"
}
else{
div.style.color="red"
div.style.fonstyle="normal"
}
},500);
};
div.onmouseout=fun (){
clearInterval(timer);
};
</script>
58
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
