1. Johngo学长首页
  2. 技术点详细复盘专题
  3. Python

走进 HTML

• Python • 阅读 43

文章目录

01 什么是HTML？

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

超文本包括：文字、图片、音频、视频、动画等；

走进 HTML
以前常见的 Flash 等插件，如今 HTML5 可以轻松实现

HTML5 的优势：

走进 HTML
走进 HTML

; 02 HTML的基本结构

走进 HTML 

DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta name="keywords" content="苗半里的博客">
    <meta name="description" content="来学Java">

    <title>我的第一个网页title>
head>

<body>
Hello World !
body>

html>

走进 HTML

03 网页基本标签

div 标签：div 是 division 的简写，division 意为分割、区域、分组。比方说，当你将一系列的链接组合在一起，就形成了文档的一个 division。

可定义文档中的分区或节（division/section）。
标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 ，那么该标签的作用会变得更加有效。

可以将 div 标签看作一个自由标签，可以把众多标签封装起来

  • 标题标签 ：
  • 段落标签 ：
  • 换行标签 ：
  • 水平线标签 ：
  • 字体样式标签 ： 粗体 斜体
  • 注释和特殊符号 ： 特殊符号&
~~~DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习title>
head>
<body>

<h1>一级标签h1>
<h2>二级标签h2>
<h3>三级标签h3>
<h4>四级标签h4>
<h5>五级标签h5>
<h6>六级标签h6>

<p>这是第一段p>
<p>这是第二段p>
<p>这是第三段p>
<p>这是第四段p>

接下来是换行<br>再换行<br>再换

<hr/>

<h1>字体样式标签h1>
<strong>粗体strong>
<em>斜体em>

哈哈
<br/>>
<br/><
©苗半里版权所有

body>
html>

走进 HTML

04 图像标签

  • 常见的图像格式：
  • JPG
  • GIF
  • PNG
  • BMP
  • …

走进 HTML 
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习title>
head>
<body>

<img src="../../resource/image/1.png" alt="图像标签使用讲解">
<img src="../../resource/image/1.png" alt="图像标签使用讲解" title="悬停文字" width="1000">
body>
html>

05 链接标签

走进 HTML

有 文本超链接 和 图像超链接 ：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签title>
head>
<body>

<a href="http://www.baidu.com" target="_blank">点击我跳转到百度a>

<a href="http://www.baidu.com">
  <img src="https://baidu.png" alt="百度">
a>

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

<a href="#top">回到顶部a>

<a href="mailto:839316435@qq.com">点击给我发邮件a>

body>
html>

06 块元素和行内元素

  • 块元素
  • 无论内容多少，该元素独占一行

  • 如：段落 、 标题 …

  • （ p 、 h1 – h6 ）

  • 行内元素
  • 内容撑开宽度，左右都是行内元素的可以排在一行

  • 如：粗体、斜体 …

  • （ a 、strong 、 em … ）

  • 块元素可以包含行内元素，行内元素不能包含块元素

07 列表

什么是列表？

列表就是信息资源的一种展示形式，可以使信息结构化和条理化，以便浏览者快捷地获取相应信息。

列表的分类：

  • 无序列表：
  • 有序列表：
  • 自定义列表：
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表title>
head>
<body>

<ul>
  <li>网页li>
  <li>数据库li>
  <li>算法li>
ul>

<hr/>

<ol>
  <li>Javali>
  <li>C++li>
  <li>Pythonli>
ol>

<hr/>

<dl>
  <dt>编程dt>
  <dd>Javadd>
  <dd>C++dd>
  <dd>Pythondd>

  <dt>业务dt>
  <dd>前端dd>
  <dd>后端dd>
dl>

body>
html>

走进 HTML

07 表格

为什么使用表格？

  • 简单通用
  • 结构稳定

基本结构：

  • 单元格
  • 行 ：tr
  • 列 ：td
  • 跨行 ：rowspan
  • 跨列 ：colspan
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格title>
head>
<body>

<table  border="1px">
    <tr>
        <td> 1-1 td>
        <td> 1-2 td>
        <td> 1-3 td>
        <td> 1-4 td>
    tr>
    <tr>
        <td> 2-1 td>
        <td> 2-2 td>
        <td> 2-3 td>
        <td> 2-4 td>
    tr>
    <tr>
        <td rowspan="2"> 3-1 td>

        <td> 3-2 td>
        <td> 3-3 td>
        <td colspan="3"> 3-4 td>

    tr>
    <tr>
        <td> 4-1 td>
        <td> 4-2 td>
        <td> 4-3 td>
        <td> 4-4 td>
    tr>
table>

body>
html>

运行可得下表：

走进 HTML

08 视频和音频

video 和 audio 标签 （可自由加属性）：

DOCTYPE html>
<hmtl>
<head>
    <meta charset="UTF-8">
    <title>媒体元素title>
head>
<body>

<video src="../../resource/video/VID_20221226_195327.mp4" controls autoplay>video>
<audio src="../../resource/audio/bbox.wav" controls autoplay>audio>
body>
hmtl>

09 页面结构

走进 HTML 
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>

10 iframe内联框架

👉 就是一个网页里面嵌套另一个网页

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

<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
iframe>

<iframe src="https://www.csdn.net/" frameborder="0" width="100px" height="200px">iframe>

<iframe src="" name="hello" frameborder="0">iframe>
<a href="第一个网页.html" target="hello">点击跳转a>

body>
html>

11 表单语法

👉 例如网页里的用户登录窗口就是一个表单

走进 HTML 
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册title>
head>
<body>

<h1>注册h1>

<form action="第一个网页.html" method="get">

    <p>名字：<input type="text" name="username">p>

    <p>密码：<input type="password" name="pwd">p>

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

form>

body>
html>

走进 HTML

👉 表单元素格式

走进 HTML 
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册title>
head>
<body>

<h1>注册h1>

<form action="第一个网页.html" method="get">

    <p>名字：<input type="text" name="username" value="请输入用户名" maxlength="8" size="30">p>

    <p>密码：<input type="password" name="pwd">p>

    <p>性别：
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex"/>女
    p>

    <p>爱好:
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
        <input type="checkbox" value="sport" name="hobby">运动
    p>

    <p>按钮:
        <input type="button" name="btnl" value="点我验证">
        <input type="image" src="../../resource/image/img.png">
    p>

    <p>国家
        <select name="列表名称" >
            <option value="china" selected>中国option>
            <option value="us">美国option>
            <option value="uk">英国option>
        select>
    p>

    <p>反馈:
        <textarea name="textarea" cols="40" rows="3" >文本内容textarea>
    p>

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

    <p>上传文件:
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    p>

    <p>邮箱:
        <input type="email" name="email">
    p>

    <p>URL
        <input type="url" name="url">
    p>

    <p>数量:
        <input type="number" name="num" max="100" min="0" step="10">
    p>

    <p>音量:
        <input type="range" name="voice" min="0" max="100" step="1">
    p>

    <p>搜索:
        <input type="search" name="search">
    p>

form>

body>
html>

走进 HTML
走进 HTML

👉 表单的应用

  • 只读： input 标签里加上 readonly
  • 禁用：input 标签里加上 disabled
  • 隐藏：input 标签里加上 hidden

拓展：


<label for="mark">你点我试试label>
<input type="text" id="mark">

点击文字部分，会自动跳转到右边的文本框：

走进 HTML

👉 表单初级验证

常用方式：

  • placeholder 提示信息
  • required 非空判断
<p>名字：<input type="text" name="username" placeholder="请输入用户名" required>p>

<p>密码：<input type="password" name="pwd">p>

走进 HTML
  • pattern 正则表达式
<p>自定义邮箱:
   <input type="text" name="diymail"
          pattern="[\\w!#$%&'*+/=?^_{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?">
p>

Original: https://blog.csdn.net/Lov1_BYS/article/details/128720755
Author: 苗半里
Title: 走进 HTML

原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/811752/

转载文章受原作者版权保护。转载请注明原作者出处！

赞 (0)
0

【自取】最近整理的，有需要可以领取学习：



Linux核心资料大放送~

全栈面试题汇总（持续更新&可下载）

一个提高学习100%效率的工具！

【超详细】深度学习面试题目！

LeetCode Python刷题答案下载！

LeetCode Java版刷题答案下载！

LeetCode C++ 版本，抓紧保存！

LeetCode GO语言 刷题答案下载！

大家都在看

亲爱的 Coder【最近整理，可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球