HTML（超文本标记语言）是构建网页和网页应用的基础。
一、页面结构
·
<!--
DOCTYPE 表名 本文档属于html5 标准
每个html 标准 都会收纳对应的标签
声明文档类型和HTML版本
-->
<!DOCTYPE html>
<!--
html 为网页的根标签 嵌套包含所有标签
html 下 有 两种标签 head body
标签 ： <开始 属性> 内容 </结束> 如：<p> 内容 </p>
-->
<html lang="en">
<!--
head 头部信息 网页修饰内容 包含了文档的元数据，比如<title>、<link>、<meta>、<script>和<style>
-->
<head>
<!-- meat 元标签 没有结束标签 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- title 标题 -->
<title>Hello World</title>
</head>
<!--
body 身体标签 用于展示内容 交互
-->
<body>
<!-- 各种基础标签 展示内容 -->
</body>
</html>二、基础标签
① 段落 p 水平分割线 hr
# 水平分割线
<hr>
<p>段落标签。</p> ② 标题 h1~h6 ：定义标题，从<h1>（最重要）到<h6>（最不重要）
<h1> h1标题 </h1>
<h2> h2标题 </h2>
<h3> h3标题 </h3>
<h4> h4标题 </h4>
<h5> h5标题 </h5>
<h6> h6标题 </h6>③ 文本格式化
<p>
普通
<b>粗体</b>
<strong>粗体</strong>
<i>斜体</i>
<em>斜体</em>
<u>下划线</u>
<ins>下划线</ins>
<del>删除线</del>
<sup>上</sup>
<sub>下</sub>
<!-- 换行 -->
<br>
<!-- sub 下标 sup 上标 如：H₂CO₃ 中 2 和 3 为下标 上标则是 如同次方一般在右上角 -->
H<sub>2</sub>CO<sub>3</sub> = 2H<sup>+</sup> + CO3 <sup>2-</sup>
</p>
④ 超链接 a：定义超链接 ，用于从一个页面链接到另一个页面
<!-- href: 链接地址 或 某个标签的 id 值-->
<a href="http://baidu.com">百度</a>
<!-- 跳转本页面的 该id处 做锚点使用 -->
<a href="#s666">锚点666</a>⑤ 图像 img 视频 video 声音 audio
<!-- scr 中为 声音或图片 或视频的地址路径
声音 视频中 属性 controls 控件 用于显示 开始暂停等操作 -->
<h1>声音</h1>
<audio src="audio/fail.mp3" controls></audio>
<h1>视频</h1>
<video src="./video/颈椎操_超清.mp4" controls width="300"></video>
<h1>图片</h1>
<!-- 属性 alt 当图片加载失败时 显示文本信息-->
<img src="./img/1.webp" alt="加载失败" width="200">
<img src="./img/2.webp" alt="加载失败">
⑥块级元素
<!-- div 盒子元素 控制盒子位置 可整体控制 盒子内所有内容 -->
<div style="width: 20px; height: 20px; background-color: antiquewhite;">
<!-- 用于布局的行内元素，用于对文档的一部分进行标记或分组 -->
<span>加油 追梦人</span>
</div>⑦ 表格
<!-- table 定义表格 tr 定义表格中的行 td 定义表格中的列 -->
<table>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
</tr>
</table>⑧ 列表
<!-- 无序列表 li 为列表项 -->
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>⑨ 表单
<!-- form 定义表单 用于收集用户输入 action 提交至哪里 method 提交方式-->
<form action="" method="">
<!-- 定义输入字段，可以有不同的类型，如text、radio单选、checkbox多选 -->
<input type="text">
<!-- button 按钮 提交 -->
<button type="submit">提交</button>具体实例：
<!-- 定义表单的开始，action属性指定了表单提交时数据发送到的URL，method属性定义了提交表单时使用的HTTP方法 -->
<form action="https://httpbin.org/post" method="post">
<!-- 用户名输入区域 -->
<div>
<!-- label标签定义了与input标签的关联，for属性与input的id属性相对应，提高可访问性 -->
<label for="username">用户名:</label>
<!-- input标签定义了文本输入框，required属性表示必须填写，placeholder属性提供了占位符文本 -->
<input id="username" name="username" required placeholder="输入用户名" type="text">
<!-- line break元素，用来换行显示 -->
<br>
<!-- 密码输入框，type为password时，输入内容会被隐藏 -->
<label for="passwd">密码:</label>
<input id='passwd' name="passwd" required placeholder="输入密码" type="password">
</div>
<!-- 性别选择区域，使用radio类型，同一组单选按钮name属性相同 -->
<div>
<span>性别：</span>
<label for="man"> 男 </label>
<!-- checked属性表示该单选按钮被默认选中 -->
<input id="mam" value="男" name="sex" checked type="radio">
<label for="woman"> 女 </label>
<input id="woman" value="女" name="sex" type="radio">
</div>
<!-- 爱好选择区域，使用checkbox类型，允许多选 -->
<div>
<span>爱好：</span>
<!-- 每个checkbox的name相同，但value不同，表示不同的选项 -->
<label for="football">足球</label>
<input checked id="football" name="football" value="足球" type="checkbox">
<label for="basketball">篮球</label>
<input id="basketball" name="basketball" value="篮球" type="checkbox">
<label for="newball">新球</label>
<input id="newball" name="newball" value="新球" type="checkbox">
</div>
<!-- 年龄选择滑块 -->
<div>
<span>年纪：</span>
<!-- range类型定义了滑块控件，min和max定义了范围，step定义了步长 -->
<input name="age" type="range" min="0" max="100" step="1">
</div>
<!-- 颜色选择器 -->
<div>
<span>喜爱颜色：</span>
<!-- color类型定义了颜色选择器 -->
<input name="color" type="color">
</div>
<!-- 文件上传控件 -->
<div>
<span>附件：</span>
<input name="file" type="file">
</div>
<!-- 下拉选择框，用于选择居住地址 -->
<div>
<span>居住地址：</span>
<select name="address">
<!-- option标签定义了下拉列表中的选项 -->
<option value="洛阳">洛阳</option>
<option value="商丘">商丘</option>
<!-- selected属性表示该选项被默认选中 -->
<option selected value="殷墟">殷墟</option>
</select>
</div>
<!-- 多选下拉选择框，用于选择学习的语言 -->
<div>
<span>学习语言：</span>
<select multiple>
<option selected value="python">python</option>
<option value="c++">c++</option>
<option selected value="java">java</option>
</select>
</div>
<!-- 多行文本输入框，用于留言 -->
<div>
<span>留言：</span>
<textarea name="留言" cols="10" rows="3"></textarea>
</div>
<!-- 日期选择器 -->
<div>
<span>日期：</span>
<input name="date" type="date">
</div>
<!-- 时间选择器 -->
<div>
<span>时间：</span>
<input name="time" type="time">
</div>
<!-- 日期和时间选择器 -->
<div>
<input type="datetime-local">
</div>
<!-- 提交和重置按钮 -->
<div>
<!-- submit类型定义了提交按钮，reset类型定义了重置按钮 -->
<button type="submit">提交</button>
<button type="reset">重置</button>
</div>
</form>⑩框架
<!-- 语法 <iframe src="URL"></iframe> -->
<!-- 在本页面 设置一个 宽 width 高 height 的窗口去显示 src 中地址页面 -->
<h1>框架标签</h1>
<iframe src="./2.第一批标签.html" frameborder="0" width="33%"></iframe>
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » html 基础标签
发表评论 取消回复