学习目标：
100行代码学会html的语义化标签
学习内容：
html5的标签及简单搜索引擎的实现
掌握特殊符号的使用
学习时间：
1小时
学习内容：
<!--
* @Date: 2022-03-13 10:17:20
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 50px;
}
</style>
</head>
<body>
<!-- 锚点定位（跳到想要的地方）id 与#搭配 -->
<a href="#Kobe">科比</a>
<h1>哈哈哈哈哈哈哈哈哈</h1>
<hr/>横线单标签
<h2>哈哈哈哈哈哈哈哈哈</h2>
<h3>哈哈哈哈哈哈哈哈哈</h3>
<h4>哈哈哈哈哈哈哈哈哈</h4>
<h5>哈哈哈哈哈哈哈哈哈</h5>
<p>p标签</p>
<!-- pre预格式化文本可识别空格 -->
<pre>
行路难·李白
金樽清酒斗十千，玉盘珍羞直万钱⑵。停杯投箸不能食⑶，拔剑四顾心茫然。
欲渡黄河冰塞川，将登太行雪满山⑷。闲来垂钓碧溪上⑸，忽复乘舟梦日边。
行路难！行路难！多歧路⑹，今安在？长风破浪会有时⑺，直挂云帆济沧海⑻ [1] 。
<span>span标签</span>
<div>div标签</div>
<nav>nav标签</nav>
<del>删除线</del>
<b>加粗</b>
<strong>加粗</strong>
<i>斜体</i>
<em>斜体</em>
<s>删除线</s>
<del>删除线</del>
<br/>换行
<u>下划线</u>
<ins>下划线</ins>
<a href="http://www.baidu.com/" target="_blank">百度一下</a>
<!-- target默认self不新建页面打开 -->
<a href="./infor.txt">跳转到文件</a>
<!-- ./当前文件夹 ../返回上一级文件夹 -->
<img src="./科比.jpg" alt="黑曼巴" title="黑曼巴" id="Kobe">
<!-- alt为图片加载不出时显示的内容 title为悬停图片时显示的文字-->
<ul>
<h1>无序列表</h1>
<li>小明</li>
<li>小花</li>
<li>小刚</li>
</ul>
<ol>
<h1>有序列表</h1>
<li>小明</li>
<li>小花</li>
<li>小刚</li>
</ol>
<dl>
<h1>自定义列表</h1>
<dt>中国</dt>
<dd>北京</dd>
<dd>台湾</dd>
<dd>香港</dd>
</dl>
<table border="1px" cellpadding="0" cellspacing="0" width="100px" align="center">
<!--
cellpadding="0" cellspacing="0"取消内外边距 一般同时出现
align属性设置表格所在页面的位置
-->
<tr>
<td colspan="2">11</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td rowspan="2">23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
<!--
colspan合并列
rowspan合并行
合并时注意要删除一个格子
-->
</table>
<select>
<option>--请选择你的城市--</option>
<!-- 默认选项selected="selected" -->
<option selected="selected">北京</option>
<option>上海</option>
<option>台湾</option>
<option>广州</option>
<option>香港</option>
</select>
<form>
<input type="text" value="文本">
<input type="password" value="密码">
<input type="button" value="按钮">
<input type="submit" value="登录">
<textarea cols="30" rows="10">文本域</textarea>
<label for="c1">A</label>
<input type="radio" name="yyds" id="c1">
<label for="c2">B</label>
<input type="radio" name="yyds" id="c2">
<label for="c3">C</label>
<input type="radio" name="yyds" id="c3">
<h5>复选框</h5>
<input type="checkbox" name="zz66">
<input type="checkbox" name="zz66">
<input type="checkbox" name="zz66">
<button type="button">简单的按钮</button>
<button type="submit">提交的按钮</button>
<!--
name将单选关联起来只能选一个
for id可实现点文字也能点上按钮
-->
<!--
type="button", "submit" - 定义按钮上的显示的文本
type="text", "password"- 定义输入字段的初始值
-->
</form>
<!-- 简单的搜索引擎实现 -->
<form action="https://www.baidu.com/s?">
<!--
https协议
www.baidu.com域名
/s接口
wd=...
输入的text内容赋给name加到/s？后面实现简单搜索
-->
<input type="text" name="wd">
<input type="submit" value="搜索">
</form>
</body>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
