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个月之前,我早已创建了博客园账号,那时候的我雄心壮志,给自己定下了很多目标.现在回想起来,除了体重的增长,头发的稀疏,似乎这段时间的消逝并没有带给我什么见识上的成长.哈哈,想必大 ...

随机推荐

后端程序员之路 26、CAP理论
可能是CAP理论的最好解释 - 西代零零发 - 博客频道 - CSDN.NEThttp://blog.csdn.net/dc_726/article/details/42784237 CAP理论 - ...
“蚂蚁牙黑”太火，想玩就用ModelArts做一个！
摘要:本文将介绍如何借力一站式 AI 开发平台,"傻瓜式"操作实现生成"蚂蚁牙黑"小视频. 作者:华为云EI专家胡琦一夜之间,朋友圈都在"蚂蚁牙黑& ...
多租缓存实现方案（Java）
多租缓存实现方案 (Java) 缓存在系统中是不可少的,缓存的实现是一个从无到有的过程,最开始,单应用的,缓存都是应用内部的,Map基本就能满足,实现简单.但是当上了微服务之后,应用是多部署的,应用之 ...
python graphviz的使用(画图工具)
参考文章1 参考文章2 一.graphviz安装及配置 graphviz实际上是一个绘图工具,可以根据dot脚本画出树形图等. 1.windows安装安装graphviz软件:https://gra ...
Python-tkinter-window
示例代码讲解 1.加载tkinter模块 2.创建一个窗口 3.设置窗口的主题 4.开始窗口的事件循环 import tkinter 2 win = tkinter.Tk() 3 win.title( ...
IaaS, PaaS和SaaS的区别
从小型企业到全球企业,云都是一个非常热门的话题,它是一个非常广泛的概念,涵盖了很多在线领域. 无论是应用程序还是基础架构部署,当您开始考虑将业务转移到云时,了解各种云服务的差异和优势比以往任何时候都更 ...
python3 中is和==的区别
is 身份运算符,用来判断对象是否属于同一地址 (python内置函数id() 可以返回对象地址) == 比较运算符,用于判断值是否相同
Linux系统浮动IP的配置
什么是浮动IP,为什么要配置浮动IP 首先说一下为什么要配置浮动IP. 原文链接:https://blog.csdn.net/readiay/article/details/53538085 现在有一 ...
Android 系统开发做什么？
题外话 18 年我从 Android 应用开发转 Framework 层开发了,从此开启了 996 幸福生活,博客技术文更新基本停滞了,被工作占据了过多的精力,实在没时间像以前一样拟稿.写作,实践.反 ...
第20 章： GPU 管理和 Device Plugin 工作机制
GPU 管理和 Device Plugin 工作机制本文将主要分享以下几个方面的内容: 需求来源 GPU 的容器化 Kubernetes 的 GPU 管理工作原理课后思考与实践需求来源 201 ...

一篇博文让你学会HTML5

HTML

什么是HTML

认识HTML

W3C标准

W3C

语法规范

网页的一些基本信息

网页的基本标签

标题标签

段落标签

换行标签

水平线标签

字体样式标签

注释和特殊符号