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

随机推荐

微信小程序onReachBottom第二次失效
当整个页面就是一个view包着一个轮播.一个横向scroll-view和一个纵向scroll-view onReachBottom方法只执行一次解决方法:
PAT-1119（Pre- and Post-order Traversals）+前序和后序遍历确定二叉树+判断二叉树是否唯一
Pre- and Post-order Traversals PAT-1119 这题难度较大,主要需要考虑如何实现根据前序遍历和后序遍历来确定一颗二叉树一篇好的文章: 题解 import java. ...
如何用Flink把数据sink到kafka多个不同(成百上千)topic中
需求与场景上游某业务数据量特别大,进入到kafka一个topic中(当然了这个topic的partition数必然多,有人肯定疑问为什么非要把如此庞大的数据写入到1个topic里,历史留下的问题,现 ...
ubuntu18.04+gunicorn+nginx+supervisor+mysql+redis安装django项目
Ubuntu18.04 install Django project 项目准备: ECS 实例 (云服务器) 此安装部署方案适合本地ubuntu18.04系统安装和虚拟机中ubuntu18.04系统安 ...
hibernate 的一对多关联关系映射配置
hibernate 是操作实体类: 表是一对多的关系,当创建这2个实体的时候在一的一方定义一个多的一方的集合在多的一方定义一个一的一方的对象表是多对多的关系,当创建这2个实体的时候在互相中都有 ...
A Color Game
题目大意: 给定一个只包含七种字母的字符串,如果满足一段连续相同的字符长度大于等于K那么即可消除,问最后能不能变为空字符. 题解:很明显是用区间dp来解决,我们设dp[l][r][k]代表的是在[l ...
《逆向工程核心原理》——TLS回调函数
pe中TLS(thread local storage)中函数的执行时机早于入口函数(entry point), 相关结构: // // Thread Local Storage // typedef ...
Android Studio 之生成正式签名的 APK 文件
生成 APK 文件 •步骤点击 Build -> Generate Signed...... : 来到如下界面: 选择 APK 选项,点击 Next 来到如下界面: 如果你电脑上没有一个正式 ...
Typora标题自动编号+设定快捷键技巧
Typora标题自动编号提示:要了解将这些CSS片段放在哪里,请参阅添加自定义CSS. 打开Typora偏好设置,打开主题文件夹,在主题文件夹中创建base.user.css文件,放置以下内容,则T ...
第21 章： Kubernetes 存储架构及插件使用
Kubernetes 存储架构及插件使用本文将主要分享以下三方面的内容: Kubernetes 存储体系架构: Flexvolume 介绍及使用: CSI 介绍及使用. Kubernetes 存储体 ...

一篇博文让你学会HTML5

HTML

什么是HTML

认识HTML

W3C标准

W3C

语法规范

网页的一些基本信息

网页的基本标签

标题标签

段落标签

换行标签

水平线标签

字体样式标签

注释和特殊符号