HTML5实用大全(Part.3)

小堇不是码农

于 2024-05-19 22:59:41 发布

阅读量695

点赞数 41

分类专栏：前端文章标签： html5 前端 html

本文链接：https://blog.csdn.net/2301_79539778/article/details/139048916

版权

前端专栏收录该内容

3 篇文章 1 订阅

订阅专栏

引言：

哈喽，小伙伴们大家好呀！在本篇博客我们继续分享HTML5的知识，再结合之前的知识相信你在学习完之后能够自己制作一个有趣的页面了，那我们开始吧！

表格标签

基本使用：

table标签：表示整个表格

tr:表示表格的一行

td:表示一个单元格

th:表示表头单元格，会居中加粗

thead:表格的头部区域(注意和th区分，范围是比th要大的)

tbody:表格得到主体区域

table包含tr，tr包含td或th

注意：以下几个属性在vscode中都提示不出来

表格标签中有一些属性，可以设置大小边框等，但是一般使用CSS方式来设置。

这些属性都要放到table标签中。

align是表格相对于周围元素的对齐方式，align="center"(居中显示)

border表示边框，1表示有边框(数字越大，边框越粗)，""表示没边框

cellpadding:内容距离边框的距离，默认为1像素

cellspacing:单元格之间的距离，默认为2像素

width/height:设置尺寸

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500">
        <tr>
            <th>苹果</th>
            <th>香蕉</th>
            <th>梨</th>
        </tr>
        <tr>
            <td>中国</td>
            <td>美国</td>
            <td>英国</td>
        </tr>
    </table>
</body>
</html>

效果图：

合并单元格：

跨行合并：rowspan="n"

跨列合并：colspan="n"

步骤：

1.先确定跨行还是跨列

2.找好目标单元格(跨列合并，左侧是目标单元格，跨行合并，上方是目标单元格)

3.删除多余的单元格

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500">
        <tr>
            <th>苹果</th>
            <th rowspan="2">香蕉</th>
            <th>梨</th>
        </tr>
        <tr>
            <th>中国</th>
            <th>英国</th>
        </tr>
        <tr>
            <th>a</th>
            <th colspan="2">b</th>
        </tr>
        <tr>
            <th>c</th>
            <th>d</th>
            <th>e</th>
        </tr>
    </table>
</body>
</html>

效果展示：

列表标签

主要使用来布局的，能够产生不错的美学效果

1.无序列表：ul与li

2.有序列表：ol与li

3.自定义列表：dl(总标签),dt(小标签)，dd(围绕标题来说明)上面有个小标题，下面围绕展开

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>无序列表</h3>
    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>钱五</li>
    </ul>
    <h3>有序列表</h3>
    <ol>
        <li>张三</li>
        <li>李四</li>
        <li>钱五</li>
    </ol>
    <h3>自定义列表</h3>
    <dl>
        <dt>我的小弟们</dt>
        <dd>张三</dd>
        <dd>李四</dd>
        <dd>钱五</dd>
    </dl>
</body>
</html>

效果展示：

注意：

1.元素之间是并列关系

2.ul/ol中只能放li不能放其他标签，dl中只能放dt和dd

3.li中可以放其他标签

4.列表带有自己的样式，可以使用CSS来修改。（例如前面的小圆点可以被去掉）

表单标签：

表单是让用户输入信息的重要途经。

分成两个部分：

1.表单域：包含表单元素的区域，重点是form标签

2.表单控件：输入框，提交按钮等，重点是input标签

from标签

<form action="index.html">

……[form的内容]

</form>

描述了要把数据按照什么方式，提交到哪个页面中。

关于form需要结合服务器&网络编程来进一步理解，后面再详细研究

input标签

包含了各种的控件，有单行输入框，按钮，单选框，复选框

1.type(必须有)，取值种类很多，button,checkbox,text,file,image,password,radio等

2.name：给input娶个名字，尤其是对于单选按钮，具有相同的name才能多选一

3.value：input中的默认值

4.checked:默认被选中，用于单选按钮和多选按钮

5.maxlength:设定最大长度

1.文本框：

<input type="text">

2.密码框

<input type="password">

3.单选框

性别：

<input type="radio" name="sex">男

<input type="radio" name="sex" checked="checked">女

注意：单选框之间必须具备相同的name属性，才能实现多选一的效果

4.复选框

爱好：

<input type="checkbox">吃饭

<input type="checkbox">睡觉

<input type="checkbox">打游戏

5.普通按钮

<input type="button" value="我是个按钮">

若点击后没有反应，可搭配JS使用

<input type="button" value="我是个按钮" οnclick="alert('hello')">

6.提交按钮

<form action="99.index.html">

<input type="text" name="username">

<input type="submit" value="提交">

</form>

提交按钮必须放到form中，点击后就会尝试给服务器发送

7.清空按钮

<form action="99.index.html">

<input type="text" name="username">

<input type="submit" value="提交">

<input type="reset" value="清空">

</form>

清空按钮必须放在form中，点击后会将输入框中的内容清空

8.选择文件

<input type="file">

点击选择文件，会弹出文件夹，可供选择

9.label标签

搭配input使用，点击label也能选中对应的单选/复选框，能够提升用户体验

for属性 :指定当前label和哪个相同id的input标签对应，此时的点击才是有用的

<label for="male">男</label>

<input id="male" type="radio" name="sex">

10.select标签

下拉菜单

option中定义的selected="selected"表示默认选中

<select>

<option>北京</option>

<option>上海</option>

<option selected="selected">成都</option>

</select>

我们一般情况下在第一行给出提示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <select>
        <option>请选择城市</option>
        <option>北京</option>
        <option>上海</option>
        <option>成都</option>
        <option>昆明</option>
    </select>
</body>
</html>

11.textarea标签

<textarea rows="3" cols="50">黑子说话</textarea>

文本域中的内容，就是默认内容，注意，空格也有影响，rows和cols一般不直接使用，通过CSS来进行操作变化。

简历制作实战：

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>请填写简历信息</h3>
    姓名<input type="text">
    <br>
    性别<input type="radio" name="sex">男<input type="radio" name="sex">女
    <br>
    出生日期<select>
        <option value="">请选择年份</option>
        <option value="">2003</option>
        <option value="">2004</option>
        <option value="">2005</option>
        <option value="">2006</option>
    </select>
    <select>
        <option value="">请选择月份</option>
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
        <option value="">4</option>
        <option value="">5</option>
        <option value="">6</option>
        <option value="">7</option>
        <option value="">8</option>
        <option value="">9</option>
        <option value="">10</option>
        <option value="">11</option>
        <option value="">12</option>
    </select>
    <select>
        <option value="">请选择日</option>
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
        <option value="">4</option>
        <option value="">5</option>
        <option value="">6</option>
        <option value="">7</option>
        <option value="">8</option>
        <option value="">9</option>
        <option value="">10</option>
        <option value="">11</option>
        <option value="">12</option>
    </select>
    <br>
    就读学校<input type="text">
    <br>
    应聘岗位<input type="checkbox" name="" id="">前端开发<input type="checkbox" name="" id="">后端开发<input type="checkbox" name="" id="">测试开发<input type="checkbox" name="" id="">软件开发
    <br>
    掌握的技能<textarea cols="50" rows="10"></textarea>
    <br>
    项目的经历<textarea cols="50" rows="10"></textarea>
    <br>
    <input type="checkbox" name="" id="">我已仔细阅读过公司的招聘要求
    <br>
    <a href="">查看我的状态</a>
    <ul>
        <h3>请应聘者确认：</h3>
        <li>以上信息真实</li>
        <li>能够尽早去公司实习</li>
        <li>能够接受加班</li>
    </ul>
</body>
</html>

结尾：

呼，HTML5的基本特性到此也算是告一段落了，后续有需要补充的我会给大家继续补充，即将开启CSS之旅咯，小伙伴们不要掉队呐！