基础标签的学习
- 如何在WebStorm中利用快捷键创建一个新的.html的文件
- 同事按下键盘上的Ctrl+Alt+Insert
H系列标签(Header1-Header6)
- 作用
- 用于给为本添加标题语义
- 格式
- 注意点
H 标签是用来给文本添加标题语义的，而不是用来修改文本样式的
H标签一共有6个，从H1~H6,最多只能到6，超过则无效
被H标签包裹的内容会独占一行
在H系列的标签中H1最大，H6最小
在企业开发中，一定要慎用H系列的标签，特别是H1标签，在企业开发中一般情况下一个界面只能出现一个H1标签（和SEO有关）
-
如何在WebStom中让光标在多行闪烁，
- 按住键盘上的Alt键不放，然后在按住鼠标的左键不放，然后在拖动鼠标即可
- Ctrl+D 快速复制当前行
- ctrl+x 剪切
- ctrl+alt+t 然后按下快捷键，让标签包裹一段内容，也就是自动在一段内容前后加上标签，然后输入对应的标签即可
- end 光标快速移到最后一行
- Home 让光标快速移到首行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>H系列标签和P标签和Hr标签</title>
</head>
<body>
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
<h7>我是标题7</h7>
我是普通文本
<hr />
<hr>
<p>我是一段文本</p>
<p>我是一段文本</p>
我是一段普通文本
我是一段普通文本
</body>
</html>
Paste_Image.png
P标签
- 作用
- 告诉浏览器哪些文字是一个段落
- 格式
- <P> xxxx</P>
- 注意点
*在浏览器中会单独占一行
Paste_Image.png
Hr标签
- 作用
- 在浏览器上会显示一条分割线
- 格式
- 注意点
- 在浏览器中会单独占一行
- 在Html5中兼容Html和Xhtml所以Hr标签后面斜杠写不写都行，以后按照高级开发工具提示写不写
Img 标签
-
作用
- 告诉浏览器我们需要一张图片
-
格式
- < img src="">
属性
width:
height
title：用于告诉浏览器，当鼠标悬停在图片上时，需要弹出描述框中显示什么内容
alt: 作用就是告诉浏览器，当需要显示的图片找不到时显示的内容
-
注意：
- img标签不会独占一行
- 图片没有指定宽高，即显示图片的图片的原始宽高，
- 如果我们手动指定img标签显示的图片的宽度和高度，有可能会导致图拍呢变形，那么如果又想指定宽高，又不想让图片变形，我们可以只指定高度和宽度中的一个值即可，只要指定了其中的一个值，系统会自动计算另外一个值，而且会按等比来计算
路径问题
路径问题
其实想给src属性赋值有两种方式
1.通过相对路径赋值(掌握)
相对路径就是每次都从.html文件所在的文件夹开始查找, 我们称之为相对路径
1.1同级
同级就是"图片"和".html文件"存储在同一个文件夹中
格式: src="QRCode.jpg"
含义: 在.html文件所在的文件夹中查找名称叫做QRCode.jpg的图片
1.2下级(开发中用的最多)
下级就是"存储图片的文件夹"和".html文件"在同一个文件夹中
格式: src="images/QRCode.jpg"
含义: 在.html文件所在的文件夹中找到名称叫做images的文件夹
然后再在images文件夹中找到名称叫做QRCode.jpg的图片
1.3上级
上级就是"存储图片的位置"和存"储代码的文件夹"在同一个文件夹中
格式: src="../QRCode.jpg"
含义：在.html文件所在的文件夹中找到这个文件夹的上一级文件夹, 然后再在上一级文件夹中找到名称叫做QRCode.jpg
其中../代表找到当前文件夹的上一级文件夹
2.通过绝对路径赋值(了解)
绝对路径就是每次都从指定的盘符开始查找
格式: src="C:\Users\Jonathan_Lee\Desktop\HTML基础\QRCode.jpg"
含义: 在C盘下找到Users文件夹, 然后在Users文件夹中找到Jonathan_Lee文件夹, 然后在Jonathan_Lee文件夹中找到Desktop文件夹, 然后在Desktop文件夹中找到HTML基础文件夹, 然后在HTML基础文件夹中找到名称叫做QRCode.jpg的图片
注意:
1.路径中不要出现中文, 否则可能出现未知问题
2.如果是通过"相对路径"来指定图片, 不能跨盘符
2.1例如.html文件在C盘, 那么不能去查找D盘图片
br标签
- 作用： 换行
- 格式: < br>
- 注意点：
- 多个br标签可以连续使用, 使用了多少个br标签就会换多少行
- 由于HTML的作用就是用来给文本添加语义, 而br标签的语义是不另起一个段落换行, 而在企业开发中一般情况下需要换行都是因为需要另起一个段落, 所以在企业开发中很少使用br标签
//一般换行的时用p标签
<p>只设置了img标签的src属性</p>
<p></p>
<p>设置了img标签的src和width以及height属性</p>
<p></p>
<p>设置了img标签的src和width以及height, 但是宽高不是等比拉伸的</p>
<p></p>
<p>设置了img标签的src和height属性</p>
<p></p>
<p>设置了img标签的src和width属性</p>
<p></p>
<p>设置了img标签的src和width以及title属性</p>
<p></p>
<p>设置了img标签的src和width以及alt属性</p>
<p></p>
a标签
a标签的作用: 就是用于控制页面与页面之间跳转的
a标签的格式: <a href="指定需要跳转的目标界面">需要展现给用户查看的内容</a>
a标签中有一个叫做target属性, 这个属性的作用就是专门用于控制如何跳转
_self: 用于在当前选项卡中跳转, 也就是不新建界面跳转. 默认就是_self
_blank: 用于在新的选项卡中跳转, 也就是新建界面跳转a标签中还有一个属性, 叫做title. a标签中的title和img标签中的title一样, 都是用来控制鼠标悬停时显示的提示文本的
注意点:
1.a标签不仅可以让文字可以点击, 还可以让图片也能够被点击
2.一个a标签必须有一个href属性, 否则a标签不知道要跳转到什么地方
3.如果通过a标签的href属性指定一个URL地址, 那么必须在地址前面加上http://或https://
4.a标签的href属性除了可以指定一个网络地址以外, 还可以指定一个本地地址
<a href="https://www.nuomi.com/?cid=002540">糯米</a>
<a href="https://binjiejw.tmall.com/category-1080022346.htm?search=y&parentCatId=1080019249&parentCatName=%A1%A4?catName=??%A1%A4???????spm=a220o.1000855.w5001-10945243352.20.Fq84rf&scene=taobao_shop&ali_trackid=30_e27f91873d121ea29b062a117ba2991b&spm=a21bo.50862.201862-4.1.9GysHu#bd">
</a>
<a href="08-br标签.html">08-br标签.html</a>
<a href="test/demo/10-路径练习.html">10-路径练习.html</a>
<a href="https://www.nuomi.com/?cid=002540" target="_self">糯米</a>
<a href="https://www.nuomi.com/?cid=002540" target="_blank">糯米</a>
<a href="https://www.nuomi.com/?cid=002540" target="_blank" title="江哥提示: 会跳转到百度糯米的首页">糯米</a>
Base标签
- 作用：base标签就是专门用来统一的指定当前网页中所有的超链接(a标签)需要如何打开
- 注意点:
1.base标签必须写在head标签的开始标签和结束标签之间
2.如果既在base中指定了target又在a标签中指定了target,那么浏览器会按照a标签中指定的来执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11-base标签</title>
<base target="_blank">
</head>
<body>
<!--
base标签就是专门用来统一的指定当前网页中所有的超链接(a标签)需要如何打开
注意点:
1.base标签必须写在head标签的开始标签和结束标签之间
2.如果既在base中指定了target又在a标签中指定了target,那么浏览器会按照a标签中指定的来执行
-->
<a href="https://www.nuomi.com/?cid=002540" target="_self">糯米</a>
<a href="http://news.baidu.com/">新闻</a>
<a href="https://www.hao123.com/">hao123</a>
<a href="http://map.baidu.com/">地图</a>
<a href="http://v.baidu.com/">视频</a>
<a href="http://tieba.baidu.com/">贴吧</a>
</body>
</html>
假链接
1.什么是假链接?
就是点击之后不会跳转的链接我们称之为假链接2.假链接存在的意义:
在企业开发前期, 其它界面都没有写出来, 那么我们就不知道应该跳转到什么地方, 所以就只能使用假链接来代替. 当项目后期其它界面都已经完成时再将假链接体会为真链接-
3.假链接的格式:
- 1.#
- 2.javascript:
4.两者之间的区别:
"# 的假链接会自动回到网页的顶部, 而javascript:的假链接不会自动回到网页顶部"
锚点
- 1.要想通过a标签跳转到指定的位置, 那么必须告诉a标签一个独一无二的身份证号码, 这样a标签才能在当前界面中找到需要跳转到的目标位置
- 2.如果和HTML中的标签绑定一个独一无二的身份证号码呢?
在HTML中, 每一个标签都有一个名称叫做id的属性, 这个属性就是用来给标签指定一个独一无二的身份证号码的 - 3.所以要想实现通过a标签跳转到指定的位置分为两步
- 3.1给目标位置的标签添加一个id属性, 然后指定一个独一无二的值
- 3.2告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少
- 4：格式:
< a href="#center">跳转到中部</a>
< h2 id="center">我是中部</h2>
- 5:注意点:
1.通过我们的a标签跳转到指定的位置, 是没有过度动画的, 是直接一下子就跳转到了指定位置
2.a标签除了可以跳转到当前界面的指定位置以外, 还可以在跳转到其它界面的时候直接跳转到其它界面的指定位置
格式:
< a href="13-锚点测试界面.html#bottom" target="_blank">跳转到锚点测试界面< /a>
< h2 id="bottom">我是锚点测试界面33333< /h2>
