HTML基础
本文最后更新于626 天前,其中的信息可能已经过时,如有错误请发送邮件到echobydq@gmail.com

前言

本文为HTML基础标签笔记

HTML

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

 


文本格式

<!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>
</head>
<body>
     <!-- b加粗 u下划线 i倾斜 s删除线 -->
    <h1>腾讯科技高级web前端开发岗位</h1><hr>
    <h3>职位描述</h3>
    <u>负责重点项目的前端技术方案和架构的研发和维护工作</u>;
    <h2>岗位要求</h2>
    <p>5年以上前端开发经验,<b>精通html5/css3/javascript</b>等web开发技术;</p>
    <p>熟悉bootstrap,vue,angularjs,reactjs等框架,熟练掌握一种以上;</p>
    <p>代码⻛格严谨,能⾼保真还原设计稿,能兼容各种浏览器;</p>
    <p>对web前端的性能优化以及web常见漏洞有一定的理解和相关实践;</p>
    <p>具备良好的分析解决问题能力,能独立承担任务,有开发进度把控能力;</p>
    <p><s>责任心强,思路路清晰,抗压能力好,具备良好的对外沟通和团队协作能力。</s></p>
    <h2>工作地址</h2>
    <p> <i>上海市-徐汇区-腾云大厦</i></p
    <!-- alt 属性是一个必需的属性,它规定在图像无法显示时的替代文本 -->
    <img src="image/map.jpg" alt="">
     <!-- 空格 &nbsp -->
    HTML文档,学习字符实体,如文字间多三个 &nbsp &nbsp &nbsp空格

</body>
</html>

 

列表

<!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>列表</title>
</head>
<body>
    <!-- 无序列表 unordered lists -->
    <ul>
        <!-- list item -->
        <li>榴莲</li>
        <li>苹果</li>
        <li>香蕉</li>
        <li>草莓</li>
        <li>哈密瓜</li>
    </ul>

    <!-- 有序列表 ordered lists -->
    <ol>
        <!-- list item -->
        <li>你:100分</li>
        <li>我:90分</li>
        <li>他:60分</li>
    </ol>

    <!-- 自定义列表 definition lists-->
    <dl>
        <!-- 自定义列表组  definition term-->
        <dt>帮助中心</dt>
            <!-- 自定义列表描述 definition description -->
            <dd>账户管理</dd>
            <dd>购物指南</dd>
            <dd>订单操作</dd>
        <dt>服务支持</dt>
            <dd>售后政策</dd>
            <dd>自助服务</dd>
            <dd>相关下载</dd>
    </dl>
    
</body>
</html>

 

表格

<!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>表格</title>
</head>
<body>
    <!-- 表格 包含 tr(行) 包含td(数据) -->
    <!-- css 设置宽高 -->
    <table border="1">
        <!-- caption 表格大标题 -->
        <caption><strong>学生成绩表</strong></caption>
        <!-- 结构标签 thead tbody tfoot    包含th/td -->
        <thead>
                <tr>
                    <!-- 表头信息 th -->
                    <th>姓名</th>
                    <th>成绩</th>
                    <th>评语</th>
                </tr>
        </thead>
        
        <tbody>
            <!-- 只有同一个结构标签单元格才能合并 -->
            <tr>
                <td>你</td>
                <!-- 跨行合并 rowspan -->
                <td rowspan="2">100分</td>
                <td>牛的</td>
            </tr>
            <tr>
                <td>我</td>
                <!-- <td>90分</td> -->
                <td>还行</td>
            </tr>
            <tr>
                <td>他</td>
                <td>60分</td>
                <td>不错呦</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>总结</td>
                <!-- 跨列合并 colspan -->
                <td colspan="2">还不错呦</td>
                <!-- <td>very good</td> -->
            </tr>
        </tfoot>
    </table>
</body>
</html>

 

表单

<!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>表单</title>
</head>
<body>
    <form action="#">
    <!-- text 文本框 -->
    <!-- placeholder 提示 -->
    邮箱:<input type="text" placeholder="邮箱/手机号">
    <br><br>

    <!-- password 密码框 -->
    密码:<input type="password" placeholder="请输入六位密码">
    <br><br>

    <!-- radio 单选框 -->
    <!-- checked 默认选中 -->
    性别:<input type="radio" name="sex" checked>中性

    <!-- label 表单标签(点击文字选中) -->
         <input type="radio" name="sex" id="nan"><label for="nan">男</label> 
        <label><input type="radio" name="sex">女</label> 
    <br><br>
    
    <!-- checkbox 多选框 -->
    爱好:<input type="checkbox">
    <br><br>

    <!-- file 文件 -->
    <!-- multiple 多文件选择 -->
    文件:<input type="file" multiple>
    <br><br>

    协议:<input type="checkbox" checked>默认勾选
    <br><br>

    <!-- button 按钮 -->
    <input type="submit">
    <input type="reset">
    <input type="button" value="普通按钮">
    <br><br>

    <button>按钮</button>
    <button type="submit">提交</button>
    <button type="reset">重置</button>
    <button type="button">button按钮,js添加功能</button>
    <br><br>

    <!-- select 下拉菜单 -->
    <select>
        <option>北京</option>
        <option  selected>上海</option>
        <option>深圳</option>
        <option>杭州</option>
    </select>
    <br><br>

    <!-- textarea 文本域 -->
    <!-- CSS 禁用掉右下角拖拽 -->
    <textarea name="#" id="#" cols="30" rows="10"></textarea>

</form>

</body>
</html>

 

综合案例

学生信息表

<!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>学生信息表</title>
</head>
<body>
    <table border="1" width="500" height="300">
        <caption><strong>优秀学生信息表</strong></caption>

        <thead>
            <tr>
                <th>年级</th>
                <th>姓名</th>
                <th>学号</th>
                <th>班级</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td rowspan="2">高三</td>
                <td>张三</td>
                <td>110</td>
                <td>三年三班</td>
            </tr>

            <tr>
                <td>赵四</td>
                <td>120</td>
                <td>三年三班</td>
            </tr>
        </tbody>

        <tfoot>
            <td>评语</td>
            <td colspan="3">你们都很优秀</td>
        </tfoot>
    </table>
</body>
</html>

 

表单

<!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>表单</title>
</head>
<body>
    <h1>青春不常在,抓紧谈恋</h1>
    <hr>
    <form action="">
        昵称:<input type="text" placeholder="请输入昵称">
        <br><br>

        性别:
        <label><input type="radio" name="sex">男</label>
        <label><input type="radio" name="sex">女</label>
        <br><br>

        所在城市:
        <select>
            <option value="shanghai">上海</option>
            <option value="beijing">北京</option>
            <option value="nanjing" selected>南京</option>
            <option value="shenzhne">深圳</option>
        </select>
        <br><br>

        擅长语言:
        <label><input type="checkbox">C</label>
        <label><input type="checkbox">C++</label>
        <label><input type="checkbox">Java</label>
        <label><input type="checkbox">Python</label>
        <br><br>

        个人介绍:<br>
        <textarea name="#" id="#" cols="60" rows="10"></textarea>
        <br><br>

        <h3>我声明</h3>
        <ul>
            <li>C/C++是最好的语言</li>
            <li>Java是最好的语言</li>
            <li>Python是最好的语言</li>
        </ul>
        <br><br>

        <input type="checkbox">我同意以上条款
        <br><br>

        <input type="submit" value="免费注册">
        <button type="button">登录</button>
        <button type="reset">重置</button>

    </form>
</html>

 

跋文

下一篇笔记为:CSS基础 – Echo (liveout.cn)

觉得有帮助可以投喂下博主哦~感谢!
作者:Echo
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0协议
转载请注明文章地址及作者哦~

评论

  1. 9 月前
    2024-3-18 17:38:49

    学习,感谢分享,赞

    来自广西

发送评论(请正确填写邮箱地址,否则将会当成垃圾评论处理) 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇