目录
第二集：HTML入门
1.网页的组成：
-
HTML: 内容层—负责页面的内容—文字 链接 图片…
-
CSS：样式层—负责页面的样式—颜色 大小 位置 表现…
-
JavaScript：行为层—负责页面的行为—交互效果 轮播图
-
页面的内容与样式也有标准，它的标准是由w3c制定的，万维网联盟
2.完整的HTML结构
打开VSCode，新建一个index.html的文件
如图所示，然后把index.html点击拖到VSCode中打开
按住Shift加数字1打出一个英文的"!"
点击回车即可
这样就是完整的结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>3.HTML标签
- 1.文本样式的标签
<b></b> 加粗
<i></i> 斜体
<u></u> 下划线
<s>删除线文本</s>
h5提供了一些带有语义的标签，通常带语义的标签更容易理解和记忆
<strong>加粗文本</strong>
<em></em> 斜体
<del></del> 删除线
<mark></mark> 高亮标记
X<sup>2</sup> 上标字
Y<sub>1</sub> 下标字
- 2.换行标签
<br> 或 <br/> 单标记标签
在编辑器中敲回车是不可以让大段文字换行的，如果需要让内容换行，可以使用该标签
- 3.注释
格式 <!-- 被注释掉的内容 -->
注释就是不被浏览器解析执行的内容，它是为了解释代码用的
(1)注释内部不能嵌套注释
(2)在<>里不可以写注释
快捷键 Ctrl+/ 再按一次取消注释
- 4.转义符号
© 版权声明 ©
® 注册商标 ®
™ 商标符号 ™
× 关闭符号/乘号 ×
⊗ 带圈的关闭符号⊗
÷；除号 ÷
< 小于号 <
> 大于号 >
空格
空格折叠现象：多个空格与换行会折叠成一个空格显示
- 5.段落标签
<p></p>
自己单独成行，上下方向有垂直的行间距
lorem是用于生成假文的，先输入Lorem出现提示回车或者Tab补全均可
- 6.标题字标签
<hn></hn>n从1~6
单独成行, h1最大 h6最小,字体加粗 上下有垂直的行间距
- 7.水平分割线标签
<hr> 或者 <hr/> 单标记标签
在页面上添加一条独占一行的分割线，我们还可以设置分割线的属性
<hr color="red" size="10px">
4.图片
<img /> 单标记标签
属性：
src =“图片资源的路径/url”【必写】
alt =“资源加载失败时显示的替换文字”
width = “图片的宽度 单位(%或px)”
height = “图片的高度 单位(%或px)”
<img src="./640.png" alt="哎呀图片走丢了"/>
如何图片没有正常显示，会显示alt="哎呀图片走丢了"里面的内容！
欢迎留言进行讨论~~
大型连戏剧之前端学习！
关注我让你从小白到大神！
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
