一、准备开发环境
在哪写代码？编辑器 Sublime Text WebStrom HBuilder X Visual Studio Code
在哪看效果？浏览器 谷歌edge
VS Code 基本使用
● 打开文件夹 任意文件夹→拖拽至vs Code 空白位置即可
● 安装插件
扩展→搜索插件→安装→重启VS Code
打开网页插件:open in browser
汉化菜单插件:Chinese
● 缩放代码字号
放大:Ctrl+加号
缩小:Ctrl+减号
二、HTML5
1.HTML 定义
HTML 超文本标记语言 -- HyperText Markup Language。
· 超文本是什么? 链接
· 标记是什么? 标记也叫标签,带尖括号的文本
2.标签语法
● 标签成对出现,中间包裹内容
●<>里面放英文字母(标签名)
● 结束标签比开始标签多/
● 拓展
◆ 双标签:成对出现的标签
◆ 单标签:只有开始标签,没有结束标签
<br>:换行
<hr>:水平线
3.HTML 基本骨架
HTML 基本骨架是网页模板。
<html>
<head>
<title>网页标题</title>
</head>
<body>
网页主体
</body>
</html>
◆ html:整个网页
◆head:网页头部,存放给浏览器看的代码,例如CSS
◆ body:网页主体,存放给用户看的代码,例如 图片、文字
◆ title:网页标题
VS Code 快速生成骨架:
在HTML文件(.html)中,! (英文)配合Enter/Tab键
4.标签的关系
作用:明确代码的书写位置
父子关系(嵌套关系)
· 兄弟关系(并列关系)
5.注释
注释就是对代码的解释和说明,其目的是让人们能够更加轻松地了解代码。注释是编写程序时,写程序的人给一个语句、程
序段、函数等的解释或提示,能提高程序代码的可读性。
学习和工作中,关键代码都要加注释
在编写HTML代码时,我们经常要在一些关键代码旁做一下注释,这样做的好处很多,比如:方便理解、方便查找或方便项
目组里的其它程序员了解你的代码,而且可以方便以后你对自己代码进行修改。
<!--....-- >注释标签用来在源文档中插入注释,
注释不会在浏览器中显示。
在VS Code 中
添加/删除注释的快捷键:
Ctrl + /
6.标题标签
- h1 标签在一个网页中只能用一次,用来放新闻标题或网页的logo
h2~h6 没有使用次数的限制
- 在浏览器中,各个标题标签的显示效果有什么特点?
文字加粗
字号逐渐减小
独占一行
- 哪个标题标签有使用次数的限制?
h1:一个网页就用一次,用来放新闻标题或网页Logo
7.段落标签
标签名:p(双标签)
显示特点:
· 独占一行
· 段落之间存在间隙
8.换行与水平线标签
- 代码中敲Enter换行,在浏览器中有换行的效果吗?
没有换行效果
- 强制换行的标签是什么?
<br>单标签
- 水平线标签是什么?
<hr>单标签
9.文本格式化标签
作用:为文本添加特殊格式,以突出重点。常见的文本格式:加粗、倾斜、下划线、删除线等。
标签的主要部分有:
1.开始标签(Opening tag):包含元素的名称(本例为p),被左、右角括号所包围。表示元素从这里开
始或者开始起作用--在本例中即段落由此开始。
2.结束标签(Closing tag):与开始标签相似,只是其在元素名之前包含了一个斜杠。这表示着元素的结
尾 -- 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误,这可能会产生一些奇怪的
结果。
3.内容(Content):元素的内容,本例中就是所输入的文本本身。
10.图像标签-基本使用
作用:在网页中插入图片。
<img src="图片的URL">
Src用于指定图像的位置和名称,是<img>的必须属性。
· 属性名="属性值"
· 属性写在尖括号里面,标签名后面,标签名和属性之间用空格隔开,不区分先后顺序
11.路径-相对和绝对
- 在路径写法中,以下符号表示什么含义?
. 当前文件所在文件夹
.. 当前文件上一级文件夹
/ 进入某个文件夹里面
++路径++指的是查找文件时,从起点到终点经历的路线。
路径分类:
· 相对路径:从当前文件位置出发查找目标文件
· 绝对路径:从盘符出发查找目标文件
Windows 电脑从盘符出发
Mac 电脑从根目录出发
12.超链接标签
作用:跳转到其它页面
- 超链接标签的作用是什么?
单击跳转到其他页面
- 开发初期,不确定跳转地址,如何书写href属性值?
空链接
- target="_blank"属性的作用是什么?
在新窗口打开页面
13.多媒体标签
音频标签
<audio src="音频的URL"></audio>
常见属性
13.列表
列表 作用:布局内容排列整齐的区域。
列表分类:无序列表、有序列表、定义列表。
13.1无序列表
作用:布局排列整齐的不需要规定顺序的区域。
标签:ul嵌套li,ul是无序列表,li是列表条目。
注意事项:
· ul 标签里面只能包裹li标签
· li标签里面可以包裹任何内容
13.2有序列表
作用:布局排列整齐的需要规定顺序的区域。
标签:ol嵌套li,ol是有序列表,li是列表条目。
注意事项:
· ol 标签里面只能包裹li标签
· li标签里面可以包裹任何内容
13.3定义列表
标签:dl嵌套dt和dd,dl是定义列表,dt是定义列表的标题,dd是定义列表的描述/详情。
注意事项:
· dl里面只能包含dt和dd
· dt和dd里面可以包含任何内容
14.表格
1.表格的基本使用
标签:table嵌套tr,tr嵌套td/th。
提示：在网页中，表格默认没有边框线，使用border属性可以为表格添加边框线
2.表格结构标签-了解
作用:用表格结构标签把内容划分区域,让装格结构更清晰,语义更清晰。
15.合并单元格
作用：将多个单元格合并成一个单元格，以合并同类信息
合并单元格的步骤:
-
明确合并的目标
-
保留最左最上的单元格,添加属性(取值是数字,表示需要合并的单元格数量)
-
跨行合并,保留最上单元格,添加属性 rowspan
-
跨列合并,保留最左单元格,添加属性colspan
- 删除其他单元格
16.表单
表单
作用:收集用户信息。
使用场景:
· 登录页面
· 注册页面
· 搜索区域
16.1 input 标签基本使用
input 标签type属性值不同,则功能不同。
<input type=" ... ">
16.2 input标签占位文本
占位文本：提示信息
<input type="..." placeholder="提示信息">
16.3 单选框radio
16.4上传文件-file
默认情况下,文件上传表单控件只能上传一个文件
,添加multiple属性可以实现文件多选功能。
<input type="file" multiple>
16.5 多选框-checkbox
多选框也叫复选框。
默认选中:checked。
<input type="checkbox"checked>敲前端代码
16.6 下拉菜单
16.7 文本域
16.8 label标签
label 标签-增大点击范围
写法一
● label标签只包裹内容,不包裹表单控件
● 设置label 标签的for 属性值 和表单控件的id属性值相同
<input type="radio" id="man">
<label for="man">男</label>
● 写法二
● 使用label标签包裹文字和表单控件,不需要属性
<label><input type="radio">女</label>
提示:支持label标签增大点击范围的表单控件:文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。
16.9 按钮-button
<button type=">按钮</button>
type属性值:
17.无语义的布局标签
17.1 div和span
布局网页
● div:独占一行
span:不换行
● 作用:
(划分网页区域,摆放内容)
<div>div标签,独占一行</div>
<span>span标签,不换行</span>
17.2 字符实体
作用：在网页中显示预留字符
