前端学习(一)----1小时掌握html

学习目标:

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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值