自己总结HTML

最新推荐文章于 2024-10-11 16:10:25 发布

DDYOTT

最新推荐文章于 2024-10-11 16:10:25 发布

阅读量338

点赞数

文章标签： html

本文链接：https://blog.csdn.net/m0_63657363/article/details/122012265

版权

鼠标划过有提示出现

<div class="a">123
<span class="b">提示文本</span>
</div>

<style>
.a .b { visibility: hidden;}
.a:hover .b { visibility: visible;}
</style>

鼠标划过123所在的那一行,有4个字在旁边出现--提示文本

--------------------------------------------------------------------------------------

列表由列变行

<div>
           <ul id="listdata">
               <li> <a href="#">123</a></li>
               <li> <a href="#">123</a></li>
               <li> <a href="#">123</a></li>
               <li> <a href="#">123</a></li>
           </ul>
</div>
<style>
       #listdata>li{
           float: left;
           list-style: none;
           margin: 0.625rem;
           /* 超链接由列变成行 */
       }
       #listdata>li>a{
           text-decoration: none;
           /* 超链接下划线消失 */
       }
       #listdata>li>a:hover{
           color: #0000FF;
           /* 超链接划过变色/
       }

       </style>

---------------------------------------------------------------------------------------------------------------

标题页的设置

<head>
       <meta charset="utf-8">
       <title>百度一下,你就知道</title> //网页标题设置
       <link rel="icon" type="image/x-icon" href="Beauty wallpaper.jpg ">
</head>
<link rel="icon" type="image/x-icon"---这是固定的,
href="XXX"---xxx是图片路径
效果如下图

---------------------------------------------------------------------------------------------------------------------------------

快捷键 ctrl+?
插入照片

src=照片地址及照片名, width/height=宽/高,单位:像素

<img src="Beauty%20wallpaper.jpg" width="200px" height="300px" />

</br> 换行
<ul>//无序的列表

<li> 我是你爸 </li>//列表内内容

</ul>
<ol> //有序的列表

</ol>
<h1 align=”center”>我是1号标题</h1>//center居中
<a href="https://www.baidu.com/" target="_blank"> 百度一下</a>

//超链接--href属性用来指定跳转路径,target属性用来指定打开方式(默认打开的是_self

锚定:

<a name="top"> 回到的是这里</a>
<a href="#top"> 点我回去-(也可以是照片地址) </a>

Input标签

<input type="password" name="repwd"/>.type类型后,要有name才可以提交到后台,否则不可以,因为无法识别.
文本<input type="text" />
密码 <input type="password" />
单选框<input type="radio" />
多选框<input type="checkbox" />
数字 <input type="number" />
日期 <input type="week" />
保存 <input type="button" value="保存" />
保存 <button>保存</button>
提交 <input type="submit" />
提交 <button type="submit" >提交</button>
邮箱<input type=”email” />
-----------------------------------------------------------------------------------------------------

<table

border="2px" //表格的边框

width="500px" //宽度

heigth="100px"//高度

cellspacing="0" //间隔

bgcolor="aqua"> //背景

>//表格的开始,设置表格样式 </table>

<tr>//行的开始

<th> XX</th>//插入第一列-居中加粗

<td> XX</td>//插入第二列

<td> XX</td>//插入第三列

</tr>//行的结束

<tr>

<td colspan=”2”>XX </td> //colspan是列合拼,合并2列

<td rowspan=”2”>XX </td> //rowspan是行合并,合并2行

</tr>

----------------------------------------------------------------------------------------------------------------------

Form表单标签

只有form标签可以提交数据,表单表签form比表格标签多了提交功能

创建带有 4 个选项的选择列表
----------------------------------------------------------------------------------------------------------------------<select name=”city”>//有name这和属性才可以提交到后端

<option>请选择</option>

<option>上海</option>

<option>北京</option>

<option>河南</option>

</select>

----------------------------------------------------------------------------------------------------------------------

插入文本域