致自己:HTML学习笔记二

一、列表标签

1、无序列表

1、使用场景:在网页中表示一组无顺序之分的列表,比如新闻列表。

2、标签组成:

标签名说明
ul表示无序列表的整体,用于包裹li标签,只能包含li标签
li表示无序列表的列表项,包含每一项内容,可以包含任意内容

3、ul标签的type属性值:

属性值说明
disc默认值,实心圆点
circle空心圆点
square正方形

4、代码示例:

<!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>
    <ul type="disc">
        <li>实心圆点</li>
        <li>实心圆点</li>
        <li>实心圆点</li>
        <li>实心圆点</li>
    </ul>
    <ul><!-- 默认值为disc -->
        <li>实心圆点</li>
        <li>实心圆点</li>
        <li>实心圆点</li>
        <li>实心圆点</li>
    </ul>
    <ul type="circle">
        <li>空心圆点</li>
        <li>空心圆点</li>
        <li>空心圆点</li>
        <li>空心圆点</li>
    </ul>
    <ul type="square">
        <li>正方形</li>
        <li>正方形</li>
        <li>正方形</li>
        <li>正方形</li>
    </ul>
</body>
</html>
2、有序列表

1、使用场景:在页面中有序的显示一组列表,比如排行榜

2、标签组成:

标签名说明
ol表示有序列表的整体,用于包裹li标签,只能包含li标签
li表示有序列表的每一项,用于包含每一项内容,可以包含任意内容

3、ol标签的type属性值:

属性值说明
1默认值,阿拉伯数字1…
i小写罗马数字i…
I大写罗马数字I…
a小写英文字母a…
A大写英文字母A…

4、代码示例:

<!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>
    <ol type="1">
        <li>有序列表数字</li>
        <li>有序列表数字</li>
        <li>有序列表数字</li>
        <li>有序列表数字</li>
    </ol>
    <ol><!-- 默认值为数字 -->
        <li>有序列表数字</li>
        <li>有序列表数字</li>
        <li>有序列表数字</li>
        <li>有序列表数字</li>
    </ol>
    <ol type="i">
        <li>小写罗马数字</li>
        <li>小写罗马数字</li>
        <li>小写罗马数字</li>
        <li>小写罗马数字</li>
    </ol>
    <ol type="I">
        <li>大写罗马数字</li>
        <li>大写罗马数字</li>
        <li>大写罗马数字</li>
        <li>大写罗马数字</li>
    </ol>
    <ol type="a">
        <li>小写英文字母</li>
        <li>小写英文字母</li>
        <li>小写英文字母</li>
        <li>小写英文字母</li>
    </ol>
    <ol type="A">
        <li>大写英文字母</li>
        <li>大写英文字母</li>
        <li>大写英文字母</li>
        <li>大写英文字母</li>
    </ol>
</body>
</html>
3、自定义列表

1、使用场景:通常使用在网页底部的导航中

2、标签组成:

标签名说明
dl自定义标签的整体,用于包裹dt、dd标签,只能包含dt、dd标签
dt自定义列表的主题,可以包含任意内容
dd自定义列表针对主题的每一项内容,可以包含任意内容

3、代码示例:

<!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>
    <dl>
        <dt>前端学习技术</dt>
        <dd>HTML</dd>
        <dd>CSS</dd>
        <dd>JavaScript</dd>
    </dl>
</body>
</html>

二、表格标签

1、使用场景:在网页中以行列的单元格方式整齐的显示数据,比如学生成绩

2、基本标签:

标签名说明
table表格整体,用于包裹多个tr标签
tr表示表格的行,包裹td标签
td表示表格的单元格,包裹内容

3、表格的相关属性:

属性名属性值说明
border数字+px边框宽度
width数字+px表格宽度
height数字+px表格高度

4、表格标题和表头单元格标签:

标签名名称说明
caption表格大标题表示表格的整体大标题,默认在表格整体的顶部居中位置显示,caption标签书写在table标签内部
th表格单元格表示一系列小标题,通常用于表格第一行,默认内部文字加粗显示,th标签书写在tr标签内部,用于替换td标签

5、表格的结构标签:用于包裹tr标签,可以省略

标签名说明
thead表示表格的头部
tbody表示表格的主体
tfoot表示表格的底部

6、合并单元格:

属性名属性值说明
rowspan合并单元格的个数跨行合并,删除下一行多余的单元格
colspan合并单元格的个数跨列合并,删除本行多余的单元格

4、代码示例:

<!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>
    <table border="1px" width="500px" height="300px">
        <caption><h2>学生成绩单</h2></caption>
        <thead>
            <tr><th>姓名</th>
                <th>性别</th>
                <th>科目</th>
                <th>成绩</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">张三</td>
                <td rowspan="2"></td>
                <td>语文</td>
                <td>98</td>
            </tr>
            <tr>
                <td>数学</td>
                <td>99</td>
            </tr>
            <tr>
                <td rowspan="2">李四</td>
                <td rowspan="2"></td>
                <td>语文</td>
                <td>99</td>
            </tr>
            <tr>
                <td>数学</td>
                <td>98</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2">评语</td>
                <td colspan="2">你们都很棒,加油学习</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

三、表单标签

1、input标签

1、使用场景:多用于在网页中手机用户信息,比如登陆页、注册页

2、标签名:input,通过指定不同的type属性值来展示不同的效果

3、type属性值:

标签名type属性值说明
inputtext文本框,用于输入单行文本
inputpassword密码框,用于输入密码
inputradio单选框,用于多选一
inputcheckbox多选框,用于多选多
inputfile文件选择,用于上传文件
inputsubmit提交按钮,用于提交
inputreset重置按钮,用于重置
inputbutton普通按钮,默认无功能,需配合js添加功能

4、name和value属性:

  1. value属性:用户输入的内容,提交之后会发送给后端服务器
  2. name属性:当前控件的含义,提交之后可以告诉后端发送过去的数据是什么含义
  3. 后端接收到数据的格式是:name的属性值 = value的属性值

5、text:文本框

  • 在网页中输入单行文本的表单控件
  • 常用属性:placeholder,占位符,提示用户输入内容

6、password:密码框

  • 在网页中输入密码的表单控件
  • 常用属性:placeholder,占位符,提示用户输入内容

7、radio:单选框

1.在网页中显示多选一的控件

2.常用属性:

属性名说明
name分组,当相同的name属性值的单选框为一组时,一组中只能选中一个
checked添加此属性表示默认被选中

8、checkbox:复选框

1.在网页中显示多选多的表单控件

2.常用属性:

属性名说明
checked添加此属性表示默认选中

9、file:文件选择

1.在网页中显示文件选择的表单控件

2.常用属性:

属性名说明
multiple表示多文件选择

10、按钮

1.在网页中显示不同功能的按钮

2.type属性值:

标签名type属性值说明
inputsubmit提交按钮,用于提交数据给后端服务器
inputreset重置按钮,点击之后恢复表单默认值
inputbutton普通按钮,默认无功能,需配合js添加功能

3.注意:要实现以上按钮的功能,必须将表单标签使用form标签一起包裹起来

2、button标签

1、使用场景:在网页中显示用户点击的按钮

2、标签名:button

3、type属性值:同input的按钮标签系列

标签名type属性值说明
buttonsubmit提交按钮,用于提交数据给后端服务器
buttonreset重置按钮,点击之后恢复表单默认值
buttonbutton普通按钮,默认无功能,需配合js添加功能

4、注意:谷歌浏览器中button默认是提交按钮,button按钮是双标签,便于包裹其他内容,如文字、图片等等。

3、select标签

1、使用场景:在网页中提供多个选择项的下拉菜单表单控件

2、标签组成:

标签名说明
select下拉菜单的整体,包裹option标签
option下拉菜单的每一项

3、常见属性:selected,添加此属性表示默认选中

4、textarea标签

1、使用场景:在网页中提供可供输入多行文本的表单控件

2、标签名:textarea

3、属性值:

属性值说明
cols设置文本域的可见宽度
rows设置文本域的可见行数
5、label标签

1、使用场景:用于绑定内容与表单标签之间的关系

2、标签名:label

3、使用方法1:

  • 使用label标签将内容(比如文本)包裹起来
  • 在表单标签上添加id属性
  • 在label标签的for属性中设置对应的id属性值

4、使用方法2:

  • 直接使用label标签将内容(比如文本)和表单标签一起包裹起来
  • 将label标签的for属性删除掉
6、综合案例
<!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>
    <!-- 为了实现submit、reset标签的功能 -->
    <form>
        昵称:<input type="text" placeholder="请输入你的昵称" />
        <br>
        性别:
        <label><input type="radio" name="sex" /></label>
        <input type="radio" name="sex" id="nv"><label for="nv"></label>
        <br>
        心仪对象:<input type="password" placeholder="默认保密" />
        <br>
        所在城市:
        <select>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
            <!-- 默认选中深圳 -->
            <option selected>深圳</option>
        </select>
        <br>
        喜欢的类型:
        <label><input type="checkbox" checked />可爱</label>
        <label><input type="checkbox" />漂亮</label>
        <input type="checkbox" id="nice"><label for="nice">甜美</label>
        <br>
        个人介绍:
        <textarea cols="30" rows="10"></textarea>
        <br>
        上传资料图片:
        <input type="file" multiple />
        <br>
        <input type="submit" value="免费注册" />
        <br>
        <button type="reset">重置</button>
    </form>
</table>
</body>
</html>

四、语义化标签

1、div标签:无语义,独占一行

2、span标签:无语义,一行可以显示多个

3、有语义的标签:

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

五、符实体

显示结果描述实体名称
空格&nbsp;
<小于号&lt;
>大于号&gt;
&和号&amp;
引号&quot;
'撇号&apos;(IE不支持)
¢&cent;
£&pound;
¥&yen;
欧元&euro;
§小节&sect;
©版权&copy;

致自己:每天坚持总结一点点,每天进步一点点,希望自己坚持下去,祝福每一个奋斗者都能收获满满,加油!

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值