当前位置: 首页 > news >正文

HTML详解

目录
  • 初识HTML
      • 什么是HTML
      • W3C标准
      • HTML基本结构
      • 网页基本标签
      • 图像标签
      • 链接标签
      • 块元素和行内元素
      • 列表
      • 表格
      • 视频和音频
      • iframe内联框架
      • 表单语法
        • 单选框
        • 多选框
        • 按钮
        • 下拉框
        • 文本域
        • 文件域
        • 其他验证
        • 表单的应用
      • 表单的初级验证

初识HTML

什么是HTML

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

W3C标准

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

HTML基本结构

<!DOCTYPE html>                   <!--告诉浏览器,我们要使用什么规范 -->
<html lang="en">
<head>							  <!--head标签代表网页头部 --><meta charset="UTF-8"><title>Title</title>
</head>
<body>						      <!--body标签代表网页主体 -->
<p>我的第一个网页</p></body>
</html>

网页基本标签

  • 标题标签

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

    <p>我是SBC</p>
    
  • 换行标签

    我是SBC<br/>
    
  • 水平线标签

    <hr/>
    
  • 字体样式标签

    粗体:<strong>I Love You</strong>
    斜体:<em>I Love You</em>
    
  • 注释和特殊符号

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

图像标签

常见图像格式:

  • JPG
  • GIF
  • PNG
  • BMP
  • ...
<img src="../resources/img/1.jpg" alt="text" title="悬停文字" width="200" height="300">

链接标签

  • 页面间链接
<!-- a 标签
href:必填;表示要跳转哪个界面
target:表示窗口在哪打开_blank  在新网页中打开_self   在自己网页中打开
--><a href="我的第一个网页.html" target="_blank">点我跳转</a>
<!--图片跳转-->
<a href="我的第一个网页.html"><img src="../resources/img/1.jpg" alt="text" height="300" width="300">
</a>
  • 锚链接
<a name="top">顶部</a>
.
.
.
<a href="#top">回到顶部</a>
  • 功能性链接
<!--功能性链接
邮件链接:mailto-->
<a href="mailto:2416671931@qq.com">点击联系我</a>

块元素和行内元素

  • 块元素
    • 无论内容多少,该元素独占一行
    • (p、h1-h6...)
  • 行内元素
    • 内容撑开宽度,左右都是行内元素的可以在排在一行
    • (a、strong、em ...)

列表

  • 什么是列表

    • 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化,并以列表的样式展示出来,以方便浏览者能更快捷地获得相应信息
  • 列表的分类

    • 无序列表

      <!--无序列表-->
      <ul><li>数学</li><li>语文</li><li>英语</li><li>C语言</li><li>政治</li>
      </ul>
      
    • 有序列表

      <!--有序标签-->
      <ol><li>数学</li><li>语文</li><li>英语</li><li>C语言</li><li>政治</li>
      </ol>
      
    • 自定义列表

      <!--自定义列表-->
      <!--    dl:标签dt:列表名称dd:列表内容
      -->
      <dl><dt>学科</dt><dd>语文</dd><dd>数学</dd><dd>英语</dd><dd>政治</dd><dd>C语言</dd>
      </dl>
      

表格

<!--table 表格行 tr 列 td-->
<table border="1px"width="500"><tr><!--  colspan:跨列--><td colspan="3">1-1</td><td>1-2</td></tr><tr><!--  rowspan 跨行  --><td rowspan="2">2-1</td><td>2-2</td><td>2-3</td><td>2-4</td></tr><tr><td>3-1</td><td>3-2</td><td>3-3</td></tr><tr><td>4-1</td><td>4-2</td><td>4-3</td><td>4-4</td></tr>
</table>

视频和音频

  • 视频元素

    • video
  • 音频元素

    • audio
<!--
src:资源路径
controls:控制条
autoplay:自动播放
-->
<audio src="../resources/audio/2.mp3" controls autoplay></audio>
<video src="../resources/video/1.mp4" controls autoplay></video>

iframe内联框架

<iframe src="http://www.baidu.com" frameborder="0" width="1200px" height="600px"></iframe>

或者

<iframe src=""name="hello" frameborder="0" width="1200px" height="600px"></iframe>
<a href="http://www.baidu.com"target="hello">点我跳转</a>

表单语法

<!--表单form
action:表单提交的位置,可以是网站,也可以是一个请求处理地址
method:post,get提交方式get方式提交:我们可以在url中看到我们提交的信息,不安全,高效post:比较安全,可以传输大文件-->
<form action="我的第一个网页.html" method="get">	
<p>名字:<input type="text" name="User"></p>
<p>密码:<input type="password" name="Pwd"></p><p><input type="submit"><input type="reset"></p>
单选框
<!--    单选框标签
input type="radio"
value:单选框的值
name:表示组
checked:默认选中
--><p>性别:<input type="radio" value="boy" name="sex" checked>男<input type="radio" value="girl" name="sex">女</p>
多选框
<!--  多选框标签
input type="checkbox"
checked:默认选中
--><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">游戏</p>
按钮
<!--    按钮
input type="button"   普通按钮
input type="image"     图像按钮
input type="submit"    提交按钮
input type="reset"     重置按钮
--><p>按钮:<input type="button" value="点击" name="btn1"><input type="image" src="../resources/img/1.jpg"></p>
下拉框
<!--    下拉框,列表框
selected:默认选中
--><p>国家:<select name="列表名称"><option value="选项中的值">中国</option><option value="选项中的值">美国</option><option value="选项中的值" selected>印度</option><option value="选项中的值">日本</option></select></p>
文本域
<!--    文本域--><p>反馈:<textarea name="textarea" cols="50" rows="10">文本内容</textarea></p>
文件域
<!--    文件域--><p><input type="file" name="files" id=""><input type="button" value="上传" name="upload"></p>
其他验证
<!--    邮件验证--><p>邮箱:<input type="email" name="email"></p>
<!--	URL验证--><p>URL:<input type="url" name="url"></p>
<!--    数字验证--><p>数字:<input type="number" name="number" max="100" min="0" step="10"></p>
<!--    滑块--><p><input  type="range" name="voice" min="0" max="100" step="2"></p>
<!--    搜索框--><p><input type="search" name="search"></p>
表单的应用
  • 隐藏域 hidden
  • 只读 readonly
  • 禁用 disabled

表单的初级验证

常用方式

  • placeholder(提示信息)

    <p>名字:<input type="text" name="User"placeholder="请输入姓名"></p>
    
  • required(非空判断)

  • pattern(正则表达式)

    参考网址:正则表达式速查表_脚本之家

http://www.hskmm.com/?act=detail&tid=37212

相关文章:

  • 自我成长 - 木易
  • DeepSeek OCR:10倍文档压缩,97%准确率,让你的 LLM 读得更快、更省
  • 10.23 Session、Cookie、Token的核心区别;Cookie和缓存(Cache)的区别
  • MyEMS 核心功能拆解:数据采集、能耗分析、智能调控如何落地?
  • 有了 MCP,为啥 Claude 还要推出 Skills?一文带你搞懂它到底强在哪? MCP 有啥区别、该怎么用!
  • 批量跑脚本后自定义消息内容发送至钉钉--批量跑脚本
  • 赋能未来测试英才:“测吧”一站式实训平台,为高校软件测试教学按下“加速键”
  • ​FAQ: 如何在 WPF 项目中强制指定统一输出目录并确保 VS 调试正常? - 教程
  • 10 23
  • 2025 年锚固剂生产厂家最新推荐排行榜:锚杆 / 矿用 / 树脂锚固剂实力企业深度解析
  • 2025年10月留香沐浴露推荐:五强口碑榜对比评测
  • 已经设置过 settings.json,但是运行 claude 时,依旧提示 Missing API key Run /login
  • drools 规则引擎在线化配置
  • 2025年10月中国宝宝辅食品牌推荐榜:妈妈口碑对比榜
  • 小白指南(六)——在线安装minio存储系统(Linux版通用)
  • 欧拉图笔记
  • 2025年10月浦东装修公司推荐榜:五强排名深度评测 2025年10月浦东装修公司榜:五强对比与选择指南
  • 2025 年真空泵维修厂家最新推荐榜:覆盖宁波杭州金华绍兴等城市优质厂家,全方位解析核心竞争力助企业精准选型
  • 2025年10月抗老面霜推荐榜:五款口碑单品深度对比评测
  • 2025 年国内挤塑板厂家最新推荐排行榜:聚焦优质企业,助力建筑保温材料精准选购聚苯乙烯/聚乙烯/广东/优质/高密度挤塑板厂家推荐
  • 2025年法兰保护罩厂家推荐排行榜,阀门保温罩,法兰罩,法兰防溅罩,法兰保护套源头厂家专业实力解析
  • 2025年滑石粉厂家推荐排行榜,纳米级滑石粉,工业级滑石粉,黑色滑石粉,高白滑石粉,化妆品级滑石粉,食品级滑石粉,表面改性滑石粉,大片径比滑石粉,低收缩率滑石粉,高填充母粒滑石粉厂家推荐
  • 北京房产纠纷律师服务口碑榜:专业能力与胜诉案例深度评估
  • 2025年10月汽车衡厂家推荐排行榜:重庆赛宁特全维度评测
  • 【高录用、见刊快】2025年教育技术与管理信息系统国际学术会议(ETMIS 2025)
  • 2025年10月北京医疗器械许可证办理公司排行榜:小目标企业全程护航
  • 2025 年氧化钙厂家最新推荐榜:综合实力、地理优势与产品特色全景盘点,优选标杆企业
  • 2025年10月抖音代理商推荐榜:华南五强对比与口碑评价
  • 2025年10月投资纠纷律师推荐:权威榜单对比评测与避坑指南
  • 2025年浅拾(RIOSHINE)兰花双萃致臻精华油:权威深度解析其水油同补科技