【笔记】2022.5.11 网页前端

最新推荐文章于 2025-12-18 10:02:55 发布

原创最新推荐文章于 2025-12-18 10:02:55 发布 · 425 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #javascript #css

第二阶段网页数据收集笔记专栏收录该内容

10 篇文章

订阅专栏

本文深入浅出地介绍了前端开发的三大核心技术——HTML用于内容呈现，CSS负责布局与样式，JavaScript则实现动态交互。涵盖了HTML标签、CSS选择器、CSS属性及input元素的使用，以及图片、音视频链接和表单的处理。

0. 前端三大技术

（1）HTML：提供文字、图片、音频、视频、按钮、输入框等内容的展示
（2）CSS：将HTML显示的内容进行布局和样式渲染
（3）JavaScript：提供了页面内容的变化

1. HTML

超文本标记语言（HyperText Markup Language）

1.1 后缀名

后缀名：.html、.htm、.shtml、.shtm

shtml、shtm：内置了ssi命令，可以和服务器通信，更新页面内容

DOS操作系统兼容的文件只能是后缀名长度小于等于3的，所以必须省略最后的l。所以html和htm是一类文件，shtml和shtm是一类文件

1.2 标签概述

HTML是通过标签将文字、图片等内容显示到页面中的

（1）双标签（一般标签）

<标签名属性名1=属性值1 属性名2=属性值2 …>内容</标签名>

（2）单标签（自闭合标签）

<标签名属性名1=属性值1 属性名2=属性值2 …>

<标签名属性名1=属性值1 属性名2=属性值2 …/>

RIGHT Example：

<!--声明这个是html5-->
<!doctype html>
<!--html标签包含head和body的-->
<html lang="en">
<!--head标签包含html页面的一些配置属性-->
<head>
    <!--  页面编码方式  -->
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--  html页面标题  -->
    <title>Document</title>
</head>
<!--页面的内容显示标签-->
<body>

</body>
</html>

1.3 文字标签

RIGHT Example：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>雪雪天下第一可爱的HTML页面</title>
    </head>
    <body>
        <!-- 标题标签：自带加粗，自带换行：h1~h6 -->
        <h1>我是可爱的一级标签</h1>
        <h2>我是和一级标签同样可爱的二级标签</h2>
        <h3>我是和和一级标签同样可爱的二级标签同样可爱的三级标签</h3>
        <h4>我是和和和一级标签同样可爱的二级标签同样可爱的三级标签的同样可爱的四级标签</h4>
        <h5>我是和和和和一级标签同样可爱的二级标签同样可爱的三级标签的同样可爱的四级标签的同样可爱的五级标签</h5>
        <h6>我是晕了的六级标签</h6>
        <!-- 段落标签：p：自带换行 -->
        <p>一级标签为什么可爱？因为它就是可爱啊！一级标签为什么可爱？因为它就是可爱啊！一级标签为什么可爱？因为它就是可爱啊！一级标签为什么可爱？因为它就是可爱啊！一级标签为什么可爱？因为它就是可爱啊！
        一级标签为什么可爱？因为它就是可爱啊！一级标签为什么可爱？因为它就是可爱啊！一级标签为什么可爱？因为它就是可爱啊！</p>
       
        <p>二级标签为什么和一级标签同样可爱？因为它是一级标签可爱的一抹多啊！二级标签为什么和一级标签同样可爱？因为它是一级标签可爱的一抹多啊！二级标签为什么和一级标签同样可爱？因为它是一级标签可爱的一抹多啊！
        二级标签为什么和一级标签同样可爱？因为它是一级标签可爱的一抹多啊！二级标签为什么和一级标签同样可爱？因为它是一级标签可爱的一抹多啊！二级标签为什么和一级标签同样可爱？因为它是一级标签可爱的一抹多啊！
        二级标签为什么和一级标签同样可爱？因为它是一级标签可爱的一抹多啊！二级标签为什么和一级标签同样可爱？因为它是一级标签可爱的一抹多啊！二级标签为什么和一级标签同样可爱？因为它是一级标签可爱的一抹多啊！
        二级标签为什么和一级标签同样可爱？因为它是一级标签可爱的一抹多啊！</p>
        
        <!-- 行内标签：span标签：多个span标签可以显示在一行 -->
        <span>请登录可爱王国</span>|
        <span>我的可爱值</span>|
        <span>我的小伙伴</span>|
        
        <!-- 
        文字倾斜：i、em
        文字加粗：b、strong
        -->
        <i>
            <b>即加粗又倾斜的可爱国小国民！</b>
        </i>
    </body>
</html>

1.4 图片和音视频超链接

RIGHT Example：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>可爱王国图片音视频分部</title>
    </head>
    <body>
        <!-- 超链接标签：a -->
        <!-- target="_blank"：在新的标签页打开超链接指定的链接 -->
        <a href="http://www.baidu.com" target="_blank">百度</a>
        
        <!-- 换行标签：br -->
        <br>
        
        <!-- iframe：内联框架 -->
        <!-- px：像素 -->
        <iframe src="https://www.bilibili.com" frameborder="0" width="100%" height="400px"></iframe>
        
        <!-- 水平线标签：hr -->
        <hr />
        
        <!-- 图片标签：img -->
        <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度logo">
        <img src="img/image0.jpg" alt="二刺猿图" width="50px" height="100px">
        
        <br>
        
        <!-- 音频：audio -->
        <audio controls src="img/qinghuaci.mp3" alt="青花瓷"></audio>
        
        <br>
        
        <!-- 视频：video -->
        <video controls src="img/大熊猫.mp4" alt="大熊猫" width="700px" height="500px"></video>
        
    </body>
</html>

1.5 文字标签

RIGHT Example：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>雪雪天下第一可爱的HTML页面</title>
    </head>
    <body>
        <!-- 标题标签：自带加粗，自带换行：h1~h6 -->
        <h1>我是可爱的一级标签</h1>
        <h2>我是和一级标签同样可爱的二级标签</h2>
        <h3>我是和和一级标签同样可爱的二级标签同样可爱的三级标签</h3>
        <h4>我是和和和一级标签同样可爱的二级标签同样可爱的三级标签的同样可爱的四级标签</h4>
        <h5>我是和和和和一级标签同样可爱的二级标签同样可爱的三级标签的同样可爱的四级标签的同样可爱的五级标签</h5>
        <h6>我是晕了的六级标签</h6>
        <!-- 段落标签：p：自带换行 -->
        <p>一级标签为什么可爱？因为它就是可爱啊！一级标签为什么可爱？因为它就是可爱啊！一级标签为什么可爱？因为它就是可爱啊！一级标签为什么可爱？因为它就是可爱啊！一级标签为什么可爱？因为它就是可爱啊！
        一级标签为什么可爱？因为它就是可爱啊！一级标签为什么可爱？因为它就是可爱啊！一级标签为什么可爱？因为它就是可爱啊！</p>
       
        <p>二级标签为什么和一级标签同样可爱？因为它是一级标签可爱的一抹多啊！二级标签为什么和一级标签同样可爱？因为它是一级标签可爱的一抹多啊！二级标签为什么和一级标签同样可爱？因为它是一级标签可爱的一抹多啊！
        二级标签为什么和一级标签同样可爱？因为它是一级标签可爱的一抹多啊！二级标签为什么和一级标签同样可爱？因为它是一级标签可爱的一抹多啊！二级标签为什么和一级标签同样可爱？因为它是一级标签可爱的一抹多啊！
        二级标签为什么和一级标签同样可爱？因为它是一级标签可爱的一抹多啊！二级标签为什么和一级标签同样可爱？因为它是一级标签可爱的一抹多啊！二级标签为什么和一级标签同样可爱？因为它是一级标签可爱的一抹多啊！
        二级标签为什么和一级标签同样可爱？因为它是一级标签可爱的一抹多啊！</p>
        
        <!-- 行内标签：span标签：多个span标签可以显示在一行 -->
        <span>请登录可爱王国</span>|
        <span>我的可爱值</span>|
        <span>我的小伙伴</span>|
        
        <!-- 
        文字倾斜：i、em
        文字加粗：b、strong
        -->
        <i>
            <b>即加粗又倾斜的可爱国小国民！</b>
        </i>
    </body>
</html>

1.6 input标签

RIGHT Example：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>可爱王国input分部</title>
    </head>
    <body>
        <!-- input标签：
         可以实现输入框，还可以实现按钮
         修改type属性值可以实现不同的功能
         placeholder：提示文字
         -->

        <!-- form：表单标签 -->
        <form method="POST">
            <span>手机号：</span>
            <!-- type="tel"：表示这个输入框要输入的是手机号 -->
            <input type="tel" placeholder="请输入手机号：" value="1234567"/>
            <br>
            <span>密码：</span>
            <input type="password" placeholder="请输入密码：">
            <br>
            <!-- value： -->
            <input type="submit" value="登录">
            <input type="reset" value="重置">
        </form>
        <!-- 上传文件：type="file" -->
        <input type="file">
        <!-- 选择颜色：color -->
        <input type="color">
        <!-- 选择日期和时间 -->
        <input type="date">
        <input type="time">
        <br>
        <!-- input标签的单选和多选中，input标签是提供选择按钮，label标签提供选择的内容 -->
        <!-- id属性和for属性相关联，提供的是input和label一一对应 -->
        <!-- 单选 -->
        <!-- 调用id属性使用# -->
        <!-- 单选框中name和id属性值要一致 -->
        <input type="radio" name="性别" id="gender1"><label for="gender1">男</label>
        <input type="radio" name="性别" id="gender2"><label for="gender2">女</label>
        
        <!-- 多选 -->
        <input type="checkbox" name="兴趣" id="interest1"><label for="interest1">篮球</label>
        <input type="checkbox" name="兴趣" id="interest2"><label for="interest2">足球</label>
    </body>
</html>

2. CSS

CSS层叠样式表修改页面中的元素可以精确到像素点

CSS的使用：

（1）行内式

（2）内嵌式

（3）外链式

CSS常用属性：

color：修改文字的颜色

text-align:修改文字的位置（左对齐，右对齐，居中对齐）

text-size：字体尺寸

border：边框

margin：外边距

pandding：内边距

font-family：修改字体样式（宋体、楷体、隶书等）

background：背景

width：宽度

height：高度

2.1 标签选择器

RIGHT Example：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>可爱王国CSS分部</title>
        <!-- CSS内嵌式 -->
        <style>
            /* 所有的标签自带边距 */
            /* 通配符选择器："*" */
            *{
                margin: 0px;
                padding: 0px;
            }
            
            /* CSS选择器 */
            /* 标签选择器 */
            /* 页面中存在几个x标签，如果使用标签选择器，所有的x标签都会变成一种样式 */
            div {
                width: 100px;
                height: 100px;
                background-color: #FFCCCC;
            }
            
            /* 类选择器：class，类选择器使用"."调用 */
            /* 在body标签中查找类名是mimi城的标签 */
            .mimi城{
                border: 10px solid palegreen;
            }
            
            /* id选择器：使用#调用 */
            /* id选择器在body标签中查找id名是nini城的标签 */
            #nini城{
                border-bottom: 10px solid black;
            }
            
        </style>
    </head>
    <body>
        <!-- div标签：盒子模型 -->
        <div class="mimi城">
            <p>纳尼纳尼？</p>
        </div>
        
        <hr>
        
        <div id="nini城">
            <p>有鬼啊啊啊啊！！</p>
        </div>
    </body>
</html>

附：内外边距

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UluF588l-1652261202091)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220511161621615.png)]

2.2 组合选择器

RIGHT Example：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>可爱王国组合选择器分部</title>
        <style>
            /* 父子选择器：父子选择器使用＞连接，左边是父标签，右边是子标签 */
            /* 找类名是one的标签下的所有子标签h1 */
            .one > h1{
                color: crimson;
            }
           .two > ul > li{
                color: cornflowerblue;
                text-align: center;
            }
            
            /* 后代选择器，使用空格 连接，左边是祖先，右边是后代 */
            .one h2{
                color: cadetblue;
                font-family: "楷体";
                text-align: right;
            }
            
            /* 兄弟选择器~ */
            /* 将类名是one的标签下的子代h1标签的所有比h1标签小的h2标签兄弟改成绿色 */
            .one > h1 ~ h2{
                color: darkgreen;
            }
            /* 相邻兄弟选择器+ */
            /* 将类名是one的标签下的子代h1标签的比h1标签小的相邻的h2标签兄弟改成紫色 */
            .one > h1 + h2{
                color: darkmagenta;
            }
            
            /* 属性选择器 */
            input[type="submit"]{
                background-color: cornflowerblue;
                color: aliceblue;
                border: none;
            }
            
            /* nth-child选择器（第n个孩子选择器）：python3.7以上版本才有这个选择器 */
            /* nth-child选择器不看标签名，只找某个标签是所有同级（同层次）标签下的第几个 */
            body > div:nth-child(4){
                border:5px solid blueviolet;
            }
            
        </style>
    </head>
    <body>
        <h1>我是一个可爱的h1标签</h1>
        
        <div class="one">
            <h1>我是一个可爱的一级标签</h1>
            <h2>我是一个可爱的二级标签</h2>
            <h2>我是一个可爱的二级标签</h2>
        </div>
        
        <div class="two">
            <p>游戏</p>
            <ul>
                <li>王者荣耀</li>
                <li>英雄联盟</li>
                <li>PUBG</li>
                <li>CS:GO</li>
            </ul>
            
        </div>
        
        <div id="one">
            <input type="submit" value="登录">
            <br>
            <input type="reset" value="重置">
        </div>
    </body>
</html>