各种技巧
1.在Webstrom中 同时按ctrl+alt+insert创建新内容
2.输入标签按tab自动补全 按end 或 HOME实现光标移动到当前行的最后或最前
3.按住alt键不放同时按鼠标左键可以实现光标同时存在于多行 同时输入多行相同内容
4.ctrl+d 快速复制光标所在的一行 ctrl+x 快速删除光标所在的一行
5.选中内容 ctrl+alt+t 自动在内容前后补上标签
6.ctrl+/ 直接出现注释
7.ctrl+shift+↑（将选中的快速上移）
ctrl+shift+↓（将选中的快速下移）
8.快速合并代码（单个标签）：ctrl+ - （所有选中标签：ctrl+ shift+ -）
快速展开代码（单个标签）：ctrl+ + （所有选中标签：ctrl+ shift+ +）
9.shift+enter 新启一行
10.ctrl+f 查找 （通用）
一、 乱码现象: 编写网页时没有指定字符集
meata标签 指定网页字符集
解决方法： 在head标签中添加<meta charset = "GBK"/>
GBK(GB2312)/UTF-8区别 GBK里面存储的字符比较少，仅存储了汉字和一些常用的外文 体积比较少
UTF-8 里存储世界上所有汉字 体积比较大
注意 在html文件 中指定的字符必须和保存这个文件的字符集一致，否则还是出现乱码 （1.记事本 格式 字体 2.记事本另存为时有选择）
二、DTD文档
在最上面声明是H5 <!DOCTYPE html>
不区分大小写
三、 h标签 添加标题语义
h1到h6 h1最大 h6最小
在企业开发中慎用H1 一个网页只有一个H1
四、Hr标签
添加一条分割线 单独占一行
格式 <Hr /> /写不写都行
五、注释
<!--注释内容-->
六、img标签
<img src="">
给scr赋值有两种方法
①相对路径：从.html所在的文件夹直接找（直接用图片名<img src="***.jpg">） （分为上级：../***.jpg 下级：下一等文件夹名/***.jpg 同级）
②绝对路径（了解）：从盘符写图片路径
1.width
height
在img标签中 width/height告诉img显示的图片有多宽/高
两个都指定可能变形 只指定一个不会变形
2.title
当鼠标停留在图片上时 需要弹出的描述框中显示什么内容
3.alt
当图片找不到时 显示什么内容
七、br标签
换行
<br>
可以多个一起使用 有多个br标签换多少行
br很少用 描述完了用P标签
八、a标签
1.超链接
<a href="跳转的页面"> 原页面展示的内容</a>
2.a标签不仅可以让文字可以点击 也可以让图片(<img src="">)可以点击
3.如果通过a标签的href属性指定一个url地址，那么必须在地址前加上http://或https://
4.不仅可以转到别的网页 可以指定本地.html文件
5.a标签中有一个叫做 target属性，这个属性的作用就是专门用于控制如何跳转
①：_self :用于在当前选项卡中跳转 也就是不新建界面
②：-blank :用于在新的选项卡中跳转 也就是新建界面
6.a标签中有title（title=""）当光标停在链接文字上会提示""里的文字
九、base标签
1.用于统一指定当前网页中所有的超链接（a标签）如何打开
2.base标签必须写在head标签里
3.<base target="">(_self或_blank)
4.如果base标签和a标签中同时指定了target，浏览器会执行a标签中target
十、假链接
不会跳转的链接
①、#
②、javascript：
区别：#的假链接会自动回到网页的顶部，而JavaScript：的假链接不会自动回到网页顶部
十一、锚点
1.在当前页面跳转
2.<a href="#center">跳转到中部</a>
.
.
<h2 id="center">我是中部</h2>
3.通过我们定义的a标签跳转到指定的位置，是没有过度动画的，直接一下子跳转到指定位置
4.a标签也可以跳转到其他界面指定位置
<a href="***.html#center">跳转到其他中部</a>
。
。
<h2 id="center">我是中部</h2>
十二、
十三、表格
4.设置表格标题的标签叫做caption （居中）
caption一定要写在table标签中 紧跟在table标签后
5.th标签（td标签换为th）
专门存储每一列的标题 ，会将标题自动居中+加粗文字
6.合并单元格
水平方向合并: <td colspan="2"></td> 同时删除后面一个td标签
垂直方向合并：<td rowspan="2"></td> 同时删除“下面”一个td标签（即下一个tr里的下一个td）
7.表单
①.格式：
<form>
<表单元素>
</form>
②.常见表单元素
7.1.input标签 ：input里有一个type属性，这个属性有很多类型的取值，取值不同决定imput标签的功能和外观
<input type=""> : "text"为明文输入框 "password"为暗文输入框 <input type="" value=""> value给输入框附以默认值
"radio"为单选框（ <imput type="radio">
默认情况下单选框不会互斥，要想要互斥必须给单选框标签都设置一个name属性，然后name属性还必须设置相同值才可以
若想要单选框默认选中一个框子，那么可以给input标签添加一个checked属性 checked="checked"
）
"checkbox"为多选框(也可默认选中 checked="checked" )
"buttom" value="" 普通按钮 （value=""属性为按钮上加字）
"image" src="图片链接" 为图片按钮
"reset" 重置按钮（用于清空表单中已经写好的数据）
"submit" 提交按钮（
注意点：
1.需要在from中添加action属性并指定提交到的服务器地址
2.给需要提交的表单元素添加name属性
）
"hidden" 隐藏域（配合提交按钮将一些数据默默地提交到服务器
7.2.lable标签
将输入框与文字绑定在一起
格式：①.将文字利用label标签包裹起来
②.给输入框添加一个id属性
③.在lable标签中通过for属性和输入框中的 id进行绑定即可
（例：<lable for="account">账号：</lable><input type="text" id="account">）
7.3.非input标签
7.3.1.select标签
用于定义下拉列表
格式：<select>
<option>列表内容</option>
</select>
可以通过给option标签添加一个selected属性来指定列表的默认值
可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类》
<select>
<optgroup label="分组名称">
<option>列表内容</option>
</optgroup>
</select>
7.3.2.textarea标签
定义一个多行输入框
格式：<textarea>
</textarea>
可以给textarea标签添加cols和rows指定输入框的宽度和高度，但是还是可以输入无数行
默认情况下输入框可以手动拉伸
十四、多媒体标签
1.video标签
格式<video src="">
</video>
video标签的属性：
src：用于告诉视频的地址
autoplay：用于告诉是否需要自动播放视频 autoplay="autoplay"
controls：用于告诉是否需要显示控制条
poster： 用于视频没有显示之前显示一张占位图片
loop： 一般用于做广告视频，用于是否需要循环播放
preload: 用于预加载视频； preload和autplay相冲，如果设置了autplay属性，那么preload就会失效
muted: 用于静音
height：
2.video标签的第二种格式：播放视频
<video>
<source src="" type="">
<source src="" type="">
<source src="" type="">
</video>
存在意义：用于解决浏览器适配问题
video支持3种视频格式，我们可以把这三种格式都通过source标签指定给viodeo标签
（例：<video>
<source src="images/sbl.webm" type="video/webm">
<source src="images/sbl.mp4" type="video/mp4">
<source src="images/sbl.ogg" type="video/ogg">
</video>
）
3.audio标签：播放音频
两种格式：
①.<audio src="">
</audio>
②.<audio>
<source scr="" type="">
<source scr="" type="">
<source scr="" type="">
</audio>
(例：
<audio>
<source scr="images/sbl.wav" type="audio/wav">
<source scr="images/sbl.mp3" type="audio/mp3">
<source scr="images/sbl.ogg" type="audio/ogg">
</audio>)
和video属性差不多除了height/width/poster不能用其他能用
4.详情和概要标签
格式：
<details>
<summary>概要信息</summary>
详情信息
</details>
5.marquee标签
作用：跑马灯
格式：
<marquee>
内容
</marquee>
可以添加 direction=""属性改变方向（left/right/up/down）
可以添加 width/height
可以添加 scrollamount"" 属性改变滚动速度
可以添加 loop=""属性改变滚动次数
可以添加 behavior=""属性设置滚动类型 （slide滚动到边界就停止 alternate滚动到边界就弹回）
可以让图片滚动（<img src"" >）
6.html被废弃的标签
不是添加语义而是修改样式
①.<br> <hr> <font> <b> <u> <i> <s> 没有语义
有语义（被废弃后代替的标签）：
<strong>==<b> 定义重要性强调的文字
ins==<u> 定义插入的文字
em==<i> 定义强调的文字
del==<s> 定义被删除的文字 有语义
7.字符实体
空格：
<: <
>: >
版权符号： ©
HTML笔记作品
