HTML
- vs快捷键
- title 增加SEO优化
- 标题标签 h1~h6
- 段落p、换行br、水平线hr
- 图片
- 相对路径
- 超链接
- 文本标签
- 有序列表
- 无序列表
- 表格
- 表单
- 内联元素和块级元素
- HTML5新增标签
- CSS
- 选择器
- 选择器的优先级
- 字体属性
- 背景属性
- 文本属性
- 表格属性
- 选择器
- 盒子模型
- 弹性盒子模型 flex box
- 子元素上的属性
- flex或者flex-grow
- 脱离文档流
- 定位 position
- border-radius 圆角
- 阴影 box-shadow
- 动画 @keyframes
- opacity 透明度
- 媒体查询
- 设置 meta 标签
- 隐藏/显示 display
- 雪碧图(精灵图)
- 字体图标
vs快捷键
- 代码格式化:shift_alt+f
- 向上或向下移动一行:alt+up或alt+down
- 快速复制一行代码:shift+alt+up或shift+alt+down
- 快速保存:ctrl+s
- 快速查找:ctrl+f
- 快速替换:ctrl+h
title 增加SEO优化
SEO是搜索引擎优化的英文缩写
通过对网站内容调整,满足搜索引擎的排名需求
标题标签 h1~h6
h1 ~ h6 逐渐变小
快捷键:h$*6
把标题标签只用于标题,不仅能生成粗体和大号字体,还能提升 SEO
应该将 h1 用于主标题(最重要的),其次 h2 再其次 h3,以此类推
标题标签位置摆放
align:属性
align="left"
默认为左
center 中
right:右
段落p、换行br、水平线hr
水平线设置
<hr color = "" width="" size="" align=""/>
属性:
- color:设置水平线的颜色
- width:设置水平线的长度
- size:高度
- align:对齐方式(默认剧中,可取值 left | right)
图片
注意事项: img 是单标签,不需要进行闭合操作属性:
- src:路径(图片地址与名字)
- alt:规定图像的替代文本
- width:规定图像的宽度
- height:规定图像的高度
- title:鼠标悬停在图片上给予的提示
相对路径
- 子级关系:/
- 父级关系:…/
- 同级关系:./
超链接
用 a 标签来设置超文本链接
超链接可以是一个字,一个词或者一组词,也可以是一副图像,你可以点击这些内容来跳转到新的文档或者当前文档中的某个部分
<a href="url">链接文本</a>
超链接属性
在标签 a 中使用 href 属性来描述链接的地址
默认情况下。链接将以,以下形式出现在浏览器中:
- 一个未访问过的链接显示为蓝色字体并带有下划线
- 访问过的链接显示为紫色并带有下划线
- 点击链接时,链接显示为红色并带有下划线
文本标签
标签 | 描述 |
---|---|
en | 定义着重文字 |
b | 定义粗体文字 |
i | 定义斜体字 |
strong | 定义加重语气 |
del | 定义删除字 |
span | 元素没有特定的含义 |
注意:
常用文本标签和段落是不同的,段落代表一段文本,二文本标签一般表示文本词汇
有序列表
<ol>
<li></li>
</ol>
type 属性
- 的属性 type 拥有的选项
- 1:表示列表项目用数字标号(1,2,3…)
- a:表示列表项目用小写字母标号(a,b,c…)
- A:表示列表用大写字母标号
- i:表示列表用小写罗马数字标号(i,ii,iii…)
- I:表示列表用大写罗马数字标号(I,II,III…)
有序列表嵌套有序列表
<ol>
<li>
水果
<ol>
<li>苹果</li>
<li>橘子</li>
<li>西瓜</li>
</ol>
</li>
<li>2</li>
<li>3</li>
</ol>
无序列表
语法:
ul>li
快捷键
ul<li*3
type属性
ul 的属性 tyoe 拥有的选项
- disc:默认实心圆
- circle:空心圆
- square:小方块
- none:不显示
无序列表嵌套
<ul>
<li>
水果
<ul>
<li>苹果</li>
<li>橘子</li>
<li>西瓜</li>
</ul>
</li>
</ul>
表格
快捷键:table>tr2>td3{单元格}
语法:
<table>
:表格
<tr>
:行
<td>
:单元格(列)
单元格特点:同行等高,同列等宽
表格属性
- border:设置表格的边框
- width:表格的宽度
- height:表格的高度
单元格合并属性
- 水平合并:colspan 保留左边,删除右边
- 垂直合并:rowspan 保留上边,删除下边
表单
form
表单是由容器和控件组成你的,一个表单一般应该包含用户填写信息的输入框,提交按钮等,这些输入框,按钮叫做控件,表单就是容器,它能够容纳各种各样的控件
<form action="url" method="get | post" name="myform"></form>
属性说明:
- action:服务器地址
- name:表单名称
method中get 和 post 的区别
- 数据提交方式,get 把提交的数据 url 可以看到,post 看不到
- get 一般用于提交少量数据,post 用来提交大量数据
表单元素
一个完整的表单包含三个基本组成部分:表单标签,表单域,表单按钮
<form action="">
<input type="text">
<input type="submit"> // 按钮
</form>
value 替换文本
value=“11”:替换默认文本
文本框
文本域通过<input type = "text">
标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域
密码框
密码字段通过标