• HTML总结

    目录

    基本定义

    HTML

    超文本

    标记

    HTML的功能

    理解： 

    浏览器

    常见浏览器

    浏览器与内核 

    web标准

    网页 

    网页的形成

    web网页的组成成分 

    HTML注释

    HTML标签基本语法

    标签内属性的用法

    HTML标签关系

    HTML结构

    详细结构

    相对路径与绝对路径

    特殊符号

    文本标题标签

    段落标签

    换行标签

    水平线标签

    文本格式标签

    div标签（块级）

    span标签（行级）

    列表标签

    注意：

    自定义列表

    图片标签

    超链接标签

    关于a标签

    锚点

    table表格标签

    表格属性

    行tr(table row)属性

    列td属性

    表格合并

    合并列

    合并行

    表单标签

    表单结构

    提交数据

    input表单控件标签

    input标签清除默认样式

    button按钮

    label标签

    下拉选单

    select支持的属性

    option支持的属性

    文本域

    选项列表

    一些属性 

    readonly与disable属性

    autofocus属性

    required属性

    multiple属性

    pattern属性

    字段集合标签

    语义化标签

    音频标签

    audio属性

    视频标签

    video属性

    内嵌标签

    pre标签

    基本定义

    HTML

    HyperTest Mark-up Language（超文本标记语言），他是一种标识性的语言，非编程语言，不能使用逻辑运算，其可以通过标签将网络上的文档格式进行统一，使分散的网络资源连接成一个逻辑整体（用来描述网页的一种语言）。

    超文本

    页面内可以包含图片，链接，甚至音乐，视频等非文字元素。（一种组织信息的方法，通过超级链接将多种媒介关联起来）

    标记

    标签。用<>包裹的具有某种含义的内容。

    HTML的功能

    • 展示在线文档，其中包括标题、文本、表格、列表、照片等内容
    • 通过超链接检索在线信息
    • 为获取远程服务而获取表单，可用于检索信息、订购商品等
    • 在文档中直接包含点子表格、视频剪辑、声音剪辑以及其他的一些应用

    理解： 

    HTML是一种制作万维网页面的标准语言，他是目前网络上应用的最广泛的语言，也是构成网页文档的主要语言。HTML文件是由HTML命令组成的描述性文字，HTML 命令可以说明文字，图形，动画，声音，表格，链接等。

    浏览器

    常见浏览器

    浏览器与内核 

    浏览器：解释和执行HTML源码的工具

    浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面

    谷歌浏览器内核：Blink

    web标准

    定义：W3C组织和其他标准化组织制定的一系列标准的集合

    W3C：world wide web consortium（万维网联盟）

    网页 

    网页的形成

    1. 网页通过浏览器才能访问阅读
    2. 网页是网站中的一页，网站是网页的集合
    3. 文件扩展名为.html

    web网页的组成成分 

    HTML注释

    格式：<!--注释内容--> 

    HTML标签基本语法

    1. <!-- 双标签（成对出现） -->
    2. <html></html>
    3. <!-- 单标签（自闭标签） -->
    4. <br/>

    注意：标签也称元素 ，标签里面也可以加属性。

    标签内属性的用法

    双标签

    <标签 属性=“属性值” 属性=“属性值”></标签>

    单标签

    <标签 属性=“属性值”/>

    1. <!--宽300px的一条红线，靠左对齐，取消阴影-->
    2. <hr color="red" width="300" align="left" noshade="noshade"/>

    HTML标签关系

    1. 并列关系
    2. 包含关系

    HTML结构

    1. <html>
    2.     <head>
    3.         <title>我是第一个网页</title><!--网页标题-->
    4.     </head>
    5.     <body>
    6.         <center>
    7.             锣声一响，<br/>黄金万两。
    8.         </center>
    9.     </body>
    10. </html>

    详细结构

    1. <!DOCTYPE html><!--声明当前页面采用的是html5的版本来显示网页，放在最前面，其不属于html标签-->
    2. <html lang="en"><!--告诉浏览器其是英文网站-->
    3. <head>
    4.     <!-- meta标签用来描述一个文档的属性eg作者，日期和时间，网页描述，关键词页面刷新等 -->
    5.     <meta charset="UTF-8"><!--告诉浏览器，字符集用的是UTF-8编码，之后浏览器就会按照UTF-8进行解码-->
    6.     <title>Document</title>
    7. </head>
    8. <body>
    9.     网页内容
    10. </body>
    11. </html>

    相对路径与绝对路径

    相对路径：以引用文件所在位置为参考基础而建立出来的目录路径（相对于html文件的位置）

    绝对路径：指目录下的绝对位置，直接到达目标位置，通常从盘符开始

    相对路径

    • 同一级：./a.html
    • 上一级：../a.html
    • 下一级：/a.html 

    特殊符号

    字符字符表示
    空格&nbsp;(间隔受字体影响）或&emsp;（一个汉字间隔）
    >&gt;
    <&lt;
    &&amp;
    ￥&yen;
    版权&copy;（圆圈里C）
    商标&reg;（圆圈里R）或&trade;（右上角TM）
    度°&deg;
    乘号&times;
    除号&divide;
    平方&sup2;
    三次方&sup3;
    加号&plus;
    减号&minus;
    加减号&plusmn;

    文本标题标签

    内容：<h1></h1>（双标签）

    标签语义：作为标题使用，并根据重要性依次递减

    标题一共六级选，文字加粗一行显，由大到小依次减，从重到轻随之变，语法规范书写后，具体效果刷新见。

    1. <body>
    2.     <center><!--居中标签-->
    3.     <h1>我是一级标题</h1>
    4.     <h2>我是二级标题</h2>
    5.     </center>
    6. </body>

    段落标签

    内容：<p></p>

    标签语义：可以把html文档分成多个段落

    特点：文本在一个段落中会根据浏览器窗口大小自动换行

    注意：段落与段落之间会有一个大小的空隙

    换行标签

    内容：<br/>

    标签语义：强制换行

    水平线标签

    内容：<hr/>

    标签语义：画一条水平线

    文本格式标签

    标签语义：突出文字重要性

    标签意义标签内容
    文字加粗<strong></strong>或<b></b>
    文字倾斜<em></em>或<i></i>
    删除线<del></del>或<s></s>
    下划线<ins></ins>或<u></u>
    上标<sup></sup>
    下标<sub></sub>

    div标签（块级）

    division：分割分区

    标签没有具体的语义，用来划分页面区域，其独占一行

    span标签（行级）

    标签没有具体的语义，可以一行显示

    列表标签

    注意：

    1. 有序列表的1，2，3等是自动生成的（type决定数字属性）
    2. 有序列表的type的值：1,a,A,i,I
    3. 有序列表的start表示从哪开始，取值只能是数字
    4. 有序列表与无序列表里面只能放li，li里面可以放其他标签
    5. 无序列表的type值：disc（实心圆-默认），circle（空心圆），none（什么都没有），square（方形）

    自定义列表

    1. <!-- 一个dl一个整体样式 -->
    2.     <dl>
    3.         <dt>这是图片1</dt>
    4.         <dd>这是文字1</dd>
    5.     </dl>
    6.     <dl>
    7.         <dt>这是图片2</dt>
    8.         <dd>这是文字2</dd>
    9.     </dl>

    图片标签

    内容：<img src="图像URL"/>

    注意：src为图片标签的必须属性，他用于指定图像文件路径和文件名

    img标签属性
    属性名属性值说明
    src图片路径必须属性
    alt文本图像不能显示就用文字替代
    title文本提示文本，鼠标放到图片上显示的文字
    width像素设置图像宽度
    height像素设置图像高度
    border像素设置图像边框粗细

    超链接标签

    功能：能够实现不同页面的跳转

    内容：<a href="跳转目标" target="目标窗口弹出方式">文本或图片</a>

    target属性：规定在何处打开

    • target="_self”为默认值（在当前页面打开）
    • target="_blank"（在新窗口打开）

    关于a标签

    1. 外部链接：跳转目标=url
    2. 内部链接：跳转目标=xxx.html（会用到相对引用）
    3. 空链接：跳转目标=#
    4. 下载链接：若跳转目标为一个文件或压缩包地址，则会下载这个文件
    5. 网页元素链接：图片、音频等地址
    6. 锚点链接：点击链接可以定位到页面中的某个位置（跳转目标=#名字 要跳转的地方加id标签/a标签的name属性）

    锚点

    1. <body>
    2.     <div class="box1" id="a">我是首页</div>
    3.     <div class="box2">我是内容</div>
    4.     <a href="#a">点击跳到首页</a>
    5. </body>
    6. <style>
    7.    div{
    8.     width: 1000px;
    9.     height: 1000px;
    10.    }
    11.    .box1{
    12.     background: yellow;
    13.    }
    14.    .box2{
    15.     background: rgb(222, 12, 135);
    16.    }
    17. </style>

    点击a标签后就会跳到box1所在的位置

    table表格标签

    1.     <!--创建2行3列的表格-->
    2.     <table>
    3.         <tr><!-- 行 -->
    4.             <td>1</td><!-- 列 -->
    5.             <td>1</td>
    6.             <td>1</td>
    7.         </tr>
    8.         <tr>
    9.             <td>2</td>
    10.             <td>2</td>
    11.             <td>2</td>
    12.         </tr>
    13.     </table>

    注意：table里面只能放tr标签，tr里面只能放td标签，td里面是我们自由活动的区域

    th标签：与td相似，表示td里面的内容文本加粗并居中

    表格属性

    属性名属性属性值
    宽度width像素
    高度height像素
    边框border像素
    边框颜色bordercolor色彩
    背景颜色bgcolor色彩
    水平对齐alignleft/right/center
    单元格与单元格之间间距cellspacing像素
    单元格与内容之间的空隙cellpadding像素

    注意：宽度和高度属性值也可以以百分比形式，其是相对于父元素的宽度百分比

    行tr(table row)属性

    属性名属性属性值
    高度height像素
    背景颜色bgcolor颜色
    文字水平对齐alignleft/right/center
    文字垂直对齐valigntop/middle/bottom

    列td属性

    属性名属性属性值
    宽度width像素
    高度height像素
    背景颜色bgcolor颜色
    文字水平对齐alignleft/right/center
    文字垂直对齐valigntop/middle/bottom

    注意：td的高度属性若改变则整个行的高度属性跟着改变

    表格合并

    合并列

    colspan="所要合并单元格的列数"必须加给td

    合并行

    rowspan="所要合并单元格的行数"必须加给td

    表单标签

    表单作用：收集用户信息

    表单结构

    <form method="get/post" action="向何处发送表单数据">

    <input/>

    1.属性type定义输入框类型

    2.属性placeholder描述输入字段预期值的简短提示信息。

    3.属性name必须设置，否则在提交表单时，用户在其输入的数据不会发送给服务器

    4.属性value值

    </form>

    注意：method属性不写默认为get，action为将数据发送到的目的地 

    提交数据

    • 必须用表单标签
    • 必须有提交submit按钮
    • 必须设置name属性
    • 提交数据都在？之后，多个值用&连接

    input表单控件标签

    1. 文本框：<input type="text"/>
    2.  
    3. 密码框：<input type="password"/>
    4.  
    5. 单选框：<input type="radio" name="sex"/>男<input type="radio" name="sex"/>女
    6.  
    7. 单选框只有name相同时才能实现多选1，同时，默认选中状态checked="checked"/checked，如果默认选中多个则只有最后一个生效
    8.  
    9. 数字值：<input type="number"/>
    10.  
    11. 日历（周）：<input type="week"/>
    12.  
    13. 复选框：<input type="checkbox" name="sport"/>网球<input type="checkbox" name="sport" checked/>足球
    14. 默认选中的是足球，可以默认选中多个
    15.  
    16. 按钮：<input type="button" value="点我"/>
    17.  
    18. 提交数据：<input type="submit" value="提交"/>
    19.  
    20. 清空数据：<input type="reset" value="清空"/>
    21.  
    22. 文件选择：<input type="file" value="选择文件"/>
    23.  
    24. 颜色选择框：<input type="color" name="color">
    25.  
    26. multiple为可以填写多个邮箱地址，中间用，隔开
    27. 邮箱输入框：<input type="email" name="email" multiple>
    28.  
    29. url输入框：<input type="url" name="url">
    30.  
    31. 电话输入框：<input type="tel" name="tel">
    32.  
    33. min和max是设置滑块区间，value代表滑块的默认位置，step代表滑块的步长
    34. 滑块效果：<input type="range" name="range" min="100" max="200" value="100" step="10">
    35.  
    36. 数字输入框：<input type="number" name="number" min="0" max="10" value="6" step="2">
    37.  
    38. 搜索输入框：<input type="search" name="search">
    39.  
    40. 日期选择框：<input type="date" name="date"><!-- 月：month，周：week -->
    41.  
    42. 时间选择框：<input type="datetime-local" name="datetime">
    43.  
    44. 直接将a=“message”传递给后端，用户看不见此按钮
    45. 隐藏选择框：<input type="hidden" name="a" value="message">
    46.  
    47. 用图片代替提交的按钮——点击图片就可以提交数据
    48. 图片提交按钮：<input type="image" src="2.png"/>

    input标签清除默认样式

    1. <body>
    2. <input type="text">
    3. </body>
    4. <style>
    5.    input{
    6.     /* 清除默认样式，外边线 */
    7.     outline: none;
    8.    }
    9. </style>

    button按钮

       <!-- 普通按钮 -->

       <input type="button" value="点我"/>

       <button type="button">点我</button>

       <!-- 提交按钮 -->

       <input type="submit" value="提交"/>

       <button type="submit">提交</button>

       <!-- 清空按钮 -->

       <input type="reset" value="清空"/>

       <button type="reset">清空</button>

    label标签

    功能：可以实现点击文字就能实现选中与取消（在表单外部也可以用）

    <label for="male">男</label>

     <input type="radio" id="male"/>

    注意：for规定绑定的元素（必须是id属性）

    <label>点我获取焦点

    <input type="text"/>

    </label>

    注意：文字写在label标签里面就行，也可以写在input标签后面

    下拉选单

    select支持的属性

    • size：控制要显示几个，只能选1个
    • multiple：按住shift可多选
    • name：提供给后端的属性名
    1.         <select size="2" multiple name="option">
    2.             <option value="1">选项1</option>
    3.             <option selected="selected" value="2">选项2</option><!-- 默认选中 -->
    4.             <option value="3">选项3</option>
    5.             <option value="4">选项4</option>
    6.             <option value="5">选项5</option>
    7.         </select>

    option支持的属性

    value：提供给后端需要用到的value

    selected：默认选中状态，没有multiple还选多个的话则只能默认选最后一个

    文本域

    <textarea>请输入您的信息</textarea>

    里面可以加placeholder属性

    1. <body>
    2.     <div>
    3.         <textarea placeholder="请输入您的意见" name="text" cols="10px" rows="10px">这里放value值</textarea>
    4.     </div>
    5. </body>
    6. <style>
    7.     textarea{
    8.         /* 与上面的cols、rows具有同样作用 */
    9.         width: 300px;
    10.         height: 300px;
    11.         /* 重置大小属性 */
    12.         resize: vertical;
    13.         /* vertical只允许在垂直情况下拉伸，horizontal只允许在水平情况下拉伸，both为默认值表示两个方向都可拉伸，none表示两个方向都不可拉伸 */
    14.     }
    15. </style>

    注意：value值必须放到双标签内部

    选项列表

    datalist标签

    1. <body>
    2.     <!-- 输入字会从mylist里面进行模糊搜索 -->
    3.     <input type="text" list="mylist">
    4.     <datalist id="mylist">
    5.         <option value="手机"></option>
    6.         <option value="手表"></option>
    7.         <option value="手环"></option>
    8.         <option value="手镯"></option>
    9.     </datalist>
    10. </body>

    一些属性 

    readonly与disable属性

    <input type="text" name="a" value="带给后端的个人信息" readonly>

    <input type="button" value="提交" disabled/>

    readonly：只读，一般表示用于文字内容只读，但对于非文字属性没有任何影响

    disable：禁用，被此属性修饰，不管什么内容都是无效的

    autofocus属性

    给文本框、选择框、或者按钮加上该属性，当页面打开时，该控件自动获得国际焦点，一个页面只能有一个

    <input type="text" autofocus>

    注意：如果加多个，则只有第一个生效

    required属性

    被required修饰的框为必填项

    multiple属性

    可以输入一个或多个值，每个值之间用，隔开

    pattern属性

    属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式

    输入内容：一个数与3个大写字母

    <input pattern="[0-9][A-Z]{3}" title="输入内容：一个数与3个大写字母" placeholder="请输入内容"/>

    字段集合标签

    1. <body>
    2.    <fieldset><!-- 字段集合标签 -->
    3.     <legend>性别</legend><!-- 内容 -->
    4.     <input type="text">男<br>
    5.     <input type="text">女
    6.    </fieldset>
    7. </body>
    8. <style>
    9.    fieldset{
    10.     width: 300px;
    11.     height: 100px;
    12.    }
    13.    legend{
    14.     border: 1px solid red;
    15.     text-align: center;
    16.    }
    17. </style>

    语义化标签

     

    音频标签

    <audio src="音频.mp3" controls loop></audio>

    audio属性

    • src：后面接音频地址
    • controls：音频控制条
    • loop：音频循环播放
    • autoplay：自动播放属性
    • muted：静音播放

    注意：支持mp3格式  

    视频标签

    <video src="视频.mp4" controls loop autoplay muted poster="图片.jpg"></video>

    video属性

    • src：后面接视频地址
    • controls：视频控制条
    • loop：视频循环播放
    • autoplay：自动播放属性
    • muted：静音播放
    • poster：设置属性海报
    • width：设置宽
    • height：设置高

    注意：支持mp4格式 

    内嵌标签

    内容：<iframe src="url"></iframe>

    <a href="https://www.bilibili.com/" target="my">点我以内嵌页面形式跳转</a>

    <iframe id="a" name="my"></iframe>

    注意：因为target属性匹配了内嵌页面的name属性，所以在点击链接后，跳转结果将显示在内嵌页面中

    pre标签

    预格式化文本：<pre>内容</pre>

    作用：会直接保留文档中的空格、tab、回车（就是在pre里写啥就在网页上显示啥）

    1. <body>
    2.     <pre>
    3.         hello world!
    4.         换行后  tab后
    5.     </pre>
    6. </body>

  • 相关阅读:
    IF，AND，OR 或嵌套 IF &在 Excel 中不是逻辑函数
    OpenAI 重磅发布GPT 4o！可以视频聊天的AI？
    如何将一个字符串转换为驼峰命名法（camel case）？
    数字孪生10个技术栈：数据清洗-数据的洗衣机
    分布式与微服务概念
    和数项目成功入选“2022城市数字化转型优秀案例”
    swiper第一个、最后一个滑块按钮disabled时（.swiper-button-disabled），点击触发下层点击事件的问题
    20条心灵鸡汤唯美句子，句句温情暖心！
    SpringMVC项目响应
    MySQL学习笔记（十四）索引失效有哪些情况？
  • 原文地址：https://blog.csdn.net/m0_60027772/article/details/125439249