• HTML知识小结

    目录

    HTML介绍

    1. HTML超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
    • 实例
    DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页的标题title>
head>
<body>
    <h1>标题h1>
    <p>段落p>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    2.HTML 、CSS 、JavaScript三者之间的关系

    • HTML用于承载网页的内容（文本、图片、语音、视频）主体
    • CSS用于实现网页内容的装饰（字体、颜色、布局）修饰
    • JavaScript用于实现网页内容的特效（交互、弹出、滑动）行为

    HTML标签

    1.html标签属性

    • 图示
      在这里插入图片描述
    • 属性的注意点
    • 标签的属性写在开始标签内部
    • 标签上可以同时存在多个属性
    • 属性之间以空格隔开
    • 标签名与属性之间必须以空格隔开
    • 属性之间没有顺序之分

    2.竖排标签

    • 标题标签,独占一行。

    • 世界，你好！

    • 代码效果
      在这里插入图片描述

    • 代码效果
      在这里插入图片描述

    • 段落标签，独占一行。


    • 换行标签，只是简单地开始新的一行，而当浏览器遇到

      标签时，通常会在相邻的段落之间插入一些垂直的间距。

    •  原样输出

    • 水平线

    • 代码效果
      在这里插入图片描述
      在这里插入图片描述

    3.文本格式化标签

    • 加粗
    • 下划线
    • 文字倾斜
    • 加删除线
    • 代码效果
      在这里插入图片描述

    4.媒体标签

    • 图片标签：在网页中显示图片

    • 图片不存在时显示的文字

    • src:图片路径指——图片链接或本地图片的绝对路径和相对路径（.当前目录..上一级目录）

    • alt:图片加载失败时，当光标移到图片上时会显示的文本

    • 音频标签

    • src：音频的路径

    • controls：显示播放的控件

    • autoplay：自动播放

    • loop：循环播放

    • 代码效果
      在这里插入图片描述

    • 视频标签

    • 代码效果
      在这里插入图片描述

    5.超链接标签

    6.列表标签

    • 无序列表（常用于导航）
    • 场景：在网页中表示一组无顺序之分的列表，如：新闻列表。
    • ul: 表示无序列表整体，用来包裹li标签
    • li: 表示无序列表的每一项,用于包含每一行的内容
    • 显示特点:列表的每一项前，默认显示圆点标识
      不同的项目符号
      disc 实心小圆点
      Circle 空心小圆圈
      Square 正方形
                   <ul>
                    <li>乐观开朗li>
                    <li>积极向上的态度li>
                    <li>好好学习li>
                ul>

    • 1
    • 2
    • 3
    • 4
    • 5

    • 代码效果
      在这里插入图片描述

    • 有序列表

    • 场景：在网页中表示一组有顺序之分的列表，如：排行榜

    • ol: 表示有序列表整体，用来包裹li标签

    • li: 表示有序列表的每一项,用于包含每一行的内容

    							<ol>
                                    <li>乐观开朗li>
                                    <li>积极向上的态度li>
                                    <li>好好学习li>
                            ol>

    • 1
    • 2
    • 3
    • 4
    • 5

    • 代码效果
      在这里插入图片描述

    • 自定义列表

    • 场景：在网页的底部导航中通常会使用自定义列表实现。

    • dl：用于自定义列表的整体，用于包裹dt/dd标签

    • dt: 表示自定义列表的主体

    • dd: 表示自定义列表的针对主体的每一项

                   <dl>
                        <dd>乐观开朗dd>
                        <dd>积极向上的态度dd>
                        <dd>好好学习dd>
                dl>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 代码效果
      在这里插入图片描述

    HTML表格

    1.表格的基本标签

    • 是用于定义表格的标签。
    • 标签用于定义表格中的行，必须嵌套在
      标签中。
    • 用于定义表格中的单元格，必须嵌套在标签中。
    • 字母td指表格数据（table data），即数据单元格的内容。
    <table border=1>
               
                <tr>
                    <td> 1行1列td>
                    <td> 1行2列td>
                    <td> 1行3列td>
                    <td> 1行4列td>
                tr>  
                <tr>
                    <td> 2行1列td>
                    <td> 2行2列td>
                    <td> 2行3列td>
                    <th> 加粗 th>
                tr>
 table>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 代码效果
      在这里插入图片描述
    • 嵌套关系： table > tr > td
    • 表格标题及单元格标签
    • caption:表示表格的整体大标题,写在table标签内部
    • th:表示一列小标题，通常写于表格的第一行

    2.表格相关属性

    在这里插入图片描述在这里插入图片描述

    3.合并单元格

    • 合并单元格方式：

    • 跨行合并:rowspan="合并单元格的个数”

    • 跨列合并: colspan="合并单元格的个数”
      在这里插入图片描述

    • 目标单元格:(写合并代码)

    • 跨行:最上侧单元格为目标单元格,写合并代码

    • 跨列︰最左侧单元格为目标单元格,写合并代码

    • 合并单元格三步曲：
      1．先确定是跨行还是跨列合并。
      2．找到目标单元格.写上合并方式=合并的单元格数量。比如: 。
      3．删除多余的单元格。

    HTML表单

    1.定义HTML表单

    • HTML表单用于提交不同类型的用户数据给处理程序处理

    2.input系列

    （1）input创建单行文本框

    • 场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页
    • input 创建单行文本框
    • 昵称：
    • placehold：指输入框的提示文字
    • size :指定文本框中能够显示的字符数。
    • value:设置文本框的初始值
    • maxlength :指定文本框可以接收的最大字符数
    • type="text":是定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符

    （2）