7、HTML5

已于 2022-04-08 16:36:52 修改
阅读量266 收藏
点赞数
文章标签： java mvc 开发语言
于 2022-03-03 22:21:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44042813/article/details/123265579
版权

文章目录

概述

  • 前后端分离：前端：Html、CSS、JS、JQuery（用于封装JS）
  • 如今都是html5+css3
  • W3C：world wide web consortium(万维网联盟)
  • W3C标准：
    • 结构化标准语言(HTML、XML)
    • 表现标准问题(CSS)：Cascading Style Sheets
    • 行为标准(DOM、ECMAScript)：Document Object Model、JavaScript要遵守后一个的规范
  • 开发软件：Dreamweaver、WebStorm、IDEA
  • 准备工作：
    • 也是创建一个java项目，删除src，增加一个html文件夹，可以在文件夹中增加一个"1.我的第一个网页"
  • 成对的标签。自闭合标签

总结->先看

<body>
#标题、段落、换行、水平线、粗体、斜体、特殊符号
<h1></h1>   <p></p> <hr/>	<br/>
<strong></strong>   <em></em>
&nbsp;&gt;&lt;&copy;

#图片
<img src="" alt="加载失败" title="悬停文字" height="">

#链接
<a href="1.我的第一个网页.html">这是第一个网页</a>
<a href="https://www.baidu.com">这是百度</a>
#跳转到邮箱
<a href="mailto:123@qq.com">这是邮箱</a>

#锚标签(用的是name,不是id)
<a name="up">这是在顶部的文字</a>
<p>这是好多行</p>
<a href="#up">返回顶部</a>  <!--href也可以是4.连接标签.html#up-->

#内联框架
<iframe src="" name = "name1"></iframe>
<a href="1.我的第一个网页.html" target="name1">点击</a>

#视频和音频（不要忘记controls）
<video src="" controls></video>
<audio src="" controls></audio>

#网页结构
<header></header>
<section></section>
<footer></footer>

#列表
<ol>
    <li>a</li>
</ol>
<ul></ul>
<dl>
    <dt>职位</dt>
    <dd>学生</dd>

    <dt>工具</dt>
    <dd>书籍</dd>
</dl>

#表格
<table border="1">
    <tr>
        <td colspan="2">成绩单</td>
    </tr>
    <tr>
        <td rowspan="2">语文</td>		//th标签加粗
        <td>80</td>
    </tr>
    <tr>
        <td>100</td>
    </tr>
</table>
-----区别
<!--这个是只有外边框-->
<table style="border: 2px dashed red">
    <tr>
        <td colspan="2">成绩</td>
    </tr>
    <tr>
        <td rowspan="2">语文</td>
    </tr>
    <tr>
        <td>88</td>
        <td>99</td>
    </tr>
</table>

#下拉框（不是<input>）
<select name="country" >
        <option value="china">中国</option>
        <option value="us" selected>美国</option>
        <option value="uk">英国</option>
</select>
#文本域(区别于input下的type="text")
<textarea name="textarea" cols="30" rows="10">文本框里的内容</textarea>

#表单！！！！get/post
<form action="1.我的第一个网页.html" method="get">input提交的信息，整个页面的都可放入</form>

input下的(一般input都在p的包裹之下，自成一段)
#框框设置：readonly disable hidden
#内容设置：placeholder required pattern(正则表达式。在js)

#用户输入文本
<input type="text" name="username" value="adair" readonly>
<input type="password" name="pwd" value="123" hidden>

#单选(需要在同一个name组内)
<input type="radio" name="sex" value="boy">男
<input type="radio" name="sex" value="girl">女

#复选
<input type="checkbox" name="hobby" value="run">跑
<input type="checkbox" name="hobby" value="play">玩

#按钮(普通、图片、提交、重置)
<input type="button" name="btn1" value="点击变长">
<input type="image" src="" height="">      <!--点击图片也会跳转-->
<input type="submit">
<input type="reset">

#上传文件
<input type="file">
#验证邮箱，会自动检查@
<input type="email" name="email">
#验证url
<input type="url" name="url">
#验证数字
<input type="number" min="0" max="100" step="5">
#搜索
<input type="search" name="search">
#音量
<input type="range" mix="0" max="100" step="2">
#label:增强鼠标可用性（注意用的是id）
<input type="text" id="mark">
<label for="mark">你点我试试</label>
	
</body>

第一个网页

  • language为语言，en为英语，zh汉语
<!DOCTYPE html>
<html lang="en">

<head>
    <!--meta一般做描述性标签，描述网站的信息-->
    <!--meta一般作SEO：Search Engine Optimization-->
    <meta charset="UTF-8">
    <meta name="keywords" content="我是content">
    <title>我的第一个网页</title>
</head>


<body>
hello
</body>

</html>

基本标签

<body>

<!--标题标签-->
<h1>h1标签</h1>
<h2>h2标签</h2>
<h3>h3标签</h3>
<h4>h4标签</h4>

<!--段落标签-->
<p>两只老虎    两只老虎</p>
<p>跑得快       跑得快</p>
<p>一只没有耳朵                      一只没有尾巴</p>

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

<!--换行标签-->
两只老虎 两只老虎<br/>
跑得快 跑得快<br/>
一只没有耳朵 一只没有尾巴<br/>


粗体：<strong>I love you</strong><br/>
斜体：<em>I love you </em>


空                格
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
&gt;
<br/>
&lt;
<br/>
&copy;adair


</body>

</html>

图像标签

<body>

<!--
图片地址：
        绝对路径:从盘符开始
        相对路径:resource\image\tx.jpg
        上一层目录：../
        alt：图片无法显示的代替文字
        title:悬停文字
-->

<img src="../resource/image/tx.jpg" alt="adair" title="悬停文字" width="600">

<a href="4.连接标签.html#down">跳入4.的</a>

</body>
</html>

链接标签

<body>

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

<a href="1.我的第一个网页.html">网页一</a>
<a href="http://www.baidu.com">百度</a>


<a href="1.我的第一个网页.html" target="_self">
    <img src="../resource/image/tx.jpg" alt="adair" title="悬停文字" width="600">
</a>

<!-- 锚标签 -->
<a href="#top">回到顶部</a>

<a name="down">down</a>

<!--功能性连接
邮件链接：mailto
-->
<a href="mailto:123456789@qq.com">点击联系我</a>

</body>

元素

  • 块级元素：p/h等会自占一行
  • 行内元素：a/strong/em不会自己占一行

列表

<body>

<!--有序列表order list-->
<ol>
    <li>x</li>
        <ul>
            <li>a</li>
            <li>b</li>
        </ul>
    <li>y</li>
    <li>z</li>
</ol>

<!--无序列表unorder list-->
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

<!--自定义列表defined list/title/data-->
<dl>
    <dt>职位</dt>
    <dd>校长</dd>
    <dd>老师</dd>
    <dd>学生</dd>

    <dt>工具</dt>
    <dd>书</dd>
    <dd>笔</dd>
</dl>

</body>

表格

border=“1px” #html

border: 1px solid red #CSS

<body>

<!--表格table
行：tr
单元格：td
-->
<!--注意：border="1px"-->
<table border="1px">
    <tr>
        <td colspan="3" >学生成绩</td>

    </tr>
    <tr>
        <td rowspan="2">狂神</td>
        <td>语文</td>
        <td>99</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">adair</td>
        <td>语文</td>
        <td>98</td>
    </tr>
    <tr>

        <td>语文</td>
        <td>99</td>
    </tr>
</table>


</body>
</html>

音频和视频

  • 别忘记controls
<body>

<!--音频和视频-->
<video src="../resource/video/player.mp4"  controls autoplay="autoplay"></video>

<audio src="../resource/audio/musci.mp3" controls autoplay></audio>

</body>

页面结构分析

<body>

<header>
    <h2>网页头部</h2>
</header>

<section>
    <h2>网页主体</h2>
</section>


<footer>
    <h2>网页脚部</h2>
</footer>
</body>

内联框架iframe

<iframe src="" name=""></iframe>

<body>

<iframe name="hello1" src="https://www.bilibili.com" frameborder="0" height="150px" width="150px"></iframe>

<a href="1.我的第一个网页.html" target="hello1">点击</a>

</body>

学习表单

  • 例如注册一个账号，登陆一个账号
<body>

<h1>注册</h1>

<!--form表单
action:为submit后的url位置
method:get不安全，可以在url中看到密码=
-->
<form action="1.我的第一个网页.html" method="get">
    <p>名字：<input type="text" name="username" placeholder="请输入用户名" required></p>
    <p>密码：<input type="password" name="pwd" value="123" hidden></p>

    <!--单选框
       type="radio"
       value单选框的值
       name表示组
    -->
    <p>姓名：
        <input type="radio" value="boy" name="sex" checked disabled/>男
        <input type="radio" value="girl" name="sex"/>女

    </p>
    <!--多选框
       type="checkbox"
       value多选框的值
       name表示组
    -->
    <p>爱好：
        <input type="checkbox" value="run" name="hobby"/>跑步
        <input type="checkbox" value="down" name="hobby"/>俯卧撑
        <input type="checkbox" value="up" name="hobby" checked/>引体向上
    </p>

    <!--按钮
    type="button"   普通按钮
    type="image"    图像按钮
    type="submit"   提交按钮
    type="reset"    重置按钮
    -->
    <p>按钮：
        <input type="button" name="btn1" value="点击边长">
        <input type="image" src="../resource/image/tx.jpg" height="50px">
    </p>

    <p>
        <select name="国家" >
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="russia" selected>俄国</option>
        </select>
    </p>

    <!--文本域-->
    <p>
        <textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
    </p>

    <!--文件域-->
    <p>
        <input type="file">
        <input type="button" name="上传" value="upload">
    </p>

    <!--邮箱验证-->
    <p>邮箱：
        <input type="email" name="email">
    </p>
    <!--url验证-->
    <p>URL:
        <input type="url" name="url">
    </p>
    <!--数字验证-->
    <p>数字
        <input type="number" max="100" min="0" step="1">
    </p>

    <p>搜索：
        <input type="search" name="search">
    </p>
    <p>音量：
        <input type="range" name="voice" max="100" min="0" step="2">
    </p>

    <!--增强鼠标可用性 for指向相同内容的id-->
    <p>
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>

    <p>
        <input type="submit">
        <input type="reset">
    </p>


</form>

</body>
  • 可以通过源码查看信息，源码中network中可以查看提交大概信息

忘记

#锚标签(用的是name,不是id)
<a name="up">这是在顶部的文字</a>
<p>这是好多行</p>
<a href="#up">返回顶部</a>  <!--href也可以是4.连接标签.html#up-->

#视频和音频（不要忘记controls）
<video src="" controls></video>
<audio src="" controls></audio>
adair-zhang
关注
HTML入门与进阶以及HTML5
wuyxinu的博客
12-12 38万+
目录 一、简介 1、前端开发最核心技术 （1）HTML是什么？ （2）CSS （3）JavaScript 2、前端开发其他技术 二、基础内容 1.基础总结 2.HTML的基本标签 (1)HTML标签 (2)head标签 (3)body标签 3、段落与文字 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签 (四)、块元素和行内元素 (五)、练...
CSS3 +HTML5入门到精通
07-01
【标题】"CSS3 +HTML5入门到精通"与【描述】"《HTML+5+从入门到精通》-中文学习教程"所涵盖的知识点主要围绕着Web开发的基础技术——HTML5和CSS3展开，这两者是现代网页设计与开发不可或缺的组成部分。以下是关于这...
HTML详解
苏凯的博客
09-06 1954
HTML详解   JavaWeb课程体系介绍 在JavaWeb阶段，我们会带领学员经历五个阶段的学习，如上图所示。 第一阶段（当前课程阶段）：前端开发阶段 开发要求： 1.可以读懂UI工程师编写的页面，在整个页面中根据自己的需求填写代码； 2.可以在指定位置进行简单内容的编写，核心目的在于显示数据； 3.掌握表单内容的编写； 4.掌握JS简单动画的使用 第二阶段：数据库基础...
HTML讲解（HTML结构及标签）
m0_48273471的博客
04-20 7356
HTML的使用及HTML常见标签 目录 1. HTML结构 1.1HTML 基本结构 1.2标签层次结构 2. HTML常见标签 2.1 注释标签 2.2 标题标签 2.3 段落标签 2.4 换⾏标签: br 2.5 格式化标签 2.6 图⽚标签: img 2.7 超链接标签: a 2.8 表格标签 2.9 列表标签 2.10 表单标签 1. HTML结构 1.1HTML 基本结构 <html> <head> ...
web开发：HTML详解
盒马的博客
12-03 1188
讲解web开发：HTML
HTML入门教程：深度解析HTML，开启你的前端技术之旅
最新发布
zhangwenok的博客
06-14 2190
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
HTML基础知识（超详细！）
qq_60950941的博客
04-18 3037
本文全面介绍了html的标签以及新增的html5标签，可以帮助人们在最短的时间里打下基础
HTML5参考手册大全7本合集.chm
11-11
这个“HTML5参考手册大全7本合集”包含了多个关于HTML5及其相关版本的手册，是学习和理解HTML5的重要资源。 1. **HTML5的新特性**：HTML5引入了许多新元素，如`<header>`、`<footer>`、`<nav>`、`<article>`等，...
HTML5浪漫爱心表白动画在线演示程序
02-12
HTML5是一种强大的网页开发语言，它是HTML的第五个版本，为现代互联网提供了丰富的功能和交互性。这个"HTML5浪漫爱心表白动画在线演示程序"是一个利用HTML5特性制作的创意应用，特别适合在情人节这样的特殊日子里，...
html5最终版规范pdf版
11-27
7. **表单控件增强**：HTML5对表单元素进行了改进，如新增了、等类型，提供了更好的用户输入体验。 8. **Geolocation API**：允许获取用户的地理位置信息，为位置感知应用提供了可能。 9. **WebRTC**：Web Real-...
html 详细讲解 html 详细讲解
01-12
html 详细讲解 html 详细讲解 html 详细讲解 html 详细讲解 html 详细讲解 html 详细讲解 html 详细讲解 html 详细讲解 html 详细讲解 html 详细讲解 html 详细讲解
HTML超详细教程
weixin_60535956的博客
03-27 1万+
详细介绍HTML相关基础知识（含大量实例）
HTML详细教程
qq_40046544的博客
10-17 8571
HTML 是网页使用的语言，定义了网页的结构和内容。浏览器访问网站，其实就是从服务器下载 HTML 代码，然后渲染出网页。HTML 的全名是超文本标记语言（HyperText Markup Language），上个世纪 90 年代由欧洲核子研究中心的物理学家蒂姆·伯纳斯-李（Tim Berners-Lee）发明。它的最大特点就是支持超链接，可以跳转到其他网页，从而构成了整个互联网。1999 年，HTML 4.0.1 发布，成为广泛接受的 HTML 标准。
HTML全套基础知识点（代码式讲解）
Jan's的博客
10-05 964
HTML大致框架 <html> <!-- HTML语言有多个版本，比如HTML4、XHTML2.0、HTML5 HTML5是现在常用的版本--> <!-- !DOCTYPE属性是文档声明属性可以告诉网页当前语言使用的是什么版本，比如下面 --> <!DOCTYPE HTML> <!-- HTML默认为HTML5，所以我们直接<!DOCTYPE HTML> --> <!-- 这是
html案例详解（一）
weixin_30588907的博客
05-22 115
一、入门。 <html> <!-- 头信息的作用 1. 可以设置网页的标题。 2. 可以通知浏览使用指定的码表解释html页面. 3. --> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /&...
Html快速讲解
weixin_45248543的博客
06-26 358
什么是HTML HTML(Hyper Text Marked Language)称为超文本标记语言，是一种标识性的语言。HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将影像、声音、图片、文字动画、影视等内容显示出来。百度百科 HTML是网页的骨架，是开始学习制作网页的第一步，它是由一堆标签组合起来的 必需了解 每个标签都要有开始和结束，如： <p></p> 中<p>为开标签，</p>为闭标签，这种用于中间需要插入数据的标签，可以对
HTML5详解
Angelia Zheng
10-12 1030
HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。HTML5的设计目的是为了在移动设备上支持多媒体。HTML5 是 W3C 与 WHATWG 合作的结果，WHATWG 指 Web Hypertext Application Technology Working Group。 HTML5 中的新特性： 用于绘画的 canvas 元素 用于媒介回放的 vid...
关于浏览器解析html全过程详解
热门推荐
耐得住寂寞也是一种境界
08-12 1万+
DOM文档通常加载的步骤： 1.解析HTML结构。 2.加载外部脚本和样式表文件 3.解析并执行脚本代码。 4.DOM树构建完成。//DOMContentLoaded 5.加载图片等外部资源。 6.页面加载完毕。//load 顺序是这样，但很多时候几个步骤是同时发生的。 在这里梳理一下完整流程下的各种细节： 由于浏览器采用至上而下的方式解析，所以会先解析html，直到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值