一、HTML笔记
文章目录
初识标签
<html></html> :根标签
<head></head> :文档的头部
<title></title> :文档的标题
<body></body>:文档主体
<!DOCTYPE html> :表示当前使用的是html5的版本来显示网页,
它不是一个HTML标签,只是一个文档类型声明标签
<html lang="en"> :提示是英文网页,“zh-CN”表示中文网站,实际没有太大影响,英文网页也可以写中文
<meta charset="UTF-8"/> :表示万符码,包含基本所有国家的字符集
VScode代码快捷键:
1、! :自动写入框架
2、Alt+b :执行网页
标签语义
标题标签:
从<h1>到<h6>分为六个等级
如:<h1>一级标题</h1>
特点:每个标题独占一行,加了标题的文字会加粗,字体变大。
段落标签:
<p>我是一个段落标签</p>
如:<p>我是朱昱崐</p>
<p>我是地球人</p>
作用:将HTML文档分割为若干段落,换行时有很大空隙
换行标签:
<br/>
如:我是朱昱崐<br/>我是地球人
作用:令文本换行
文本格式化标签:
文本加粗:1、<strong>加粗了</strong>
2、<b>加粗了</b>
推荐使用上者
文本倾斜:1、<em>倾斜了</em>
2、<i>倾斜了</i>
推荐使用上者
删除线 : 1、<del>删除线</del>
2、<s>删除线</s>
推荐使用上者
下划线: 1、<ins>下划线</ins>
2、<u>删除线</u>
推荐使用上者
盒子标签:
大盒子:<div>盒子标签</div>
特点:一个盒子的内容独占一行
小盒子:<span>小盒子标签</span>
特点:可以多个盒子在一行
图像标签和路径:
图像标签:
src是<img/>标签的必须属性,用于指定图像文件的路径和文件名
如:<img src="pla.jpg"/>
alt:替换文本,图像异常显示时,用文字替换
如:<img src="" alt ="图片异常"/>
title:提示文本,鼠标放在图片上,提示用户显示的文字
如:<img src="pla.jpg" title="我是朱昱崐"/>
width、height:图像宽度、高度
如:<img src="pla.jpg width="500" height="500"/>
border:设定边框,
※各个属性之间用空格分隔,没有前后顺序
路径可以分为:
1、相对路径:以当前html文件的路径做参照
上一级路径:/
下一级路径:../
上级如:<img src="image/pla.jpg" />
下级如:<img src="../pla.jpg" />
2、绝对路径
1、网址路径
2、磁盘完整路径
超链接标签:
语法:<a href="跳转目标" target="窗口弹出方式">超链接文本或图像</a>
href用于指定目标连接地址(必须属性)
target用于指定连接页面的打开方式,默认为_self本窗口跳转,_blank为新窗口打开
1、外部链接:href中必须带有http://
如:<a href="http://www.qq.com" target="_blank">文本或图片</a>
2、内部链接:打开电脑路径下的其他html文件
如:<a href="Untitled-1.html" target="_blank">
3、空链接:href="#",代表超链接为空,等想好具体网页再修改
4、下载链接:在超链接中存放可下载的文件
如: <a href="pla.rar" target="_blank">
5、网页元素超链接:用音视频和图片当做超链接
如:<a href="pla.rar" target="_blank">
<img