HTML基础知识点总结

   单标签
          <br>
                <hr>
   双标签
                <p></p>
                <h1></h1>
                <head></head>
                <title></title>
                <body></body>

4.标题属性

   <div class="" id="" title=""></div>
                class tittle为属性名引号内为属性值
   <img src="" alt="">
                src alt为属性名引号内为属性值
   <a href=""> </a>
                 href为属性名引号内为属性值
   属性注意点:

标签的属性写在开始标签内部
标签上可以同时存在多个属性
属性之间以空格隔开
标签名与属性之间必须以空格隔开
属性之间没有顺序之分

5.html标签之间的关系

   父子（嵌套关系）
       <head><title></title></head>
   兄弟（并列关系）
       <head></head><body></body>

6.标题类型

1.标题标签

       <h1></h1>
       <h2>/h2>
       <h3>/h3>
       <h4></h4>
       <h5></h5>
       <h6></h6>
       语义：1~6级标题，重要程度依次递减
       注意:一个页面只有一个h1

2.段落标签

<p></p>

3.换行标签

<br>

4.水平线标签

<hr>
注意：一般不怎么用

5.文本格式化标签

1.普通语气

2.强烈语气

6.图片标签

       img标签属性
           src属性
               目标图片的路径
                   当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可
           alt属性
               替换文本
                   当图片加载失败时，才显示alt的文本当图片加载成功时，不会显示alt的文本
           title属性
               提示文本
                   当鼠标悬停时，才显示的文本
           width属性
               图片的宽度
           height属性
               图片的高度

7.路径介绍

1.绝对路径

           (了解)
               盘符开头：D:\day01\images\1.jpg
               完整的网络地址：https://www.itcast.cn/2018czgw/images/logo.gif

2.相对路径

           (常用)
               同级路径
                   <img src="dog.gif">
                       同级目录：直接写：目标文件名字！
               下一级路径
                   <img src="./images/dog.gif">
                       直接敲./后，会自动提示当前目录下有哪些文件夹，直接一层层选择即可！
                   <img src="images/dog.gif">
                       直接写：文件夹名/目标文件名字！
               上一级路径
                   <img src="../images/cat.gif">
                       上级目录：直接下：../目标文件名字！

8.音频标签

       <audio src="./images/music.mp3"controls autoplay loop> 您的浏览器不支持音频</audio>
           src
               音频路径
           controls
               播放控件
           autoplay
               自动播放 google不支持
           loop
               循环播放
       注意:音频标签目前支持三种格式：MP3、Wav、Ogg
           <audio>
            <source src="./images/music.mp3">
            <source src="./images/music.Wav">
           <source src="./images/music.Ogg">
            </audio>

9.视频标签

       <video src="./images/video.mp4" controls loop autoplay></video>
           src
               视频路径
           controls
               播放控件
           autoplay
               自动播放 google不支持需要加Muted静音播放
           loop
               循环播放

10.链接标签

1.外部链接

           <a href="https://www.baidu.com">点击一下去百度网页</a>
               外部链接记得加协议
           在新窗口中跳转
               _blank (保留原网页)
                   方法一
                       <a href="https://www.jd.com" target="_blank">点击一下去京东网页</a>
                   方法二
                       <base target="_blank">
                           在head里 base 可以设置所有链接的打开方式
           在当前窗口跳转
               _self(覆盖原网页)
                   默认值

2.内部链接

<a href="./视频标签.html">点击一下去视频标签网页</a>
内部链接注意路径问题

3.空链接

           点击之后回到网页顶部
               <a href="">空链接</a>
               <a href="#">空链接</a>

4.死链接

5.图片链接

6.下载链接

<a href="./images/dog.rar">下载</a>
下载.exe或者压缩包

11.html标签

1.列表标签

1.无序列表

           ul表示无序列表的整体
           li表示无序列表的每一项
           显示特点:列表的每一项前默认显示原点标识
           注意点:
               ul标签只允许包含li标签(ul里面只能嵌套li)
               li标签可以包含任意内容(li是一个容器里面可以包含任何元素)

2.有序列表

           ol 表示有序列表的整体
           li 表示有序列表的每一项
           显示特点:列表的每一项前默认显示序号标识
           注意点:
               ol标签只允许包含li标签(ol里面只能嵌套li)
               li标签可以包含任意内容(li是一个容器里面可以包含任何元素)

3.自定义列表

           dl表示自定义列表的整体
           dt表示自定义列表的主体
           dd表示自定义列表中的每一项解释说明
           显示特点:dd前会默认显示缩进效果
           注意点:
               dl标签只允许包含dt/dd标签
                dt/dd标签可以包含任意内容

2.表格标签

       table 表示表格的整体可用于包裹多个tr
       tr 表示表格的每一行可用于包裹td
       td 表示表格的单元格可用于包裹内容
       注意点:标签的嵌套关系: table > tr > td
       caption 表格大标题表示表格整体大标题,默认在表格整体顶部居中位置显示
           caption标签书写在table标签内部
       th 表头单元格表示一列小标题,通常用于表格第一行,默认内部文字加粗并居中显示
           th标签书写在tr标签内部(用于替换td标签)

1.表格结构

           thead 表格头部
           tbody 表格主体
           tfoot 表格底部
           注意:
               表格结构标签内部用于包裹tr标签
               表格的结构标签可以省略

2.表格相关属性

           border属性边框宽度
           width属性表格宽度
           height属性表格高度
           合并单元格步骤
               1. 明确合并哪几个单元格
               2.通过左上原则，确定保留谁删除谁
                   上下合并→只保留最上的，删除其他
                   左右合并→只保留最左的，删除其他
               3. 给保留的单元格设置：
                   rowspan
                       跨行合并→垂直方向合并
                   colspan
                       跨列合并→水平方向合并
               注意:
                   只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）

3.表单标签

1.input系列标签

           text
               文本框, 用于输入单行文本
                   常用属性:placeholder 占位符.提示用户输入内容的文本
           password
               密码框,用于输入密码
                   常用属性:placeholder 占位符.提示用户输入内容的文本
           radio
               单选框,用于多选一
                   单选按钮要有相同的name属性值,代表是同一组
               checked 默认选中
           checkbox
               多选框,用于多选多
                   checked 默认选中
           file
               文件域文件选择,用于之后上传文件
                   multipe 多文件选择
           按钮
               submit
                   提交按钮.点击之后提交数据给后端服务器
               reset
                   重置按钮.点击之后回复表单默认值
               button
                   普通按钮,默认无功能,之后配合js添加功能
               注意:!!!!!!!
                   如果需要实现以上按钮功能，需要配合form标签使用
                    form使用方法：用form标签把表单标签一起包裹起来即可

2.拓展

           1.value属性
               用户输入的内容，提交之后会发送给后端服务器
                   把用户输入的内容：value属性值发送给后台
           2.name属性
               当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义
                   把name属性值=value属性值发送给后台

3.button按钮标签

           button 普通按钮,默认无功能,之后配合js添加功能
           类似于submit 也可以进行提交
           默认的<button type="submit">点击</button>
           注意:
               谷歌浏览器中button默认是提交按钮
               button标签是双标签，更便于包裹其他内容：文字、图片等

4.select下拉菜单标签

           下拉菜单
           select:表示下拉菜单的整体
           option:表示希腊菜单的每一项
           常见属性:
               selected：下拉菜单的默认选中

5.textarea文本域标签

           textarea 文本域标签
           cols：规定了文本域内可见宽度
           rows：规定了文本域内可见行数
           注意:
               右下角可以拖拽改变大小
               实际开发时针对于样式效果推荐用CSS设置

6.label标签

           label标签:常用于绑定内容与表单标签的关系
               使用方法一：
                1. 使用label标签把内容（如：文本）包裹起来
                2. 在表单标签上添加id属性
               3. 在label标签的for属性中设置对应的id属性值
               使用方法二：
               1. 直接使用label标签把内容（如：文本）和表单标签一起包裹起来
               2. 需要把label标签的for属性删除即可

4.语义化标签

1.有语义的标签(了解)

           header：网页头部
           nav：网页导航
           footer：网页底部
           aside：网页侧边栏
           section：网页区块
           article：网页文章

2.无语义的标签

           没有语义的布局标签-div和span
               场景：实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签
               div标签：一行只显示一个（独占一行）
               span标签：一行可以显示多个

5.字符实体

1.空格的字符实体是？

            
               会根据字体不一样导致空格大小也就不一样
           &emsp;
               不会根据字体样式发生改变就是一个字的大小
           &ensp;
               不会根据字体样式发生改变半个字的大小
           全角:空ａｓｄｆｇｈｊｋｌ格<br>
           半角:空asdfghjkl格
               全角的空格是一个字的大小

2.大于号的字符实体是？

3.小于号的字符实体是？

fruitletya

关注

1
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
HTML基础知识点总结

目录1.中文名：超文本标记语言2..HTML骨架结构3.标签结构4.标题属性5.html标签之间的关系6.标题类型 1.标题标签 2.段落标签 3.换行标签 4.水平线标签 5.文本格式化标签 1.普通语气 2.强烈语气 6.图片标签 7.路径介绍 1.绝对路径 2.相对路径 8.音频标签 9.视频标签 10.链接...
复制链接

扫一扫