<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title> 测试9-16</title>
<style>
div {
color: rgb(27, 161, 238);
background-color: bisque;
height: fit-content;
}
a {
text-decoration: none;
}
body {
font: 20px/35px "Microsoft yahei";
}
</style>
</head>
<body>
<div>
<h4 id="top">首页顶部</h4>
<img src="image/点击运行.png" dlt="运行照片" title="点击运行！" height="60" />
<!-- hr 下划线-->
<hr />
<!-- 文本格式化标签-->
<h4>锚点链接：在同一页面快速定位，转到某个位置。</h4>
<a href="#超链接">超链接简介</a>
<p> 加粗内容段：这些文本 strong <strong>加粗的字</strong> ，还有另一种方法b <b>加粗。</b>
<br /> 倾斜内容段：这些文本 em <em> 倾斜</em>,还有另外一种 i <i>倾斜的</i>方法.
<br /> 删除线：这些文本 del <del>删除</del>标记，还有另外 s <s>一种方法</s>删除。
<br /> 下划线： 这些文本 :ins <ins>有下划线</ins>。还有方法使用 U <u>标记下划线</u>。
</p>
<!-- br 换行标签 -->
<br />
</div>
<div> div 标签独占一行，是一个大的盒子标签。！
</div>
<span> span 标签，是一小盒子 ，一行可以放多个！</span> <span> 另一个！span标签</span>
<h4>图片标签的属性：1.src 源 2.alt 替代文本 关键字 3.title 图片名称 4.width/height 宽高只设置一个就可以 5.图像边框粗细 border 一般通过CSS来设定。而不适用属性设定。
</h4>
<div>
<p> 超链接标签示例：如下三个示例———> 外部标签 和内部标签</p>
<h4 id="超链接">超链接标签 href="" target="_blank" _self 代替当前页面显示新内容--></h4>
<a href="https://www.qq.com" target="_blank">腾讯QQ</a>
<h4>内部链接：网站内页面之间的相互链接 一般使用相对路径</h4>
<a href="demo实例/demo.html" target="_blank">阴阳师网页</a>
<a href="demo实例/eatBean/Eat-bean.html" target="_blank">吃豆子动画网页</a>
<h4>空链接：暂时用 # 井号 代替 </h4>
<a href="#">空链接</a>
<h4>下载链接：href里面包含的是文件 zip压缩包 或者是.exe 文件</h4>
<a href="image/科技背景图.zip">图片压缩包</a>
<h4>网页元素链接：文本、图片、表格、音频、视频、都可以添加超链接</h4>
<p>小鸟售价：80 ¥</p>
<a href="image/WeChat_2021.zip"><img src="image/点击运行.png">小鸟视频</a>
<hr />
<a href="https://www.baidu.com"><img src="image/点击运行.png"></a>
<h4> 使用锚点链接返回顶部：用于当前页面的跳转</h4>
<a href="#top"> 返 回 顶 部</a>
<hr>
<h4>表格标签：以表格的形式展示数据 标签属性：align border cellpadding cellspacing</h4>
<table border="1" align="center" cellpadding="20" cellspacing="0" width="400" height="150">
<caption>考试成绩</caption>
<tr>
<th>姓名</th>
<th>学号</th>
<th>数学</th>
<th>英语</th>
<th>语文</th>
</tr>
<tr>
<td>王森</td>
<td>001</td>
<td>34</td>
<td>45</td>
<td>22</td>
</tr>
<tr>
<td>阿磊</td>
<td>002</td>
<td>44</td>
<td>45</td>
<td>65</td>
</tr>
</table>
</div>
<div>
<table align="center" border="1" cellpading="25" cellspacing="0" height="200" width="500">
<caption>小说排行榜</caption>
<thead>
<tr>
<th>排名</th>
<th>关键字</th>
<th>今日搜索</th>
<th>趋势</th>
<th>近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="image/向下箭头.png" height="30"></td>
<td>2341</td>
<td>123</td>
<td><a href="https://www.baidu.com">百度</a></td>
</tr>
<tr>
<td>2</td>
<td>盗墓笔记</td>
<td><img src="image/向上的箭头.png" height="30"></td>
<td>841</td>
<td>123</td>
<td><a href="https://www.baidu.com">百度</a></td>
</tr>
<tr>
<td>3</td>
<td>西游记</td>
<td><img src="image/向下箭头.png" height="30"></td>
<td>241</td>
<td>123</td>
<td><a href="https://www.baidu.com">百度</a></td>
</tr>
</tbody>
</table>
</div>
<h4>无序列表：您喜欢的食物？</h4>
<ul>
<li> 香蕉</li>
<li> 桃子</li>
<li> 苹果</li>
<li> 芒果</li>
</ul>
<h4>有序列表:粉丝排行榜</h4>
<ol>
<li>刘：123</li>
<li>章：23</li>
<li>华：11</li>
<h4>自定义列表</h4>
<dl>
<dt> 联系我们</dt>
<dd>官方微信</dd>
<dd>官方微博</dd>
<dd>官方网页</dd>
</dl>
</ol>
<h4>表单标签：表单域 表单控件 提示信息 用来填写个人信息，会员注册</h4>
<form action="demo.php" name="form1" method="POST">
<label for="用户类型"></label> 用户类型：
<input type="text" name="usertype" value="学生" id="用户类型"> <br> 用户名：
<input type="text" name="username" value="请输入学号" maxlength="11"><br> 性别：男
<input type="radio" checked="checked" name="sex"> 女 <input type="radio" name="sex">
<br> 密码
<input type="password" name="pwd" value="kmust+身份证后六位"><br> 验证码：
<intput type="text" name="hobby"><br> 爱好: 打篮球
<input type="checkbox" checked="checked"> 羽毛球<input type="checkbox"> 游泳
<input type="checkbox"><br>
<input name="button" type="button" value="登录" onclick="window.close()" id="登录" />
<input name="提交" type="submit">
<input name="重新填写" type="reset"><br> 上传头像
<input type="file" value="上传头像"><br> 留言板 <textarea name="留言板" rows="5" cols="30">记得给小伙伴留言哦！
</textarea>
</form>
<br>
<ul>籍贯</ul>
<select>
<option selected="selected">北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>成都</option>
<option>西安</option>
<option>昆明</option>
</select>
<br>
<ul>居住地</ul>
<select>
<option selected="selected">北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>成都</option>
<option>西安</option>
<option>昆明</option>
</select>
</body>
</html>
#4 CSS表格＜table＞-表单＜form＞-列表＜ul/ol/dl＞标签的使用
最新推荐文章于 2024-07-19 15:50:46 发布
210
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
