HTML初学第二部分

最新推荐文章于 2024-07-21 12:12:15 发布

Slimety

最新推荐文章于 2024-07-21 12:12:15 发布

阅读量156

点赞数 2

分类专栏：初学文章标签： html html5

本文链接：https://blog.csdn.net/qq_45346359/article/details/115407387

版权

初学专栏收录该内容

18 篇文章 0 订阅

订阅专栏

文章目录

HTML学习二

HTML学习二

列表标签(有序，无序，自定义列表)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签学习</title>
</head>
<body>
<!--有序列表
应用范围：试卷
-->

<ol>
    <li>Java</li>
    <li>python</li>
    <li>运维</li>
    <li>C/C++</li>
</ol>

<hr/>

<!--无序列表-->
<ul>
    <li>Java</li>
    <li>python</li>
    <li>运维</li>
    <li>C/C++</li>
</ul>
<!--自定义列表
dl：标签
dt：列表名称
dd：列表元素

公司网站底部
-->
<dl>
    <dt>学科</dt>

    <dd>Java</dd>
    <dd>python</dd>
    <dd>Linux</dd>
    <dd>C</dd>

    <dt>城市</dt>

    <dd>西安</dd>
    <dd>宝鸡</dd>
    <dd>上海</dd>
    <dd>北京</dd>
</dl>
</body>
</html>

在这里插入图片描述

媒体元素(视频，音频)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>

<!--音频   audio
视频  video
src 路径
controls 控制条
autoplay 自动播放  必须同时添加muted="src"方可实现
-->
<video src="../resources/video/1.mp4" controls height="720" width="1280"></video>
<br/>
<audio src="../resources/audio/1.flac" controls autoplay></audio>
</body>
</html>

表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--表格table
行  tr
列  td
border  规定表格边框的宽度
-->
<table border="1px" >
<tr>
<!--colspan跨列-->
   <td colspan="4">1-1</td>
   <td>1-2</td>
   <td>1-3</td>
   <td>1-4</td>
</tr>
<tr>
<!--    rowspan 跨行-->
    <td rowspan="2">2-1</td>
    <td>2-2</td>
    <td>2-3</td>
    <td>2-4</td>
</tr>
<tr>
    <td>3-1</td>
    <td>3-2</td>
    <td>3-3</td>
    <td>3-4</td>
</tr>
<tr>
    <td>4-1</td>
    <td>4-2</td>
    <td>4-3</td>
    <td>4-4</td>
</tr>

</table>
</body>
</html>

在这里插入图片描述

内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架学习</title>
</head>
<body>
<!--iframe 内联框架
src  地址
w-h 宽高
frameborder   规定是否显示框架周围的边框  1或0
-->

<iframe src="https://www.baidu.com" name="hello" frameborder="1" width="1280px" height="720px"></iframe>
<a href="https://www.bilibili.com" target="hello">点击跳转</a><!--关联第一个内联框架-->
<iframe src="https://www.bilibili.com" frameborder="0" ></iframe>
</body>
</html>

表单(文本输入框，单选框，多选框，按钮，下拉框，文本域，文件域等)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>

<h1>注册</h1>

<!--表单 form
action 表单提交位置  网站或请求处理地址
method post get 提交方式
get可以在url中看到提交的信息，不安全，高效
post比较安全，可以传输大文件
-->
<form action="1.我的第一个网页.html" method="get" >

<!--    文本输入框 input type="text"
value 默认值
maxlength 最大长度
size 文本框长度
readonly 只读
hidden 隐藏
placeholder 输入框提示信息
required  输入框不能为空
pattern  正则表达式
-->
    <p>名字：<input type="text" name="username" maxlength="8" size="20" placeholder="请输入用户名" required></p>
<!--    密码框 input type="password" -->
    <p>密码：<input type="password" name="pwd" hidden></p>

<!--    单选框标签  input type="radio"
value  单选框的值
name   表示组
checked  默认选中
disabled 禁用选项
-->
    <p>性别：
        <input type="radio" value="boy" name="sex" disabled/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>

<!--    多选框标签  input type="checkbox"
checked  默认选中
-->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby"/>睡觉
        <input type="checkbox" value="code" name="hobby"/>敲代码
        <input type="checkbox" value="chat" name="hobby"/>聊天
        <input type="checkbox" value="game" name="hobby"/>游戏
    </p>

<!--    按钮
input type="button"  普通按钮
input type="image"   图片按钮
input type="submit"  提交按钮
input type="reset"   重置按钮
-->
    <p>按钮：
        <input type="button" name="btn1" value="点击">
        <input type="image" src="../resources/image/1.png" width="100px" height="100px">

    </p>

    <p>国家：
<!--        下拉框，列表框  select
selected  默认选中

-->
        <select name="列表名称" >
            <option value="China">中国</option>
            <option value="us" selected>美国</option>
            <option value="Japan">日本</option>
            <option value="uk">英国</option>
        </select>


    </p>


<!--    文本域  textarea
cols  列
rows  行
-->
    <p>反馈：
        <textarea name="textarea" cols="30" rows="10">反馈建议</textarea>

    </p>

<!--    文件域   input type="file" name="files"


-->
    <p>
        <input type="file" name="files">
        <input type="button" name="upload" value="上传">
    </p>

<!--    邮箱验证
-->
   <p>邮箱：
       <input type="email" name="email">

   </p>
<!--    url-->
    <p>url：
        <input type="url" name="url">
    </p>
<!--    数字验证
max 最大值
min 最小值
step 增加（减少）值
-->
    <p>数字：
        <input type="number" name="num" max="100" min="0" step="10">
    </p>

<!--    滑块
input type="range"
-->
    <p>音量：
        <input type="range" name="voice" min="0" max="100" step="1">
    </p>
<!--    搜索框-->
    <p>搜索：
        <input type="search" name="search">
    </p>

<!--    增强鼠标可用性-->
    <p>
        <label for="mark">点击</label>
        <input type="text" id="mark">
    </p>
<!--网上搜索常用正则表达式-->
    <p>自定义邮箱：
        <input type="text" name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">

    </p>
<!--提交按钮  重置按钮-->
    <p>
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>
</form>

</body>
</html>

感谢B站狂神说，让我学到这些
初学HTML，有任何问题请各位大佬指出

Slimety

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML初学第二部分

文章目录HTML学习二列表标签(有序，无序，自定义列表)媒体元素(视频，音频)表格标签内联框架表单(文本输入框，单选框，多选框，按钮，下拉框，文本域，文件域等)HTML学习二列表标签(有序，无序，自定义列表)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>列表标签学习</title></head><bo
复制链接

扫一扫