各种技巧
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. JS 实现触发下载内容(H5 download)

    概述 我对使用js控制下载非常感兴趣,在网上查资料的时候碰巧看到了相关实现方法,记录下来供以后开发时参考,相信对其他人也有用. 参考资料: JS前端创建html或json文件并浏览器导出下载 理解DO ...

  2. Mybatis自定义SQL拦截器

    本博客介绍的是继承Mybatis提供的Interface接口,自定义拦截器,然后将项目中的sql拦截一下,打印到控制台. 先自定义一个拦截器 package com.muses.taoshop.com ...

  3. python基础-变量运算符(3)

    一.注释 注释就是对代码的解释和说明.目的是为了让别人和自己很容易看懂.为了让别人一看就知道这段代码是做什么用的.正确的程序注释一般包括序言性注释和功能性注释.序言性注释的主要内容包括模块的接口.数据 ...

  4. 关于sql和MySQL的语句执行顺序(必看！！！)

    今天遇到一个问题就是mysql中insert into 和update以及delete语句中能使用as别名吗?目前还在查看,但是在查阅资料时发现了一些有益的知识,给大家分享一下,就是关于sql以及My ...

  5. 使用CodeSmith 生成代码

    CodeSmith是一款优秀的代码生成工具.在ORM中,它能帮助我们生成实体类.XML配置文件,从而简化了我们一部分的开发工作.下面简要说说它的基本用法. 1.  打开CodeSmith,创建一个模板 ...

  6. leetcode — minimum-window-substring

    import java.util.HashMap; import java.util.Map; /** * * Source : https://oj.leetcode.com/problems/mi ...

  7. 手把手在Ubuntu上面安装Docker

    一.环境准备 1.Ubuntu64位系统(目前docker仅支持64位系统) 2.官方支持的Ubuntu版本(1)Ubuntu Trusty 14.04(LTS)(2)Ubuntu Precise 1 ...

  8. 开源项目filepond的独立自由之路：城市套路深

    微信原文更清晰:https://mp.weixin.qq.com/s/dv39XvvDNlDqvSgrhN2f7A 最近一直在做一个有关独立开发者友链联盟的插件项目,在做到上传头像时,满网络找最好的头 ...

  9. MySQL系列详解九：MySQL级联复制演示-技术流ken

    前言 级联复制就是master服务器,只给后端一台slave服务器同步数据,然后这个slave服务器在向后端的所有slave服务器同步数据,这样就可以降低master服务器的写压力,和复制数据的网络I ...

  10. 【转】CentOS系统操作下安装相关各种软件

    CentOS系统是非常强大经常应用的系统,我就对CentOS系统深入探讨学习,对大家概括讲述CentOS系统应用,希望对大家有用.虽然CentOS Linux使用了RHEL的源代码,但是由于这些源代码 ...