HTML基本语法(慕课网学习笔记)
阅读原文时间:2023年07月08日阅读:4
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习html标题</title>
</head>
<body>
    <!-- 1em = 16px -->
    <h1>一级标题 字体大小32px</h1>
    <h2>二级标题 字体大小24px</h2>
    <h3>三级标题 字体大小18px(18.72) 约等于</h3>
    <h4>四级标题 字体大小16px</h4>
    <h5>五级标题 字体大小14px(13.28) 约等于</h5>
    <h6>六级标题 字体大小12px</h6>

    <h6>六级标题</h6>
    <h7>七级标题 不存在的</h7>
    <h8>八级标题 不存在的</h8>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTMl 段落标签</title>
    <style>
    /*默认p标签空是占行的,在此处覆盖默认css,借用调试工具调整*/
        p {
            margin:0;
            padding:0;
        }
    </style>
</head>
<body>
    <p>段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1</p>
    <p></p>
    <p>段落内容2</p>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接</title>
    <style>
    /*设置class为content的元素的高度*/
        .content {
            height:800px;
        }
    /*覆盖a的默认值*/
        a {
            color:#333333;
            text-decoration: none;
        }

        a:visited {
            color:#333333;
        }

    </style>
</head>
<body>
    <!-- target="_blank"在新窗口中打开页面 -->
    <a href="http://www.imooc.com/" target="_blank">慕课网-新窗口</a>

    <!-- target="_self"在本窗口打开页面 -->
    </br>
    <a href="http://www.imooc.com/" target="_self">慕课网-本窗口</a>
    </br>

    <!-- 跳转到本页面id="titleThird"的元素的位置 -->
    <a href="#titleThird">页面内锚点</a>
    </br>

    <!-- 禁止点击 -->
    <a href="javascript:;">随便你点 能跳走算我输……</a>
    </br>
    <!-- 占空 -->
    <div class="content">一堆内容</div>
    </br>
    <h3 id="titleThird">咳咳 第三章</h3>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像</title>
    <style>
    /*通过背景插入图片*/
        .imooc-logo {
            background: url(https://www.imooc.com/static/img/index/logo.png);
            width: 200px;
            height: 80px;
        }
    </style>
</head>
<body>
    <p class="imooc-logo">

    </p>
    <!-- 通过标签插入图片 -->
    <img src="https://www.imooc.com/static/img/index/logo.png">
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!-- 无序列表 -->
    <ul type="circle">
        <li>苹果</li>
        <li>鸭梨</li>
        <li>水蜜桃</li>
    </ul>
    <!-- 有序列表 -->
    <ol type="square">
        <li>烤冷面</li>
        <li>煎饼果子</li>
        <li>麻辣烫</li>
    </ol>

    <!-- 定义(下定义的意思dd是dt的解释)列表 -->
    <dl type="disc">
        <dt>正数</dt>
        <dd>大于0的自然数</dd>
        <dt>负数</dt>
        <dd>小于0的自然数</dd>
    </dl>
</body>
</html>

div无敌神器,哈哈哈哈哈哈
div、h1等块级元素(占满整行)
p、span等行级元素,依据内容数量决定长度
<!--这是一个注释-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <b>加粗字体</b>

    <br />

    <strong>另一种粗体</strong>

    <br />

    <big>大号字体</big>

    <br />

    <em>强调字体</em>

    <br />

    <i>斜体</i>

    <br />

    <small>小号字体</small>

    <br />

    This text contains
    <sub>下标</sub>

    <br />

    This text contains
    <sup>上标</sup>

</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>预格式标签</title>
</head>
<body>
    <h1>下面为一段javascript代码</h1>
    <!-- pre声明这是需要显示的代码,不要编译器解释运行 -->
    <pre>
        var a = "";
        a = "Hello World";
        alert(a);
    </pre>
    <h1>删除线</h1>
    <!-- del删除线  ins下划线 -->
    <p>其实我有一双美丽的<del>大腿</del> <ins>请填空</ins></p>

    <p>看起来很美好 然而兼容性不好</p>
    <h1>引用演示</h1>
    <!-- 引用?没看出有啥用 -->
    <blockquote>
        引用自w3c官方HTML标准文档
    </blockquote>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>完整结构表格</title>
</head>
<body>
    <style>
    </style>
    <!-- align设置位置,left左对齐right右对齐center居中显示 -->
    <!-- border外边框的宽度(厚度) -->
    <!-- cellspacing格与格之间的间距 -->
    <table align="center" border=1 cellspacing="5">
        <!-- 表头 -->
        <thead>
            <tr>
                <!-- th不同于td这个才是设置表头的关键 -->
                <th>学号</th>
                <th>姓名</th>
                <th>总分</th>
            </tr>
        </thead>
        <!-- 表尾 -->
        <tfoot>
            <tr>
                <!-- colspan="3"横向合并3个单元格 -->
                <!-- rowspan="2"纵向合并两个单元格 -->
                <td colspan="3">按钮</td>
            </tr>
        </tfoot>
        <tbody align="center">
            <tr>
                <td>20094071309</td>
                <td>兰兰懒</td>
                <td>400</td>
            </tr>
            <tr>
                <td>20094071310</td>
                <td>小新</td>
                <td>400</td>
            </tr>
        </tbody>
    </table>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <!-- action表单提交的地址method提交的方式POST或GET -->
    <form action="" method="">
        <!-- 输入文本 -->
        姓名<input type="text" />
        </br>
        <!-- 单选框 -->
        性别<input type="radio" value="1" />男<input type="radio" value="0" />女
        </br>
        喜欢玩的游戏:
        <!-- 复选框 -->
        </br>
        <input type="checkbox" value="农药" />农药
        <input type="checkbox" value="西游" />西游
        </br>
        学历:
        <!-- delect下拉列表 -->
        <select>
            <option value="0">函授</option>
            <option value="1">学士</option>
            <option value="2">硕士</option>
            <option value="3">非人</option>
        </select>
        </br>
        <!-- date输入日期 -->
        选择日期<input type="date" />
        </br>
        <!-- 只能输入数字 -->
        身高<input type="number" />
        </br>
        <!-- 一个颜色选择器 -->
        喜欢的颜色<input type="color" />
        </br>
        <!-- 横向滑动条 -->
        薪资<input type="range"  min="1" max="5"/>
        </br>
        <!-- 校验邮箱 -->
        联系邮箱<input type="email" />
        </br>
        <!-- 密码 -->
        小秘密<input type="password" />
        </br>
        个性签名:
        </br>
        <!-- 文本域rows="5"5行 cols="30"30个字节长度 -->
        <textarea rows="5" cols="30" ></textarea>
        </br>
        <!-- 清空 -->
        <input type="reset" value="清空" />
        <!-- 提交 -->
        <input type="submit" />
    </form>
</body>
</html>

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章