HTML超文本标记语言详解_超文本标记语言顶层网页元素-CSDN博客

本文链接：https://blog.csdn.net/weixin_44482951/article/details/127385392

HTML超文本标记语言详解

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

现在的开发版本一般为HTML5+CSS3

W3C标准：World Wide Web Consortium(万维网联盟)

结构化标准语言（HTML、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript）

基本结构

<!DOCTYPE html><!--告知使用规范-->
<html lang="en">
<head><!--头部-->
    <meta charset="UTF-8"><!--描述网站的一些信息，可以添加关键词和描述-->
    <title>测试</title><!--网站标题-->
</head>
<body><!--网页主体-->

</body>
</html>

网页基本标签

文本相关：

标题标签：h1-h6 特点: 独占一行, 字体加粗, 自带上下间距

<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>

段落标签：p 特点: 独占一行, 自带上下间距

<!--段落标签-->
有一天晚上，梦一场，你白发苍苍，说带我流浪
<p>有一天晚上，梦一场</p>
<p>你白发苍苍，说带我流浪</p>

换行标签：br

<!--换行标签-->
有一天晚上<br/>
梦一场<br/>
你白发苍苍<br/>
说带我流浪

水平线标签：hr
```

<hr/>
```

字体样式标签：加粗：b；斜体：i；下划线：u；删除线：s

<!--字体样式标签-->
<h1>字体样式标签</h1>
粗体：<b>粗体</b>
斜体：<i>斜体</i>
下划线：<u>下划线</u>
删除线：<s>删除线</s>

列表标签：

无序列表: ul和li

<!--无序列表ul和li-->
<ul>
    <li>这是无序的</li>
    <li>这是无序的</li>
    <li>这是无序的</li>
</ul>

有序列表: ol和li

<!--有序列表ol和li-->
<ol>
    <li>这是有序的</li>
    <li>这是有序的</li>
    <li>这是有序的</li>
</ol>

列表嵌套: 有序列表和无序列表可以任意无限嵌套

<!--嵌套列表-->
<ul>
    <li>
        <ol>
            <li>有序的</li>
            <li>有序的</li>
            <li>有序的</li>
        </ol>
    </li>
    <li>无序</li>
</ul>

图像标签：

src:资源路径
- 相对路径: 访问站内资源
- - 资源和页面同级目录: 直接写文件名
  - 资源在页面的上级目录: …/文件名
  - 资源在页面的下级目录: 文件夹名/文件名
- 绝对路径:访问站外资源时使用, 称为图片盗链, 有找不到图片的风险
alt:当图片不能显示时显示的文本
title: 图片标题
width/height: 设置宽高, 两种赋值方式: 像素和百分比, 只设置宽度时高度会自动等比例缩放

<img src="imgs/北京.jpg" alt="找不到时显示" title="背景" width="200" height="200">

音频和视频：

音频：audio controls：控制条，显示 ; autoplay：自动播放

视频：video

<!--video：添加视频；src：资源路径；controls：控制条，显示；
     autoplay：自动播放-->
<video src="视频.mp4" controls autoplay></video>
<!--audio：音频文件-->
<audio src="06.一念之间--张杰、莫文蔚.mp3" controls autoplay></audio>

超链接：

href: 设置资源路径和图片标签的src属性类似
target:可以设置是打开新网页还是在当前页打开。
a标签包裹文本为文本超链接, 包裹图片为图片超链接

<a href="https://www.baidu.com">百度</a>
<a href="https://www.baidu.com"><img src="imgs/豆腐.jpg" alt=""></a>

锚连接：回到顶部，先在顶部定好锚点，之后使用超连接#加name属性进行操作
```
<a name="top">顶部</a>

<a href="#top">回到顶部</a>
```

表格标签：table

相关标签: table , caption表格标题 ,tr表示行, td表示列, th 表示表头

相关属性: border边框 rowspan跨行 colspan 跨列

<!--表格标签-->
<!--border 表格边框属性-->
<table border="1" >
  <caption>表格标题</caption>
<!--  表头-->
  <th colspan="3"> 这是表头</th>
<!-- tr 行-->
  <tr>
<!-- td 列  ；colspan跨列属性 ；rowspan跨列属性
     需要注意当使用跨行或跨列时需删除对应的行列元素，
     否则元素会发生偏移，并不会覆盖-->
    <td rowspan="3">11</td>
    <td colspan="3">11</td>
  </tr>
  <tr>
    <td>22</td>
    <td>23</td>
  </tr>
  <tr>
    <td>32</td>
    <td>33</td>
  </tr>
</table>

分区标签：块元素和行内元素

分区标签可以理解为一个容器，用来装多个有相关性的标签, 对多个标签进行统一管理

一个页面至少分为3大区: 头体脚 , 每个大区里面有n个小的分区

常见的分区标签:
- div: 块级分区标签, 特点: 独占一行
- span: 行内分区标签, 特点: 共占一行
HTML5版本新增加的几个分区标签,作用和div一样,目的是为了提高代码可读性
- header 头
- main 主体
- footer 脚
- section 区域
- nav 导航
- aside 侧边栏

iframe：内联框架

src：引用页面地址；name：框架标识名；width/height: 设置宽高

内联框架可以和超链接标签进行组合实现页面的跳转

<iframe src="" name="ceshi" frameborder="0" height="100"
        width="100"></iframe>
<a href="视频.mp4" target="ceshi">点击跳转</a>

表单：form

作用: 获取用户输入的各种信息并提交给服务器
两个重要属性：

method：规定如何发送表单数据（get/post）
- get提交方式可以在url中看到我们的提交信息，所以不安全，但是高效
- post提交比较安全，可以传输大文件
action：表示向何处发送表单数据

表单控件：input标签

文本输入框：input标签中的text
密码框：input标签中的password
提交按钮：input标签中的submit
重置按钮：input标签中的reset
单选框：input标签中的radio
多选框：input标签中的checkbox
按钮：input标签中的button
文件域：input标签中的button

<form action="页面.html" method="post">
<!--    文本输入框：input标签中的text-->
    名字：<input type="text" name="name"><br>
<!--    密码框：input标签中的password-->
    密码：<input type="password" name="password"><br>
<!--     单选框：input标签中的radio
    性别：<input type="radio" value="man" name="1">男
       <input type="radio" value="girl" name="1">女
<!--  多选框：checkbox；-->
爱好：<input type="checkbox" value="sleep" name="2">睡觉
       <input type="checkbox" value="eat" name="2">吃饭
       <input type="checkbox" value="play" name="2">游戏
       <input type="checkbox" value="study" name="2">学习
    <br>
<!--  文件域：input标签中的button-->   
    上传文件：<input type="file" name="file">
<!--  按钮：input标签中的button-->
  按钮：<input type="button" name="b1" value="点击提交">
    <p></p>
<!--    提交按钮：submit ；重置按钮：reset-->
    <input type="submit">
    <input type="reset">
  </form>

相关属性：type元素类型；name元素的名称；placeholder占位文本；maxlength最大字符长度；value设置初始值；size表单元素的初始宽度；checked为单选框或多选框时指定按钮是否被选中；hidden隐藏域，无法显示；disabled禁用域；readonly只读；required：文本不能为空；

<form action="表格.html" method="get">
<!--  value：默认初始值；maxlength：最长写几个字符
      size：默认框长度 readonly只读，写上后无法修改元素-->
  名字：<input type="text" name="name" value="默认填充" maxlength="5"
              size="20" placeholder="默认显示"><br>
  密码：<input type="password" name="password"><br>
<!--  radio：单选框  value：单选框的值；
      name：表示组，没有写明是同一组的话单选框会发生多选-->
  性别：<input type="radio" value="man" name="1" checked>男
       <input type="radio" value="girl" name="1">女 <br>
<!--  多选框：checkbox；-->
  爱好：<input type="checkbox" value="sleep" name="2">睡觉
       <input type="checkbox" value="eat" name="2" checked>吃饭
       <input type="checkbox" value="play" name="2">游戏
       <input type="checkbox" value="study" name="2">学习
  <br>
<!--  按钮：input标签中的button-->
  按钮：<input type="button" name="b1" value="点击提交">
<!--  图片按钮：image 看上去是图片，但是可以点击跳转-->
       <input type="image" src="imgs/北京.jpg">
  <p></p>
  <input type="submit">
  <input type="reset">
</form>

下拉框：select selected属性：选中默认值

下拉框：<select name="列表名称" >
            <option value="选项值">选项1</option>
            <option value="选项值">选项2</option>
            <option value="选项值" selected>选项3</option>
            <option value="选项值">选项4</option>
         </select>

文本域：textarea cols：显示多少列； rows：显示多少行

意见反馈：<textarea name="text" id="1" cols="30" rows="10">文本</textarea>

验证：

邮箱验证：email
URL验证：url
数字验证：number
滑块：range
搜索框：search

<!--  邮件验证-->
  邮箱：<input type="email" name="email">
<!--  URL验证-->
  URL：<input type="url" name="url">
<!--  数字验证   max：最大值；min：最小值；step：间隔-->
  数字：<input type="number" name="num" max="100" min="0" step="10">
<!--  滑块-->
  滑块：<input type="range" name="range" max="100" min="0">
<!--  搜索框-->
  搜索：<input type="search" name="search">

锁定：label 可以增强鼠标的可用性，点击文字后可以跳转到框中

//将id绑定后可以实现点击文字后跳转到指定框中
<label for="ceshi">点击后显示</label>
<input type="text" id="ceshi">