各种技巧
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: 用于静音
width:
height：

2.video标签的第二种格式：播放视频
<video>
<source src="" type="">
<source src="" type="">
<source src="" type="">
</video>

存在意义：用于解决浏览器适配问题
video支持3种视频格式，我们可以把这三种格式都通过source标签指定给viodeo标签

（例：<video>
<source src="data:images/sbl.webm" type="video/webm">
<source src="data:images/sbl.mp4" type="video/mp4">
<source src="data: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.字符实体
空格： &nbsp;
<: &lt;
>: &gt;
版权符号： &copy;

HTML笔记作品

学习之路-前端-笔记-一、HTML笔记的更多相关文章

  1. python学习之路前端-jQuery

    jQuery简介      JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safa ...

  2. python学习之路前端-JavaScript

    JavaScript简介 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本 ...

  3. python学习之路前端-HTML

    HTML概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以 ...

  4. python学习之路前端-Dom

    Dom简介    文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为 ...

  5. python学习之路前端-CSS

    CSS概述 css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 存在方式有三种:元素内联.页面嵌入和外部引入,比较三种方式的优缺点. 语法:style ...

  6. [原创]java WEB学习笔记75：Struts2 学习之路-- 总结 和 目录

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  7. [原创]java WEB学习笔记66：Struts2 学习之路--Struts的CRUD操作( 查看 / 删除/ 添加) 使用 paramsPrepareParamsStack 重构代码 ，PrepareInterceptor拦截器，paramsPrepareParamsStack 拦截器栈

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  8. [原创]java WEB学习笔记54：Struts2学习之路---概述，环境的搭建

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  9. jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

随机推荐

  1. requests 处理异常错误 requests.exceptions.ConnectionError HTTPSConnectionPool [Errno 10060]

    使用python requests模块调用vmallarg.vmall.com接口API时报如下错误: requests.exceptions.ConnectionError: HTTPSConnec ...

  2. ionic cordova platform add android Cordova failed to install plugin Error: ENOENT: no such file or directory AndroidManifest.xml

    问题描述: 在ionic 项目中出现编译android 的时候 出现 Cordova failed to install plugin  Error: ENOENT: no such file or ...

  3. Apache-Flink深度解析-State

    摘要: 实际问题 在流计算场景中,数据会源源不断的流入Apache Flink系统,每条数据进入Apache Flink系统都会触发计算.如果我们想进行一个Count聚合计算,那么每次触发计算是将历史 ...

  4. 【转载】uCOS2 关于进程调度的O(1)算法

    uCOS2唯一值得学习的一个地方就是关于进程调度的O(1)算法: 最简单也是最愚蠢的方法是维护一个链表List. 这种方法的问题是:当一个Thread就绪时,如果根据其优先级插入List,则算法的时间 ...

  5. 你不知道的Node.js性能优化，读了之后水平直线上升

    本文由云+社区发表 "当我第一次知道要这篇文章的时候,其实我是拒绝的,因为我觉得,你不能叫我写马上就写,我要有干货才行,写一些老生常谈的然后加上好多特技,那个 Node.js 性能啊好像 D ...

  6. 自动生成实体类和xml

    1 首先eclipse需要安装一个插件 2 两个配置文件 1 generator.properties 2 generator.xml <?xml version="1.0" ...

  7. Maven三种仓库的配置

    转自:https://www.cnblogs.com/jack1995/p/6925879.html Maven三种仓库的配置 1 本地仓库的配置 在第一篇中我们介绍过,Maven的仓库有三类,这里不 ...

  8. MySQL/MariaDB表表达式(3)：视图

    视图是表表达式的一种,所以它也是虚拟表.对视图操作的时候会通过语句动态的从表中临时获取数据. 1.创建.修改视图 CREATE [OR REPLACE] [ALGORITHM = {UNDEFINED ...

  9. 应用负载均衡之LVS(三)：ipvsadm命令

    */ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...

  10. 举例分析 Makefile 中的 filter 与 filter-out 函数

    $(filter pattern-,text) Returns all whitespace-separated words in text that do match any of the patt ...