HTML5
一、简述
-
HTML：超文本标记语言
-
编辑器：可以使用Intellij IDEA
-
HTML基本结构：
- 开放标签，：闭合标签
- 注释： ，IDEA快捷键：ctrl+/
复制代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16<!--DOCTYPE：告诉网页使用什么规范--> <!DOCTYPE html> <html lang="en"> <!--head：网页头部--> <head> <!--meta：描述性标签，描述网站的一些信息，一般用来做SEO--> <meta charset="UTF-8"> <!--title：网页标题--> <title>我的第一个网页</title> </head> <!--body：主体部分--> <body> Hello World！ </body> </html>
二、网页基本标签
-
IDEA快捷键：例如，输入h1+Tab，自动生成开放标签和闭合标签
复制代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20<!--标题标签--> <h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3> <!--段落标签--> <p>段落 段落</p> <!--换行标签--> 换行一下<br/> <!--字体样式标签--> <strong>粗体</strong> <em>斜体</em> <!--水平线标签--> <hr/> <!--特殊符号，输&可显示选项--> 空 格<br/> 大于号><br/> 小于号<<br/> 版权标签©</br>
三、图像标签
复制代码
1
2
3
4
5
6
7
8
9<!--图像标签 必填src：图像地址 必填alt：图像替代文字（图片加在失败时显示） title：鼠标悬停文字 width：图像宽度 height：图像高度 --> <img src="../1.png" alt="图片加载失败" title="鼠标悬停文字" width="541" height="989">
四、超链接标签
-
页面间链接
-
锚链接
-
功能性链接
- 邮件链接
复制代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18<!--页面间链接 必填href：要跳转到的链接 target：表示窗口在哪里打开 --> <a href="https://www.baidu.com/" target="_blank">打开新标签页,跳转到百度</a><br/> <a href="https://www.baidu.com/" target="_self">在自己的网页中打开，跳转到百度</a><br/> <!--锚链接： 需要锚标记，跳转到标记 可以跳转到本页的锚标记<a href="#锚标记名">跳转到本页的锚标记位置</a> 可以跳转到其他页面的锚标记<a href="xxx.html#锚标记名">跳转到xxx.html页的锚标记位置</a> --> <a name="top">顶部</a> <a href="#top">回到顶部</a> <!--功能性链接 邮件链接：mailto --> <a href="mailto:xxx@qq.com">点击联系我</a>
五、块元素和行内元素
- 块元素
- 无论内容多少，该元素独占一行
- p、h1-h6…
- 行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一行
- a、strong、em…
六、列表标签
- 无序列表
- 有序列表
- 自定义列表
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25<!--有序列表ol，应用：试卷、问答...--> <ol> <li>有序</li> <li>有序</li> <li>有序</li> </ol> <hr/> <!--无序列表ul，应用：导航、侧边栏...--> <ul> <li>无序</li> <li>无序</li> <li>无序</li> </ul> <hr/> <!--自定义列表dl dt：列表名称 dd：列表内容 --> <dl> <dt>自定义</dt> <dd>内容</dd> <dd>内容</dd> <dd>内容</dd> </dl>
七、表格标签
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20<!--表格标签table tr：行标签 td：列标签 border：边框 colspan：跨列 rowspan：跨列 --> <table border="1px"> <tr> <td colspan="2">跨列</td> </tr> <tr> <td rowspan="2">跨行</td> <td>第二行第二列</td> </tr> <tr> <td>第三行第一列</td> </tr> </table>
八、媒体元素
- 视频元素：video
- 音频元素：audio
复制代码
1
2
3
4
5
6
7
8<!--音频audio、视频video 必填src：音频/视频路径 controls：控制按钮 autoplay：自动播放 --> <video src="../video.mp4" controls autoplay>视频</video> <audio src="../audio.mp3" controls autoplay></audio>
九、页面结构分析
- header：头部
- section：web页面中一块独立区域
- footer：脚步
- article：独立的文章内容
- aside：相关内容或应用，侧边栏
- nav：导航类辅助内容
十、iframe内联框架
-
直接嵌入页面
复制代码1
2
3
4
5
6<!--iframe内联框架 必填src:引用页面地址 name：框架表示名 --> <iframe src="https://www.baidu.com" name="hello" frameborder="0" width="1000px" height="500px" ></iframe> -
使用a标签跳转到页面，在嵌入的框架中显示
复制代码1
2<iframe src="" name="hello" frameborder="0" width="1000px" height="500px" ></iframe><a href="https://www.baidu.com" target="hello">点击跳转</a>
十一、表单
1、初识表单post和get提交
复制代码
1
2
3
4
5
6
7
8
9
10<h1>注册</h1><!--表单form 必填action：表单提交的位置。可以是网站、也可以是请求处理地址 method：提交方式 -post：比较安全，可以传输大文件 -get：高效，但是可以在url中看到提交的信息，不安全。--><form action="1我的第一个网页.html" method="post"> <p>姓名：<input type="text" name="username"></p> <p>密码：<input type="password" name="password"></p> <input type="submit"> <input type="reset"></form>
2、文本框input
A 不做验证的类型
text类型
复制代码
1
2
3
4
5
6
7<!--文本框input type：类型 name：名字 vaule：默认值 maxlength：字符限制长度 size：文本框长度--><!--text类型--><p>姓名：<input type="text" name="username"></p>
password类型（密码）
- 输入密码显示黑点
复制代码
1
2<!--password类型--><p>密码：<input type="password" name="password"></p>
submit类型（提交）
复制代码
1
2<!--submit类型--><input type="submit">
reset类型（重置）
复制代码
1
2<!--reset类型--><input type="reset">
radio类型（单选框）
- name值要一样，才可以单选
- checked默认选中
复制代码
1
2
3
4
5<p>性别： <input type="radio" value="boy" name="sex">男 <!--checked默认选中--> <input type="radio" value="girl" name="sex" checked>女</p>
checkbox类型（多选框）
- name值要一样，才可以多选
- checked默认选中
复制代码
1
2
3
4
5
6<!--checkbox类型--><p>爱好： <input type="checkbox" value="game" name="hobby">游戏 <!--checked默认选中--> <input type="checkbox" value="music" name="hobby" checked>音乐 <input type="checkbox" value="movie" name="hobby">电影</p>
button类型（普通按钮）
复制代码
1
2
3<!--button类型--><p>普通按钮： <input type="button" value="点击按钮" name="btn1"></p>
image类型（图片按钮）
- 点击图片提交，效果和submit一样
复制代码
1
2
3<!--image类型--><p>图片按钮： <input type="image" src="../1.jpg" width="100px" height="100px"></p>
file类型（文件域）
复制代码
1
2
3
4<!--file类型--><p>选择文件： <input type="file" name="files"> <input type="button" value="上传" name="upload"></p>
range类型（滑块）
复制代码
1
2
3
4
5
6<!--range类型 max：最大值 min：最小值 step：步长--><p>滑块： <input type="range" name="range" max="100" min="0" step="2"></p>
search类型（搜索框）
复制代码
1
2
3<!--search类型--><p>搜索框： <input type="search" name="search"></p>
B 做简单验证的类型
email类型
- 输入值，会验证输入格式是否正确
- 若不输入任何值，依然可以提交
复制代码
1
2
3<!--mail类型--><p>邮箱地址： <input type="email" name="email"></p>
url类型
- 输入值，会验证输入格式是否正确
- 若不输入任何值，依然可以提交
复制代码
1
2
3<!--url类型--><p>url： <input type="url" name="url"></p>
number类型
- 输入值，会验证输入格式是否正确
- 若不输入任何值，依然可以提交
复制代码
1
2
3
4
5
6<!--number类型 max：最大值 min：最小值 step：步长--><p>数字： <input type="number" name="number" max="100" min="0" step="10"></p>
3、下拉框select
- selected默认选中
复制代码
1
2
3
4
5
6
7
8
9<!--下拉框select--><p>下拉框： <select name="列表名称" id="list"> <option value="选项值">A</option> <!--selected默认选中--> <option value="选项值" selected>B</option> <option value="选项值">C</option> <option value="选项值">D</option> </select></p>
4、文本域textarea
复制代码
1
2
3
4
5<!--文本域textarea clos：几列 rows：几行--><p>文本域： <textarea name="textarea" id="textarea" cols="30" rows="10">文本内容</textarea></p>
5、增强鼠标可用性label
复制代码
1
2
3<!--增强鼠标可用性label for：填对应input框的id属性值--><label for="labeltest">点我可以锁定到输入框：</label><input type="text" name="labeltest" id="labeltest"><hr/>
5、表单应用
readonly：只读
-
只读，无法编辑内容
复制代码1
2
3<p>readonly只读： <input type="text" name="readonly" readonly></p>
disabled：禁用
-
禁用，元素灰显
复制代码1
2
3<p>disabled禁用： <input type="text" name="disabled" disabled></p>
hidden：隐藏域
-
隐藏，页面上看不到该元素
复制代码1
2
3<p>hidden隐藏域： <input type="text" name="hidden" hidden></p>
6、表单初级验证
placeholder提示信息
复制代码
1
2
3<p>placeholder提示信息： <input type="text" name="yz1" placeholder="要提示的内容"></p>
required非空判断
复制代码
1
2
3<p>required非空判断： <input type="text" name="yz2" required></p>
pattern正则表达式
- 正则表达式需要自己写，可以网上搜索：常用正则表达式
复制代码
1
2
3<p>pattern正则表达式： <input type="text" name="phoneNumber" pattern="^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])d{8}$"></p>
最后
以上就是香蕉蚂蚁最近收集整理的关于前端基础学习笔记1-HTML5HTML5的全部内容，更多相关前端基础学习笔记1-HTML5HTML5内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复