HTML学习

最新推荐文章于 2024-07-11 16:52:21 发布
最新推荐文章于 2024-07-11 16:52:21 发布
阅读量62 收藏
点赞数 1
分类专栏： 表单 基本标签 表单验证 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xpc1998/article/details/120208928
版权

HTML学习

基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<!--标题标签-->
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<!--水平分割线-->
<hr>
<!--换行标签-->
你好 <br>
世界 <br>
<!--段落标签-->
<p>两只老虎两只老虎</p>
<p>跑得快跑得快</p>
<!--特殊符号标签-->
空 &nbsp; 格 <br>
&gt; <br>
&lt; <br>
</body>
</html>

超链接【重点】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签,超链接</title>
</head>
<body>

<a name="top">这是一个锚</a>

<!--图像标签-->
<img src="../resource/img/2.png" alt="jvm体系结构" title="jvm" width="500" height="500">
<hr>
<!--超链接标签，链接到网页-->
<a href="https://www.baidu.com" target="_blank" title="这就是百度">点击跳转到百度</a>
<hr>
<!--超链接，链接到自己写的html文件-->
<a href="TestTag.html" target="_blank">点击跳到TestTag</a>
<hr>
<!--把图像作为超链接-->
<a href="https://www.baidu.com" target="_blank" title="这就是百度">
    <img src="../resource/img/2.png" alt="jvm体系结构" title="jvm" width="500" height="500">
</a>
<hr>
<!--锚链接实现页面内跳转-->
<a href="#top">点击跳转到顶部</a>
<hr>
<!--锚链接实现页面间跳转-->
<a href="1.html#down">点击跳转到1.html#down</a>
<hr>
<!--功能性链接-邮箱链接-->
<a href="mailto:2326658838@qq.com">点击联系我</a>
</body>
</html>

列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>
<!--orderlist 有序列表-->
<ol>
    <li>你</li>
    <li>好</li>
    <li>世</li>
    <li>届</li>
</ol>
<hr>
<!--unorderedlist 无序列表-->
<ul>
    <li>i</li>
    <li>l</li>
    <li>o</li>
    <li>l</li>
</ul>
<hr>
<!--definedlist自定义列表-->
<dl>
    <dt>标题</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
    <dd>内容3</dd>
</dl>
</body>
</html>

表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<table border="1px">
    <tr>
        <td colspan="3">学生成绩</td><!--跨列-->
    </tr>
    <tr>
        <td rowspan="2">程程</td> <!--跨行-->
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">慧慧</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>
</body>
</html>

多媒体标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多媒体标签</title>
</head>
<body>
<!--controls的意思是加上播放按钮，进度条按钮 autoplay的意思是自动播放-->
<audio src="../resource/audio/fish.mp3" controls autoplay>林俊杰：美人鱼</audio>
<br>
<!--视频标签，和上面的音频没什么区别-->
<video src="../resource/video/video.mp4" controls>素材视频</video>
</body>
</html>

iframe内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Iframe框架</title>
</head>
<body>
<!--在此网页中嵌套了一个网页-->
<iframe src="https://www.bilibili.com/" frameborder="0" height="50" width="50"></iframe>
<hr>
<iframe src="" name="to" frameborder="0"  height="200" width="200">我被跳转了</iframe>
<hr>
<!--用超链接将另外一个网页放到iframe中-->
<a href="2.html" target="to">点击跳转</a>
</body>

</html>

表单【重点】

  • 所有的表单标签都需要有一个name属性，因为要提交
  • vlaue是每个属性的默认值（默认传上去的值）
//表单里面的input类型`(input)text/(input)submit/(input)reset/(input)radio/(input)checkbox/(input)button/(input)file`
//其他类型
`select/textarea`
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
<h2>注册</h2>
<!--action:是提交的网址
        get：不安全，提交的表单会显示在url
        post：比较安全，并且可以传输大文件
-->
<form action="2.html" method="get">
    <p>用户名：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="password" ></p>
    <p>
        性别：
        <input type="radio"  name="sex" checked>男  <!--checked表示设置成默认值-->
        <input type="radio"  name="sex">女     <!--注意：此处男女的name都是 sex，因为他们是一个组-->
    </p>
    <p>
        爱好：
        <input type="checkbox" value="中国" name="hobby">吃饭
        <input type="checkbox" value="美国" name="hobby">睡觉
        <input type="checkbox" value="英国" name="hobby" checked>敲代码
        <input type="checkbox" value="法国" name="hobby">打王者
    </p>
    <p>
        按钮：
        <input type="button" name="button" value="点击我">
    </p>
    <p>
        点击此处上传文件：
        <input type="file" name="files" value="点击上传">
    </p>
    <!--带验证功能的表单标签-->
    <p>
        邮箱：
        <input type="email" name="email">
    </p>
    <p> URL:
        <input type="url" name="url">
    </p>
    <p>
        数字：
        <input type="number" name="number">
    </p>
    <p>
        调整音量：
        <input type="range" name="range">
    </p>
    <p>
        搜索：
        <input type="serch" name="serch">
    </p>
    <p>
        国家：
        <select name="list">
            <option value="CN" selected>中国</option>
            <option value="UN">英国</option>
            <option value="US">美国</option> <!--selected表示是默认选项-->
            <option value="FR">法国</option>
        </select>
    </p>
    <p>
        给出反馈意见：
        <textarea name="textarea" cols="30" rows="10">...</textarea>
    </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>
</body>
</html>

表单的一些应用

  • readonly 框里的内容不能修改
  • disable 此选项不可选
  • hidden 隐藏此选项，但是传还是会传

表单初级验证

  • placeholder 在框里给出提示信息
  • required 输入不能为空
  • pattern 自定义验证
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>placeholder/required/pattern</title>
</head>
<body>

<!--注意注意注意，表单必须在form里面-->
<!--注意注意注意，表单必须在form里面-->
<!--注意注意注意，表单必须在form里面-->

<form action="1.html" method="get">
    <p>
        <!--placeholder用来输入提示信息-->
        用户名：
        <input type="text" value="admin" name="text" placeholder="输入用户名" required>
    </p>
    <p>
        <!--required表示此选项必填，否则不能提交-->
        密码：
        <input type="password" name="pwd" placeholder="输入密码" required>
    </p>
    <p>
        <!--此处的正则表达式用来验证邮箱，可以直接百度-->
        邮箱：
        <input type="text" name="mail" placeholder="输入邮箱" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" required>
    </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>
</body>
</html>
不进大厂不改名--
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
学习html的心得体会
weixin_47978224的博客
03-19 1万+
1、HTML的简介及大体介绍： HTML 是用来描述网页的一种语言。 它是一种超文本标记语言，并不是一种编程语言。它包含了一套标记标签，并用此来描述网页。因此HTML文档包含了HTML标签和文本内容。 HTML标签是由尖括号包围的关键词， HTML 标签通常是成对出现的，比如 <p> 和 </p> 标签对中的第一个标签是开始标签，第二个标签是结束标签 一个HTML元素包含了开始标签、内容、结束标签。例如：<p>这是一个段落。</p> 2、HTML的运用
html 学习教程.zip
03-13
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
【WEB前端进阶之路】 HTML 全路线学习知识点梳理（上）
陈橘又青的博客
03-02 1万+
万维网W3C标准中网页分为结构，表现和行为三部分，HTML用于描述页面的结构，CSS用于控制页面中的元素样式，JavaScript用于响应用户的操作。HTML，CSS和JavaScript组成了前端技术栈。
HTML学习之路-11background属性
weixin_63204687的博客
08-25 7106
background属性的知识点学习完毕
HTML学习14：框架布局
Blog of Lytracy
07-18 1万+
文章目录1、框架页面的基本结构2、水平布局3、垂直布局4、混合框架集5、为框架添加内容6、改进：使用name属性7、给框架布局设置一些属性 相对div布局，框架布局是一个很古老，但是易于学习和掌握的布局技术。当一个网站中包含很多页面，每个页面又包含一些同样的区域的时候，我们可以选择框架布局。在现代前端开发中，框架布局已经被淘汰，取而代之的是DIV结合Ajax页面无刷新的加载技术。因此，这里只对框架布局做简单的介绍。 1、框架页面的基本结构 HTML5 不支持 标签。 2、水平布局 3、垂直布局 4
HTML基础学习（全）
qq_44732593的博客
07-11 1万+
HTML概述 HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。 HTML骨架格式 日常生活的书信，我们要遵循共同的约定。 同理：HTML 有自己的语言语法骨架格式： <HTML> <head> <title></title> </head> <body> &
html学习心得一
fengqing0527的博客
12-07 1万+
菜鸟的心得体会~
HTML 学习笔记——插入音频、视频标签
m0_55394328的博客
08-04 7420
今天学习了尚硅谷老师的html基础课程，主要是音视频的标签的属性和使用方法。html中插入音频和视频的方法基本相同，这里以音频为例进行演示音频格式：mp3、ogg、wav视频格式：mp4、ogv、webmaudio标签用来向页面中引入一个外部的音频文件。音视频文件引入时，默认情况下不允许用户自己控制播放按钮。以上就是今天的学习笔记啦，希望对大家有帮助~...
学习HTML心得体会
呀~~土豆的博客
04-19 2万+
初学程序体会！
学习HTML5这一篇就够了
热门推荐
轻松的小希
11-25 8万+
目录第一章 HTML5概述1.1、什么是HTML1.2、什么是HTML51.3、本文重要说明1.4、浏览器的版本1.5、选择开发工具第二章 HTML5语法2.1、基本结构2.2、语法规范2.3、标签规范第三章 HTML5标签3.1、标题标签3.2、段落标签3.3、链接标签3.4、图像标签3.5、表格标签3.6、列表标签3.7、分组标签3.8、语义标签3.9、表单标签3.10、框架标签3.11、音频标签3.12、视频标签3.13、其它标签3.14、头部标签第四章 HTML5属性4.1、属性概述4.2、通用属性
html自学哪些网站免费,精选13个HTML5学习必备网站
weixin_39554775的博客
05-30 3522
最近项目原因接触到html5，发现里面需要了解的事情蛮多的，所以做了一些整理。给大家学习研究HTML5的时候提供一些便利和参考，有学习需求的同学，也可以根据这个对html5的学习和研究。PM需要了解的HTML5基础知识站1.W3C HTML 5 权威教程，学习HTML5的各种标签，查询参考手册，以及运行效果，建议大家从起步了解。链接2.一个HTML 5的文档资料网站，做得很出色。介绍的图片全是用...
HTML 学习记录.zip
03-13
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
css、html 学习.zip
03-13
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
Html 学习与实践项目.zip
03-13
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
HTML 学习和项目文件.zip
03-13
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
HTML5新增的input元素属性：placeholder、required、autofocus、min、max等
pan_junbiao的博客
07-08 548
HTML5 大幅度地增加与改良了 input 元素的属性，可以简单地使用这些属性来实现 HTML5 之前需要使用 JavaScript 才能实现的许多功能。 placeholder 属性：当用户没有输入值时，输入型控件可以通过placeholder 属性向用户显示描述说明或者提示信息。使用placeholder 属性只需要将说明性文字作为该属性的值即可。除了普通的文本输入框，email、number、url 等其他类型的输入框也都支持placeholder 属性。
html5——列表、表格
jiuyuexixi的博客
07-10 727
html5——列表、表格
html5——表单
jiuyuexixi的博客
07-10 1111
html5——表单
html5——CSS基础选择器
最新发布
jiuyuexixi的博客
07-11 385
html5——CSS基础选择器
HTML学习手册网页
12-28
以下是一个HTML学习手册网页的例子： ```html <!DOCTYPE html> <html> <title>HTML学习手册 <h1>HTML学习手册 内容概要 <li>HTML介绍 <li>HTML元素 <li>HTML基本标签 <li>HTML格式 <li>HTML实体 <li>...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值