学习之路-前端-笔记-1、HTML笔记

时间 2019-11-06

标签学习之路前端笔记 html 栏目 HTML 繁體版

原文原文链接

本文转载于:猿2048网站➫学习之路-前端-笔记-1、HTML笔记javascript

各类技巧
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+↑（将选中的快速上移）php

ctrl+shift+↓（将选中的快速下移）

8.快速合并代码（单个标签）：ctrl+ - （全部选中标签：ctrl+ shift+ -）
快速展开代码（单个标签）：ctrl+ + （全部选中标签：ctrl+ shift+ +）html

9.shift+enter 新启一行前端

10.ctrl+f 查找（通用） java

1、乱码现象: 编写网页时没有指定字符集 web

meata标签指定网页字符集浏览器

解决方法：在head标签中添加<meta charset = "GBK"/>服务器

GBK(GB2312)/UTF-8区别 GBK里面存储的字符比较少，仅存储了汉字和一些经常使用的外文体积比较少
UTF-8 里存储世界上全部汉字体积比较大ide

注意在html文件中指定的字符必须和保存这个文件的字符集一致，不然仍是出现乱码（1.记事本格式字体 2.记事本另存为时有选择）oop

2、DTD文档
在最上面声明是H5 <!DOCTYPE html>
不区分大小写

3、 h标签添加标题语义
h1到h6 h1最大 h6最小
在企业开发中慎用H1 一个网页只有一个H1

4、Hr标签
添加一条分割线单独占一行
格式 <Hr /> /写不写都行

5、注释

6、img标签

<img src="">
给scr赋值有两种方法
①相对路径：从.html所在的文件夹直接找（直接用图片名<img src="***.jpg">）（分为上级：../***.jpg 下级：下一等文件夹名/***.jpg 同级）
②绝对路径（了解）：从盘符写图片路径

1.width
height
在img标签中 width/height告诉img显示的图片有多宽/高
两个都指定可能变形只指定一个不会变形
2.title
当鼠标停留在图片上时须要弹出的描述框中显示什么内容
3.alt
当图片找不到时显示什么内容

7、br标签
换行

<br>
能够多个一块儿使用有多个br标签换多少行
br不多用描述完了用P标签

8、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=""）当光标停在连接文字上会提示""里的文字

9、base标签
1.用于统一指定当前网页中全部的超连接（a标签）如何打开
2.base标签必须写在head标签里
3.<base target="">(_self或_blank)
4.若是base标签和a标签中同时指定了target，浏览器会执行a标签中target

10、假连接
不会跳转的连接
①、#
②、javascript：
区别：#的假连接会自动回到网页的顶部，而JavaScript：的假连接不会自动回到网页顶部

11、锚点
1.在当前页面跳转
2.<a href="#center">跳转到中部</a>
.
.
<h2 id="center">我是中部</h2>

3.经过咱们定义的a标签跳转到指定的位置，是没有过分动画的，直接一会儿跳转到指定位置

4.a标签也能够跳转到其余界面指定位置
<a href="***.html#center">跳转到其余中部</a>
。
。
<h2 id="center">我是中部</h2>

12、

十3、表格

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标签来给下拉列表中的数据分类》

7.3.2.textarea标签
定义一个多行输入框
格式：<textarea>
</textarea>

能够给textarea标签添加cols和rows指定输入框的宽度和高度，可是仍是能够输入无数行
默认状况下输入框能够手动拉伸

十4、多媒体标签
1.video标签
格式<video src="">
</video>

video标签的属性：
src：用于告诉视频的地址
autoplay：用于告诉是否须要自动播放视频 autoplay="autoplay"
controls：用于告诉是否须要显示控制条
poster：用于视频没有显示以前显示一张占位图片
loop：通常用于作广告视频，用因而否须要循环播放
preload: 用于预加载视频； preload和autplay相冲，若是设置了autplay属性，那么preload就会失效
muted: 用于静音
width:
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> 定义被删除的文字有语义

HTML笔记做品