各种技巧
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. php内核之HashTable

    Zend 把与 HashTable 有关的 API 分成了好几类以便于我们查找,这些 API 的返回值大多都是常量SUCCESS 或者 FAILURE. 初始化 HashTable 下面在介绍函数原型 ...

  2. 使用 dotTrace 分析 .NET Core 代码问题

    0.背景 在项目开发之中,前期可能主要以保证任务完成为主,对于性能优化主要在于开发完成之后再来进行.可能在测试的时候发现部分接口的代码执行时间过长,但是又毫无头绪,这个时候你就需要性能分析工具来协助你 ...

  3. Kubernetes 基于 Metrics Server 与 HPA 的使用

    在 Kubernetes 中可以手动通过 kubectl scale 命令或通过修改 replicas 数量,可以实现 Pod 的扩容或缩容.Kubernetes 中还提供了 HPA(Horizont ...

  4. mysql 开发进阶篇系列 51 权限与安全(权限表user,db详细介绍 )

    一.概述 mysql 的权限系统主要用来对连接到数据库的用户进行权限验证,以此来判断此用户是否属于合法用户,以及合法用户给予的相应数据库权限.下面将介绍权限系统的工作原理,以及将要熟练掌握账号的管理和 ...

  5. 微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能

    微信小程序+WEB使用JS实现注册[60s]倒计时功能开发步骤: 1.wxml页面代码: <text>绑定手机</text> <form bindsubmit=" ...

  6. jQueryh插件imgareaselect

    1.插件介绍 imgareaselect 是一个 允许用户使用简单.直观的点击.拖动界面图像选择矩形区域的jQuery插件.该插件可用于 web 应用程序中轻松实现图像裁剪功能,以及其他功能,如照片标 ...

  7. iOS逆向开发（3）：锁定APP的目标类与函数 | reveal | lldb | debugserver | 远程调试

    之前介绍了怎么获取APP的所有类的结构信息,这个有什么用呢?用处大了,比如以这一步为基础,下一步通过注入来做更多研究工作. 注入的最小单位是函数,实际上,编译执行的程序在编译后,类就不复存在了,留下来 ...

  8. SpringCloud实战9-Stream消息驱动

    官方定义 Spring Cloud Stream 是一个构建消息驱动微服务的框架. 应用程序通过 inputs 或者 outputs 来与 Spring Cloud Stream 中binder 交互 ...

  9. Python机器学习笔记 使用sklearn做特征工程和数据挖掘

    特征处理是特征工程的核心部分,特征工程是数据分析中最耗时间和精力的一部分工作,它不像算法和模型那样式确定的步骤,更多的是工程上的经验和权衡,因此没有统一的方法,但是sklearn提供了较为完整的特征处 ...

  10. 【Go】获取用户真实的ip地址

    原文链接:https://blog.thinkeridea.com/201903/go/get_client_ip.html 用户请求到达提供服务的服务器中间有很多的环节,导致服务获取用户真实的 ip ...