HTML5_html5步长和精度-CSDN博客

本文链接：https://blog.csdn.net/qq_44796529/article/details/120068835

HTML5

博主学习视频：【狂神说Java】HTML5完整教学通俗易懂

概述

HTML是一种描述网页的语言，称为超文本标记语言，（注意：它不是编程语言），所谓标记语言就是提供了一套标记标签

W3C(万联网联盟)

官网：

W3C标准：

结构化标准语言（HTML、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAscript）

网页：网页是网站的构成的基本元素，一个网站是由一个或者多个网页组成，网页其实就是一个文件（超文本标记语言格式），该文件的后缀名：html/htm

静态网页：网站内容是预先定义好的，每个看到的网页的内容都是一样
动态网页：取决于用户提供的参数，例如：每个人看到的购买网站的内容都是不一样

HTML基本结构

<!DOCTYPE html> <!-- HTML注释：定义HTML文档类型 -->
<html lang="en"> <!-- HTML文件的根标签 -->
<head> <!-- 网页头部信息 -->
    <!-- meta描述性标签，用于描述网站的一些信息 -->
    <!-- meta一般用于做SEO -->
    <meta charset="UTF-8">
    <meta name="keywords" content="学习HTML5">
    <meta name="description" content="成为全栈">
    <!-- 网页的标题 -->
    <title>网页的标题</title>
</head>
<body><!-- 主体部分 -->
    <h1>网页显示的内容</h1>
    hello，world.
</body>
</html>

基本标签

< body>、< /body>等成对的标签，叫做开放标签和闭合标签。

单独呈现的标签< hr/>叫做自闭合标签。

<body>
<!--    标题标签-->
<h1>一级标签</h1>
<h2>2级标签</h2>
<h3>3级标签</h3>
<h4>4级标签</h4>
<h5>5级标签</h5>
<h6>6级标签</h6>

<!--    段落标签-->
<p>白日依山尽        黄河入海流</p>
<p>欲穷千里目        更上一层楼</p>

<!--    水平线标签-->
<hr/>

<!--    换行标签-->
白日依山尽        黄河入海流<br/>
欲穷千里目        更上一层楼<br/>

<hr/>
<!--    字体样式标签-->
粗体: <strong>白日依山尽        黄河入海流</strong>
<br/>
斜体: <em>欲穷千里目        更上一层楼</em>

<hr/>
<!--    特殊符号-->
空   格
<br/>
空&nbsp;&nbsp;格
<br/>
大于号：&gt;
<br/>
小于号：&lt;
<br/>
小于等于号：&le;
<br/>
大于等于号：&ge;
<br/>
不等于号：&ne;
<br/>
等于号：&equals;
<br/>
版权标志：&copy;学习者共有
<br/>
HTML实体符号代码速查表：https://www.cnblogs.com/kiter/archive/2011/08/05/2128309.html
</body>

图像标签

常见的图像格式：jpg、png、gif、bmp（位图）…………

<body>
    <img src="../resources/image/1.jpg" alt="关我毛事" title="postImage" width="300" height="300"/>
    <img src="https://i.postimg.cc/g2n4tW4z/1.webp" alt="关我毛事" title="postImage" width="300" height="300"/>
</body>
<!--
src: 图片地址
相对地址，绝对地址
../上一级目录
alt:图片的替代文字（没有加载成功时显示）
title:鼠标悬停提示
width+height:图像的宽和高
-->

超链接标签

<body>
<!--锚点-->
<a name="top">顶部</a>
    
<br/>
<!--用文字像作为超链接-->
<a href="https://postimg.cc/4YRznjrq" target="_blank">链接文本或图像</a>

<br/>
<!--用图像作为超链接-->
<a href='https://postimg.cc/4YRznjrq' target='_blank'>
    <img src='https://i.postimg.cc/4YRznjrq/1.webp' border='0' alt='1'/>
</a>
    
<br/>
<!--
href:跳转地址
target:链接在那个窗口打开
    _blank  在新标签中打开
    _self   在自己的网页中打开（默认）
锚链接
    1、需要一个锚标记 <a name="top"></a>
    2、跳转到标记<a href="#top">回到顶部</a>
功能性链接
    邮件链接 ：mailto
    QQ链接 ：搜索qq推广
-->

<!--锚标签-->
<a href="#top">回到顶部</a>
<a href="3.html#top">跳转至3</a>
<!--在3.html中插入：<a name="top"></a>-->
<br/>
<!--功能性链接-->
<a href="mailto:24736743@qq.com">点击联系狂神</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=24736743&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:24736743:53" alt="点击这里给狂神发消息" title="点击这里给狂神发消息"/>
</a>
</body>

行内元素和块元素

块元素
    无论内容多少，该元素独占一行
    p、h1-h6...	(<p></p>)
行内元素
    内容撑开宽度，左右都是行内元素的可以在排成一行
    a、strong、em...(<a href=""></a>)

列表

 ol:order list有序列表
 li:list item列表项目
 ul:unordered list无序列表
 dl:definition list定义列表
 dt:definition term定义标题
 dd:definition description定义描述

有序列表

 <ol>
    <li></li>
    <li></li>
    <li></li>
 </ol>

无序列表

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

自定义列表

<dl>
    <dt>学科</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>C</dd>
</dl>
<!--
dl:标签
dt:列表名称
dd:列表内容
-->

表格标签

<!--table定义表格-->
<!--border边框属性-->
<table border="1px">
    <tr>
        <!--colspan 跨列-->
        <td colspan="3">学生成绩</td>
    </tr>
    <tr>
        <!--rowspan 跨行-->
        <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>

媒体元素

视频

 <video src="" controls autoplay></video> 
<!--
src : 资源路径
controls ： 控制条
autoplay  : 自动播放
-->

音频

<audio src="" controls autoplay></audio>
<!--
src : 资源路径
controls ： 控制条
autoplay  : 自动播放
-->

页面结构分析

元素名	描述
header	标题头部区域的内容（用于页面或页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
section	Web页面的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航类辅助内容

iframe内联框架

<iframe src="" name="" width="" height="" frameborder=""></iframe>
<!--
src:引用页面地址
name:框架标识符
w-h:宽度高度
frameborder:属性规定是否显示框架周围的边框。
出于实用性方面，最好不用设置该属性，使用CSS来设置边框样式和颜色。
-->

<!--bilibili分享中的“嵌入代码”-->
<iframe src="//player.bilibili.com/player.html?aid=753701268&bvid=BV1rk4y1q7ax&cid=208503017&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

<!--网易云音乐可以直接“生成外链播放器”-->
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1484393801&auto=1&height=66"></iframe>

通过内联框架实现跳转：点击后内联框架开始跳转，可以设置多个跳转链接，想看哪个跳哪个

<iframe src="" name="hello" width="1000px" height="400px" frameborder="9"></iframe>
<a href="https://www.kuangstudy.com/" target="hello">点击跳转狂学习</a>

表单post与get提交

<form method="post" action="">
    <p>名字：<input name="name" type="text"></p>
    <p>
        <input type="submit" name="Button" value="提交" />
        <input type="reset" name="Reset" value="重填" />
    </p>
</form>
<!--
method : post,get提交方式
action : 表单提交的位置，可以是网站，也可以是一个请求处理地址
--><h1>注册</h1>
<form method="post" action="1.html">
    <!--
    input文本输入框
    type类型
    name输入值名
    -->
    <p>名字：<input name="name" type="text"></p>
    <p>密码：<input name="pwd" type="password"></p>
    <p>
        <input type="submit" name="Button" value="提交" />
        <input type="reset" name="Reset" value="重填" />
    </p>
</form>
<!--
method : post,get提交方式
    get方式提交：可以在url中看到提交的信息，不安全，但高效
    post方式提交：比较安全，支持传输大文件
action : 表单提交的位置，可以是网站，也可以是一个请求处理地址
-->

属性	说明
type	指定元素的类型，text(默认:文本)、password(密码)、checkbox(多选框)、radio(单选框)、submit(提交按钮)、reset(重置按钮)、file(文件)、hidden(隐藏)、image(图片)、button(按钮)
name	指定表单元素的名称
value	元素的初始值，type为radio时必须指定一个值
size	指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素px为单位
maxlength	type为text或password时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否被选中

 <p>名字：<input name="name" type="text" value="好好学习" maxlength="8" size="20"></p>
<!--
初始值为“好好学习”
可输入最大字符数为8个
输入框长度为20（20个英文字符长度）
-->

<!--单选框标签,checked表示初始值-->
<!--需要设置name，来表明是同一组之下-->
<p>性别：
    <input type="radio" value="boy" name="sex" checked>男
    <input type="radio" value="gril" name="sex">女
</p>

<!--多选框标签,checked表示初始值-->
<!--需要设置name，来表明是同一组之下-->
<p>爱好：
    <input type="checkbox" value="boy" name="hobby">男
    <input type="checkbox" value="gril" name="hobby">女
    <input type="checkbox" value="game" name="hobby">游戏
    <input type="checkbox" value="unknown" name="hobby" checked>未知
</p>

<!--按钮-->
<!--
input type ="button"  普通按钮
input type ="image" 图像按钮
input type = "submit" 提交按钮
input type = "reset" 重置
-->
<!--image按钮也有提交的作用-->
<p>按钮：
    <input type="button" name="btn1" value="点击">
    <input type="image" src="https://i.postimg.cc/g2n4tW4z/1.webp">
</p>

<!--下拉框:selected表示初始值-->
<p>国家：
    <select name="类别名称" id="">
        <option value="CN" selected>中国</option>
        <option value="US">美国</option>
        <option value="RUS">俄国</option>
        <option value="UN">英国</option>
        <option value="FR">法国</option>
    </select>
</p>

<!--文本域-->
<!--cols行长|rows列高-->
<p>反馈：
<textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
</p>

<!--文件域-->
<p>
    <input type="file" name="files">
    <input type="button" value="上传" name="upload">
    <!--没有后端，上传无动作-->
</p>

<!--邮件：自动验证***@***格式，精度差-->
<p>邮箱：
    <input type="email" name="mail">
</p>

<!--url：自动验证-->
<p>url：
    <input type="url" name="url">
</p>

<!--数字：设置验证-->
<!--max最大值 min最小值 step步长-->
<p>数字：
    <input type="number" name="num" max="100" min="0" step="1">
</p>

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

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

表单的应用

hidden 隐藏域
readonly 只读
disabled 禁用
placeholder 提示信息
required 非空判断
pattern 正则表达式

<!--readonly 只读 -->
<p>名字：<input name="name" type="text" value="admin" readonly></p>

<!--disabled 禁用  -->
爱好：<input type="checkbox" value="boy" name="hobby" disabled>男

<!--hidden 隐藏域  -->
<p>密码：<input name="pwd" type="password" hidden></p>

<!--增强鼠标能用性-->
<!--label标签指向位置：for:点击后光标跳至位置处-->
<label for="mark">点击试试</label>
<input type="text" name="mark" id="mark">

表单初级验证

表单验证可以：减轻服务器压力，同时提高安全性

常用方式

placeholder

提示信息，类似登录框里的“请输入用户名”

<p>名字：<input name="name" type="text" placeholder="请输入用户名"></p>

required

非空判断，为空则无法提交

<p>名字：<input name="name" type="text" placeholder="请输入用户名" required></p>

pattern

正则表达式

<p>自定义邮箱:
    <input type="text" name="DIYmail" pattern="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
</p>

正则表达式速查表_脚本之家 (jb51.net)

HTML5

HTML5

概述

HTML基本结构

基本标签

图像标签

超链接标签

行内元素和块元素

列表

有序列表

无序列表

自定义列表

表格标签

媒体元素

视频

音频

页面结构分析

iframe内联框架

表单post与get提交

表单的应用

表单初级验证

常用方式

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