HTML 一文读懂

川长思鸟来 2023-10-10 15:18 105阅读 0赞

目录

1、认识HTML

2、 HTML 网页构成

HTML基本结构

网页头部信息

3、HTML 基本标签

4、图像标签

5、链接标签

  1. 行内元素和块元素

  2. 列表

    1. 表格

    2. 媒体元素

  3. 页面结构分析

    11、HTML 内联框架（iframe）

12、初识表单

表单元素属性

13、文本框和密码框

14、单选框和多选框

15、普通按钮和下拉框

16、文本域和文件域

  1. 搜索框滑块和简单验证

  2. 表单隐藏域、只读和禁用

    19、表单验证

本文基于：菜鸟教程之HTML教程 和 狂神HTML

1、认识HTML

初始化HTML

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>HTML一文读懂</title>
  6. </head>
  7. <body>
  9. <h1>我的第一HTML页面</h1>
  10. <p>我的第一HTML页面</p>
  12. </body>
  13. </html>

实例详解：

  • <!DOCTYPE html> 声明为 HTML5 文档
  • 元素是 HTML 页面的根元素
  • 元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。
  • </strong> 元素描述了文档的标题</li><li><strong><body></strong> 元素包含了可见的页面内容</li><li><strong><h1></strong> 元素定义一个大标题</li><li><strong><p></strong> 元素定义一个段落</li></ul> </blockquote> <p><strong>什么是HTML？</strong></p> <p>HTML 是用来描述网页的一种语言。</p> <ul> <li>HTML 指的是超文本标记语言: <strong>H</strong>yper<strong>T</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage</li><li>HTML 不是一种编程语言，而是一种<strong>标记</strong>语言</li><li>标记语言是一套<strong>标记标签</strong> (markup tag)</li><li>HTML 使用标记标签来<strong>描述</strong>网页</li><li>HTML 文档包含了HTML <strong>标签</strong>及<strong>文本</strong>内容</li><li>HTML文档也叫做 <strong>web 页面</strong></li></ul> <p>目前使用的是HTML5，使用 W3C标准</p> <p>W3C标准包含如下：</p> <pre><code>结构化标准语言（HTML、XML） 表现标准语言（CSS） 行为标准语言（DOM、ECMAScript） </code></pre><p>常见HTML编辑器：</p> <ul> <li>VS Code：Visual Studio Code - Code Editing. Redefined</li><li>Sublime Text：Sublime Text - Text Editing, Done Right</li><li>在线编辑器：HTML/CSS/JS 在线工具 | 菜鸟工具</li></ul> <h2 id="h2-2-html-"><a name="2、 HTML 网页构成" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2、 HTML 网页构成</h2><h3 id="h3-html-"><a name="HTML基本结构" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML基本结构</h3><ul> <li>网页头部</li><li>主体部分</li></ul> <h3 id="h3-u7F51u9875u5934u90E8u4FE1u606F"><a name="网页头部信息" class="reference-link"></a><span class="header-link octicon octicon-link"></span>网页头部信息</h3><ul> <li>DOCTYPE声明：告诉浏览器，我们要使用什么规范</li><li><head>标签：定义了文档的信息</li><li><title>标签：网页标题</li><li><meta>标签：描述性标签，用来描述网站的一些信息</li><li><script>标签: 网页关联javascript 脚本文件</li><li><p><style>标签：网页关联css样式文件</p> <p><!DOCTYPE html></p> <html lang="en"><br><!--head标签代表网页头部--><br><head><br> <meta charset="UTF-8"><br> <!--meta一般用来做SEO--><br> <meta name="keyboards" content="Java"><br> <meta name="description" content="学习Java"><br> <!--网页标题--><br> <title>HTML一文读懂



    Hello World HTML

3、HTML 基本标签

  • 标题标签
  • 段落标签
  • 换行标签
  • 水平线标签
  • 字体样式标签

  • 注释和特殊符号

    <!DOCTYPE html>




    HTML基本标签



    一级标签


    二级标签


    六级标签




    这是一整段这是一整段这是一整段这是一整段
    这是一整段这是一整段这是一整段
    这是一整段这是一整段
    这是一整段
    这是一整段


    第一段


    第二段


    第三段





    第一行

    第二行




    粗体：I LOVE YOU
    斜体：I LOVE YOU
    斜体：I LOVE YOU

    小号子：I LOVE YOU

    下标：I LOVE YOU

    上标：I LOVE YOU

    插入: I LOVE YOU

    删除: I LOVE YOU




    空 格：

    大于号：>

    小于号：<

    版权符号：©



4、图像标签

常见图像格式：

  • JPG
  • GIF
  • PNG
  • BMP：位图
  • …

语法：

  1. <body>
  2. <img src="path" alt="text" title="标题" width="x" height="y">
  3. src：图像地址
  4. alt：图像的替代文字（找不到该图片时，才会显示）
  5. title：鼠标悬停提示文字
  6. width:图像宽度
  7. height:图像高度
  9. </body>

示例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>HTML一文读懂</title> 
  6. </head>
  7. <body>
  9. <p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" width="32" height="32"> 这是一些文本。</p>
  11. </body>
  12. </html>

5、链接标签

文本超链接：点击文本进行跳转

图像超链接：点击图片进行跳转

语法：

  1. <!--链接标签-->
  2. <a href="path" target="目标窗口位置">链接文本或图像</a>
  3. href：必填 ，表示要跳转到那个页面
  4. target:表示窗口在哪里打开，默认是当前页面打开
  5.        _blank：在新的标签页打开
  6.        _self:在自己的网页中打开

示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="GBK">
  5.     <title>HTML一文读懂</title>
  6. </head>
  7. <body>
  8.     <!--文字超链接-->
  9.     <a href="http://www.baidu.com" target="_blank">点击我跳转到百度</a>
  10.     <br/>
  11.     <!--图像超链接-->
  12.     <a href="http://www.baidu.com" target="_blank">
  13.         <img src="D:\\text.png" alt="Smiley face" width="141" height="175"> 
  14.     </a>
  15.     <br/>
  16. </body>
  17. </html>

锚链接

功能性链接

  1. <!--邮件链接：mailto-->
  2. <a href="mailto:zhouzhiwen****@163.com">点击联系我！</a>

6. 行内元素和块元素

块元素

  • 无论内容多少，该元素独占一行
  • p：段落标签
  • div：把DIV看作是一容器,容器专门用来包含内容
  • h1、h2… …：标题
  • form：表单
  • ul：无序列表，与li绑定
  • ol：有序列表，与li绑定
  • hr：分隔
  • …

行内元素

  • 内容撑开宽度，左右都是行内元素的可以在排一行
  • a：锚点
  • b：加粗
  • i ：斜体
  • img：图片
  • input：输入框
  • label：表格标签
  • select：下拉列表
  • span：用来组合文档中的行内元素
  • textarea：多行文本输入框
  • …

7. 列表

列表的分类：

  • 有序列表
  • 无序列表
  • 自定义列表

示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="GBK">
  5.     <title>HTML一文读懂</title>
  6. </head>
  7. <body>
  9. <!--有序列表-->
  10. <ol>
  11.     <li>Java</li>
  12.     <li>python</li>
  13.     <li>前端</li>
  14. </ol>
  15. <!--无序列表-->
  16. <ul>
  17.     <li>C</li>
  18.     <li>C++</li>
  19.     <li>Linx</li>
  20. </ul>
  21. <!--自定义列表
  22.     dl：标签
  23.     dt:列表名称
  24.     dd：列表内容
  25. -->
  26. <dl>
  27.     <dt>学科</dt>
  28.         <dd>数字电路</dd>
  29.         <dd>模拟电路</dd>
  30.         <dd>嵌入式</dd>
  31.     <dt>位置</dt>
  32.         <dd>北京</dd>
  33.         <dd>上海</dd>
  34. </dl>
  36. </body>
  38. </html>

效果截图：

3bbb4c0359fa4c3f8abb783d2c52ec74.png

8. 表格

为什么使用表格？

  • 简单通用
  • 结构稳定

基本结构：

  • 单元格
  • 行 tr
  • 列 td
  • 跨行 rowspan
  • 跨列 colspan

示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="GBK">
  5.     <title>HTML一文读懂</title>
  6. </head>
  7. <body>
  8. <table border="1px"><!--加个边框-->
  9.     <tr>
  10.         <td>1-1</td>
  11.         <td>1-2</td>
  12.         <td>1-3</td>
  13.         <td>1-4</td>
  14.     </tr>
  16.     <tr>
  17.         <td>2-1</td>
  18.         <td>2-2</td>
  19.         <td>2-3</td>
  20.         <td>2-4</td>
  21.     </tr>
  23.     <tr>
  24.         <td>3-1</td>
  25.         <td>3-2</td>
  26.         <td>3-3</td>
  27.         <td>3-4</td>
  28.     </tr>
  30. </table>
  31. </body>
  33. </html>

效果截图：

2827a6642a8d45fbbbce9e52016d3e99.png

  1. <table border="1px"><!--加个边框-->
  2.     <tr>
  3.         <!--让这个单元格跨两列-->
  4.         <td colspan="2">1-1</td>
  5.         <td>1-2</td>
  6.         <td>1-3</td>
  7.     </tr>
  9.     <tr>
  10.         <!--让这个单元格跨两行-->
  11.         <td rowspan="2">2-1</td>
  12.         <td>2-2</td>
  13.         <td>2-3</td>
  14.         <td>2-4</td>
  15.     </tr>
  17.     <tr>
  18.         <td>3-2</td>
  19.         <td>3-3</td>
  20.         <td>3-4</td>
  21.     </tr>
  23. </table>

效果截图：

534d5c8f2cac4035ae9cc0cc1a6d0cdd.png

9. 媒体元素

视频元素：video

音频元素：audio

  1. <!--媒体元素
  2. 视频：
  3.     controls:滚动条
  4.     autoplay：自动播放
  5. -->
  6. <video src="D:\\video\\mov.mp4" controls autoplay></video>
  8. <audio src="D:\\video\\aud.mp3" controls></audio>

10. 页面结构分析

fe032f9774de4745aad027c48962e2fe.png

示例：

  1. <body>
  2. <header>
  3.     <h2>网页头部</h2>
  4. </header>
  6. <section>
  7.     <h2>网页主体部分</h2>
  8. </section>
  10. <footer>
  11.     <h2>网页脚部</h2>
  12. </footer>
  13. </body>

11、HTML 内联框架（iframe）

语法：

  1. <iframe src="path" frameborder="0" name="mainFrame"></iframe>
  2.         引用页面地址                 框架标示名

示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="GBK">
  5.     <title>HTML一文读懂</title>
  6. </head>
  7. <body>
  8. <!--iframe内联框架-->
  9. <iframe src="https://blog.csdn.net/zhouzhiwengang"
  10.         scrolling="no"
  11.         border="0"
  12.         frameborder="no"
  13.         framespacing="0"
  14.         allowfullscreen="true">
  15. </iframe>
  17. <iframe src="https://blog.csdn.net/zhouzhiwengang" frameborder="1px" name="mainFrame" width="400px" height="100px"></iframe>
  19. <!--通过a标签往iframe里加东西-->
  20. <iframe src="" frameborder="1px" name="hello" width="400px" height="300px"></iframe>
  21. <!--通过target属性绑定指定的iframe-->
  22. <a href="https://blog.csdn.net/zhouzhiwengang" target="hello">点击我跳转到CSDN</a>
  24. </body>
  26. </html>

12、初识表单

语法：

  1. <!--初识表单post和get提交
  2.     method:规定如何发送表单数据，常用值：：post、get
  3.         get方式提交：可以在url中看到提交的信息
  4.         post方式提交：比较安全，可以传输大文件
  5.     action:表示向何处发送表单数据,可以是一个网站，或者一个请求处理地址
  6. -->
  7. <form method="get" action="后台服务地址">
  8.     <!--文本输入框：text-->
  9.     <p>姓名：<input type="text" name="username"></p>
  10.     <!--密码框：password-->
  11.     <p>密码：<input type="password" name="password"></p>
  13.     <!--提交-->
  14.     <input type="submit">
  15.     <!--重置-->
  16.     <input type="reset">
  17. </form>

效果截图：

1ed3c860682642b5a49546ca68c504fc.png

表单元素属性

22b4684a5ec14d91b3d6f8cecec38e01.png

13、文本框和密码框

文本框通过 标签来设定。

  1. <form>
  2. First name: <input type="text" name="firstname"><br>
  3. Last name: <input type="text" name="lastname">
  4. </form>

密码框通过标签 来设定。

  1. <form>
  2. Password: <input type="password" name="pwd">
  3. </form>

14、单选框和多选框

单选框：

  1. <!--单选框标签：
  2.     input type="radio"
  3.     value：单选框的值
  4.     name：表示组，name相同为一个组，即只能选择一个
  5. -->
  6. <radio>
  7.     <!--checked表示默认选中-->
  8.     <input type="radio" value="boy" name="sex" checked/>男
  9.     <input type="radio" value="girl" name="sex"/>女
  10. </radio>

多选框：

  1. <!--多选框-->
  2. <p> 爱好：
  3.     <!--checked表示默认选中-->
  4.     <input type="checkbox" value="sleep" name="hobby" checked>睡觉
  5.     <input type="checkbox" value="book" name="hobby">看书
  6.     <input type="checkbox" value="swimming" name="hobby">游泳
  7.     <input type="checkbox" value="write" name="hobby">写作
  9. </p>

15、普通按钮和下拉框

按钮：

  1. <!--按钮-->
  2. <p> 按钮：
  3.     <input type="button" name="btn1" value="点击查看">
  4. </p>

效果截图：

b760a89bb32f4ff8a06cf124fa68786f.png

图片按钮

  1. <input type="image" name="bt2" src="D:\\resources/image/1.jpg"><!--可以点击提交，相当于submit-->

下拉框：

  1. <p>国家：
  2.     <select name="country">
  3.         <option value="china">中国</option>
  4.         <option value="us">美国</option>
  5.         <!--selected表示默认选中-->
  6.         <option value="ruishi" selected>瑞士</option>
  7.     </select>
  8. </p>

16、文本域和文件域

文本域：

  1. <!--文本域-->
  2. <p>反馈：
  3.     <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
  4. </p>

文件域:

  1. <!--文件域-->
  2. <input type="file" name="files">

17. 搜索框滑块和简单验证

  1. <!--邮件验证-->
  2. <p> 邮箱：
  3.     <input type="email" name="email">
  4. </p>
  6. <p> URL：
  7.     <input type="url" name="url">
  8. </p>
  10. <p> number：
  11.     <input type="number" name="number" max="100" min="0" step="10">
  12. </p>
  14. <!--滑块：-->
  15. <p>音量：
  16.     <input type="range" name="voice" min="0" max="10">
  17. </p>
  19. <!--搜索框-->
  20. <p>搜索：
  21.     <input type="search" name="search">
  22. </p>

18. 表单隐藏域、只读和禁用

  • 隐藏域 hidden
  • 只读 readonly

  • 禁用 disabled



    只读：

    姓名：



    禁用：

    男
    女




    密码：



增强鼠标的可用性：

  1. <p>增强鼠标的可用性：<br>
  2.     <label for="mark">你点我试试！！</label>
  3.     <input type="text" id="mark">
  4. </p>

点击文字，自动跳转到对应的输入框。

8474e7f294b64104871d98434c06680a.png

19、表单验证

思考：

  • 减轻服务器的压力
  • 安全性

常用方式：

  • placeholder 提示信息
  • required 元素不能为空，应用于所有的文本框中

  • pattern 正则表达式



    姓名：



    姓名：



    自定义邮箱：



发表评论

表情：
评论列表 （有 0 条评论，105人围观）

还没有评论，来说两句吧...

相关阅读

    相关 一文读懂DDD

    什么是DDD？ ddd不是一种架构风格，而是一种方法论，什么是方法论，每个人按照自己的想法来设计就是一套方法论；ddd是一种业务比较认可，对于微服务拆分的一种方法论。

    超、凢脫俗超、凢脫俗/ 0 赞/ 273 阅读

    相关 一文读懂DDD

    [一文读懂DDD][DDD] 原文: [一文读懂DDD][DDD 1] 何为DDD DDD不是架构设计方法，不能把每个设计细节具象化，DDD是一套体系，决定了其开放性

    骑猪看日落骑猪看日落/ 0 赞/ 599 阅读

    相关 一文读懂 CDN

    前言 最近在了解边缘计算，发现我们经常听说的CDN也是边缘计算里的一部分。那么说到CDN，好像只知道它中文叫做内容分发网络。那么具体CDN的原理是什么？能够为用户在浏览网站时

    我会带着你远行我会带着你远行/ 0 赞/ 722 阅读