前端基础学习笔记1-HTML5HTML5

57 阅读 0 评论 38 点赞

我是靠谱客的博主香蕉蚂蚁，最近开发中收集的这篇文章主要介绍前端基础学习笔记1-HTML5HTML5，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

HTML5

一、简述

HTML：超文本标记语言
编辑器：可以使用Intellij IDEA

HTML基本结构：

开放标签，：闭合标签
注释：，IDEA快捷键：ctrl+/

<!--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，自动生成开放标签和闭合标签

<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<!--段落标签-->
<p>段落
段落</p>
<!--换行标签-->
换行一下<br/>
<!--字体样式标签-->
<strong>粗体</strong>
<em>斜体</em>
<!--水平线标签-->
<hr/>
<!--特殊符号，输&可显示选项-->
空&nbsp;格<br/>
大于号&gt;<br/>
小于号&lt;<br/>
版权标签&copy;</br>

三、图像标签

<!--图像标签
必填src：图像地址
必填alt：图像替代文字（图片加在失败时显示）
title：鼠标悬停文字
width：图像宽度
height：图像高度
-->
<img src="../1.png" alt="图片加载失败" title="鼠标悬停文字" width="541" height="989">

四、超链接标签

页面间链接
锚链接

功能性链接

邮件链接

<!--页面间链接
必填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…

六、列表标签

无序列表
有序列表
自定义列表

<!--有序列表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>

七、表格标签

<!--表格标签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

<!--音频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内联框架

直接嵌入页面

<!--iframe内联框架
必填src:引用页面地址
name：框架表示名
-->
<iframe src="https://www.baidu.com" name="hello" frameborder="0" width="1000px" height="500px" ></iframe>

使用a标签跳转到页面，在嵌入的框架中显示

<iframe src="" name="hello" frameborder="0" width="1000px" height="500px" ></iframe><a href="https://www.baidu.com" target="hello">点击跳转</a>

十一、表单

1、初识表单post和get提交

<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类型

<!--文本框input
type：类型
name：名字
vaule：默认值
maxlength：字符限制长度
size：文本框长度--><!--text类型--><p>姓名：<input type="text" name="username"></p>

password类型（密码）

输入密码显示黑点

<!--password类型--><p>密码：<input type="password" name="password"></p>

submit类型（提交）

<!--submit类型--><input type="submit">

reset类型（重置）

<!--reset类型--><input type="reset">

radio类型（单选框）

name值要一样，才可以单选
checked默认选中

<p>性别：
<input type="radio" value="boy" name="sex">男
<!--checked默认选中-->
<input type="radio" value="girl" name="sex" checked>女</p>

checkbox类型（多选框）

name值要一样，才可以多选
checked默认选中

<!--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类型（普通按钮）

<!--button类型--><p>普通按钮：
<input type="button" value="点击按钮" name="btn1"></p>

image类型（图片按钮）

点击图片提交，效果和submit一样

<!--image类型--><p>图片按钮：
<input type="image" src="../1.jpg" width="100px" height="100px"></p>

file类型（文件域）

<!--file类型--><p>选择文件：
<input type="file" name="files">
<input type="button" value="上传" name="upload"></p>

range类型（滑块）

<!--range类型
max：最大值
min：最小值
step：步长--><p>滑块：
<input type="range" name="range" max="100" min="0" step="2"></p>

search类型（搜索框）

<!--search类型--><p>搜索框：
<input type="search" name="search"></p>

B 做简单验证的类型

email类型

输入值，会验证输入格式是否正确
若不输入任何值，依然可以提交

<!--mail类型--><p>邮箱地址：
<input type="email" name="email"></p>

url类型

输入值，会验证输入格式是否正确
若不输入任何值，依然可以提交

<!--url类型--><p>url：
<input type="url" name="url"></p>

number类型

输入值，会验证输入格式是否正确
若不输入任何值，依然可以提交

<!--number类型
max：最大值
min：最小值
step：步长--><p>数字：
<input type="number" name="number" max="100" min="0" step="10"></p>

3、下拉框select

selected默认选中

<!--下拉框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

<!--文本域textarea
clos：几列
rows：几行--><p>文本域：
<textarea name="textarea" id="textarea" cols="30" rows="10">文本内容</textarea></p>

5、增强鼠标可用性label

<!--增强鼠标可用性label
for：填对应input框的id属性值--><label for="labeltest">点我可以锁定到输入框：</label><input type="text" name="labeltest" id="labeltest"><hr/>

5、表单应用

readonly：只读

只读，无法编辑内容

<p>readonly只读：
<input type="text" name="readonly" readonly></p>

disabled：禁用

禁用，元素灰显

<p>disabled禁用：
<input type="text" name="disabled" disabled></p>

hidden：隐藏域

隐藏，页面上看不到该元素

<p>hidden隐藏域：
<input type="text" name="hidden" hidden></p>

6、表单初级验证

placeholder提示信息

<p>placeholder提示信息：
<input type="text" name="yz1" placeholder="要提示的内容"></p>

required非空判断

<p>required非空判断：
<input type="text" name="yz2" required></p>

pattern正则表达式

正则表达式需要自己写，可以网上搜索：常用正则表达式

<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所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：前端
浏览次数：57 次浏览
发布日期：2023-09-02 15:10:40
本文链接：https://www.kaopuke.com/article/k-p-k_14_uzo_10_fw_12__7_gz.html