html再初识

列表标签

目标：无序有序和自定义列表标签实现网页中列表结构的搭建

列表的应用场景

按行展示关联性内容，如新闻（无序）、排行榜（有序）、账单（自定）等

无序列表
组成

ul（表示整体用于包裹） 嵌套 li（表示每一项用于包含每行内容）

显示特点

每项前默认圆点标识

注意，ul （ol）只允许包含 li，li 可以包含任何内容

有序列表
组成

ol+li

特点

默认显示序号表示

自定义列表
场景

网页底部导航

组成

dl（整体，包裹dt或dd）+dt（主题）+dd（每项内容）

显示特点

默认缩进

dl 只允许包含 dt/dd，后二者可以包含任意

表格标签

基本标签

场景：行+列（如成绩表）

标签名 说明
table（>tr>td） 整体，包裹多个tr
tr 每行，包裹td
td 单元格，包裹内容
相关属性

设置展示效果（给格子）

border（/width/height）+数字以规定 边框宽度（/表格宽度/表格高度）

<table border="1" width="750" height="500">
    <caption><strong>成绩单</strong></caption>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>
        <tr>
            <td>林檎</td>
            <td rowspan="2">一伯昏</td>
            <td>谢谢喵</td>
        </tr>
        <tr>
            <td>东雪莲</td>
            <!-- 被删除行<td>零分</td> -->
            <td>最适合梅菲斯特的一集</td>
        </tr>
    </table>
</body>
标题和表头

即 整体大标题（caption，写在table内部）和每列上方的小标题（th，写在tr内部）

结构标签*

thead头部、tbody主体、tfoot底部

合并单元格

跨列或跨行合并 步骤：

  • 明确合并哪几个单元格

  • 左上原则确定保留和删除

    上下合并只保留最上，左右合并只保留最左，删除其他

  • 给保留的单元格设置属性名（ rowspan或 colspan）、属性值（合并的个数）

    不能跨结构合并（thead、tbody、tfoot）

表单标签

登陆、注册、搜索等功能时使用；

input

收集用户信息，通过type属性值不同行使不同效果

text 文本框 输入单行文本、password密码框、radio单选框 多选一、checkbox多选框 多选多、file上传文件、submit提交按钮、reset重置按钮、button普通按钮 默认无功能 配合JavaScript...

<!-- 写什么显示什么，文本框不换行 -->
        文本框：<input type="text">
        <!-- 不显示内容,也不换行 -->
        密码框：<input type="password">
        <hr>
        <input type="radio">
        <input type="checkbox" name="" id="">
        <!-- ...... -->

占位符，提示用户要输入的文本

<input type="text" placeholder="请输入用户名，邮箱/手机">

​ 单选控件，分组

性别：<input type="radio" name="gender">MALE <input type="radio" name="gender">FEMALE

​ 默认选中控件，提升体验

性别：<input type="radio" name="gender">MALE <input type="radio" name="gender" checked>FEMALE

multiple多文件选择控件

<input type="file" multiple>

button
<!-- 自带“提交”字样和提交功能，不必配合js -->
        <input type="submit" value="注册">

但前提是有表单域 <form action="提交地址"> 才能实现提交或重置功能；

button是双标签，随type不同取值而行使不同功能，另外通过value命名

select
 <section>
            <option value="">Beijing</option>
            <option value="" selected>Tokyo</option>
            <option value="">New York</option>
</section>
textarea

<textarea name="" id="" cols="75" rows="45"></textarea>

实际工作通过CSS控制宽高以及禁用拖拽

label

方法① 用label把内容文本包裹、表单上添加id、在label的for属性中设置对应id

方法② 直接用label把内容和表单一起包裹、把label的for属性删除

性别：
        <input type="radio" name="gender" id="MALE"><label for="MALE">帅OTTO</label>
        <!-- 以上为① -->
        <label><input type="radio" name="gender">柯洁</label>
        <!-- 以上为② -->

语义化标签

无语义 布局 标签：div（独占行）、span（一行多个）；

有语义的* ：HTML5

标签名 语义
header 网页头部
nav 网页导航
footer 网页底部
aside 网页侧边栏
section 网页区块
article 网页文章

手机端网页常用

字符实体

html里的空格合并现象

网页不认识多个空格，若实现特殊符号效果则需要实体

结构：“ &英文；”

显示结果 描述 实体名称
空格 &nbsp
< 小于号 &lt
> 大于号 &gt
& 和号 &amp
" 引号 &quot
' 撇号 &apos
¢ 分cent &cent
£ 镑pound &pound
￥ 元 &yen
€ 欧元euro &euro
§ 小节 &sect
© 版权copyright &copy
常见字符实体

案例

<title>七月十号</title>
</head>
<body>
    <table border="2" width="500" height="300">
        <caption>
            <h2>优秀学生（悲）</h2>
        </caption>
            <tr>
                <th>年级</th>
                <th>姓名</th>
                <th>学号</th>
                <th>班级</th>
            </tr>
            <tr>
                <td rowspan="2">逸一时误一世</td>
                <td>山里灵活的狗</td>
                <td>114514</td>
                <td>帝丹高中</td>
            </tr>
            <tr>
                <!-- <td>壹玖壹玖捌壹零</td> -->
                <td>我超，出音味来</td>
                <td>1919810</td>
                <td>榊野学园</td>
            </tr>
            <tr>
                <td>先辈评语</td>
                <td colspan="3">灌注永雏塔菲谢谢喵！</td>
            </tr>
    </table>
    <h1>你所热爱的，就是你的生活</h1>
    <hr>
            <!-- 先给表单域 -->
            <form action="">
                输入昵称：<input type="text" placeholder="不可使用违规名称,如帅otto">
                <!-- 上行默认不换行 -->
                <br><br>
                        成分和浓度:
                        <label>
                            <input type="radio" name="gender" checked>鼠鼠我呀...
                        </label>
                        <label>
                            <input type="radio" name="gender">原神怎么你了？
                    </label>
                <br><br>
                                了解你的捍卫者:
                                <select>
                                    <option>古代艺术家特有的沉着冷静，好摇不挑曲儿</option>
                                    <option selected>如来嘛（我醉提酒游寒山，爽滑慢舔）</option>
                                    <option>Never Gonna Give You Up</option>
                                </select>
                <br><br>
                                        你的XP:
                                        <label><input type="checkbox">牡蛎牡蛎牡蛎牡蛎牡蛎牡蛎</label>
                                        <label><input type="checkbox" checked>One Last Kiss</label>
                                        <label><input type="checkbox">这么可爱一定是男孩子（立了）</label>
                                        <label><input type="checkbox" checked>请停止你的松冈行为</label>
                <br><br>
                                请结合实际谈谈你对“鲜衣怒马少年郎，谁人不识理塘王”的理解（5分）: <br>
                                <textarea name="" id="" cols="60" rows="10" 
                                placeholder="阿妈说，格聂山上风声很大，没有烟灰...">
                                </textarea>
                        <h2>你可以再表演一次那个吗？就是那个:</h2>
                        <ul>
                            <li>骂谁罕见？</li>
                            <li>啊↗？</li>
                            <li>↑↑↑骂谁罕见！！！</li>
                        </ul>
                <input type="checkbox">我说婷婷同意所有条款
            <input type="submit" value="你说得对，但...">
            <button type="reset">启！动！！</button>
            </form>
</body>
</html>
posted on 2023-07-10 15:24  言行一  阅读(33)  评论(0)    收藏  举报
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3