html 基础标签

HTML(超文本标记语言)是构建网页和网页应用的基础。

一、页面结构

·

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

html 复制代码
# 水平分割线
<hr>


<p>段落标签。</p>

② 标题 h1~h6 :定义标题,从<h1>(最重要)到<h6>(最不重要)

html 复制代码
    <h1> h1标题 </h1>
    <h2> h2标题 </h2>
    <h3> h3标题 </h3>
    <h4> h4标题 </h4>
    <h5> h5标题 </h5>
    <h6> h6标题 </h6>

③ 文本格式化

html 复制代码
    <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> &nbsp;=&nbsp; 2H<sup>+</sup> + CO3 <sup>2-</sup>
    </p>

④ 超链接 a:定义超链接 ,用于从一个页面链接到另一个页面

html 复制代码
        <!-- href: 链接地址 或 某个标签的 id 值-->
        <a href="http://baidu.com">百度</a>
        <!-- 跳转本页面的 该id处 做锚点使用 -->
        <a href="#s666">锚点666</a>

⑤ 图像 img 视频 video 声音 audio

html 复制代码
    <!-- 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="加载失败">

⑥块级元素

html 复制代码
    <!-- div 盒子元素 控制盒子位置 可整体控制 盒子内所有内容 -->
    <div style="width: 20px; height: 20px; background-color: antiquewhite;">
        <!-- 用于布局的行内元素,用于对文档的一部分进行标记或分组 -->
        <span>加油 追梦人</span>
    </div>

⑦ 表格

html 复制代码
<!-- table 定义表格 tr 定义表格中的行 td 定义表格中的列 -->
    <table>
        <tr>
          <th>表头1</th>
          <th>表头2</th>
        </tr>
        <tr>
          <td>数据1</td>
          <td>数据2</td>
        </tr>
      </table>

⑧ 列表

html 复制代码
 <!-- 无序列表  li 为列表项 -->
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
    </ul>
    <!-- 有序列表 -->
    <ol>
        <li>第一项</li>
        <li>第二项</li>
    </ol>

⑨ 表单

html 复制代码
<!-- form 定义表单 用于收集用户输入 action 提交至哪里 method 提交方式-->
   <form action="" method="">
    <!--  定义输入字段,可以有不同的类型,如text、radio单选、checkbox多选 -->
    <input type="text">
    <!-- button 按钮 提交 -->
    <button type="submit">提交</button>

具体实例:

html 复制代码
<!-- 定义表单的开始,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>

⑩框架

html 复制代码
<!-- 语法 <iframe src="URL"></iframe> -->


<!-- 在本页面 设置一个 宽 width 高 height 的窗口去显示 src 中地址页面 -->
    <h1>框架标签</h1>
    <iframe src="./2.第一批标签.html" frameborder="0" width="33%"></iframe>
相关推荐
理想不理想v20 分钟前
vue经典前端面试题
前端·javascript·vue.js
不收藏找不到我21 分钟前
浏览器交互事件汇总
前端·交互
YBN娜35 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=35 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
minDuck39 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
小政爱学习!1 小时前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。1 小时前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼1 小时前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k09331 小时前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang13582 小时前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端