html知识点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2、标题标签

2.1、标题标签一共有几个？分别表示什么含义？

h1标签：一级标题
h2标签：二级标题
h3标签：三级标题
h4标签：四级标题
h5标签：五级标题
h6标签：六级标题

2.2、标题标签有哪些特点？

文字都有加粗
文字都有变大，但是从h1→ h6文字逐渐减小
独占一行

2.3、代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lambda-小张</title>
</head>
<body>
    <h1>一级标题文字</h1>
    <h2>二级标题文字</h2>
    <h3>三级标题文字</h3>
    <h4>四级标题文字</h4>
    <h5>五级标题文字</h5>
    <h6>六级标题文字</h6>
</body>
</html>

2.4、运行结果：

3、段落标签

3.1、段落标签的标签名是？

答：p标签

3.2、段落标签有哪些特点？

段落之间存在间隙
独占一行

3.3、代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 align="center">这是文章标题</h1>
    <!-- 标题 -->
    <hr>
    <!-- 水平线 -->
    <p>阿卡贝拉（意大利：Acappella )即无伴奏合唱。<br>其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》</p>
    <!-- 段落 -->
    <p>“翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱，包括重新填词，编曲。现在已有不少明星，都在翻唱他人的歌，不断在翻唱中突破自己，给大家带来不一样的风格。视频示例： 有一种悲伤（翻唱）-《A Kind of Sorrow》</p>
</body>
</html>

3.4运行结果：

4、换行标签

4.1、换行标签的标签名是？

答：br标签

4.2、换行标签的特点？

单标签
让文字强制换行

4.3、代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 align="center">这是文章标题</h1>
    <!-- 标题 -->
    <hr>
    <!-- 水平线 -->
    <p>阿卡贝拉（意大利：Acappella )即无伴奏合唱。<br>其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》</p>
    <!-- 段落 -->
    <p>“翻唱”是指将已经发表并由他人演<br>
        <!-- 换行 -->
        唱的歌曲根据自己的风格重新演唱，包括重<br>
        新填词，编曲。现在已有不少明星，都在翻唱他人的歌，<br> 不断在翻唱中突破自己，给大家带来不一样的风格。视频示例： 有一种悲伤（翻唱）-《A Kind of Sorrow》</p>
</body>
</html>

4.4、运行结果：

5、水平线标签

5.1、水平标签的标签名是？

答：hr标签

5.2代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 align="center">这是文章标题</h1>
    <!-- 标题 -->
    <hr>
    <!-- 水平线 -->
    <p>阿卡贝拉（意大利：Acappella )即无伴奏合唱。
    
</body>
</html>

5.3、运行结果：

6、文本格式化标签

6.1、文字加粗用什么标签？

答：strong标签和b标签

6.2、文字下划线用什么标签？

答：ins标签和u标签

6.3、文字倾斜用的什么标签？

答：em标签和i标签

6.4、文字删除线用什么标签？

答：del和s标签

6.5、代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <b>加粗</b>
    <strong>加粗</strong>
    <u>下划线</u>
    <ins>下划线</ins>
    <del>删除线</del>
    <s>删除线</s>
    <i>斜体</i>
    <em>斜体</em>
</body>
</html>

6.6运行结果:

7、图片标签

7.1、在页面中展示一张图片，需要使用什么标签？

答：img标签

7.2、图片的常见属性有哪些？

src 路径
alt 替代文本
title 提示文本
width 图片的宽度
height 图片的高度

7.3、代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- alt的文本提示是图片显示不出来才会出现的 -->
    <img src="cat.gif" alt="我是一只猫" title="我是一只小猫" width="500" height="500"><br>
    <!-- 没有设置宽度高度时，等比例大小 -->
    <img src="./dog.gif">
</body>
</html>

7.4、运行结果：

8、路径

8.1、绝对路径？

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

8.2、相对路径有哪三种情况：

同级目录：直接写：目标文件名字！
下级目录：直接写：文件夹名/目标文件名字！
上级目录：直接下： ../目标文件名字！

8.3、代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 上级目录 -->
    <img src="../2/dog.gif" alt="">
     <!-- 下级目录 -->
    <img src="./11/cat.gif" alt="">
     <!-- 同级目录 -->
    <img src="1.png" alt="">
    
</body>
</html>

9、音频标签

9.1、要在网页中插入音频使用什么标签？

答：audio标签

9.2、音频标签有哪些常见属性？

src：音频路径
controls：音频控件
autoplay：自动播放
loop：循环播放

9.3、代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <audio src="./music.mp3" controls autoplay loop></audio>
</body>
</html>

9.4、运行结果：

10、视频标签

10.1、要在网页中插入视频使用什么标签？

答：video标签

10.2、视频标签有哪些常见属性？

src：视频路径

controls：视频控件

autoplay：自动播放→ 谷歌浏览器中可以配合muted属性实现自动静音播放

loop：循环播放

10.3、代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <video src="./video.mp4" controls autoplay loop></video><br>
</body>
</html>

10.4、运行结果：

11、链接标签

11.1、如果需要实现点击之后，从一个页面跳转到另一个页面，需要使用什么标签？

答：a标签

11.2、通过什么属性可以设置a标签的到底跳转去哪里？

答：href标签

11.3、通过什么属性可以设置a标签的跳转方式？取值有哪些？

target属性
取值1： _self：在当前窗口中跳转
取值2： _blank：在新窗口中跳转

11.4、代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 外链接 -->
    <a href="https://www.baidu.com/"target="_self">跳转到百度</a> <br>
    <a href="https://www.baidu.com/"target="_blank">跳转到百度一下</a> <br>
    <!-- 内链接 -->
    <a href="./file2.html">点我跳转</a><br>
    <a href="#">空连接</a>
</body>
</html>

11.5、运行结果：

12、列表标签

12.1、有哪些列表标签？

答：无序列表、有序列表、自定义列表

12.2、无序列表由几个标签组成？分别表示什么？

答：ul标签：表示无序列表的整体

• li标签：表示无序列表的每一项

12.3、无序列表标签的嵌套规范是什么？

答：ul标签中只允许嵌套li标签

• li标签中可以嵌套任意内容

12.4、有序列表由几个标签组成？分别表示什么？

答：ol标签：表示无序列表的整体

• li标签：表示无序列表的每一项

12.5、有序列表标签的嵌套规范是什么？

答：ol标签：表示无序列表的整体

• li标签：表示无序列表的每一项

12.6、自定义列表由几个标签组成？分别表示什么？

答：dl标签：表示自定义列表的整体

• dt标签：表示自定义列表的主题

• dd标签：表示对于主题的每一项内容

12.7、自定义列表标签的嵌套规范是什么？

答：dl标签中只允许嵌套dt/dd标签

• dt/dd标签中可以嵌套任意内容

12.8、代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>水果列表</h1>
    <!-- 无序列表 -->
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>火龙果</li>
        <li>西瓜</li>
    </ul>
    <hr>
    <h1>成绩排行榜</h1>
    <!-- 有序列表 -->
    <!-- 从1开始 -->
    <ol>
        <li>小姐姐：100分</li>
        <li>小哥哥：80分</li>
        <li>小可爱：60分</li>
    </ol><hr>
    <!-- 有序列表倒序从3开始 -->
    <ol start="3" reversed>
        <li>小姐姐：100分</li>
        <li>小哥哥：80分</li>
        <li>小可爱：60分</li>
    </ol><hr>
    <!-- 自定义列表 -->
    <dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
        <dd>订单列表</dd>
    </dl>
</body>
</html>

12.9、运行结果：

13、表格标签

13.1、完成一个简单的表格，需要由几个标签组成？分别表示什么？

table标签：表格整体
tr标签：表格每行
td标签：对于主题的每一项内容

13.2、表格基本标签的嵌套规范是什么？

答： table > tr > td

13.3、给表格添加边框，可以使用什么属性完成？

答：border属性

13.4、设置表格整体的宽高，可以使用什么属性完成？

width属性：表格整体的宽度
height属性：表格整体的高度

13.5、表示表格整体大标题，使用什么标签完成？书写在什么位置？

表格整体大标题： caption标签
书写在table标签内部

13.6、在表格第一行设置一列的小标题，使用什么标签完成？书写在什么位置？

表头单元格： th标签
书写在tr标签内部（用于替换td标签）

13.7、表格的结构标签分别有哪些？表示什么含义？

thead：表格头部
tbody：表格主体
tfoot：表格底部

13.8、表格结构标签书写在什么位置？

表格结构标签写在table标签内部
表格标签内部用于包裹tr标签

13.9、代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- border边框宽度1 -->
    <table border="1" width="600" height="400">
        <!-- caption表格大标题 -->
        <caption><h3>学生成绩表</h3></caption>
        <thead>
        <tr>
            <!-- th表头单元格 -->
           <th>姓名</th>
           <th>成绩</th>
           <th>评语</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小哥哥</td>
            <!-- 跨2行合并 -->
            <td rowspan="2">100分</td>
            <td>小哥哥真好看</td>
        </tr>
        <tr>
            <td>小姐姐</td>
            <!-- <td>100分</td> -->
            <td>小姐姐真好看</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>总结</td>
            <!-- 跨2列合并  -->
            <td colspan="2">一言难尽</td>
            <!-- <td>一言难尽</td> -->
        </tr>
    </tfoot>
    </table>
</body>
</html>

13.10、运行结果：

14、input标签

14.1、input系列标签基本介绍

注意点：

占位符： placeholder
如果需要实现单选效果，需要设置相同的name属性值
单选框和多选框的默认选中： checked

14.2、代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    姓名：
    <input type="text" placeholder="请输入姓名"><br>
    密码：
    <input type="posswrod" placeholder="请输入密码"><br>
    <!-- 单选题 -->
    性别：
    <input type="radio" name="1">男 
    <!-- checked默认 -->
    <input type="radio" name="2" checked>女<br>
    <!-- 多选题 -->
    标签：
    <input type="checkbox" checked>可爱 
    <input type="checkbox">帅气 
    <input type="checkbox">漂亮<br>
    文件：
    <!-- multiple多个文件 -->
    <input type="file" multiple><br>
    <!-- 提交 -->
    <input type="submit"><br>
    <!-- 重置 -->
    <input type="reset"><br>
    <!-- 普通按钮 -->
    <input type="button">
</body>
</html>

14.3：运行结果：

15、button标签

15.1、button按钮标签

15.2、代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <button type="button">普通按钮</button> <br>
    <button type="submit">提交按钮</button> <br>
    <button type="reset">重置按钮</button> <br>
</body>
</html>

15.3、运行结果：

16、select标签

16.1、标签组成：

• select标签：下拉菜单的整体

• option标签：下拉菜单的每一项

16.2、常见属性：

selected：下拉菜单的默认选中

16.3、代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    所在地区：
            <select>
                <option>请选择省</option>
                <option>广西省</option>
                <!-- selected默认 -->
                <option selected>广东省</option>
                <option>江西省</option>
                <option>云南省</option>
            </select>
            <select>
                <option>请选择市</option>
                <option>广州市</option>
                <option>深圳市</option>
                <option>汕尾市</option>
                <option>清远市</option>
            </select>           
            <select>
                <option>请选择区</option>
                <option>罗湖区</option>
                <option>龙华区</option>
                <option>南山区</option>
            </select>
</body>
</html>

16.4、运行结果：

17、textarea标签

17.1、常见属性：

• cols：规定了文本域内可见宽度

• rows：规定了文本域内可见行数

17.2、代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <textarea cols="30" rows="10">请输入文本</textarea>
</body>
</html>

17.3、运行代码：

18、label标签

18.1、label标签就是他所关联的表单控件的延伸

即鼠标点击了他，就会出现和点击他所关联的表单控件一样的效果。而这前提是label的for属性的属性值与想要关联的表单控件的id一样。

18.2、代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    性别：
    <label><img src="2.png" ><input type="radio" name="123">男 </label>
    <label><img src="1.png" ><input type="radio" name="123">女 </label>
</body>
</html>

18.3、运行结果：

点头像时，圆框也会点中，这就是lable标签的作用。

19、语义化标签

19.1、常见有语义的布局标签有哪些？

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

20、字符实体

20.1、常见字符实体：

20.2、代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    &lt;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &gt;
    &amp;
    &quot;
    &apos;
    &cent;
    &pound;
    &yen;
    &euro;
    &sect;
    &copy;
</body>
</html>

20.3、运行结果：

蓝色的空格部分

lambda-小张

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
html知识点

一、基础认知1、网页由哪些部分组成？答：文字、图片、音频、视频、超链接2、网页背后本质是什么？答：前端程序员写的代码3、前端的代码是通过什么软件转换成用户眼中的页面的？答：浏览器4、常见的五大浏览器：答：IE浏览器、火狐浏览器（Firefox）、谷歌浏览器（Chrome）、 Safari浏览器、欧朋浏览器（Opera）5、什么是浏览器？答：是网页显示、运行的平台，是前端开发必备利器6、相同的网页在不同浏览器中显示效果会完全一致吗？答：因为不同浏览器渲染...
复制链接

扫一扫