一、准备环境开发
谷歌浏览器：Google Chrome 网络浏览器
VS Code编辑器：Documentation for Visual Studio Code
VS Code基本使用
打开文件夹：任意文件夹--->拖拽至VS Code空白位置即可
安装插件：拓展-->搜索插件-->安装-->重启VS code
打开网页插件：open in browser
汉化菜单插件：Chinese
缩放代码字号
放大Ctrl+加号
缩小Ctrl+缩小
设置默认浏览器
1、win+r 输入control进入控制面板点击默认程序
2、查看方式设置为大类别 点击默认程序 找到Google Chrome 将他设置为默认值
二、HTML（day1）
HTML概念
HTML超文本标记语言 -- Hyper Text Markup Language
超文本是什么？链接
标记是什么？ 标记也叫标签，带尖括号的文本
标签语法
<strong> （开始标签） 需要加粗的文字 </strong> （结束标签）
· 标签成对出现，中间包裹内容
· <>里面放英文字母（标签名）
· 结束标签比开始标签多个 /
· 拓展
双标签：成对出现的标签
单标签：只有开始标签，没有结束标签
<strong>文字内容</strong>
<hr>HTML基本骨架
HTML基本骨架是网页模板
<html>
<head>
<title>网页标题<title>
</head>
<body>
网页主体
</body>
</html>
·html：整个网页
·head：网页头部，存放给浏览器看的代码，例如CSS
·body：网页主题，存放给用户看的代码，例如 图片、文字
·title：网页标题VS Code快速生成骨架：
在HTML文件(.html)中，!(英文)配合Enter或Tab键
标签的关系
作用：明确代码的书写位置
·父子关系（嵌套关系）
·兄弟关系（并列关系）
注释
注释就是对代码的解释和说明，其目的是让人们能够更加轻松地了解代码。注释是编写程序时，写程序的人给一个语句、程序段、函数等的解释或提醒，能提高程序代码的可读性。
在编写HTML代码时，我们经常要在一些关键代码旁做一下注释，这样做的好处很多，比如：方便理解、方便查找或方便项目组里的其他程序员了解你的代码，而且可以方便以后你对自己代码进行修改。
<!--...-->注释标签用来在源文档中插入注释，注释不会在浏览器中显示。
在VS Code中，添加/删除注释的快捷键：Ctrl+/
标题标签
一般用在新闻标题、文章标题、网页区域名称、产品名称等等。
标签名：h1~h6（双标签）
显示特点：
·文字加粗
·字号逐渐缩小
·独占一行（换行）
经验分享：
h1标签在一个网页中只能使用一次，用来放新闻标题或者网页的logo
段落标签
一般用在新闻段落、文章段落、产品描述信息等等
标签名：p（双标签）
显示特点：
·独占一行
·段落之间存在间隙
换行和水平线标签
换行：<br>（单标签）
水平线：<hr>（单标签）
文本格式化标签
作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等。
标签的主要部分有：开始标签(本例为p)、结束标签、内容
| 标签名 | 效果 | 标签名 | 效果 |
| strong | 加粗 | b | 加粗 |
| em | 倾斜 | i | 倾斜 |
| ins | 下划线 | u | 下划线 |
| del | s |
strong、em、ins、del标签自带强调含义（语义）。
图像标签
作用：在网页中插入图片。
语法：<img scr="图片的URL">
src用于指定图像的位置和名称，是<img>的必须属性。
alt用于替换文本，图片无法显示的时候显示的文字
title用于提示文本，图片悬停在图片上的时候显示的文字
width 图片的宽度 值为数字，没有单位
height 图片的高度 值为数字，没有单位
属性名 = "属性值"
属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序
路径
路径是指的查找文件时，从起点到终点经历的路线。
路径分类：
·相对路径：从当前文件位置触发查找目标文件
·绝对路径：从盘符出发查找目标文件
（Windows电脑从盘符出发，Mac电脑从根目录出发）
相对路径
/表示进入某个文件夹里面 文件夹名字/
.表示当前文件所在文件夹 ./
..表示当前文件的上一级文件夹 ../
绝对路径
语法：<img src="C:\images\dog.jpg">
从盘符出发的这个就是绝对路径
也可以填在线网址
绝对路径的应用场景：友情链接
超链接
作用：点击跳转到其他页面。
语法：<a href="https://www.baidu.com" target="_blank">跳转到百度</a>
href是页面的URL，是超链接的必须属性
<a>***</a>里面包裹的是超链接的名字
target="_blank" 是新标签页打开超链接的意思
音频标签
语法：<audio src="音频的URL"></audio>
常见属性
| 属性 | 作用 | 特殊说明 |
| src(必须属性) | 音频URL | 支持格式：MP3、Ogg、Wav |
| controls | 显示音频控制面板 | |
| loop | 循环播放 | |
| autoplay | 自动播放 | 为了提升用户体验，浏览器一般会禁用自动播放功能 |
视频标签
语法：<video src="视频的URL"></video>
| 属性 | 作用 | 特殊说明 |
| src(必须属性) | 视频URL | 支持格式：MP4、WebM、Ogg |
| controls | 显示视频控制面板 | |
| loop | 循环播放 | |
| muted | 静音播放 | |
| autoplay | 自动播放 | 为了提升用户体验，浏览器支持在静音状态自动播放 |
三、HTML（day2）
列表标签
作用：布局内容排列整齐的区域。
列表分类：无序列表、有序列表、定义列表。
无序列表
作用：布局排列整齐的不需要规定顺序的区域。
标签：ul嵌套li，ul是无序列表，li是列表表条目。
语法：
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
......
</ul>注意事项：
ul标签里面只能有li标签
li标签里面可以包裹任何内容
有序列表
作用：布局排列整齐的需要规定顺序的区域。
标签：ol嵌套li，ol是有序列表，li是列表条目。
语法：
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
....
</ol>注意事项：
ol标签里面只能包裹li标签
li标签里面可以包裹任何内容
定义列表
标签：dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的描述/详细。
语法：
<dl>
<dt>列表标题</dt>
<dd>列表描述/详细</dd>
</dl>注意事项：
dl里面只能包含dt和dd
dt和dd里面可以包含任何内容
表格
作用：网页中的表格与Excel表格类似，用来展示数据。
标签：table嵌套tr，tr嵌套td / th。
| 标签名 | 说明 |
| table | 表格 |
| tr | 行 |
| th | 表头单元格 |
| td | 内容单元格 |
提示：在网页中，表格默认没有边框线，使用border属性可以为表格添加边框线。
表格结构标签
作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰。
| 标签名 | 含义 | 特殊说明 |
| thead | 表格头部 | 表格头部内容 |
| tbody | 表格主体 | 主要内容区域 |
| tfoot | 表格底部 | 汇总信息区域 |
合并单元格
作用：将多个单元格合并成一个单元格，以合并同类信息。
扫一扫
2424
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
