插件：
Chinese 中文插件
Live Server 插件 实时更新网页 （在html文件中，按ctrl+shift+p，选择 Open With Live Server）
VScode 配置 + 操作：
更换主题： 文件 -> 首选项 -> 颜色主题 Light + ( default light )
ctrl + 鼠标滚轮缩放字体 文件 -> 首选项 ->设置，搜索 “滚动” 勾上
按住鼠标滚轮，下拉，多行编辑
快捷键：
Sublime 快捷键扩展 集成 Sublime快捷键
ctrl + shift + d 复制当前行
ctrl + shift + ↑ 上移当前行
ctrl + shift + ↓ 下移当前行
ctrl + N 新建文件，保存要手动填写.html后缀
！+ tab 自动生成html 骨架
ctrl + / 快速注释
浏览器私有前缀：用来对实验性质得CSS属性加以标识
Chrome ： -webkit-
Firefox ： -moz-
IE、Edge ： -ms-
欧朋 ： -o-
HTML 骨架：
第一行必须是 DTD：文档类型声明 不写会引发浏览器兼容问题
HTML5: <!DOCTYPE html>
<head>标签对是网页的配置，不是网页的头部
<body>标签对是网页的内容，包括网页头，主要内容和页脚
<meta>标签表示网页的基础配置
<meta>： name属性 = Keywords（页面搜索关键词） Description（页面描述） 提高seo搜索性能
标签：
<h1></h1> 系列标签 有 h1 ~ h6 通常一个网页只有一个 h1标签，多了会被百度认为是在"作弊"
<p></p>： 段落标签 h标签不能包含p , p 也不能包含 h
转义字符：
< 小于号
> 大于号
空格
© 版权符号©
HTML注释: <!-- -->
class属性 类名：
页头 ： header 、 logo： logo 、 导航条 ： nav 、 横幅 ： banner 、 内容部分： content 、 页脚 ： footer
列表：
无序列表 ul type属性 实心圆：desc 空心圆：circle 方形实心：square
有序列表 ol ： type = "a / A / i / I / 1" start = "一个整数" reverse 倒序
定义列表 dl : dt 定义项 dd : 定义内容 dt / dd 同级
img 标签：
引入 src = "文件目录 / 文件命"
代替品 alt = "图像文本描述" 图片无法加载时，浏览器会显示alt 属性的备用文本
width / height = "不用加px" 如果省略其中一个属性，表示按原始比例缩放图片（设置一个就好，会等比例缩放）
a 标签:
href = "url" 可以放相对链接 或者 绝对链接 ../ = 上级目录
url 后加 #id 移动到网页锚点位置 (在标签设置 id 当锚点)
直接 #top 返回页面顶部（html5）
href = "mailto:me@test.com" 自动打开Email相关软件 mailto: 前缀的链接是邮件链接
href 指向 exe、zip、rar等文件格式链接，自动变成下载链接 例如： href = "1.zep"
href = "tel: 12306" 自动打开拨号盘 tel: 前缀的链接是电话链接
title 设置鼠标移过去显示内容
audio(音频) 和 video(视频) 标签：
src = “链接”
controls属性显示播放控件
标签对中是对不兼容audio标签的浏览器显示文字
autoplay 自动播放（一般不用，浏览器可能会不允许自动播放音乐，需要用户手动点击）
loop 循环播放
常用音频格式: mp3 和 ogg 、 常用视频格式: mp4 和 ogv 、webm
<!-- 语义化标签 -->
html5区块标签：
section : 文档的区域，语义比div大
article：文档的核心文章内容，会被搜索引擎主要抓取
aside ：文档的非必要相关内容，广告等
nav ：导航条
header : 页头
main : 网页核心部分
footer ： 页脚
span 标签 跨度分割，行内元素 用于标记
b 、u 、i 标签：已经被css代替 偶尔使用
b : 加粗文字 u : 加下划线 i : 倾斜文字
strong 、 em 、mark标签 ：均表示强调语义
strong : 特别重要的文字
em : 强调文字
mark : 一段需要被高亮的文字
figure 、 figcaption 标签： 两个标签配合使用
figure ： 代表一段独立的内容
figcaption ： 独立的引用单元，把一部分转移到别的地方不会影响到主体
<!-- 语义化标签结束 -->
<!-- form 表单标签 -->
action = “提交到后台程序的网址” method = "提交方式" (post 、 get)
<!-- input标签 ： -->
type = "text" 文本框 ：
value = "提前存在的文本框内容" placeholder = "提示文本框输入内容" disable ： 停止文本框交互
type = "radio" 单选按钮 要有 value属性值 ，向服务器提交的就是 value 的值 checked属性,默认选中 单选按钮的name属性要一致
type = "checkbox" 多选按钮 和单选按钮一样
type = "password" 密码框
type = button 普通按钮 value = "按钮内容"
type = submit 提交按钮
type = reset 重置按钮
html5新增 input 类型: required 必填
time : 时间 、 color : 颜色 、 date : 日期 、 email : 邮件 、 number ：数字 (min = "最小输入" max = "最多输入")
range ： 拖拽条（min = "最小输入" max = "最多输入"）、 search : 搜索框、 网址 ：url 、 文件 : file
<!-- 下拉菜单 -->
select 标签标识下拉菜单、 option标签 是他的内部选项 (value属性、selected默认选中)
<!-- 多行文本框 -->
textarea 标签对 rows和cols 属性，用来定义多行文本框的行数和列数
<!-- lable 标签 -->
用来将文字与单选按钮绑定，点击文字也会视为点击了单选按钮（html5 包裹 单选按钮即可）(html4 单选按钮价加个id lable标签加个 for = "id")
<!-- datalist控件 -->
为输入框提供一些选项，当用户输入的内容和备选项文字相同时，将会显示智能感应
例： < input type = "text" list = "province-list">
<datalist id = "province-list">
<option value = "山东">
<option value = "山东">
<option value = "山东">
</datalist>
<!-- 表格标签 -->
<table> 包含 <tr>(table row) 包含 <td>(table data) / <th> 标题小格
border = "1" 属性 边框
caption标签 大标题 ， 常常作为第一个子元素出现
width属性
colspan属性 单元格跨度 rowspan属性 行跨度 都是设置td/th的
thead 标签 表头， tbody标签 表格内容、 tfoot 标签 表脚目的是为了清晰
共同学习，写下你的评论
评论加载中...
作者其他优质文章
