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

时间：2022-05-24 05:42:55

各种技巧
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笔记

学习之路-前端-笔记-一、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. &lbrack;原创&rsqb;java WEB学习笔记75：Struts2 学习之路-- 总结 和 目录

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

  7. &lbrack;原创&rsqb;java WEB学习笔记66：Struts2 学习之路--Struts的CRUD操作&lpar; 查看 &sol; 删除&sol; 添加&rpar; 使用 paramsPrepareParamsStack 重构代码 ，PrepareInterceptor拦截器，paramsPrepareParamsStack 拦截器栈

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

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

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

  9. jQuery延迟加载&lpar;懒加载&rpar;插件 – jquery&period;lazyload&period;js-Web前端&lpar;W3Cways&period;com&rpar; - Web前端学习之路

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

随机推荐

  1. 第一章 zookeeper基础概念

    1.ZooKeeper是什么 ZooKeeper为分布式应用提供了高效且可靠的分布式协调服务,提供了统一命名服务. 配置管理和分布式锁等分布式的基础服务.在解决分布式数据一致性方面, ZooKeepe ...

  2. Magento white screen or how XML can break your site&quest;

    Magento white screen or how XML can break your site? by SANDO on 02. OCT, 2012 in MAGENTO, SMALL TIP ...

  3. 使用BitTorrent-Sync实现双机文件双向同步

    BitTorrent-Sync是一款基于P2P的分布式文件同步工具,简称btsync,非开源软件但免费使用.本文使用btsync实现两台服务器上的软件双向同步. 安装 直接从官网下载相应的安装包,为了 ...

  4. 【Android 应用开发】Android 开发 之 JNI入门 - NDK从入门到精通

    NDK项目源码地址 : -- 第一个JNI示例程序下载 : GitHub - https://github.com/han1202012/NDKHelloworld.git -- Java传递参数给C ...

  5. &lbrack;LeetCode&rsqb; 24 Game 二十四点游戏

    You have 4 cards each containing a number from 1 to 9. You need to judge whether they could operated ...

  6. DB2数据库常用命令

    --创建数据库 CREATE DATABASE example AUTOMATIC STORAGE YES --自动存储 ON 'D:\' DBPATH ON'D:\' --指定数据库控制文件的存储路 ...

  7. thinkphp5&period;0 ajax分页

    放到    ***thinkphp\library\think\paginator\driver\Ajaxbootstrap.php 分页的type参数为ajaxbootstrap <?php/ ...

  8. Self Attention需要掌握的基本原理

    字面意思理解,self attention就是计算句子中每个单词的重要程度. 1. Structure 通过流程图,我们可以看出,首先要对输入数据做Embedding 1. 在编码层,输入的word- ...

  9. webapi core2&period;1 Identity&period;EntityFramework Core进行配置和操作数据 &lpar;一）没什么用

    https://docs.microsoft.com/en-us/aspnet/core/security/authentication/identity?view=aspnetcore-2.1&am ...

  10. &lbrack;小A与最大子段和&rsqb;&lbrack;斜率优化dp&plus;二分&rsqb;

    链接:https://ac.nowcoder.com/acm/contest/545/A来源:牛客网题目描述 小A在网上看到了 "最大子段和" 问题的解法.第二天,小A向小B讲解了 ...

相关文章