HTML学习笔记4 基础标签
来源：互联网 发布：淘宝店托管 编辑：程序博客网 时间：2024/05/22 03:41
写在前面
特此声明，本系列学习笔记内容来源于网络，为加深记忆所做的笔记，内容相当于转载自他处，转载来源为 极客江南的博客
webstorm快捷键
- alt+拖动鼠标，同时在多行编辑
- ctrl+D 复制本行
- ctrl+x 删除本行
- ctrl+ALt+t 为选中文本添加标签
- ctrl+/ 注释
H标签
- 标题标签，h1-h6，用于给文章添加标题语义，只有6级，其中h1在网页中尽量只用一次，修饰主标题
- 格式 :
<h*>xxxxx</h*> - 添加align属性即可设置居中等格式，但不推荐，因为HTML主要作用是添加语义而非设置样式。若要设置样式可通过CSS/JS实现
P标签
- 段落标签，告诉浏览器哪些文字是一个段落
- 格式：
<p>xxxxx</p> - 在浏览器中另起一行
Hr标签
- 分割线标签，添加一条横线
- 格式：
<hr/>，另<hr>也行，其中<hr/>属于XHtml规范 - 会单独占用一行
注释格式
<!-- ***** -->,快捷键 ctrl+/
img标签
- 图片标签，其src属性表明要显示的图片的名称
- 格式：
<img src="xxx.xxx"> - 可以用width和height属性设置图片的宽高，当只指定宽高其中一项，系统会等比例变化图片
- 用title属性设置鼠标悬停在图片上时，弹出框显示的文字
- alt属性，图片不存在时在该图片位置显示的内用
- 只占用图片大小的区域
br标签
- 换行，不另起一个段落就换行
- 格式：
<br> - 可连续用多个br标签，但实际应用中使用较少，用的比较多的是p标签（原因：企业开发中需要换行主要是因为要另起一个段落）
引用资源时的路径问题
通过相对路径引用资源
- 从.html文件所存储的文件夹开始查找
- 同级方式：
<img src="aa.jpg"> - 下级关系：
<img src="images/aa.jpg">其中images为同级目录下的文件夹名 - 上级关系：
<img drc="../aa.jpg>，注：直接通过webstorm打开使用此网页的显示结果为空，从文件中打开就正常了。注2：一个../表示向上一个目录，若需要向上多个目录，用多../即可 - 注：此法不能跨盘符
通过绝对路径引用资源（用得少）
- 每次从指定盘符下指定文件夹查找
- 格式：
<img src="C:/Users/hello/aa.jpg">,注意斜杠方向 - 注：路径中不要出现中文
少用绝对路径的原因
- 因为可移植性不好，若将文件移动盘符，则需要手动修改绝对路径中的盘符
a标签
- 界面跳转标签
- 格式：
<a href="http://www.baidu.com">百度</a> 注： 也可在a标签的开始结束标签之中添加图片，使图片可点击，如：
<a href="http://www.baidu.com"><img src="aa.jpg" height="200"></a>注2： 跳转到的URL前需要有
http://或https://
a标签其他属性
target属性
- 控制跳转跳转方式
- _self：在当前选项卡跳转页面，即当前选项卡界面显示新页面
- _blank:在新的选项卡跳转，即新建界面的显示新网页
title属性
- 同img中title一样，控制鼠标悬停时显示的提示文本
base标签
- 写在
<head></head>标签之间 - 用来统一指定当前网页中所有超链接（a标签）需要如何打开
- 格式：
<base target="_blank"> - 注：若要某一个超链接不用base标签中指定的打开方式，直接在该a标签内设置target属性即可
a标签拓展
假链接
- 效果和href中写url的a标签一致，但点击之后并不跳转页面
格式：
<a href="#">百度</a>、<a href="javascript:">百度</a>用处：企业开发前期尚未开发出其他页面时，我们不知道跳转到什么位置，于是用假链接来替代
- 上述两格式的区别：#会回到页面顶部，javascript:不会返回到顶部
锚点
- 通过给标签设置id属性，然后可以用过a标签来实现页面内跳转，实现书签目录效果
实现：
<a href="#next" ></a><h2 id="next">注：a标签实现的页面内跳转没有过渡动画
- 另：可通过a标签从当前页面跳转到另一页面的指定位置,实现方式
<a href="http://next.html#next" ></a>,即在网页地州后加上#id即可
阅读全文
0 0
- HTML学习笔记4 基础标签
- HTML入门学习笔记--基础标签(2)
- 前端开发基础学习笔记html标签
- HTML基础标签笔记
- html基础标签笔记
- HTML+CSS基础课程学习笔记-第二章 HTML标签
- 20160108HTML学习笔记html的基础l标签
- Html学习笔记(5)-Html标签(4)
- Html学习笔记(4)-Html标签(3)
- HTML&CSS基础学习笔记1.19-DIV标签1
- HTML&CSS基础学习笔记1.20-DIV标签2
- HTML&CSS基础学习笔记1.21-语义化标签
- HTML&CSS基础学习笔记1.26-input标签重置表单
- HTML学习笔记7 基础标签（终）
- HTML入门学习笔记--表格标签(4)
- html 基础之标签学习
- html标签基础4
- HTML基础学习笔记
- Substring with Concatenation of All Words
- 删除/boot/*并且删除/etc/fstab文件以及init程序的恢复实验
- Minimum Depth of Binary Tree
- 在scrapy上使用cookie模拟登录
- Javascript之BOM对象
- HTML学习笔记4 基础标签
- 第三周项目三
- 9-23NOIP模拟赛总结
- POJ 2752 Seek the Name, Seek the Fame（KMP next数组的应用）
- 【LeetCode】181. Employees Earning More Than Their Managers
- 支持向量机1
- ACM-ICPC国际大学生程序设计竞赛北京赛区(2017)网络赛 E.Territorial Dispute
- 简单创建多线程
- IDA快捷键
