HTML

HTML 定义

HTML 是一种超文本标记语言，标记就是标签，大多数标签都是成对存在的
是网页的框架

结构代码

<!DOCTYPE html>
<!--文档类型声明-->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!--字符集，单标签-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 如果浏览器是ie的话使用ie内核的最高版本 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 移动端显示当前页面时,不缩放 -->
    <title>网页标题</title>
  </head>
  <body>
    网页显示的内容
  </body>
</html>

常用的标签

双标签

<h1></h1>
<div></div>
<p></p>
<header></header> 头
<footer></header> 尾
<nav></nav> 导航
<article></article> 文章
<section></section> 区域
<aside></aside> 侧边栏
<ruby><span>文字</span><rt>wenzi</rt></ruby>
<mark>标记</mark>

单标签

<br />
<img src="images/pic.jpg" alt="图片" />
<hr />

带属性的标签

<img src="images/pic.jpg" alt="图片" />
<a href="https://www.baidu.com">baidu</a>

嵌套标签
<div>
  <img src="images/pic.jpg" alt="图片" />
  <a href="https://www.baidu.com">baidu</a>
</div>

状态标签
<meter
  max="100"
  最大值
  ,
  min="0"
  最小值
  ,
  value="90"
  当前值
  ,
  low="20"
  低值区间
  ,
  hight="80"
  高值区间
  ,
  optimun="90"
  最优值
></meter>
测量值 <progress></progress> 进度条

列表标签

无序
<ul>
  <li>无</li>
  <li>序</li>
  <li>标</li>
  <li>签</li>
</ul>

有序
<ol>
  <li>有</li>
  <li>序</li>
  <li>标</li>
  <li>签</li>
</ol>

提示列表
<form action="#">
  <input type="text" list="mydata" />
  <button>搜索</button>
</form>
<datalist id="mydata">
  <option value="1" label="1"></option>
  <option value="2" label="2"></option>
  <option value="3" label="3"></option>
</datalist>

解释列表
<details>
  <summary>你好</summary>
  <p>哈气</p>
</details>

表格标签

<table style="border: 1px solid red">
  <tr>
    <!--表格中的一行-->
    <th></th>
    <!--表头-->
    <th></th>
  </tr>
  <tr>
    <td></td>
    <!--表列-->
    <td></td>
  </tr>
</table>

表单标签

<form>标签,表示表单标签,定义整体的表单区域.
1. action= 属性，提交表单的地址
2. novalidate= 属性，不进行表单验证
<label>标签,表示表单元素的文字标注标签,定义文字标注
<input>标签,表示表单元素的用户输入标签,定义不同类型的用户输入数据的方式
1. type= 属性
  1. "text"定义单行文本输入框
  2. "password"定义密码输入框
  3. "radio"定义单选框，name 要设置相同，value 要对应写入
  4. "checkbox"定义复选框，name 要设置相同，value 要对应写入
  5. "file"定义上传文件
  6. "submit"定义提交按钮
  7. "reset"定义重置按钮
  8. "button"定义一个普通按钮
  9. "other"定义文本框
  10. "email"定义邮箱
  11. "url"定义网址
  12. "number"定义数字，max=最大，min=最小，step=步长，开启 required
  13. "search"定义搜素
  14. "tel"定义电话号码，用于手机端
  15. "range"定义范围，max=最大，min=最小
  16. "color"定义颜色
  17. "date"定义日期
  18. "month"定义月份
  19. "week"定义周
  20. "time"定义时间
  21. "datetime-local"定义本地日期时间
  22. "hidden"定义隐藏域
2. placeholder= 属性，提示信息
3. required 属性，必填项
4. autofocus 属性，自动获取焦点，先写的标签先获取
5. autocomplete= 属性，自动补全，on/off
6. pattern= 属性，正则表达式，验证输入内容，要和 required 一起使用
<textarea>标签,表示表单元素的多行文本输入框标签,定义多行文本输入
<select>标签,表示表单元素的下拉列表标签,定义下拉列表
1. <option>标签与<select>标签配合,定义下拉列表中的选项

实例

<form action="https://www.baidu.com" method="get">
  <p>
    <label>账号:</label>
    <input type="text" name="username" />
    <label>密码</label>
    <input type="password" name="password" />
  </p>
  <p>
    <label>性别</label>
    <input type="radio" name="gender" value="0" />男
    <input type="radio" name="gender" value="1" />女
  </p>
  <p>
    <label>爱好</label>
    <input type="checkbox" name="like" value="football" />足球
    <input type="checkbox" name="like" value="basketball" />篮球
    <input type="checkbox" name="like" value="volleyball" />排球
  </p>
  <p>
    <label>照片</label>
    <input type="file" name="person_pic" />
  </p>
  <p>
    <label>籍贯</label>
    <select name="site">
      <option value="0">北京</option>
      <option value="1">上海</option>
      <option value="2">广州</option>
      <option value="3">深圳</option>
    </select>
  </p>
  <p>
    <label>备注</label>
    <textarea name="info"></textarea>
    <!--文本域-->
  </p>
  <p>
    <input type="submit" name="" value="注册" />
    <input type="reset" name="" value="重置" />
    <input type="button" value="ok" onclick="alert('ok')" />
  </p>
  <p><input type="hidden" name="from" value="123" />隐藏属性</p>
</form>

视频标签

<video src="video/1.mp4" controls autoplay muted loop></video>

controls 进度条
autoplay 自动播放，自动播放必须静音
muted 静音
loop 循环播放
poster 视频封面，视频加载时显示的图片
preload 预加载，auto/none/metadata

音频标签

<audio src="audio/1.mp3" controls autoplay muted loop></audio>

controls 进度条
autoplay 自动播放，自动播放必须静音
muted 静音
loop 循环播放
preload 预加载，auto/none/metadata

iframe 标签

<iframe
  src="https://www.baidu.com"
  frameborder="0"
  width="100%"
  height="500px"
></iframe>

判断浏览器

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="render" content="weblit" />
<!--[if lt ie 9]>
  <script src="html5shiv.min.js"></script>
<![endif]-->

posted @ 2025-03-27 13:10 *--_- 阅读(17) 评论(0) 收藏举报

刷新页面返回顶部

ELM