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

随机推荐

# PyComCAD介绍及开发方法
项目地址:https://github.com/JohnYang1210/PycomCAD 1.综述提到Autocad在工业界的二次开发,VB或者Lisp可能作为常用的传统的编程语言.但是,Py ...
【老孟Flutter】Flutter 2.0 重磅更新
老孟导读:昨天期待已久的 Flutter 2.0 终于发布了,Web 端终于提正了,春季期间我发布的一篇文章,其中的一个预测就是 Web 正式发布,已经实现了,还有一个预测是:2021年将是 Flut ...
2020年12月-第02阶段-前端基础-CSS Day02
CSS Day02 复合选择器后代选择器并集选择器 1. CSS复合选择器理解理解css复合选择器分别的应用场景为什么要学习css复合选择器 CSS选择器分为基础选择器和复合选择器 , ...
比较String 字符串的字节大小
package com.ittx.edi.erp;import java.io.File;import java.io.FileWriter;import java.io.IOException;pu ...
如何在 C# 8 中使用 Channels
在面对生产者-消费者的场景下, netcore 提供了一个新的命名空间 System.Threading.Channels 来帮助我们更高效的处理此类问题,有了这个 Channels 存在, 生产 ...
常见 git 需求整理（持续更新中）
首发于语雀文档突然感觉自己对 git 还是挺熟悉的,因为团队里新来的七八号应届生来问我 git 问题,基本没有答不上的情况,但为了能更好地对知识进行整理,还是记录一下为好. (希望能)持续更新.. ...
sprintgboot+springsecurity的跨域问题，
整个项目是使用前后端分离的形式开发,登录接口部分出现了问题, 重写了security的登录接口,返回json数据到这一步已经没有没有问题了,使用postman测试,也可以看到接口返回的结果,但是使用 ...
java网络通信不止UDP,TCP
预备知识多线程实现多线程线程池 IO流核心功能就是读和写扩展功能对什么读写,怎么读写,如何优化读写网络基础 IP IP规定网络上所有的设备都必须有一个独一无二的IP地址,就好比是邮件上都必 ...
python 序列与字典
序列概念: 序列的成员有序排列,可以通过下标访问到一个或几个元素,就类似与c语言的数组. 序列的通用的操作: 1:索引 11 = [1,2,3,4] 11[0] = 1 2:切片 11[1,2,3,4 ...
从设计模式角度看OkHttp源码
前言说到源码,很多朋友都觉得复杂,难理解. 但是,如果是一个结构清晰且完全解耦的优质源码库呢? OkHttp就是这样一个存在,对于这个原生网络框架,想必大家也看过很多很多相关的源码解析了. 它的源码 ...

一篇博文让你学会HTML5

HTML

什么是HTML

认识HTML

W3C标准

W3C

语法规范

网页的一些基本信息

网页的基本标签

标题标签

段落标签

换行标签

水平线标签

字体样式标签

注释和特殊符号