一些html知识点笔记

以下知识点来自b站黑马视频:https://www.bilibili.com/video/BV1Kg411T7t9?p=1

  • 快速复制快捷键:shift+alt+⬇

  • web标准:html是骨架,css是外观,Js是表现

  • html是用来描述web文档的标记语言

  • 前端代码通过浏览器来解析渲染

  • 网页组成:视频、音频、图片等

  • 注释快捷键ctrl+/

  • 水平分割线


  • 路径

    • 绝对路径(了解):从盘开始的路径、网络链接
    • 相对路径(常用):从当前文件去找目标文件
标签

一些常用标签

img
  • alt:替换文本属性
  • title:鼠标悬停能出现文字
audio
  • controls:显示播放控件
  • autoplay:自动播放
  • loop:循环播放
video
  • controls:显示播放控件
  • autoplay:自动播放(谷歌配合muted来静音播放)
  • loop:循环播放
a
  • href:跳转地址(若不知道可用#代替)
  • target:控制跳转页面是否覆盖原来页面
    • 默认值:覆盖
    • _blank:不覆盖
列表
  • 无序列表

    • ul:在ul中只能放li
    • li:li中可以嵌套,包含每一行的内容
  • 有序列表

    • ol
    • li
  • 自定义列表

    • 其中dd前会缩进

    image-20220405200548447

表格

image-20220405201650330

  • 一些table属性

    image-20220405202523380

  • 表格大标题和表头单元格,caption与tr同级,th是小标题

    image-20220405203633126

    image-20220405204034350

  • 合并单元格,只有同一结构(thead,tbody,tfoot)和标签才能合并,跨行rowspan,跨列colspan

    image-20220405205612873

表单input
  • 根据type的属性值可以实现各种功能, 点击链接查看

  • 占位符提示信息

    • 文本框:
  • 实现单选框,使用name属性分组,若要默认选中只需在后面加上checked即可

    image-20220406091344405

  • 上传多个文件,只要加入multiple单词即可

  • 用value值来改按钮上的文字

<!-- 写一个登录框 -->
    <form action="这里要写网址">
        用户名:<input type="text" >
        <br>
        <br>
        密码:<input type="password">
        <br>
        <br>
        <input type="submit" value="免费注册" >
        <input type="reset" >
        <input type="button" value="普通按钮">
    </form>
button
  • 不用表单来做按钮而是直接用button标签

    <button type="submit">提交</button>
    <button type="reset">重置</button>
    <button type="button">配合js</button>
    
    
下拉菜单select
  • select与option是父子关系,若要默认选项加selected

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i9b3aX4B-1651324639534)(C:\Users\11795\AppData\Roaming\Typora\typora-user-images\image-20220406100937236.png)]

  <select >
        <option>北京</option>
        <option>上海</option>
        <option selected>广州</option>
  </select>
文本域textarea
  • rows属性规定行数,cols是宽度,但是一般用css来设置宽高
label标签
  • 方法

image-20220406130646129

  • 代码
<!-- 绑定内容与表单标签的关系 -->
    <!-- 第一种方法 -->
    <input type="radio" id="nan" name="sex"><label for="nan">男</label>
    <input type="radio" id="nv" name="sex"><label for="nv">女</label>

    <br><br>

    <!-- 第二种方法 -->
    <label><input type="radio" name="sex">男</label>
    <label><input type="radio" name="sex">女</label>

  • 效果:点击男就能选中

    image-20220406132558785

语义化标签
  • 无语义的布局标签

    • div:独自占一行
    • span:不独自一行,而是连着
  • 有语义的标签(用在h5页面)

    • 常用的

      image-20220406133156800

字符实体
  • 空格:%nbsp
案例:学生信息表
  • 代码

    <table border="1" width="400" height="300">
            <caption>
                <h3>优秀学生信息表格</h3>
            </caption>
            <tr>
                <th>年级</th>
                <th>姓名</th>
                <th>学号</th>
                <th>班级</th>
            </tr>
            <tr>
                <td rowspan="2">高三</td>
                <td>张三</td>
                <td>110</td>
                <td>三年二班</td>
            </tr>
            <tr>
                <td>里斯</td>
                <td>120</td>
                <td>三年二班</td>
            </tr>
            <tr>
                <td>评语</td>
                <td colspan="3">优秀</td>
            </tr>
            
        </table>
    
  • 效果

    image-20220406194529958

案例:表单
  • 代码:

    <body>
        <h1>青春不常在,抓紧谈恋爱</h1>
        <hr>
        <form>
            昵称:
            <label><input type="radio" name="sex">男</label>
            <label><input type="radio" name="sex">女</label>
            <br>
            <br>
            所在城市:
            <select>
                <option selected>上海</option>
                <option>北京</option>
                <option>广州</option>
            </select>
            <br>
            <br>
            婚姻状况:
            <label><input type="radio" name="hunyin">未婚</label>
            <label><input type="radio" name="hunyin">已婚</label>
            <label><input type="radio" name="hunyin">保密</label>
            <br>
            <br>
            喜欢的类型:
            <label><input type="checkbox" name="like" checked>可爱</label>
            <label><input type="checkbox" name="like" checked>性感</label>
            <label><input type="checkbox" name="like">御姐</label>
            <label><input type="checkbox" name="like">萝莉</label>
            <br>
            <br>
            个人介绍:
            <br>
            <br>
            <textarea cols="60" rows="10"></textarea>
            <br>
            <br>
            <h3>我承诺</h3>
            <ul>
                <li>年满十八岁</li>
                <li>年满十八岁</li>
                <li>年满十八岁</li>
            </ul>
            <br>
            <label><input type="checkbox">我同意所有条款</label>
            <br>
            <br>
            <button type="submit">免费注册</button>
            <button type="reset">重置</button>
        </form>
    
    </body>
    
  • 效果

    image-20220406204104337

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值