关于html和css的学习笔记

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>
    网页主体<br>
    <hr>
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <hr>
    <hr>
    <p>这是王道书中相对最难的一章,<br>这也是最重要的一章,无论是选择题还是大题中都有涉及,主要体现形式是计算。例如通过补码,反码之间的转换,来求得磁盘某块扇区的编号,或者页表的地址转换, <br> 或者是Cache的组号。总之本章非常重要,请大家一定要认真学习。另外,本章还有些冷门的知识点,包括定点数的乘除运算(只在历年大题中总共考过两次,都是以一小问的形式出现,大约1~2分),串行加法器和并行加法器。</p>
    <p>式是计算。例如通过补码,反码之间的转换,来求得磁盘某块扇区的编号,或者页表的地址转换,或者是Cache的组号。总之本章非常重要,请大家一定要认真学习。另外,本章还有些冷门的知识点,包括定点数的乘除运算(只在历年大题中总共考过两次,都</p>
    <s>hhh</s>
    <del>kkkkk</del>
    <em>jjjjjj</em>
    <i>hhhh</i>
    <ins>lkjh</ins>
    <u>huhjbcd</u>
    <!-- 注释 -->
    <!-- <img src="" alt=""> -->
</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>Document</title>
</head>
<body>
    <!-- <img src="./艾克瑟斯.jpg" alt="艾克瑟斯" title="艾克瑟斯" width="250">
    <br>
    <hr>
    <img src="C:\Users\32593\Desktop\恋爱脑.jpg" alt="恋爱脑" width="250">
    <br>
    <hr>
    <img src="./图片/小猫.jpg" alt="小猫" width="250">
    <br>
    <hr>
    <img src="../头疼.jpg" alt="头疼" width="250"> -->
    <!-- 各种路径的图片显示 -->
    <!-- <audio src="./音频1.m4a" controls autoplay loop></audio> -->
    <!-- 控件 自动播放 循环播放 -->
    <!-- 视频标签 -->
    <video src="./烟花.mp4" controls autoplay lool muted></video>
    <!-- 控件,静音状态下自动播放 循环播放 静音 -->
    
</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>Document</title>
</head>
<body>
    <!-- 无序列表 -->
    <ul>
        <li><strong>苹果</strong></li>
        <li>香蕉</li>
        <li>橘子</li>
    </ul>
    <hr>
    <!-- 有序列表 -->
    <ol>
        <li>苹果100</li>
        <li>香蕉67</li>
        <li>橘子10</li>
    </ol>
    <br>
    <!-- 自定义列表 -->
    <dl>
        <dt>水果</dt>
        <dd>苹果</dd>
        <dd>香蕉</dd>
        <dd>橘子</dd>
        <dt>蔬菜</dt>
        <dd>黄瓜</dd>
        <dd>香菜</dd>
    </dl>
    <hr>
    <!-- 表格 -->
    <table border="3" width="800">
        <caption><strong>成绩单</strong></caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小哥哥</td>
                <td rowspan="2">100分</td>
                <!-- 跨行合并 -->
                <td>小哥哥真帅气</td>
            </tr>
            <tr>
                <td>小姐姐</td>
                <!-- <td>100分</td> -->
                <td>小姐姐真漂亮</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td colspan="2">郎才女貌</td>
                <!-- 跨列合并 -->
                <!-- <td>郎才女貌</td> -->
            </tr>
        </tfoot>
        <!-- 不能跨结构合并 tbo,thead 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>Document</title>
</head>
<body>
    <form action="">
        <!-- 表单域 -->
        <!-- 写什么就显示什么 -->
        文本框: <input type="text" placeholder="请输入用户名">
        <br><br>
        <!-- 书写的内容变成点 -->
        密码框: <input type="password" placeholder="请输入密码">
        <!-- placeholder提示 -->
        <br><br>
        单选框: <input type="radio" name="grade" checked>第一 
                <!-- checked默认选中 -->
                <input type="radio" name="grade" id="">第二
                <!-- name相同的为一组,完成单选 -->
        <br><br>
        可以通过点击文字的单选框:
        <br>
            <input type="radio" name="Gra" id="1"><label for="1">第一个</label>
            <!-- **1.id属性和for属性相同 -->
            <input type="radio" name="Gra" id="2"><label for="2">第二个</label>
            <label><input type="radio" name="Gra" id="3">第三个</label>
            <!-- **2.删除lable的for属性,把input和选项名称直接放到lable里 -->
        <br><br>
        多选框: <input type="checkbox" checked>
        <!-- 同意隐私和规则,默认选择 -->
        <br>
        多选框: <input type="checkbox" name="gra" id="">第一
                <input type="checkbox" name="gra" id="">第二
                <input type="checkbox" name="gra" id="">第三
        <br><br>
        下拉菜单: <select name="" id="">
            <option value="">第一</option>
            <option value="" selected>第二</option>
            <!-- selected默认选中 -->
            <option value="">第三</option>
        </select>
        <br><br>
        上传文件: <input type="file" name="" id="" multiple>
        <!-- multiple上传多个文件 -->
        <br><br>
        文本域:
            <br>
            <textarea name="" id="" cols="30" rows="10"></textarea>
            <!-- cols调节宽度,row调节高度 -->
        <br><br>
        <input type="submit">
        <!-- 默认提交,可以用value改 -->
        <!-- value="提交"  value="重置"-->
        <input type="reset">
        <input type="button" value="按钮">
    </form>
    <br><br>
    <hr>
    <br><br>
    <button>普通按钮</button>
    <button type="submit">提交按钮</button>
    <button type="reset">重置按钮</button>
</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>Document</title>
</head>
<body>
    <h1>青春不常在,抓紧谈恋爱</h1>
    <hr>
    <form action="">
        昵称: <input type="text" name="" id="">
        <br><br>
        性别: <label><input type="radio" name="sex" id="">男</label>
        <label ><input type="radio" name="sex" id="">女</label>
        <br><br>
        所在城市: <select name="" id="">
            <option value="">北京</option>
            <option value="" selected>上海</option>
            <option value="">天津</option>
        </select>
        <br><br>
        婚姻状况: <label ><input type="radio" name="maind" id="">未婚</label>
        <label><input type="radio" name="maind" id="">已婚</label>
        <label><input type="radio" name="maind" id="">保密</label>
        <br><br>
        喜欢的类型: 
        <label><input type="checkbox" name="ty" id="">可爱</label>
        <label><input type="checkbox" name="ty" id="">性感</label>
        <label><input type="checkbox" name="ty" id="">御姐</label>
        <label><input type="checkbox" name="ty" id="">萝莉</label>
        <label><input type="checkbox" name="ty" id="">小鲜肉</label>
        <label><input type="checkbox" name="ty" id="">大叔</label>
        <br><br>
        个人介绍:
        <br>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <br><br>
        <br>
        <h3>我承诺</h3>
        <ul>
            <li>年满十八岁,单身</li>
            <li>严肃的态度</li>
            <li>真诚寻找另一半</li>
        </ul>
        <input type="checkbox" name="" id="" checked>我同意所有条款
        <br>
        <input type="submit" value="免费注册">
        <input type="reset" value="重置">
        <br>
    </form>
</body>
</html>

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值