目录
一.标签之标题
标题的标签分为六类:<h1>、<h2>、<h3>、<h4>、<h5>、<h6>
代码实现:
<body>
<h1>h$*6快速生成六个标签</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4 align="left"> align 属性用来调整位置</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
</body>
调试结果
二.标签之段落
段落标签:<p>
主要用于文本呈现,是最常用的标签之一
代码实现
<body>
<p>这是一个段落标签,主要用于写文本描述</p>
<p> br 标签用来换行<br>这是同一行</p>
<hr> <p>hr是水平线标签</p>
</body>
调试结果
三.标签之图片
图片标签:<img>
图片的路径分为三种:绝对路径(服务端主机中的绝对路径)、相对路径(同一文件下可以用相对路径)、网络路径(直接引用网络上的图片)
代码实现
<body>
<p>图片一定要和文件在同一个文件夹底下</p>
<p>五个属性<br>src:路径<br>alt:图片的替代文本<br>width:宽<br>height:高<br>title:悬停在图片上显示的文字</p>
<h1>三种图片路径</h1>
<h2>绝对路径</h2>
<img src="F:\testphoto\11.webp" alt="erro">
<h2>相对路径</h2>
<p>子级关系用/,父级关系用../,同级关系用./</p>
<img src="1.jpg" alt="图片发生错误时的替代文本">
<h2>网络路径</h2>
<img src="https://www.touxiangwu.com/touxiang/105954.html" alt="erro">
</body>
调试结果
四.标签之超文本链接
超文本链接标签:<a>
代码实现
<body>
<a href="https://www.baidu.com">点击这里跳转</a>
<a href="https://www.taobao.com"><img src="F:\testphoto\11.webp" alt="ERRO"></a>
<p>a标签中hrf代表要跳转的文件,图片也可以</p>
</body>
调试结果
五.标签之文本
七类文本标签代码实现及其功能
<p>p标签</p>
<em>em标签:定义着重文字</em>
<i>i标签:定义粗体文字</i>
<b>b标签:斜体文字</b>
<strong>strong标签:加重语气</strong>
<span>sapn标签:元素没有特定的含义</span>
<del>del标签:删除字</del>
调试结果
六.标签之列表
列表分为:
有序列表:<ol>;
无序列表:<ul>;
有序和无序体现在序号:
代码实现
<body>
<p>快速写o/ul li框架:ul>li*5</p>
<h2>ol为有序标签</h2>
<ol>
<li>实例1</li>
<li>实例2</li>
<li>实例3</li>
</ol>
<ol type="a">
<p>type属性可以更改序列号类型</p>
<li>实例1</li>
<li>实例2</li>
<li>实例3</li>
</ol>
<h2>ul为无序标签</h2>
<ul>
<p>type属性可以更改序列号类型</p>
<li>实例1</li>
<li>实例2</li>
<li>实例3</li>
</ul>
<p>type属性可以更改序列号类型</p>
<li>实例1</li>
<li>实例2</li>
<li>实例3</li>
<h3>无序列表嵌套</h3>
<ul>
<li>在售</li>
<ul>
<li>手机</li>
<li>电脑</li>
</ul>
<li>已下架</li>
<ul>
<li>平板</li>
<li>耳机</li>
</ul>
<li>实例3</li>
</ul>
</body>
调试结果
七.标签之表格
表格标签:table、包含行:tr、列:td
table的属性
border:边框格式
width
height
单元格合并
水平合并:colspan
垂直合并:rowspan
代码实现
<table border="2" width="200" >
<tr>
<td>11</td>
<td colspan="2">12</td>
</tr>
<tr>
<td rowspan="2">21</td>
<td colspan="2">22</td>
</tr>
<tr>
<td>32</td>
<td>33</td>
</tr>
</table>
调试结果
八.标签之from表单
表单用来搜索作用:<from>
代码实现
<body>
<h1>表单用于输入框,由三个部分组成:表单,表单域(输入框),表单按钮</h1>
<form action=""></form>
账号:<input type="text">
密码:<input type="password">
<input type="submit" value="提交">
<button>点击提交</button>
<p> input type="submit" value="提交" 和 button 都可以作为表单按钮</p>
<h2>input的类型有常用的有三种</h2>
<ul>
<li>text</li>
<li>password</li>
<li>submit</li>
</ul>
</body>
调试结果
九.块元素
块元素:独占一行的标签
常见的块级元素:p form h1-h6 hr table ul ol div
行内元素:只在一行只占自身的元素
常见的行内元素:a b em span strong (标签之文本这一类的标签)
行内块级元素 :能够识别宽度高度
常见的行内块级元素有:img button input
十.标签之容器
容器的标签:<div>
容器可以理解为一个盒子,一个盒子里面装了很多标签
关于div的一些标签解释
</div>
<p>老版本的div标签</p>
<div id="header">头部</div>
<div id="nav"> 导航</div>
<div id="article">
<div id="section">子文章</div>
</div>
<div id="aside">侧边栏</div>
<div id="footer">脚部</div>
<p>新版本标签</p>
<header>头部</header>
<nav>导航</nav>
<section>定义文档中的节</section>
<aside>侧边栏</aside>
<footer>脚部</footer>
<article>代表一个独立的、完整的内容块,如一篇完整的文章</article>