一些html知识点笔记

ZJX_2000

已于 2022-04-30 21:27:13 修改

阅读量160

点赞数

文章标签： html

于 2022-04-30 21:19:11 首次发布

本文链接：https://blog.csdn.net/weixin_45968226/article/details/124518973

版权

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

快速复制快捷键：shift+alt+⬇
web标准：html是骨架，css是外观，Js是表现
html是用来描述web文档的标记语言
前端代码通过浏览器来解析渲染
网页组成：视频、音频、图片等
注释快捷键ctrl+/
水平分割线
路径
- 绝对路径(了解)：从盘开始的路径、网络链接
- 相对路径(常用)：从当前文件去找目标文件

<!-- 写一个登录框 -->
    <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标签

方法

代码

<!-- 绑定内容与表单标签的关系 -->
    <!-- 第一种方法 -->
    <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>

效果：点击男就能选中

语义化标签

无语义的布局标签
- div：独自占一行
- span：不独自一行，而是连着
有语义的标签（用在h5页面）
- 常用的

字符实体

空格：%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>

效果

案例：表单

代码：

<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>