一、基础
1、写HTML代码的快捷生成方式:在VScode中,英文的 !然后回车即可出现如下画面
圈出的那两行不重要,可以删除也可保留。
2、注释标签
<!-- 注释,防止乱码-->
<meta charset="UTF-8">
快捷键 ctrl + /(取消注释也是)
二、常用标签
1、标题标签 <h1></h1>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 注释,防止乱码-->
<meta charset="UTF-8">
<title>第一个HTML</title>
</head>
<body>
你好,html
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>
</html>
2、段落便签 <p></p>
我们想要的分段效果:
未使用p标签:
使用p标签:
<h1>入党从自身做起</h1>
我们不仅仅要做到思想上入党,更要在实际行动中有所体现。所以,在今后的生活工作中,我要努力做到以下几点:
<p></p>
1、不断加强自我的政治理论学习,提高自我的政治觉悟、思想水平,进取与周围党员就党的理论进行讨论、学习。
<p></p>
2、经常主动向党组织汇报自我的思想、学习、工作和有关的问题,主动和入党联系人进行交流,使自我更快的提高,也使党组织时刻了解自我的发展情景。
<p></p>
3、在平时的工作中勤奋努力,进取提高,不断提高业务水平,努力钻研专业知识。
3、 换行符 <br>
<h1>入党从自身做起</h1>
我们不仅仅要做到思想上入党,更要在实际行动中有所体现。所以,在今后的生活工作中,我要努力做到以下几点:
<p></p>
1、不断加强自我的政治理论学习,提高自我的政治觉悟、思想水平,进取与周围党员就党的理论进行讨论、学习。
<p></p>
2、经常主动向党组织汇报自我的思想、学习、工作和有关的问题,主动和入党联系人进行交流,使自我更快的提高,也使党组织时刻了解自我的发展情景。
<br>
3、在平时的工作中勤奋努力,进取提高,不断提高业务水平,努力钻研专业知识。
段落和换行的对比:红色的是使用段落符的效果,蓝色的使用换行符的效果
4、文字格式符
4.1 加粗 <b></b> 或者 <strong></strong>
4.2 倾斜 <em></em> 或者 <i></i>
我们不仅仅要做到<em><b>思想上入党</b></em>,更要在<i><strong>实际行动中有所体现。</strong></i>
4.3 删除标签 <del></del> 或者 <s></s>
原价:<del>150</del>
<br>
现价: 99
4.4下划线 <u></u>
<u>很多事情没有来日方长</u>我现在就要快乐!
5、图片标签
5.1 <img src="路径.jpg">
当我使用相对路径,以html所在位置为基准,找到图片所在位置
(1)当图片和 .html 文件都在桌面时
<img src="blue.jpg">
(2)当图片和 .html 文件在同一磁盘不同文件夹内,就需跳出一级目录,使用 ../
如需跳出两级目录,就是 ../../
<img src="/../Html/blue.jpg">
(3)当图片和 .html 文件在同一磁盘,我的 .html文件 在D盘的根目录下,图片在D盘的Html文件夹内
在使用img 标签时,发现按照src语法引用本地图片地址时,图片加载失败,代码如下
<img src="Html/blue.jpg">
使用谷歌浏览器运行之后,出现如下情况
当我尝试多次,最终如下代码可以正常显示(谷歌浏览器),这次使用的是绝对路径
<img src="D:/Html/blue.jpg">
使用绝对路径的好处:无论html移动到哪里,图片的路径是固定不变的,都可以访问到
5.2 描述图片信息
(1)当图片显示不出来的时候,对图片加以描述 alt="描述"
当图片正常显示的时候,那句描述的话语不会出现
<img src="Html/blue.jpg" alt="看月亮还是看你">
(2)当鼠标移动到图片时,会显示相关信息 title= " 信息"
5.3 设置宽和高
width设置宽,height设置高 ,可使用px 或百分比
(1)使用px
<img src="D:/Html/blue.jpg" alt="看月亮还是看你" title="蓝色" width="350px" height="480">
(2)利用百分比
<img src="D:/Html/blue.jpg" alt="看月亮还是看你" title="蓝色" width="48%" height="59%">
设置百分比的好处:图片不会压缩或拉长,会根据当前电脑的展示页面按照设置的百分比显示图片。
5.4 设置边框 border=" "
<img src="D:/../Html/blue.jpg" alt="看月亮还是看你" title="蓝色" width="48%" height="59%" border="3px" >
6、超链接标签 <a href="地址"></a>
6.1外部链接
<a href="https://baike.baidu.com/item/%E5%AE%8C%E5%85%A8%E4%BA%8C%E5%8F%89%E6%A0%91/7773232">完全二叉树</a> 和满二叉树的比较
点击"完全二叉树"直接跳转到百度百科的完全二叉树,但是默认打开的是当前的页面,如果想要重新打开一个页面,就是用 target="_blank"
<a href="https://baike.baidu.com/item/%E5%AE%8C%E5%85%A8%E4%BA%8C%E5%8F%89%E6%A0%91/7773232" target="_blank">完全二叉树</a> 和满二叉树的比较
6.2锚点链接
可以快速定位到⻚⾯中的某个位置.
<a href="#111">第⼀章</a>
<a href="#222">第⼆章</a>
<a href="#333">第三章</a>
<p id="111">
第⼀章剧情介绍 <br>
第⼀章剧情介绍 <br>
...
</p>
<p id="222">
第⼆章剧情介绍 <br>
第⼆章剧情介绍 <br>
...
</p>
<p id="333">
第三章剧情介绍 <br>
第三章剧情介绍 <br>
...
</p>
点击第一行的第一章可以直接跳转到如下图
以谷歌浏览器为例,也可直接改后缀地址为222,直接会跳到第二章。
7、表格标签
<table></table> 表格
<tr></tr> 行
<th></th> 列(居中加粗显示)
<td><td> 列(居左显示)
border="数字" 设置表格边框
height="数字px" 设置表格高度
width="数字px" 设置表格宽度
<table border="1" height="500px" width="500px">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张泽</td>
<td>男</td>
<td>21</td>
</tr>
<tr>
<td>宋依</td>
<td>女</td>
<td>22</td>
</tr>
</table>
合并单元格(使用不多,了解即可)
跨⾏合并: rowspan="n"
跨列合并: colspan="n"
8、列表标签
8.1 ⽆序列表 ul li 和有序列表 ol li
<h2>无序列表</h2>
<ul>
<li>哆啦A梦</li>
<li>海绵宝宝</li>
<li>猫和老鼠</li>
<li>大耳朵图图</li>
</ul>
<h2>有序列表</h2>
<ol>
<li>小学</li>
<li>初中</li>
<li>高中</li>
<li>大学</li>
</ol>
8.2 ⾃定义列表
dl (总标签) dt (⼩标题) dd (围绕标题来说明)
上⾯有个⼩标题, 下⾯有⼏个 ,围绕着标题来展开的
<h3>⾃定义列表</h3>
<dl>
<dt>我所学的课程</dt>
<dd>计算机网络</dd>
<dd>操作系统</dd>
<dd>JAVA</dd>
</dl>