HTML详解-2022.09.01

HTML详解

一：初识HTML

  • Hyper text markup language(超文本标记语言)

  • HTML5优势

    • 所有浏览器对其支持
    • 市场对需求
    • 跨平台
    • W3C（World Wide Web consrotium:万维网联盟）标准包括：
      • 成立于1994年，中立性技术标准机构
      • 结构化标准语言（HTML、CSS）
      • 表现标准语言（CSS）
      • 行为标准（DOM、ECMAScript）

  • 常见IDE

    • WebStorm
    • IDEA

  • 基本结构

    <!--!DOCTYPE：告诉浏览器，我们要使用什么规范-->
<!DOCTYPE html>
<!--主标签-->
<html lang="en">
<!--head：网页头部-->
<head>
<!-- meta：描述性标签   -->
<!-- meta：一般用来左SEO   -->
    <meta charset="UTF-8">
<!--  title：网页标题  -->
    <title>Title</title>
</head>
<!--body：网页主体-->
<body>

</body>
</html>

二：网页的基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

我是一个小朋友，小小朋友
我是一个小朋友，小小朋友
我是一个小朋友，小小朋友

<p>段落标签</p>
<p>我是一个小朋友，小小朋友</p>
<p>我是一个小朋友，小小朋友</p>

换行标签<br/>
换行标签<br/>
换行标签<br/>
换行标签<br/>
换行标签<br/>
换行标签<br/>
换行标签<br/>

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

<strong>粗体</strong>
<em>斜体</em>
<br/>

空格&nbsp;&nbsp;&nbsp;格
<br/>
大于&gt;
<br/>
小于&lt;
<br/>
版权符号&copy;

</body>
</html>

三：图像、超链接、网页布局

<!--
src:图片地址（必填）
    相对地址：一般使用这种方法
    绝对地址：

alt:图片名字（必填）
-->
<img src="../resources/a.png" alt="我的头像" title="悬停文字" width="300px" height="300px">

<!--
超链接标签学习：
href：必填，表示要跳转到那个页面
target:
    _blank:在新标签打开
    _parent：将链接的文件载入含有该链接框架的父框架集或父窗口中
    _self：在本页面打开链接
    _top:在当前的整个浏览器窗口中打开所链接的文档，因而会删除所有框架

-->
<a href="2.基本标签.html" target="_top">文本超链接</a>
<br/>
<!--图片超链接-->
<a href="01我的第一个网页.html">
    <img src="../resources/a.png" alt="我的头像" title="悬停文字" width="300px" height="300px">
</a>

<!--热区超链接知识
shape=“circle”,coords="x,y,z"
circle:圆形，x,y,z:圆心，半径

shape=“polygon”,coords="x1,y1,x2,y2,x3,y3"
polygon:多边型
x1,y1,x2,y2,x3,y3:多变形的每个点坐标

shape=“rectangle”,coords="x1,y1,x2,y2"
polygon:矩形
x1,y1,x2,y2:一个顶点坐标，与这个顶点对角顶点的坐标
-->
<img src="" usemap="#app"/>
<map name="app">
  <area shape="rect" coords="22,22,44,44" href="http://baidu.com">
</map>



<!--
锚链接：
    1。需要一个锚标记
    <a name="top">顶部</a>
    2。跳转到标记
    <a href="#top">回到顶部</a>
-->
<a href="#top">回到顶部</a>

<!--跨页面锚链接-->
<a href="2.基本标签.html#down">跨页面锚链接</a>

<!--功能性链接
邮件链接
-->
<a href="mailto:1234567@qq.com">邮件链接</a>
  • 块元素和行内元素
    • 块元素：无论内容多少，该元素独占一行
      • p
      • h1～h6
    • 行内元素：内容撑开宽度，左右都是行内元素的可以在排在一行
      • a
      • strong
      • em

四：列表、表格、媒体元素

  • 列表

    • 无序列表

      <!--无序列表-->
<ul>
    <li>无序列表</li>
    <li>无序列表</li>
    <li>无序列表</li>
    <li>无序列表</li>
</ul>

    • 有序列表

      <!--有序列表-->
<ol>
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>

    • 自定义列表

      <!--自定义列表-->
<!--应用于公司底部-->
<dl>
    <dt>列表名称</dt>
    <dd>列表选项</dd>
    <dd>列表选项</dd>
    <dd>列表选项</dd>
    <dd>列表选项</dd>
</dl>

  • 表格

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--
表格:
    tr：行
    td：列
    colspan="4"：合并列
    rowspan="2"：合并行
-->
<table border="1px">
<!--    合并4列-->
    <tr><td colspan="4"></td></tr>
    <tr><td rowspan="2"></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
</table>
</body>
</html>

  • 媒体元素

    • 视频元素

      <!--
视频元素:
    src:资源路径
    controls：控制条
    autoplay：自动播放
-->
<video src="../resources/b.mov" controls autoplay></video>

    • 音频元素

      <!--音频元素-->
<audio src="../resources/c.mp3" controls autoplay></audio>

五：表单及表单应用

  • 表单语法

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单语法学习</title>
</head>
<body>
<!--
    表单form
    action:表单提交的位置，可以是网站，也可以是一个请求处理的地址
    method:
        get：我们可以在url中可以看到提交信息，不安全，但是高效
        post：url中没有参数。比较安全。传输大文件。
-->
<form action="post" action="9。表单语法.html">
    <p><input name="name" type="text"></p>
    <p><input name="pass" type="password"></p>
    <p>
        <input type="submit" name="button" value="提交"/>
        <input type="reset" name="reset" value="重置"/>
    </p>
</form>
</body>
</html>

  • 表单元素格式

    属性 说明
    type 执行元素多类型。text、password、checkbox、radio、submit、reset、file、hidden、image、和button、默认为text
    name 指定表单的元素的名称
    value 元素的初始值。type为radio时必须指定一个值
    size 指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位，对于其他类型，宽度以像素单位
    maxlength type为text或password时。输入的最大字符数
    checked type为radio或checkbox时。指定按钮是否是被选中
    placeholder 提示文字

  • 代码实现

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>
<h1>注册</h1>

<!--
    表单form
    action:表单提交的位置，可以是网站，也可以是一个请求处理的地址
    method:
        get：我们可以在url中可以看到提交信息，不安全，但是高效
        post：url中没有参数。比较安全。传输大文件。

-->

<form action="01我的第一个网页.html" method="get">
<!--
    文本输入框：
        input type="text"
        value：默认初始值
        size：文本框的长度
        maxlength：最长能写几个字符
-->
    <p>
        名字：<input type="text" name="username" placeholder="nihao" value="默认初始值">
    </p>
<!--    密码框：input type="password"-->
    <p>
        密码：<input type="password" name="password">
    </p>

<!--
    单选框标签：
        input type="radio"
        value="男"：单选框的值
        name：表示组，实现单选
        checked:默认选中
-->
    <p>
        <input type="radio" value="男" name="sex" checked/>男
        <input type="radio" value="女" name="sex"/>女
    </p>

<!--
    多选框：
        input type="checkbox"
        value:选中的值
        name：表示组，实现多选
        checked：表示默认选中
-->
    <p>
        <input type="checkbox" value="sleep" name="hobby" checked>睡觉
        <input type="checkbox" value="code" name="hobby">代码
        <input type="checkbox" value="game" name="hobby">游戏
        <input type="checkbox" value="chat" name="hobby">聊天

    </p>
<!--
    按钮：
        input type="image"----图片按钮
        input type="button"----文字按钮
        input type="submit"----提交按钮
        input type="reset"------重置按钮

        value：按钮上面的文字
-->
    <p>
        <input type="button" name="button1" value="点击变长">
<!--        也可以是一个按钮-->
<!--        <input type="image" src="../resources/a.png">-->
    </p>
    <p>
        <input type="submit" name="" value="提交">
        <input type="reset" name="" value="重置">
    </p>

<!--
    文件域
-->
    <p>
        <input type="file" name="file">
    </p>
<!--
    下拉框:
        select：下拉框的标签
        option：下拉选项
        selected：默认选中
        value：选项的值
-->
    <p>
        <select name="列表名称">
            <option value="选项的值1" selected>中国</option>
            <option value="选项的值2">日本</option>
            <option value="选项的值3">美国</option>
        </select>
    </p>

<!--
    文本域：不用中文，会出现乱码
        cols:列
        rows：行
        name：文本域名字
-->
    <p>
        <textarea name="" id="" cols="30" rows="10">文本内容</textarea>
    </p>
  
  <!--    邮箱验证-->
    <p>
        <input type="email" name="email" >
    </p>

<!--    url验证-->
    <p>
        <input type="url" name="url">
    </p>

<!--    数字验证-->
    <input type="number" name="number" max="100" min="0" step="10">
  
<!--    滑块-->
    <input type="range" name="range" max="100" min="0" step="1">

<!--    搜素框-->
    <p>
        <input type="search" name="search">
    </p>
</form>
</body>
</html>

  • 表单应用

    • readonly：只读属性

    • hidden：隐藏属性

    • disabled：禁用属性

    • 增强鼠标可用性

      <!--
    增强鼠标可用性：
        label：
        for：表示鼠标指向的id
-->
    <p>
        <label for="mark">增强鼠标可用性</label>
    </p>
    <p>
        <input type="search" name="search" id="mark">
    </p>

六：表单初始验证

  • placeholder

    • 提示信息

    • 所有输入框使用

      <input type="password" name="password" placeholder="请输入密码">

  • required

    • 不能为空

    • 所有文本的框

      <input type="password" name="password" placeholder="请输入密码" required>

  • pattern

    • 正则表达式

      <input type="email" name="email" pattern="/^d[a-z0-9_\.-]">

七：页面结构分析

元素名 描述
header 标题头部区域的内容（用于页面或者页面中的一块区域）
footer 标记脚部区域的内容（用于整个页面或页面的一块区域）
section web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用
nav 导航类辅助内容 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构学习</title>
</head>
<body>
<header>
    网页头部
</header>

<section>
    网页主体
</section>

<footera>
    网页脚部
</footera>

</body>
</html>

  • 内联框架

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>

<!--bilibili自己生成的内联框架-->
<iframe src="//player.bilibili.com/player.html?aid=458776289&bvid=BV1B5411E7WY&cid=287781788&page=1"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="false">
</iframe>

<!--
iframe:
    src:引用页面地址
    name:框架标识名
-->
<iframe src="" frameborder="0" width="800px" height="800px" name="hello"></iframe>

<a href="4列表.html" target="hello">通过内联框架跳转</a>
</body>
</html>
posted @   shenpro  阅读(601)  评论(0)  编辑  收藏  举报
相关博文：
·  MySQL详解-2022.09.01
·  HTML学习
·  HTML入门详解
·  HTML简述
·  前端_HTML基础
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~
点击右上角即可分享
微信分享提示
SQL AI 助手