HTML之标签-------我的复习笔记
HTML 常用标签
1.1标题标签<h1>-<h6>
特点:
- 加了标题的文字会变加粗,字号也依次变大
- 一个标题站一行
- 作为标题使用,重要性递减
<h1>这是一个标题。</h1> <h2>这是一个标题。</h2> <h3>这是一个标题。</h3>
2.2段落标签和换行标签
段落<p></p>
特点:
- 文本会根据浏览器窗口大小自动换行
- 段落和段落之间保有空隙
<p>这是一个段落 </p> <p>这是另一个段落</p>
。。。。。。
换行标签<br/>
特点:
- 类似于Enter换行
- 强制换行
- <br/>是个单标签
- <br/>标签开启新行,段落之间会插入垂直间距
1.3文本格式化标签
语义 | 标签 | 说明 |
加粗 | <strong></strong>或者<b></b> | 推荐<strong>语义强烈 |
倾斜 | <em></em>或<i></i> | 推荐<em> 语义强烈 |
删除线 | <del></del>或者<s></s> | 推荐<del>语义强烈 |
下划线 | <ins></ins>或者<u></u> | 推荐<ins>语义强烈 |
1.4 <div>和<span>标签
<div>和<sapn>没有语义,只是盒子装内容
<div>头部</div> #division分割,分区缩写--用来布局,一行只能放一个,大盒子 <span>今日价格</span> #sapn跨度,跨距--一行放多个,小盒子
1.5.1 图像标签
<img>定义于HTML页面图像
<img src="图像URL"/>
src 是<img>的必须属性,用于指定图像文件的路径和文件名
属性 | 属性值 | 说明 |
src | 路径 | 必须属性 |
alt | 文本 | 替换文本,图片无法显示 |
titile | 文本 | 提示文本,鼠标移到图像上,显示文字 |
widen | 像素 | 设置图像宽度 |
height | 像素 | 设置图像高度 |
border | 像素 | 设置图像边框粗细 |
<img src="img.jpg" alt="我是ZPRNG " title="我是ZpringCoco">
注意:
- 图像标签可以有多个属性,必须卸载标签名后面
- 属性之间不分先后顺序,标签名于属性,属性与属性之间均以空格分开
- 属性采取键值对格式,及key="value"的格式,属性=:"属性值"
1.5.2 图像路径
理念:(1)目录文件夹和根文件
目录文件夹:就是普通文件夹,里面只不过存放了我们所需的相关素材,比如HTML文件,图片等
根目录:打开目录文件夹的第一层就是根目录
相对路径:以引用文件所在位置为参考基础,建立的目录路径
绝对路径:指目录下的绝对位置,直接到达目标位置通常是从盘符开始
比如说:C:\Users\ZpringCoco\Desktop\案例\经典\demon.html
1.6 链接标签
html标签中<a>定义于超链接
语法格式
<a href="跳转目标" target="目标窗口弹出方式">文本或图像</a>
#target用于指定链接打开方式,其中_self为默认值可不打,_blank为新窗口打开、、、href用于指定链接目标的url地址,#
三种链接
1.外部链接,列如<a href="www.baidu.com">百度</a>
2.内部链接:网站内部页面之间相互链接,直接链接内部页面名称,比如<a href="index.html">首页</a>
3.空链接:没有确定连接目标 ,<a href="#">首页</a>
4.下载链接:href地址是文件或压缩包,下载文件
5.网页元素链接:网页中各种网页元素,比如文本,图像,表格,音频,视频等都可以添加超链接
*6.锚点链接:点我们点击链接,可以快速定位页面中某位置
- 在连接文本的href属性,设置属性#名字的形式,如<a href="#two">第二季</a>
- 找到目标位置标签,里面添加一个id属性=刚才名字,如:<h3 id="two">ffff</h3>
1.7 注释标签
页面不会显示注释文字,通常<!--注释语句--> 快捷键:ctrl+/
1.8 特殊字符