HTML

什么是HTML

HTML（HyperText Markup Language，超文本标记语言）是用来描述网页的一种语言，它不是一种编程语言，而是一种标记语言。

认识HTML

HTML5是构建Web内容的一种语言描述方式，HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。

HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息，HTML5在从前HTML4.01的基础上进行了一定的改进。

W3C标准

W3C

World Wide Web Consortium（万维网联盟）
成立于1994，Web技术领域最权威和具有影响力的国际中立技术标准机构
http://www/w3c.org/
http://www.chinaw3c.org/

W3C标准包括

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

语法规范

HTML中的注释不能嵌套
HTML中不区分大小写，但是我们一般都使用小写
HTML标签必须结构完整，要么成对出现，要么自结束标签
HTML标签可以嵌套，但是不能交叉嵌套
HTML标签中的属性必须有值，且值必须加引号(双引号或者单引号均可)

网页的一些基本信息

<!--DOCTYPE：告诉浏览器，我们要使用的是什么规范-->

<!DOCTYPE html>

<html lang="en">

<head><!--head标签代表网页头部-->

    <meta charset="UTF-8"> <!--meta描述属性标签，它用来描述我们网站的一些信息-->

    <title>Title</title>  <!--title网页标题-->

</head>

<body><!--body标签代表网页主体-->



</body>

</html>

网页的基本标签

标题标签

<h1>一级标题</h1>

<h2>二级标题</h2>

<h3>三级标题</h3>

<h4>四级标题</h4>

<h5>五级标题</h5>

<h6>六级标题</h6>

段落标签

<p>这是一个段落</p>

换行标签

<br>这是一个段落</br>

水平线标签

<hr/>   <!-- 属于自闭和标签-->

字体样式标签

粗体

<string>i love you </string>

斜体

<em>i love you </em>

注释和特殊符号

注释： <!--这是一个段落-->   IDEA快捷键 ctrl+/

特殊符号：

多个空格： &nbsp;&nbsp;

大于号:   &gt;

小于号:   &lt;

版权符号:  &copy;版权所有Waves

链接标签

例：<a href="www.baidu.com" target="_blank">百度一下,你就知道</a>

href   链接路径      target 链接在哪个窗口打开  下表中表明了常用值

属性	值	描述
href	URL	规定链接的目标URL
target	_blank _parent _self _top framename	规定在何处打开目标URL。仅在href属性存在时使用

_blank  在新标签页打开

_self     在自己网页中打开

锚链接

需要一个锚标记
跳转到标记 #id html已经弃用name=“”属性而是使用id=“”

<a id="top">顶部</a>

<a href="#top">回到顶部</a>  回到页面最顶部

<a  id="#tt">这是ID为#tt的位置</a>

<a href="login.html#tt">跳转到id为#tt的位置</a>

常用于网页目录跳转

图像标签

常见的图片格式
- JPG
- GIF
- PNG
- BMP
- ```
<img src="path" alt="text" title="text" width="x" height="y" />
```
- src:图像地址 alt：图像的代替文字 title：鼠标悬停提示文字 width：图像宽度 height：图像高度

列表

什么是列表

列表就是信息资源的一种展示形式。它可以是信息结构化和条理化，并以列表的形式展示出来，以便于浏览者更快捷的获得相应数据
列表的分类

有序列表

<ol>

    <li>JAVA</li>

    <li>Mysql</li>

    <li>Python</li>

    <li>sql</li>

</ol>

图如下

无序列表

<ul>

    <li>JAVA</li>

    <li>Mysql</li>

    <li>Python</li>

    <li>sql</li>

</ul>

如下图

自定义列表

dl:标签

dt：列表名称

dd：列表内容

应用范围  公司网站底部

<dl>

    <dt>学科</dt>

    <dd>JAVA</dd>

    <dd>MYSQL</dd>

    <dd>LINUX</dd>

    <dd>位置</dd>

</dl>
如图

行内元素和块元素

块元素

文论内容多少，该元素独占一行

（p，h1-h6。。。。）
行内元素
- 内容撑开宽度，左右都是行内元素的都可以排在一行
- （a.strong.em....）

视频和音频

视频元素

video

controls  显示进度条         autoplay   打开网页自动播放

<video src="../resources/video/aaa.mp4" controls  autoplay> </video>

音频元素

audio

controls  显示进度条         autoplay   打开网页自动播放

<video src="../resources/video/aaa.mp4" controls  autoplay> </video>

页面结构分析

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

<header>

    <h2>网页头部</h2>

</header>

<section>

    <h2>网页主体</h2>

</section>

<footer>

    <h2>网页页脚</h2>

</footer>

iframe内联框架

iframe的两种使用方式 name 框架标识名

<iframe src="https://www.baidu.com" frameborder="0" width="1920" height="800"> </iframe>

<iframe src="https://www.baidu.com" name="login" frameborder="0" width="1920" height="800"> </iframe>

<a href="login.html" id="login">点击跳转到login</a>

表单语法

method 方法 get/post  get提交from表单数据显示在url，不安全，高效

post  可以传输大文件，没有get效率高，url中不显示数据

action 表示向何处发送表单数据中

<form method="post" action="index.html">

    <p>账号: <input name="name" type="text" /></p>

    <p>密码: <input name="password" type="password"/></p>

    <p>

        <input type="submit" name="button" value="提交" />

        <input type="reset" name="reset" value="清空" />

    </p>

</form>

表单元素格式

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

单选框

单选框标签：

input type ="radio"

value :单选框得值

name :表示组

checked  默认选中

<form method="post" action="index.html">

    <p>账号: <input name="name" type="text" /></p>

    <p>密码: <input name="password" type="password"/></p>

   <p>性别：

        <input type="radio" value="boy" name="sex" />男

        <input type="radio" value="girl" name="sex" />女

   </p>

    <p>

        <input type="submit" name="button" value="提交" />

        <input type="reset" name="reset" value="清空" />

    </p>

</form>

多选框

input 必须有name值

checked  默认选中

<form method="post" action="index.html">

    <p>账号: <input name="name" type="text" /></p>

    <p>密码: <input name="password" type="password"/></p>

   <p>性别：

        <input type="radio" value="boy" name="sex" />男

        <input type="radio" value="girl" name="sex" />女

   </p>

    <!--多选框-->

    <p>爱好：

        <input type="checkbox" value="cade" name="happey" />写代码

        <input type="checkbox" value="music" name="happey" checked/>听音乐

        <input type="checkbox" value="game" name="happey" />游戏

        <input type="checkbox" value="sleep" name="happey" />睡觉

    </p>

    <p>

        <input type="submit" name="button" value="提交" />

        <input type="reset" name="reset" value="清空" />

    </p>

</form>

如图：

按钮和图片按钮

<!--按钮 图片按钮-->

    <p>按钮：

        <input type="button" name="button" value="点击提交" />

        <input type="image"  src="../resources/images/1.png" />

    </p>

按钮

input type="button"   普通按钮

input type="image"       图像按钮

input type="submit"   提交按钮

input type="reset"    重置/清空

下拉框，列表框

 <!--下拉框，列表框

    selected 默认选中那个选项-->

    <p>下拉框

        <select name="列表名称" id="名称">

            <option value="1" >中国</option>

            <option value="2" selected>法国</option>

            <option value="3">意大利</option>

            <option value="4">美国</option>

        </select>

    </p>

文本域

cols 显示多少列   rows显示多少行

<p>反馈：

<textarea name="textarea" id="textarea" cols="50" rows="10">请输入你要输入的内容</textarea>

</p>

文件域

<!-- 文件域-->

    <p>

    <input  type="file" name="file"/>

    <input type="button" value="上传" name="upload"/>

    </p>

邮件，URL，数字验证，滑块，搜索框等

    <!--邮件验证-->

    <p>邮箱:

        <input  type="email" name="email"/>

    </p>

    <!--URL验证-->

    <p>链接:

        <input  type="url" name="url" id="url"/>

    </p>

    <!--数字验证-->

    <p>商品数量:

        <input  type="number" name="num" id="num"/>

    </p>

    <!--滑块,用于音量等 min最小值 max最大值 step滑动一下值加2-->

    <p>音量:

        <input  type="range" name="nm" id="nm" min="0" max="100" step="2"/>

    </p>

    <!--搜索框-->

    <p>搜索:

        <input  type="search" name="um" id="um"/>

    </p>

表单的应用

隐藏域

hidden

只读

readonly

禁用

disabled

增强鼠标可用性，不再需要只点框才能输入，点击旁白的字体也可以

<!--    增强鼠标可用性-->

    <p>

    <label for="look" >点击我框会变</label>

     <input type="text" name="look" id="look" />

    </p>

表单的初级验证

为什么要进行表单验证
- 减轻服务器压力，过滤不必要的请求
常用方式

placeholder 提示信息

<p>账号: <input name="name" type="text" placeholder="请输入用户名"/></p>

    <p>密码: <input name="password" type="password" placeholder="请输入密码" /></p>

required 非空判断

<p>账号: <input name="name" type="text" placeholder="请输入用户名" required/></p>

 <p>密码: <input name="password" type="password" placeholder="请输入密码" required/>

 </p>

pattern 正则表达式

https://www.jb51.net/tools/regexsc.htm  正则表达式网页

<!--自定义正则表达式判断邮箱-->

    <p>自定义邮箱:

    <input type="text" name="myemail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/

/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">

    </p>

作者：旧歌
链接： https://www.cnblogs.com/wdyjt/p/14727726.html
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须在文章页面给出原文连接，否则保留追究法律责任的权利

一篇博文让你学会HTML5的更多相关文章

Visual Studio Code（VS code）你们都在用吗？或许你们需要看一下这篇博文
写在前面在前端开发中,有一个非常好用的工具,Visual Studio Code,简称VS code. 都不用我安利VS code,大家就会乖乖的去用,无数个大言不惭的攻城狮,都被VS code比德 ...
【转】Visual Studio Code（VS code）你们都在用吗？或许你们需要看一下这篇博文
写在前面在前端开发中,有一个非常好用的工具,Visual Studio Code,简称VS code. 都不用我安利VS code,大家就会乖乖的去用,无数个大言不惭的攻城狮,都被VS code比德 ...
webIDE 第二篇博文
这是我做webIDE过程中的第二篇博文,之所以隔了这么长时间没更,因为确实是没有啥进度啊,没什么可写的,现在虽然依然没啥进度,但中途遇到很多坑,这些坑还是有记录下来的必要的. 因个人水平问题,可能有的 ...
你们都在用IntelliJ IDEA吗？或许你们需要看一下这篇博文
写在前面以前一直用的elipce,如今入坑IntelliJ IDEA,没想到啊.深深的爱上了它,强大到无所不能: "工欲善其事必先利其器",IntelliJ IDEA作为一个非常 ...
看到篇博文，用python pandas改写了下
看到篇博文,https://blog.csdn.net/young2415/article/details/82795688 需求是需要统计部门礼品数量,自己简单绘制了个表格,如下: 大意是,每个部门 ...
Spring整合Struts2框架的第一种方式（Action由Struts2框架来创建）。在我的上一篇博文中介绍的通过web工厂的方式获取servcie的方法因为太麻烦，所以开发的时候不会使用。
1. spring整合struts的基本操作见我的上一篇博文:https://www.cnblogs.com/wyhluckdog/p/10140588.html,这里面将spring与struts2 ...
关于InterruptedException的两篇博文的转载
博文一:https://www.jianshu.com/p/a8abe097d4ed InterruptedException异常在了解InterruptedException异常之前应该了解以下的 ...
程序员小张的第一篇博文 --记Markdown的使用学习
1.前言为了即将到来的面试做准备,以及记录一下平日里自己的学习过程和生活日常,我开始进驻博客园啦!这就是我的第一篇博客(有点小激动)~ 作为一只新手,首先记录一下今晚的编写博文的学习过程吧~ 2.使 ...
.Net小白的第一篇博文
说起来也比较惭愧,5个月之前,我早已创建了博客园账号,那时候的我雄心壮志,给自己定下了很多目标.现在回想起来,除了体重的增长,头发的稀疏,似乎这段时间的消逝并没有带给我什么见识上的成长.哈哈,想必大 ...

随机推荐

采用lua脚本获取mysql、redis数据以及jwt的校验
一.安装配置Openresty 1,安装 wget https://openresty.org/download/ngx_openresty-1.9.7.1.tar.gz # 下载 tar xzvf ...
Django-用户权限，用户角色使用指南
RBAC(Role-Based Access Control,基于角色的访问控制)就是用户通过角色与权限进行关联.简单地说,一个用户拥有若干角色,每一个角色拥有若干权限.这样,就构造成"用户 ...
看完我的笔记不懂也会懂----javascript模块化
JavaScript模块化模块化引子模块化的历史进化模块化规范 CommonJS规范 Node.js(服务器端) 下项目的结构分析 browerify(浏览器端) 下项目的结构分析 AMD规范 ...
.NET Core中的Worker Service
当你想到ASP.NET Core时,可能会想到Web应用程序后端代码,包括MVC和WebAPI.MVC视图和Razor页面还允许使用后端代码生成带有HTML元素的前端UI.全新的Blazor更进一步, ...
Synchronized 轻量级锁会自旋？好像并不是这样的。
本来是在写面霸系列的,写着写着就写到了这一题: Synchronized 原理知道不? 而关于 Synchronized 我去年还专门翻阅 JVM HotSpot 1.8 的源码来研究了一波,那时候我 ...
HashMap之tableSizeFor方法图解
目录普通人的简单粗暴方式示例代码问题大神的实现移位的思想全过程示意图初始值右移一位+或运算右移二位+或运算右移四位+或运算右移八位+或运算右移十六位+或运算结果+1 初始容量 ...
SpringMVC-04 数据处理及跳转
SpringMVC-04 数据处理及跳转结果跳转方式 1.ModelAndView 设置ModelAndView对象 , 根据view的名称 , 和视图解析器跳到指定的页面 . 页面 : {视图解析 ...
Java实现解压缩文件和文件夹
一前言项目开发中,总会遇到解压缩文件的时候.比如,用户下载多个文件时,服务端可以将多个文件压缩成一个文件(例如xx.zip或xx.rar).用户上传资料时,允许上传压缩文件,服务端进行解压读取每一 ...
C# 应用 - 多线程 1) 多线程的知识图谱
External Libraries中没有Maven的jar包的原因（已解决）
**深坑!** ## External Libraries中没有Maven的jar包的原因(已解决) 2021年3月1日 --- 搭建一个新项目 IDEA 从 Git 上拉拉去Maven项目然后 m ...

一篇博文让你学会HTML5

HTML

什么是HTML

认识HTML

W3C标准

W3C

语法规范

网页的一些基本信息

网页的基本标签

标题标签

段落标签

换行标签

水平线标签

字体样式标签

注释和特殊符号