前端学习—HTML5
2024-06-25 06:38:39
前端HTML5基础学习
- 基本语法
- 网页基本标签
- 基本标签的学习
- 图片标签
- 链接标签
- 页面间链接
- 锚链接
- 功能性链接
- 行内元素和块内元素
- 列表
- 表格标签
- 媒体元素
- 页面结构
- iframe内联框架
- 表单语法
- get方式
- post方式
- 表单元素格式
- 单选框
- 多选框
- 按钮
- 下拉列表框
- 文本域和文本域
- 验证框
- 搜索框和滑块
- 增强鼠标的可用性
- 表单组件属性
- 表单初级验证
基本语法
在IDEA下进行编程
内容，快捷键ctrl+/
网页基本标签
<!--DOCTYPE是告诉浏览器我们要使用的规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签表示网页头部-->
<head><!--meta描述性标签，用来描述网站的一些信息--><!--meta一般用来作SEO--><meta charset="UTF-8"><meta name="description" content="学习HTML"><!--title网页标题--><title>我的第一个网页</title>
</head><body>
<!--head标签代表网页主体-->
Hello！
</body>
</html>
基本标签的学习
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<!--水平线标签-->
<hr/>
<!--段落标签.快捷键=p+Tab-->
<p>好好学习</p>
<p>天天向上</p>
<!--换行标签-->
奇奇怪怪<br/>可可爱爱
<!--粗体，斜体-->
<strong>粗体标签</strong>
<em>斜体标签</em>
<!--特殊符号:& ;中间填入对应的英文就会显示符号-->
空 格
大于号>
</body>
特殊符号对照表
图片标签
<!--src:图片地址alt：图片名字title：悬停文字，当鼠标放在图片上的时候会显示出的文字width、height：图片长度和高度-->
<img src="resource/1.jpg" alt="测试图片"title="悬停文字"width="200"height="200">
链接标签
页面间链接
<body>
<!--a标签
href:必填，表示要跳转到这个页面
target:表示窗口在哪打开_blank 在新标签中打开_self 在自己的网页中打开-->
<a href="myfirsthtml.html"target="_blank">链接显示的内容</a><!--图像超链接，图像标签和链接标签嵌套-->
<a href="myfirsthtml.html"><img src="resource/1.jpg" alt="测试图片"title="悬停文字"width="200"height="200"></a>
</body>
锚链接
<body>
<!--使用name作为标记-->
<a name="top">顶部</a><!--中间有很长的内容--><!--锚链接
1.需要一个锚标记：#+标记名称来进行调用
2.跳转搭配标记处-->
<a href="#top">回到顶部</a>
<!--<a href="myfirsthtml.html#top">回到顶部</a>也可以跳转到其他网页的标记处-->
</body>
功能性链接
<!--功能性链接
邮件链接：mailto:
-->
<a href="mailto:111111.com"></a>
行内元素和块内元素
块元素
- 无论内容多少，该元素独占一行
- 如p标签，标题标签等…
行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一行
- 如a标签，加粗标签等…
列表
什么是列表：
列表就是信息资源的一种展示方式，它可以使信息结构化和条理化
列表分类：
- 无序列表
- 有序列表
- 定义列表
代码讲解：
<body>
<!--有序列表-->
<ol><!--li代表列表编号--><li>Java</li><li>C++</li>
</ol>
<hr>
<!--无序列表-->
<ul><!--在ul里面则li为无序的列表编号--><li>Java</li><li>C++</li>
</ul>
<hr>
<!--自定义列表
dl:标签
dt：列表名称
dd：列表内容-->
<dl><dt>学科</dt><dd>Java</dd><dd>C++</dd><dt>成绩</dt><dd>98</dd><dd>99</dd></dl>
</body>
运行出来的结果如下：
表格标签
<body>
<!--表格table,border设置边框
行 tr
列 td
-->
<table border="1px"><!--第一行--><tr><td>一行一列</td><td>一行二列</td></tr><!--第二行--><tr><td>二行一列</td><td>二行二列</td></tr><tr><!--colspan=“所跨的列数” 表示跨列--><td colspan="2">三行</td><td>二行四列</td></tr><tr><!--rowspan=“所跨的行数” 表示跨行--><td rowspan="2">四五行一列</td><td>四行二列</td></tr><tr><td>五行二列</td><!--得四行二列和五行二列元素写出来才能显示出跨行的效果--></tr></table>
</body>
运行出的界面如下：
媒体元素
视频元素（video）
音频元素（audio）
<!--视频标签
src:资源路径
controls:显示视频控制条
autoplay：自动播放-->
<video src="resource/video1.mp4" controls autoplay></video><!--src:资源路径
controls:显示音频控制条
autoplay：自动播放-->
<audio src="resource/audio1.mp3" controls autoplay></audio>
页面结构
| 元素名 | 描述 |
|---|---|
| header | 标题头部区域的内容（用于页面或页面的一块区域） |
| footer | 标记脚部区域的内容（用于整个页面或页面的一块区域） |
| section | Web页面中的一块独立区域 |
| article | 独立的内容或应用 |
| aside | 相关内容或应用（常用于侧边栏） |
| nav | 导航类的辅助内容 |
iframe内联框架
在网页中生成一个小的框架面板
<body>
<!--path:引用页面地址
name：框架标识名
w-h:代表框架的宽度和高度
name-->
<iframe src="" name="hello" width="1000px" height="800px"></iframe>
<!--该超链接选自本人博客
target：在名为hello的标签中打开该链接，则打开网页的大小和iframe设置的一样-->
<a href="https://blog.csdn.net/hanpiyo/article/details/124778343" target="hello">点击跳转</a>
</body>
表单语法
一些在界面出现时弹出的登录窗口之类的称为表单
<body>
<h1>注册</h1>
<!--表单form
method：提交方式post/get
action：表单提交的位置，也可以是一个请求处理的地址-->
<form method="post" action="myfirsthtml.html"><!--文本输入框<input type="text">--><p>名字：<input type="text" name="username"></p><!--密码框：<input type="password" name="pwd">--><p>密码：<input type="password" name="pwd"></p><!--submit:提交reset：重置--><input type="submit"><input type="reset"></p>
</form>
</body>
则该代码生成的页面如下：
对于method的两种方式，区别如下：
get方式
可以在跳转之后网页的url中看到提交的信息，不安全，高效，如图在网址的最后面会显示出所提交的信息
post方式
在跳转的网页url看不到提交信息，要右键页面，打开‘检查’，再点击‘网络’，才能看到所发送的请求信息，所以比较安全
表单元素格式
| 属性 | 说明 |
|---|---|
| type | 指定元素的类型text，password，checkbox，radio，submit，reset，file，hidden，image和button，默认值为text |
| name | 指定表单元素的名称 |
| value | 元素的默认初始值。type为radio时必须指定一个值 |
| size | 指定表单元素的初始宽度，当type为text或password时，表单元素的大小以字符为单位，对于其他类型，宽度以像素为单位 |
| maxlength | type为text或passeword时，输入的最大字符数 |
| checked | type为radio或checkbox时，指定按钮是否被选中 |
单选框
<body>
<!--type="radio"表示为单选框
value：单选框的值
name：表示组，要在同一个组才能进行单选
checked表示默认选择的元素-->
<p>性别<input type="radio" value="boy" name="sex">男<input type="radio" value="girl" name="sex" checked>女
</p>
</body>
效果如图：
多选框
<!--多选框type=checkbox，记得要name一样，即所有元素同一组
checked表示默认选择的元素-->
<p>爱好<input type="checkbox" value="sleep" name="hobby">睡觉<input type="checkbox" value="game" name="hobby" checked>游戏<input type="checkbox" value="read" name="hobby">读书<input type="checkbox" value="eat" name="hobby">吃
</p>
效果如图：
按钮
<!--按钮
type=button普通按钮
type=image图像按钮
type=submit提交按钮
type=reset重置按钮
这些按钮只有在表单form块内才有作用-->
<p><input type="button" name="btn1" value="点击加关注"><!--src为图片的路径--><input type="image" src="resources/1.jpg">
</p>
<p><input type="submit"><!--value可以表示按钮是显示的文字--><input type="reset">
</p>
效果如图：
下拉列表框
<p>国家：<select name="列表名称" ><!--selected代表列表框默认选中的元素--><option value="china">中国</option><option value="usa" selected>美国</option><option value="india">印度</option><option value="Canada">加拿大</option></select>
</p>
效果如图：
文本域和文本域
<!--文本域
cols、rows表示文本域的行数和列数-->
<p>反馈：<textarea name="textarea" cols="30" rows="10">文本内容</textarea>
</p><!--文件域:点击即可自动打开我的电脑选取想要的文件
-->
<p><input type="file" name="files">
</p>
效果如图：
验证框
<form method="get"><p>邮箱<input type="email" name="email"></p><p>URL网址<input type="url" name="url"></p><!--step表示从0到100是10这样递增--><p>数字<input type="number" name="num" max="100" min="0" step="10"></p><p><input type="submit"><input type="reset"></p>
</form>
效果如图：
当输入的内容不符合则再提交的时候会弹出警示
搜索框和滑块
<form method="get"><p>搜索<input type="search" name="search"></p><p>音量<input type="range" name="voice" max="10" min="0" step="any"></p>
</form>
效果如图：
增强鼠标的可用性
<form method="get"><label for="mark">点我</label><input type="text" id="mark">
</form>
当点击‘点我‘二字的时候，鼠标光标会自动到文本框内
效果如图：
表单组件属性
| 隐藏域 | hidden |
|---|---|
| 只读 | readonly |
| 禁用 | disabled |
表单初级验证
- placeholder 提示信息
- required 非空判断
- pattern 正则表达式
<form method="get"><p>名字<!--placeholder="提示内容"required 内容不能为空--><input type="text" placeholder="请输入用户名" required><!--pattern="正则表达式" 正则表达式要自行查找--></p>
</form>
placeholder效果如下：
前端学习—HTML5相关推荐
- 前端学习-HTML5
一.Web开发 1.1 概念 全称World Wide Web,缩写:www 全球广域网,又称万维网. World Wide Web Consortium,缩写:W3C,万维网联盟.其负责制定和维护W ...
- 前端学习 HTML5和CSS3新特性 高级技巧 JavaScript基础语法
HTML5和CSS3提高 HTML5的新特性 HTML5的新增特性主要是针对于以前的不足,增加了一些新的标签,新的表单和新的表单属性等: 这些新特性都有兼容性问题,基本是IE9+以上的版本浏览器才支持 ...
- 前端学习——HTML5
新增语义化标签 新增布局标签 <!DOCTYPE html> <html lang="zh-CN"> <head><meta charse ...
- html 表单自动数值,web前端学习技术之对HTML5 智能表单的理解
原标题:web前端学习技术之对HTML5 智能表单的理解 Html5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签之中,即可通过表单进行提交. - t ...
- js怎么在一个div中嵌入另一网站_好程序员web前端学习路线分享HTML5常见面试题集锦一...
好程序员web前端学习路线分享HTML5常见面试题集锦,接下来将会持续为大家分享几篇HTML5常见面试题. 1.布局 左边20% 中间自适应 右边200px 不能用定位 答案:圣杯布局/双飞翼布局或者 ...
- 前端H5怎么切换语言_「自学系列一」HTML5大前端学习路线+视频教程完整版
全新Java.HTML5前端.大数据.Python爬虫.全链UI设计.软件测试.Unity 3D.Go语言等多个技术方向的全套视频. 面对这么多的知识点,有的盆友就麻爪了-- 我是谁? 我该从哪里开始 ...
- 零基础自学html5要多久？Web前端学习路线的6点建议
学习html5的同学很多都在考虑.没有计算机基础能不能学会呢?在html5开发领域中没有特别的专业区分,能不能学会?跟有没有计算机专业知识也没有太大的关系,只能说有计算机专业,上手会快一点,并不能代表 ...
- IT入门？推荐首选学习HTML5大前端
随着当下IT技术的蓬勃发展,越来越多的人想入行或转行至"程序员"梯队.对于零基础的小伙伴来说,综合各方面原因考量,. HTML5到底是什么?HTML5是指第5代HTML(超文本标记 ...
- 前端学习笔记 HTML5 保姆级教程
HTML5 保姆级教程 前端学习路线: HTML→CSS→JavaScript→jQuery→HTML5→CSS3→ES6→Vue.js→webpack→Node.js 除了掌握这些技术,后期我还需要 ...
最新文章
- 【flutter】把Google官方的历史时间demo跑起来
- 如何编写Python模块/包？
- Win8离线添加Net Framework 3.5功能
- 5G 和云原生时代的技术下半场，视频化是最大最新的确定性
- 电信运营商计费模型_5G消息年底商用？三大运营商联合推出已有手机支持
- 安卓开发面试书籍，每个程序员都必须掌握的8种数据结构！面试必会
- 米斯特白帽培训讲义 实战篇 南方 0day
- 原理图框图_GW1N9芯片测评之GW1N Zero原理图、3D模型及PCB设计（二）
- android编译的tool版本有多少,android gradle tool版本从3.3升级到3.6.3问题记录
- crontab的使用
- 汉诺塔 --- 递归的经典运用
- 代挂管家易开源7.4+web版
- 大一python选择题题库及答案_万维考试系统选择题题库(含参考 答案).pdf
- 游戏外挂基本原理及实现
- 不同空间任务要求下认知地图的神经表征
- 家居收纳打造一个美好的家-央央家政家居收纳
- 卡--配合--读卡器使用 磁卡 CPU卡 IC卡、ID卡、M1卡、射频卡区别 我在项目中使用到的S50卡（M1卡的一种）S50(Mifare 1K)卡简介及存储控制原理
- 关于chrome、360浏览器自动填充的黄色背景处理方案
- Win7环境下opensuse13.1与SLED 11 sp3的硬盘安装
- sxs.exe病毒及清理办法