学习笔记
一. 各种快捷键
-
ctrl + s : 保存
-
ctrl + a : 全选
-
ctrl + x : 剪切
-
ctrl + c : 复制
-
ctrl + v : 黏贴
-
ctrl + z : 撤回
-
ctrl + Y : 还原
-
shift + end : 从头选中一行
-
shift + home : 从尾选中一行
-
shift + alt + ↓ : 快速复制一行
-
alt + ↑或↓ : 快速移动一行
-
tab : 向后缩进
-
tab + shift : 向前缩进
-
alt + 鼠标左键 : 多光标
-
ctrl + d : 选择相同元素的下一个
-
创建标签的快捷键 : tab + 单词
二.各种网页标签
1.HTML初始代码创建 : ! + tab(卧槽,只有HTML为后缀的文件有用才有用)
如下
<!DOCTYPE html>----------文档声明 : 告诉浏览器这是一个html文件
<html lang="en">---------------html文件的最外层标签,包含所有html标签代码(lang="en"表示是一个英文网站,同理 lang"zh-CN"表示是一个中文网站)
<head>
<meta charset="UTF-8">------------元信息,是编写网页中的一些赋值信息(charset="UTF-8")是国际编码，不让网页出现乱码的情况
<title>Document</title>-------------设置网页的标题
</head>
<body>
----------显示网页内容的区域
</body>
</html>
2.html注释的作用
写法； 在浏览器中看不见，只在代码中看得见
意义；
1.把暂时不用的代码注释起来，方便以后使用
2.对开发人员进行提示
3.快速添加注释与删除注释：
1.ctrl + /
2.shift + alt + a
4.标题与段落
标题--> 双标签 : <h1></h1><h6></h6>
在一个网页中和h1标题最重要,并且只有一个,html文件中只能有一个
h5 h6 标签在网页中不经常使用
段落 --> 双标签 :
比如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>黄片网站</title>
</head>
<body>
<header title="点进来自己想一想为什么">这个是黄片</header>
<h1>论黄片的危害</h1>
<h2>好好学习,不要天天那些想有的没的</h2>
<p>淦, 我去, 不听话是吧，还看</p>
<h2>天天向上，不要整那些有的没的</h2>
<p>搞什么飞机还想奖励自己,NND</p>
<h2>不要误会，我是正人君子</h2>
<p>算了不装了,我就是LSP, 哈哈哈</p>
</body>
</html>
5.文本中标签的修饰
强调--> 双标签 : <strong></strong>,<em></em>
区别:
1.写法和展示效果(前者为加粗后者为斜体)
2.strong的强调信更强,em的强调性稍弱
下标 : <sub></sub>(平方,指数之类的)
上标 : <sup></sup>(化学元素之类的)
删除文本 : <del></del> (似乎是在文本中间画一道线-----类似于18🈲的图标?)
插入文本 : <ins></ins> (淦,感觉其实就是下划线)
注 : 用css样式来控制可能会更好,但是html有可以用
比如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学习资料</title>
</head>
<body>
<p>
<strong>这个是非常重要的学习资料</strong>
<em>重要的事情说三遍,懂不懂啊扑街</em>
</p>
<p>
a <sup>2</sup> + b <sup>2</sup> = c <sup>2</sup>
</p>
<p>
2 H<sub>2</sub>o +2 Na =2 NaOH + H<sub>2</sub>↑
</p>
<p>
<header title="你懂的,老弟">高清学习资料原价 <del>999</del> ，现在亏本卖只要 <ins>99</ins> ，先到先得，走过路过，不要错过</header>
</p>
</body>
</html>
6.引入文件的地址路径
(1)相对路径
. 表示当前路径(即平级文件在一个文件夹里)
… 表示上一路径(即在外面一个更大的一个文件夹里)
(2)绝对路径
类似于 D/steam/workshop/common/256985646.jpg
或者直接写网站也可以,比如www.baidu.com
方法 : 输入img + tab 建立双标签页
7.跳转链接
通过标签来实现----->
标签有两个重要属性分别是
1 : href : 链接的地址
2 : target : 可以改变链接的打开方式,默认情况下。是在当前页面打开用 _self ，是新窗口打开用 _blank。
base --> 单标签 : 作用是改变链接默认行为的。
比如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<base target="_blank">
</head>
<body>
<!-- <a href="http://www.baidu.com">访问百度</a>
<a href="http://www.bilibili.com">
<img src="./20220728041220-1658952740572-d370f6b79d7a9bd2c3e2aab861f2e25d.jpg" alt="">
</a> -->
<!-- <a href="http://www.baidu.com" target="_blank">访问百度</a> -->
<a href="http://www.baidu.com">访问百度</a>
<a href="http://www.baidu.com">访问百度</a>
<a href="http://www.baidu.com">访问百度</a>
<a href="http://www.baidu.com">访问百度</a>
<a href="http://www.baidu.com">访问百度</a>
</body>
</html>
8.跳转锚点(本页面内的跳转)
1 . #号
id属性--------> 方法:<a href="# + 所需要跳转的锚点"></a>并且在<h2 id="所需要跳转的锚点"></h2>
2 . #号
name属性--------> 1.方法:<a href="# + 所需要跳转的锚点"></a>
2. 然后在<h2></h2>的上方添加<a name="所需要的锚点"></a>
9.特殊符号
如图:为部分符号。
10.标签列表
1.无序列表-----> ul li 需要符合嵌套规范(即ul标签与li标签之间不能有其他标签如: <p></p> , 但是在li之间可以有其他标签)
2.有序列表:-----> ol li 用的非常少，一般都是用无序列表，无序列表可以去替代无序列表
3.type属性: 改变标记前的样式(一般是用css去控制)
4.定义列表: dl----> 定义列表 dt------> 定义专业术语或名词 dd------->对名词进行解释和描述
例如 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul type="circle">
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
<li>第4项</li>
</ul>
<ol>
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
<li>第4项</li>
</ol>
<dl>
<dt>html</dt>
<dd>超文本标记语言</dd>
</dl>
</body>
</html>
扫一扫
767
到【灌水乐园】发言
