07-16
1.其他标签
<!--
标签的分类:
单标签: meta br
双标签: html body h p title
-->
<!-- 字体加粗 -->
<b>我可以加粗字体</b><br>
<!-- 强调加粗 -->
<strong>我是强调加粗</strong><br>
<!-- 斜体 -->
<i>我是斜体</i><br>
<!-- 强调斜体 -->
<em>我是强调斜体</em>
<!-- 水平线 width可以设置宽度-->
<hrwidth="50%"/>
<!-- 删除线 -->
原价<del>999</del>,现价<spanstyle="color: red;font-size:30px;">99</span><br>
<!-- 可以设置文字顺序 ltr左到右 rtl右到左 -->
<bdodir="rtl">文字可以反向</bdo><br>
<!-- label一般和input搭配 点击label标签相当于点击Input标签-->
<labelfor="demo">姓名:</label>
<inputtype="text"id="demo"><br>
<!-- ruby 给包裹的字设置上标注释,用rt包裹-->
一言九<ruby>鼎<rt>ding</rt></ruby>
2.无意义标签
<!--
标签分类:
行级元素: a span
块级元素: h p ul li div
行级元素和块级元素的区别:
1.行级元素不能直接设置宽高,块级标签直接设置宽高
2.行级元素默认横向排列,块级元素默认纵向排列
-->
<divstyle="width:100px;height:100px;background-color: aqua;">div1</div>
<divstyle="width:100px;height:100px;background-color: aqua;">div2</div>
<spanstyle="width: 100px;height:100px;background-color:red">span1</span>
<spanstyle="width: 100px;height:100px;background-color:red">span2</span>
3.超链接
<!--
超链接:
href: 设置跳转地址
相对地址: 域名
绝对地址: 参考物当前所在文件夹 ./当前路径 ../上一级路径
target: 跳转的方式
_self:本页面打开
_blank:新页面打开
_parent:父页面打开
_top:顶级页面打开
-->
<p>超链接跳转路径</p>
<!-- 域名跳转 -->
<ahref="http://www.baidu.com">域名跳转</a>
<!-- 绝对路径跳转 -->
<ahref="C:\Users\Administrator\Desktop\粤嵌笔记\07-16/02-无意义标签.html">绝对路径跳转</a>
<!-- 相对路径跳转 -->
<ahref="./02-无意义标签.html">相对路径跳转</a>
<p>超链接跳转方式</p>
<ahref="http://www.baidu.com">默认跳转方式</a>
<ahref="http://www.baidu.com"target="_self">当前页面打开方式</a>
<ahref="http://www.baidu.com"target="_blank">新页面打开方式</a>
4.锚点
<!--
锚点:
定义锚点: name="top" id="top" (name和id同时写上,做兼容处理)
使用锚点: href="#top"
-->
<h1id="top">顶部</h1>
<divstyle="width: 100%;height:1500px;"></div>
<ahref="#top">点击回到顶部</a>
5.列表
<!--
无序列表:
<ul>
<li></li>
</ul>
有序列表:
<ol>
<li></li>
</ol>
自定义列表:
<dl>
<dt></dt>
<dd></dd>
</dl>
-->
<ul>
<li>我是无序列</li>
<li>我也是无序列表</li>
</ul>
<ol>
<li>我是有序列表</li>
<li>我也是有序列表</li>
</ol>
<dl>
<dt>我是自定义列表标题</dt>
<dd>我是自定义列表内容</dd>
<dd>我是自定义列表内容</dd>
</dl>
6.图片标签
<!--
图片标签:
属性src: 引入图片路径(绝对路径和相对路径)
width: 设置图片的宽度(相对于父级)
height: 设置图片的高度
alt: 图片失效时显示的文字
title: 设置图片的描述
注意:当单独设置图片的宽度或者高度时,图片等比例缩放
当同时设置图片的宽度和高度时,图片按照所设置的宽高进行缩放
-->
<imgsrc="./image/1.jpg"alt="看不到图片时我可以显示"width="100%">
<imgsrc="./image/1.jpg"alt=""width="500px">
