1、简单的网页
<!DOCTYPE html> // 声明是html文档
<html> // html标签开始
<head> // head标签开始
<meta charset="utf-8”> // 设置解码格式
<title>我是大标题</title> // title标签，设置title标题
</head> // 头部标签结束
<body> // 身体标签开始
我是内容 // body中的内容
</body> // body标签结束
</html> // html标签结束2、Visual studio Code快捷键
!+tab,ul>(li>a)*6
tab = 缩进，shift+table = 反缩进；
alt+shirt+f = 格式化代码
alt+shirt+a = 注释
alt+shirt+command+上下键 = 多光标编辑
alt+鼠标 = 多光标编辑
alt+上下键 = 上下移动代码
command+方向键 = 最边上
command+shirt+方向键 = 选中从当前位置到最边上的距离
3、标签
<h1>一级标题</h1> // 一级标题，共h1-h6，有语义
<p></p> // 段落标签
<div></div> // 区块标签
<span></span> // 文本标签，没有语义
<a href=“http://www.baidu.com” target="_blank"></a> // target=”_self” 覆盖当前页面,target=”_blank” 打开新的标签页
<img src="./images/001.jpg" alt="风景”> // alt图片的描述 很重要 必须加
<br>// 换行标签
4、字符实体
// non breaking space 空格
< // less than 小于
> // great than 大于
& // &
5、简单的样式
// 样式需要写在style标签里
<style>
p{ // p是标签，此处用p标签写
color: red; // 设置颜色
width: 100px; // 设置大小，用px
}
</style>color: // 设置颜色
width: // 宽
height: // 高
background-color: // 背景色
border: 10px solid blue; // 边框，线宽10px 实线 蓝色，solid实线，dashed虚线，dashed点线
border-left: 5px solid blue; // 单独设置四周边框
padding: 40px 20px 50px 30px;// 内边距（上右下左）,（上 左右 下）,（上下 左右），（四周都一样）
padding-right: 20px; // 四周也可以单独写
margin: 40px 20px 50px 30px;// 外边距，写法和用法参考padding
6、样式的引入方式
<style></style> // 嵌入式
<div style="color:red;width:200px;height:200px;">哈哈哈</div> // 内联式 不推荐使用
<link rel="stylesheet" href="./css/010样式引入.css”> // 外链式
7、类选择器
<p class="big heheblue">呵呵呵呵呵呵</p> // 个标签可以使用多个类选择器 用空格隔开
<p class="big">嘿嘿哈哈哈哈哈哈</p> // 同一个选择器可以被多个标签使用
8、浮动
float: left; // 左浮动 right 右浮动
9、相对地址和绝对地址
<img src="C:/Users/Administrator/Desktop/shpython02/images/003.jpg" alt=“”> // 绝对地址 不推荐使用 不利于项目迁移
<img src="../images/002.jpg" alt=“"> // ../上一级目录,./ 代表当前目录 如果是当前目录 ./可以省略
219
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
