HTML(Hyper Text Markup Language)超文本标记语言

W3C(World Wide Web Consortium)万维网联盟

  • 成立于1994年，Web技术领域最权威和最具影响力的国际中立性技术标准机构
  • W3官网

W3C标准

  • 结构化标准语言(HTML、XML)
  • 表现标准语言(CSS)
  • 行为标准(DOM、ECMAScript)

基本概念

HTML5 是超文本标记语言（HTML）的第五次重大修改，可以简单的理解为是 HTML 的第五个大版本。

  • 某些情况会将 HTML5 简称为 H5。
  • 某些情况说 HTML5（H5）表示的是 HTML 的第五个版本。
  • 某些情况说 HTML5（H5）表示的是移动端的网页效果。
  • 某些情况说 HTML5（H5）表示的是 HTML5、CSS3、以及 HTML5 配套的 JavaScript 接口。例如操作视频，操作画布，获取地理信息等。
  • 某些情况说 HTML5（H5）表示的是手机端整屏的轮播图效果。

HTML5 新特性

  1. 布局元素
  2. 媒体元素
  3. 画布（<canvas>），例如刮刮乐。
  4. SVG（定义矢量图）
  5. 表单新特性

网页基本结构

<!--DOCTYPE：告诉浏览器使用什么规范-->
<!DOCTYPE html>

<html lang="en">

<!--网页头部-->
<head>
    <!--  meta描述性标签，用来描述网站的一些信息  -->
    <!--  meta一般用来做SEO  -->
    <meta charset="UTF-8">
    <meta name="keywords" content="罗赞">
    <meta name="description" content="罗赞的个人博客">

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

<!--网页主体-->
<body>

</body>
</html>

网页标签

  • 标题标签
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
  • 段落标签
<!--一个p标签就是一段-->
<p>Hello</p>
<p>world</p>
  • 换行标签
<!--虽然换行了，但还是同一段-->
Hello <br>
world <br>
  • 水平线标签
<hr>
  • 字体样式标签

粗体：I love you. 斜体：I love you.

<!--粗体、斜体-->
粗体：<strong>I love you.</strong>
斜体：<em>I love you.</em>
  • 注释和特殊符号
<!--特殊符号-->
空格&nbsp;
大于号&gt;
小于号&lt;
版权符号&copy;
<!--
多行
注释
-->
  • 图像标签
<!--
src:图片地址
alt:加载失败时显示
title:鼠标悬停时的文字
width:宽度
height:高度
-->
<img src="../Resources/image/Cover.jpg" alt="A-SOUL" title="Cover" width="1000">

超链接

  • 页面间链接
<!--
<a href="path" target="目标窗口位置">链接文本或图像</a>
href*:链接路径
target:表示窗口在哪里打开
    _blank 在新标签页打开
    _self 在当前页面打开
    _parent
    _top
-->
<a href="图像标签.html" target="_blank">点击我跳转到图片</a><br>
<a href="基本标签.html" target="_self">
    <img src="../Resources/image/Cover.jpg" alt="" width="500">
</a>
  • 锚链接
<!--
1.需要一个锚标记
2.跳转到标记
3.#
-->
<a name="top">顶部</a><br>
<a href="#top">回到顶部</a>
<a name="down">底部</a>
<a href="链接标签.html#down">回到链接标签底部</a>
  • 功能性链接
<!--
邮件链接: mailto:邮箱地址
QQ推广链接
-->
<a href="mailto:2273038475@qq.com">点击联系我</a>

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2273038475&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:2273038475:53" alt="点击这里给我发消息" title="点击这里给我发消息"/>
</a>

点击联系我

点击这里给我发消息

列表

  • 无序列表
  1. JAVA
  2. Python
  3. C++
  4. C#
<!--有序ordered列表list-->
<ol>
    <li>JAVA</li>
    <li>Python</li>
    <li>C++</li>
    <li>C#</li>
</ol>
  • 有序列表
  • 高等数学
  • 大学英语
  • 高级语言程序设计
  • 思想道德与法治
    • <!--无序unordered列表list-->
<!--
应用范围：导航、侧边栏
-->
<ul>
    <li>高等数学</li>
    <li>大学英语</li>
    <li>高级语言程序设计</li>
    <li>思想道德与法治</li>
</ul>
    • 自定义列表
    <!--自定义defined列表list-->
<!--
dl:标签
dt:列表名称
dd:列表内容
应用范围：公司网站底部
-->
<dl>
    <dt>学科</dt>

    <dd>JAVA</dd>
    <dd>Python</dd>
    <dd>C++</dd>
    <dd>C#</dd>

    <dt>城市</dt>

    <dd>北京</dd>
    <dd>上海</dd>
    <dd>天津</dd>
    <dd>深圳</dd>

</dl>

    表格table

    • 表头 thead
    • 表体 tbody
    • 行(row) tr
    • 列 td
    • border:边框
    <table border="1">
    
    <thead>
    	<tr>
        	<td colspan ="3">表头</td>
        </tr>
    </thead>
    
    <tbody>
    	<tr>
            <!--colspan 跨列-->
            <td>1.1</td>
            <td colspan="2">1.2</td>
        </tr>
        
        <tr>
            <!--rowspan 跨行-->
            <td rowspan="2">2.1</td>
            <td>2.2</td>
            <td>2.3</td>
        </tr>
        
        <tr>
            <td>3.2</td>
            <td>3.3</td>
        </tr>
    </tbody>
   
</table>

    媒体元素

    <!--视频-->
<!--
src:资源路径
controls:控制条
autoplay:自动播放（目前浏览器规定视频必须静音后才会自动播放）
muted:静音
-->
<video src="../Resources/video/超级敏感.mp4" controls autoplay muted></video>

<!--音频-->
<audio src="../Resources/audio/超级敏感.mp3" controls></audio>

    页面结构

    image-20220315223153323

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构</title>
</head>
<body>
<header>
    <h2>网页头部</h2>
</header>
<section>
    <h2>网页主体</h2>
</section>
<footer>
    <h2>网页脚部</h2>
</footer>
</body>
</html>

    内联结构

    点击到CSS

    <!--iframe内联框架-->
<!--
src:引用页面地址
name:框架标识名
-->
<iframe src="https://blog.roozen.xyz" name="haha" frameborder="0" width="500"></iframe>
<!--在a标签中使用target属性从iframe标签打开页面-->
<a href="CSS.md" target="haha">点击跳转CSS</a>

<!--B站分享-->
<iframe src="//player.bilibili.com/player.html?aid=719360265&bvid=BV1zQ4y1v7wd&cid=446875842&page=1"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>

    表单

    • 表单元素格式 image-20220315223421699
    • 表单元素类型

    账号：

    密码：

    用户名

    性别： 男 女

    下拉框： 选项1 选项2 选项3 选项4 选项5

    爱好： 睡觉 敲代码 打游戏 学习

    反馈： 在这里填写反馈

    邮箱：

    URL：

    数字：

    音量：

    搜索：

    按钮： 

    <!--表单form-->
<!--
action:表示向何处发送表单数据（可以是网站，也可以是一个请求处理地址）
method:规定如何发送表单数据（提交方式）
get:可以在url中看到提交的信息，不安全但高效，不能传输大文件；
post:无法在url中看到提交的信息，比较安全，可以传输大文件。
-->
<form action="test01.html" method="get">
    
    <!--文本输入框：input type="text"-->
    <!--
    value:默认初始值
    maxlength:最多能输入几个字符
    size:文本框长度
	placeholder:输入框为空时的提示性文字
    -->
    <p>账号：<input type="text" name="username" value="admin" maxlength="10" size="30"></p>
    
    <!--密码输入框：input type="password"-->
    <p>密码：<input type="password" name="password"></p>
    
    <!--
	label标签的for属性可以使得点击此label标签时让id=for的标签获得焦点
	-->
    <label for="username">用户名</label>
    <input id="username" type="text" placeholder="用户名">
    
    <!--单选框标签
        input typle="radio"
        value:单选框的值
        name:表示组（name一样表示同一组，同时只能选中一个）
        checked:默认选中-->
    <p>性别：
        <input type="radio" name="sex" value="male">男
        <input type="radio" name="sex" value="female" checked>女
    </p>
    
    <!--下拉框select
        option:选项
        selected:默认选中-->
    <p>下拉框：
        <select name="列表名称">
            <option value="选项的值1">选项1</option>
            <option value="选项的值2">选项2</option>
            <option value="选项的值3" selected>选项3</option>
            <option value="选项的值4">选项4</option>
            <option value="选项的值5">选项5</option>
        </select>
    </p>
    
    <!--多选框input type="checkbox"
        checked:默认选中-->
    <p>爱好：
        <input type="checkbox" name="hobby" value="sleep">睡觉
        <input type="checkbox" name="hobby" value="code" checked>敲代码
        <input type="checkbox" name="hobby" value="game">打游戏
        <input type="checkbox" name="hobby" value="study">学习
    </p>
    
    <!--文本域textarea
        cols:列数
        rows:行数
        -->
    <p>反馈：
        <textarea name="response" cols="50" rows="20">在这里填写反馈</textarea>
    </p>
    
    <!--文件域input type="file"-->
    <p>
        <input type="file" name="file">
        <input type="button" name="upload" value="上传">
    </p>

    <!--邮箱input type="email"-->
    <p>邮箱： 
        <input type="email" name="my-email">
    </p>
    
    <!--URL input type="url"-->
    <p>URL：
        <input type="url" name="my-url">
    </p>
    
    <!--数字input type="number"
        max:最大值
        min:最小值
        step:步长
        -->
    <p>数字： 
        <input type="number" name="num" max="100" min="0" step="10">
    </p>

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

    <p>按钮：
        <!--普通按钮button-->
        <input type="button" name="btn1" value="点我">
        <br>
        <!--图片按钮image（具有submit功能）-->
        <input type="image" src="../Resources/image/Cover.jpg" name="bn2" width="100">
    </p>
    
    <p>
        <!--提交按钮submit-->
        <input type="submit" value="提交">
        <!--重置按钮reset-->
        <input type="reset" value="清空">
    </p>
</form>
    • 表单应用
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单应用</title>
</head>
<body>
<form action="test01.html" method="get">
    <p>
        <!--增强鼠标可用性-->
        <!--label标签
        for:要聚焦到的控件的id-->
        <label for="mark">点我聚焦到文本框</label>
        <input type="text" name="text" id="mark">
    </p>
   <p>
       <!--只读readonly-->
       <input type="text" value="只给看，不给改" readonly>
   </p>
   <p>
       <!--禁用disabled-->
       <input type="checkbox" name="a">未选中，可改
       <input type="checkbox" name="a" checked disabled>已选中，只读，改不了
       <input type="checkbox" name="a" checked>已选中，可改
       <input type="button" value="点不了" disabled>
   </p>
   <p>
       <!--隐藏域hidden-->
       <input type="button" value="看不见我但我依然存在" hidden>
       <input type="button" value="看得见我">
   </p>
</form>

</body>
</html>
    • 表单初级验证
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初级表单验证</title>
</head>
<body>
<form action="test01.html" method="get">
    <!--提示信息placeholder-->
    <p>用户名：
        <input type="text" name="username" placeholder="请输入用户名">
    </p>

    <!--必填项required-->
    <p>密码：
        <input type="password" name="password" required>
    </p>

    <!--正则表达式-->
    <p>URL：
        <input type="text" name="url" pattern="/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/ 或 [a-zA-z]+://[^\s]*">
    </p>
    
    <p>
        <input type="submit">
    </p>
</form>
</body>
</html>

    树状结构

    节点类型：元素节点、属性节点、文本节点

    image-20220319114207261