第一行代码，hello,world
初始
1
<p>hello,world</p>
<p>：paragraph，段落<h1>：一级标题<h2>：二级标题，以此类推至h6
添加样式
格式
1
<p style="width: 20px">文字内容</p>
<>内加
style=“ ”，“ ”内加xxx: xxxpx：pixel，像素
1
2
3<Orca style="background: powderblue">自定义标签</Orca> # 字多少模块就多大
<Orca style="background: powderblue;display: block;">自定义标签但块</Orca> # block
<p style="background: red">默认style标签</p> # 默认block定义模块
1
2
3
4
5
6
7
8
9
10
11<box style="
width: 200px; # 宽度
height: 50px; # 高度
background: powderblue; # 盒子颜色
display: block; # 样式为块
margin: 30px auto; # 边距 上下30 左右自动
border: 5px solid black; # 边框
padding: 20px; # 高度20
">
盒子
</box>margin：外边距，与其他模块之间的距离padding：内边距，与内容的距离，防止移动端显示贴边什么的border：边框align：对齐分区
1
<div></div>
<div>：division，分区，无实意1
2
3
4
5
6<div style="
background-color: powderblue;
padding: 10px;
text-align: center;
font-size: 12px;
"></div>font：字体插入图片
1
<img src='url' alt="图片名" width="xxpx" height="xxpx">
alt：alternative text，替代文本本地图片：放同级目录，用文件名
插入链接
1
<a href="url">
目前用到的函数汇总
<style>1
2
3
4
5
6
7
8
9width: 10px;
height: 10px;
max-width: 700px; # 防止占全屏
text-aligh: center; # 文字对齐: 居中
line-height: 1.7; # 行高: 1.7倍
margin: 30px auto; # 外边距: 上下 左右auto(自动两边相等-居中)
padding: 15px; # 内边距
border: 5px solid pink # 边框: 参数 样式 颜色
border-radius: 5px; # 边框圆角radius：半径
标签
<meta>：元数据 放head里 整个网页的属性1
2
3
4
5
6<meta charset="UTF-8" /> # 字符集为UTF-8
<meta http-equiv="X-UA-Compatible" content="IE=edge"> # 兼容老浏览器(可有可无)
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
# 显示宽度为设备宽度 初始比例1.0
<title>Document</title><div>：division 可包含任意种类标签 因此用的最多问题
问题：固定在底部的div遮挡其他元素
方案：为
body设置margin-bottom值为置底<div>的height
快捷键
Ctrl + D 选下一个相同字符
Alt + 左键 添加光标，同时编辑多处地方
Shift + Alt + ↑/↓ 复制到上/下一行
HTML & CSS & JavaScript
HTML (HyperText Markup Language)：是什么
相当于房子的结构，定义网页的内容和结构，如标题、段落、图像、列表等。
CSS (Cascading Style Sheets)：看起来
相当于房子的装修，定义网页的样式布局，例如颜色、字体、间距、背景等。
JavaScript：做什么
相当于房子的电器和各种互动装置，为网页添加交互性和动态行为。 JavaScript 可以响应用户操作，修改网页内容，与服务器通信，以及实现各种复杂的动画和特效。