前端基础——HTML（二）

最新推荐文章于 2024-05-08 22:31:41 发布

饺子0778

最新推荐文章于 2024-05-08 22:31:41 发布

阅读量134

点赞数

分类专栏：跟狂神75天速成Java # JavaScript基础

本文链接：https://blog.csdn.net/wjr0258/article/details/106951156

版权

跟狂神75天速成Java 同时被 2 个专栏收录

37 篇文章 4 订阅

订阅专栏

JavaScript基础

7 篇文章 0 订阅

订阅专栏

列表标签

列表就是信息资源的一种展现形式，它可以使信息结构化条理化，并且以列表的样式显示出来，以便浏览者能更快捷地获取相应的信息
可以在列表中嵌套列表，内列表和外层列表缩进明显区分

<body>
<!--有序列表-->
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>
<!--无序列表-->
<hr/>
<ul>
    <li>123
        <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        </ul>
    </li>
    <li>2</li>
    <li>3</li>
</ul>
<hr/>
<!--自定义列表
dl：标签
dt：列表名称
dd：列表内容-->
<dl>
    <dt>123</dt>
    <dd>1</dd>
    <dd>2</dd>
    <dd>3</dd>
    <dt>abc</dt>
    <dd>a</dd>
    <dd>b</dd>
    <dd>c</dd>
</dl>
</body>

表格

表格的基本结构：

单元格
行
列
跨行
跨列

<body>
<!--表格table
行 tr
列 td
-->

<table border="=1px">
    <tr>
<!-- colspan 跨列       -->
          <td colspan="4">1-1</td>

    </tr>
    <tr>
<!-- rowapan    跨列   -->
        <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>
    </tr>
</table>
</body>

效果：
在这里插入图片描述

媒体元素——视频和音频

video 视频
audio 音频

<body>
<!--音频和视频
src:资源路径
controls:控制条
autoplay:自动播放
-->
<video src="../resource/video/片头.mp4"  controls autoplay></video> 
<audio src="../resource/audio/萤火虫和你.mp3" controls autoplay></audio>
</body>

页面结构分析

元素名	描述
header	标题头部区域的内容（用于页面或页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
section	Web页面中德一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航类辅助内容

<body>
<header>
    <h2>网页头部</h2>
</header>

<section>
    <h2>网页主体</h2>
</section>

<footer>
    <h2>网页脚部</h2>
</footer>

</body>

内联框架

ifram标签，必须要有src属性即引用页面的地址
给标签加上name属性后，可以做a标签的target属性，即在内联窗口中打开链接

<body>
<!--
ifram内联框架
w-h：“小窗的高度和宽度”
src：引用页面地址 name：框架标识名
-->
<iframe src="http://www.baidu.com"
        frameborder="0"
        width="1000"
        height="800"
        name="hello">
</iframe>
<a href="http://www.bilibili.com" target="hello">111</a>
<!--B站自动生成内联标签：-->
<!--<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97256834&page=1"-->
<!--        scrolling="no"-->
<!--        border="0"-->
<!--        frameborder="no"-->
<!--        framespacing="0"-->
<!--        allowfullscreen="true">-->
<!--</iframe>-->
</body>

表单

from标签，action属性为所提交的目的地址，method选择提交方式
可以选择使用post或者get方式提交
- get效率高，但在url中可以看到提交的内容，不安全，不能提交大文件|
- post比较安全且可以提交大文件

标签	说明
input标签	大部分表单元素对应的标签有text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text
select标签	下拉选择框
textarea标签	文本域

input标签
可以提交用户名、密码等等

属性	说明
type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text
name	指定表单元素的名称（提交时所对应的key）
value	元素的初始值，radio必须提供
size	指定表单元素的初始宽度。当type为text或者password时，以字符为单位；其他type以像素为单位
maxlength	type为text或者password时，输入的最大字符数
checked	type为radio或者checkbox时，指定按钮是否被选中

<body>

<h1>注册</h1>

<!--表单 form
action: 表单提交的位置，可以是网站也可以是一个请求处理地址
method: post,get提交方式
        get方式提交：可以在url中看到我们提交的信息，不安全 ，但高效
        post方式提交：比较安全，可以传输大文件
-->

<form action="我的第一个网页.html" method="get">
<!--    文本输入框： input type="text"
value="狂神"       默认初始值
maxlength="8"     最长能写几个字符
size="30"         文本框的长度
-->
    <p>名字：<input type="text" name="username" value="狂神" maxlength="8" size="30"> </p>
<!--    密码框：input type="password"-->
    <p>密码：<input type="password" name="password"> </p>

<!--    单选框便签 
input type="radio"
value: 表示单选框的值
name：表示组。一组里只能选一项
checked  默认选择
-->
    <p>性别
    <input type="radio" value="boy" name="sex" checked/>男
    <input type="radio" value="girl" name="sex"/>女
    </p>
<!--    多选框
input type="checkbox"
checked  默认选择-->
   <p>爱好：
       <input type="checkbox" value="sleep" name="hobby">睡觉
       <input type="checkbox" value="talk" name="hobby" checked>讲话
       <input type="checkbox" value="study" name="hobby">学习
       <input type="checkbox" value="cook" name="hobby">做饭
   </p>
<!--按钮(图片按钮）
input type="button"  普通按钮
input type="image"   图片按钮
input type="submit"  提交按钮
input type="reset"   重置按钮
-->
<p>按钮：
    <input type="button" name="btl" value="点击变长">
    <input type="image" src="../resource/222.png">
</p>
    <p>
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>

<!--    下拉框，列表框
-->
<p>国家
    <select name="列表名称" >
        <option value="a">中国</option>
        <option value="b">美国</option>
        <option value="c" selected>瑞士</option>
        <option value="d">印度</option>
    </select>
</p>
<!--    文本域-->
    <p>
        <textarea name="text" id="10" cols="30" rows="10" >文本内容</textarea>
    </p>
<!--    文件域-->
    <p>
        <input type="file" name="file">
        <input type="button" name="upload" value="上传">
    </p>
<!--    邮件、url：会简单验证是否是邮箱地址
number 数字验证-->
    <p>
        邮箱：
        <input type="email" name="email">
        url：
        <input type="url">
    </p>
<!--    滑块-->
    <p>音量：
        <input type="range" min="0" max="100" name="voice" step="2">
    </p>
<!--    搜索框-->
    <p>搜索：
        <input type="search">
    </p>

</form>

</body>

一些其他的属性

属性	说明
readonly	只读，不可更改
disable	禁用
hidden	隐藏，虽然不可见但是会提交
id	标识符，可以配合label的for属性增加鼠标的可用性
placehoder	text 文字域等输入框内的提示信息
required	不能为空
patten	正则表达式验证