html:5

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- 设置IE使用最新的文档模式进行渲染 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 适配移动端 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--
      lt  小于
      lte 小于等于
      gt  大于
      gte 大于等于
      !   逻辑非
  -->
  
  <!--[if lt ie 9]>
      <script src=""></script>
  <![endif]-->
  <title>Document</title>
</head>
<body>
    语言种类lang：en英文、zh-CN中文
    字符集charset：UTF-8(万国码)、GB2312(简体中文)
</body>
</html>

emmet语法

生成标签：输入div后按enter键或者tab键
生成多个相同标签*：div*3
生成父子关系的标签>：ul>li
生成兄弟关系的标签+：div+span
生成带有class或者id的标签：.className #idName
生成div有序的类名 $：.className$ *3
生成有序的内容{}：div{ $}*5 div{固定前缀$ 固定后缀}*5

文本格式化标签

加粗：<strong></strong>(推荐，语义更强烈)、<b></b>
倾斜：<em></em>(推荐)、<i></i>
删除线：<del></del>(推荐)、<s></s>
下划线：<ins></ins>(推荐)、<u></u>

div和span标签

div是division的缩写、span是行内标签

img图像

<img src="" alt="" title="" onload="" onerror=""/>
src：路径
alt：图像显示不出来的时候，alt代替
title：鼠标放到图片上显示的内容
width、height、border：单位像素
宽度和高度设置一个，让它等比缩放

a标签

<a href="" target="" download></a>
<a href="javascript:alert(222);">点击</a>
<a href="">刷新本网页</a>
<a href="#">回到顶部</a>
<a href="demo.html#id">跳到其他页面的锚点</a>

唤起指定应用（在移动端更好用）
<a href="tel:1990">电话</a>
<a href="mailto:1935@qq.com">邮箱</a>
<a href="sms:1990">短信</a>

href：跳转路径
target：跳转方式(_self(默认值：当前窗口打开)、_blank(新窗口打开))

外部链接：比如https://www.baidu.com/
内部链接：内部的html文件
空链接：# 回到顶部
浏览器打不开的文件，会触发下载：是一个.exe、.zip等文件
浏览器可以打开的文件，进行查看：MP4、jpg、pdf等文件
锚点链接：定位到页面的某个位置
    <a href="lxh"></a> <div id="lxh">

特殊字符

空格：或者
小于<：<
大于>：>
和号&：&
人民币￥：¥
版权：©
注册商标：®
摄氏度：°
正负号：±
乘号：×
除号：÷
平方2：²

表格

<table>
    <!-- 标题 -->
    <caption></caption>
    
    <!-- 头部 -->
    <thead height="" align="" valign=""></thead>
    
    <!-- 主体 -->
    <tbody align="" valign=""></tbody>

    <!-- 尾部 -->
    <tfoot height="" align="" valign=""></tfoot>

    <!--行-->
    <tr  height="" align="" valign="">
        <!--表头 加粗和居中-->
        <th width="" height="" align="" valign=""></th>
    </tr>
    <tr>
        <!--列-->
        <td width="" height="" align="" valign=""></td>
    </tr>
</table>

table：align表格的水平对齐方式
       border表格边框，默认没有边框
       cellpadding：内容与边框的距离，默认1像素
       cellspacing：单元格之间的空隙：默认2像素(css清空缝隙border-collapse: collapse)
       width：表格宽度，默认单位像素
       height：表格高度，默认单位像素
       
td：垂直对齐方式使用vertical-align: middle;
       
合并单元格：colspan、rowspan

列表

无序列表

<ul type='disc'>
    <li></li>
    <li></li>
    <li></li>
</ul>

type属性：disc(默认)、square、circle

去掉样式list-style-type: none;
       padding: 0;

有序列表

<ol type='1'>
    <li></li>
    <li></li>
    <li></li>
</ol>

type属性：1(默认)、a、A、i、I

去掉样式list-style-type: none;
       padding: 0;

自定义列表

<dl>
    <dt></dt>
    <dd></dd>
    <dd></dd>
<dl>

去掉样式
dd {
    margin: 0;
   }

框架标签iframe

<iframe src="" frameborder="0"></iframe>
name：框架名称，可以和target配合使用
frameborder：显示边框，值0或者1

表单

表单域

<form action="url" method="提交方式get/post" name="表单域的名称" target=""></form>

<form action="https://www.baidu.com/s">
    <input type="text" name="wd" />
    <button>搜索</button><!-- 按钮不推荐使用name属性 -->
    <button type="reset">重置</button>
</form>

<form action="https://search.jd.com/search" target="lxh">
    <input type="text" name="keyword" />
    <button>搜索</button>
</form>
<iframe name="lxh" frameborder="0"></iframe>

input

<input type="text" placeholder="请输入" value="" name="" maxlength="">

<input type="hidden" name="tag" value="隐藏域">

type：
    text文本框
    password密码框
    radio单选框，checked选中，name相同才能实现单选
    checkbox复选框，checked选中，name相同
    sumbit提交，value改变默认文字，name不推荐写
    reset重置，value改变默认文字，name不推荐写
    button普通按钮，可以用于获取验证码等
    file文件域
    image定义图片提交形式
    
    html5新增的type:
    email、url、date、time、month、week、number、tel、search、color
    
新增的属性：
    required: 必填
    placeholder: 提示内容
    autofocus: 自动聚焦
    autocomplete="" on开启(默认) off关闭 必须加上name属性并且提交成功过
    multiple 文件域选择多个
    
和label标签结合
    <label for="name">姓名：</label>
    <input type="text" id="name">

select下拉

<select name="" id="">
    <option value="" selected></option>
    <option value=""></option>
    <option value=""></option>
</select>

textarea文本域

<textarea name="" id="" cols="30" rows="10"></textarea>

<!-- 禁止拖放大小 -->
textarea {
    resize: none;
}

dir属性

<bdo dir="rtl">lxh</bdo> <!-- hxl -->
<div dir="rtl">xxx</div> <!-- 在右侧 -->

br、hr、pre

<br>
<hr>
<pre></pre>

fieldset、legend

<fieldset>
    <legend>优秀</legend>
    <div>内容</div>
</fieldset>

html5

新增标签

meter、progress

状态标签

<meter max="100" min="0" value="10" low="10" high="20" optimum="90"></meter>
<progress value="10" max="100"></progress>

datalist、details

列表标签

<input type="text" list="customId" />
<datalist id="customId">
    <option value="1">1</option>
    <option value="2">2</option>
</datalist>

<details>
    <summary>请问？</summary>
    什么
</details>

ruby、mark

<ruby>
    <div>你好</div>
    <rt>nihao</rt>
</ruby>

我们不<mark>难过</mark>好吗？

表单控件属性

<!-- novalidate不验证 -->
<form novalidate></form>

placeholder

required

autofocus

autocomplete

一般用在用户名上

pattern

一般和required一起使用，不然为空也可以提交

<form action="">
    <input autocomplete="on" pattern="正则表达式">
</form>

input的type属性

email

url

number

<input type="number" step="2" max="100" min="0">

tel

在移动端里弹出键盘是数字

range

<input type="range" max="100" min="0">

color

提交的是十六进制

date、month、week、time、datetime-local

视频

controls 显示控制器

<video src="" autoplay muted></video>
/* 兼容性 */
<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持Video标签。
</video>
autoplay 自动播放
    注意：chrome不会自动播放，解决加上muted，如果媒体参与度
    (chrome://media-engagement/)
    到一定的值后，不加muted也会自动播放
muted 静音播放
controls 播放控件
loop 循环播放
poster="" 加载等待的图片，视频和图片尺寸一致最好
preload="auto" 预加载 none不预加载 如果写了autoplay自动忽略这项
width 播放器宽度
height 播放器高度

音频

controls 显示控制器


<audio src="" loop controls></audio>
<!-- 除了没有poster、width、height，和视频属性一样都有 -->
<!-- 兼容性 -->
<audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
</audio>

全局属性

contenteditable

值true、false

draggable

值true、false

hidden

spellcheck

值true、false，浏览器需要打开拼写检查

contextmenu

data-

私有数据

图片格式

jpg、jpeg：有损压缩，优点：支持的颜色丰富、体积小，缺点：不支持透明背景、不支持动态图
png：无损压缩，优点：支持的颜色丰富、支持背景透明，缺点：体积略大，不支持动态图
bmp：不压缩，优点：支持颜色丰富、保留的细节更多，缺点：体积极大、不支持透明背景、不支持动态图
gif：优点：支持简单透明背景、支持动态图，缺点：只支持256种颜色，
webp：谷歌推出的一种格式，具备上面几种格式的优点，缺点：兼容性不太好
base64：一串特殊的文本，data:image/jpeg(这里的格式根据图片而定);base64,（一些较小的图片，需要和网页一起加载的图片）

谷歌浏览器常用快捷键

清除浏览数据：ctrl + shift + delete
显示或隐藏书签栏：Ctrl + Shift + b
将当前网页保存为书签：Ctrl + d
打开书签管理器：Ctrl+ Shift + o
历史记录：ctrl + h

html

html:5

emmet语法

文本格式化标签

div和span标签

img图像

a标签

特殊字符

表格

列表

无序列表

有序列表

自定义列表

框架标签iframe

表单

表单域

input

select下拉

textarea文本域

dir属性

br、hr、pre

fieldset、legend

html5

新增标签

meter、progress

datalist、details

ruby、mark

表单控件属性

placeholder

required

autofocus

autocomplete

pattern

input的type属性

email

url

number

tel

range

color

date、month、week、time、datetime-local

视频

音频

全局属性

contenteditable

draggable

hidden

spellcheck

contextmenu

data-

图片格式

谷歌浏览器常用快捷键

css

谢谢