前端HTML5基础学习
基本语法
在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效果如下：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/84194.html
