HTML5基础知识探索

最新推荐文章于 2024-08-05 22:35:13 发布

秃狼

最新推荐文章于 2024-08-05 22:35:13 发布

阅读量178

点赞数 1

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

本文链接：https://blog.csdn.net/Ostkakah/article/details/120816157

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

W3C标准

meta标签

<meta name="" content="">

name中常用的关键字有:keywords(关键字),description(描述)。

粗体和斜体

<strong>,<em>。

特殊符号（转义字符）

&temp : 空格, &gt : 大于号, &lt : 小于号, &copy : 版权符号。

img标签(<img/>)

其对应的属性为:

src ：对应的路径。（必须要写）
alt : 无法显示时显示的信息。（必须要写）
title : 鼠标悬停时显示的信息。
width : 宽。
height : 高。

链接标签(<a>)

其对应的属性为:

href : 对应跳转的网址。（必须要写）
target : 表示窗口在哪里打开。其可设置的值为: _blank(在新标签中打开),_self(在自己的网页打开) ，还可以跳到自己对应的iframe中，其使用方式为: target ="iframe的name"。

锚链接:可以跳转到对应的标记。

使用方法：1.需要一个锚标记 2.跳转到标记。

<a name="top">顶部</a>
    <a href="#top">回到顶部</a>

其对应的路径为：file:///D:/HTML/hello.html#top，因此我们可以使用此方法设置打开页面的显示位置。(如：最底下或最顶部)

功能性链接:可以通过emil跳转

<a href="mailto:123456@qq.com">点击联系我</a>

（了解）可以通过QQ推广进行生成a标签。

列表

有序列表

<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

无序列表

<ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>

自定义列表

<dl>
        <dt></dt>
        <dd></dd>
        <dd></dd>

        <dt></dt>
        <dd></dd>
        <dd></dd>
    </dl>

表格(<table>)

<tr>: 行

<td>:列

其中可使用的属性:colspan(跨列),rowspan(跨行)。

媒体元素

1.视频标签(<video>)

  <!-- controls为控制选项 -->
    <!-- autoplay为自动播放 -->
    <video src="资源路径" controls></video>

2.音频标签(<audio>)

<!-- controls为控制选项 -->
<!-- autoplay为自动播放 -->
<audio src="资源路径" controls autoplay></audio>

页面结构

头部: <head>

尾部: <footer>

主体: <section>

导航类辅助内容：<nav>

iframe内嵌框架(内窗口)

<iframe src="www.baidui.com" frameborder="0" width="1000px" height="800px"></iframe>

属性:

src : 对应的地址。(必填)

height : 高度。

width : 宽度。

frameborder : 对应的边框。

name : 对应的iframe的名字。

表单(<form>)

<form action="表单提交的位置(可以是个网站也可以是个请求处理位置)" method="get或post">
        <p></p>
        <input type="对应的样式" name="对应的input名字"/>
    </form>

method中分为:

get方式提交:我们可以在url中看到我们提交的信息，不安全但是高效。

post方式提交:比较安全且可以上传大文件，但是低效。

表单中的属性:

type:指定元素的类型。(type中有一个值为image，表示图片按钮。type="reset"表示重置按钮,type="sbmit"表示提交按钮,在type="checkbox" 存在checked，其作用是默认选中。type="email"表示邮箱,type="url"表示url，type="number",表示数字且在数字中存在step属性表示间隔,min和max表示number的最值)

文件域 : type="file",上传对应的文件。

name : 指定表单元素的名称。

value:元素的初始值，type为radio时必须指定一个值。

size : 指定表单元素的初始宽度。

maxlength: type为text或password时，输入的最大字符数。

checked: type为radio或checkbox时，指定按钮是否是被选中。

readonly : 只读。

disabled : 禁用。(框会变成灰色)

hidden : 隐藏。

下拉框(<select>)

<select>
<!--    selected表示默认选中-->
    <option></option>
    <option selected></option>
    <option></option>
    <option></option>

</select>

文本域

<textarea name="表示对应的名字" cols="行" rows="列"></textarea>

滑块

<input type="range" name="voice" min="0" max="100" step="2">

其样式为:

搜索框

<input type="search" name="search">

其样式为:

搜索框的特点是:在输入字符串时，尾部会有一个"X" 。

表单应用

增强鼠标的可用性：通过设置label中的for属性，实现增强鼠标的可用性。

<label for="Name">
    名字
</label>
<input type="text" name="name" id="Name">

此处代码实现了通过点击名字就可以输入对应的信息。

表单初级验证 （通过input标签测试）

常用方法:

placeholder:提示信息。

required:非空判断。

pattern: 正则表达式。

<form action="" method="post"><label for="diymail">
        邮箱
    </label>
<!--    pattern中的正则表达式为邮箱的格式-->
    <input type="text" id="diymail" name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
    <input type="submit" value="提交">
</form>

测试结果:

秃狼

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML5基础知识探索

W3C标准 meta标签<meta name="" content=""> name中常用的关键字有:keywords(关键字),description(描述)。粗体和斜体<strong>,<em>。特殊符号（转义字符）&temp : 空格, &gt : 大于号, &lt : 小于号, &copy : 版权符号。 img标签(<img/>)其对应的属性为...
复制链接

扫一扫

专栏目录