实习实训学习笔记

SwanInK

已于 2022-02-20 09:35:56 修改

阅读量411

点赞数 1

文章标签： html

于 2022-01-09 16:36:13 首次发布

本文链接：https://blog.csdn.net/SwanInK/article/details/122380265

版权

2022.1实习实训学习笔记！

学院里安排了实习实训（其实就是网课），在华为苏研所实习之余，看学院里的实习。

2022.1.9 苏州。

CONTENT

01.HTML
02.CSS
03.JavaScript

01.HTML

HTML：超文本标记语言：<html>被称为一个标记（或标签）。
环境：Intellij IDEA，输入head/body/…，按Tab即生存一对对应的标签。

practice_00 你的第一个网页！

<html>

<head>
<title>这是你的第一个网页！</title><!-- 这里是标题 -->
</head>
第一个网页嗷！(叉腰）<!-- 这里是网页内容-->
<!-- 这里是注释，注释快捷键为Ctrl+Shift+/ -->
<body>
</body>

</html>

在这里插入图片描述

practice_01 叮！升级！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test01_Hello！World</title>
</head>
<body>

    <!-- 这里是注释 -->
    <h1>一级标题，Hello！world</h1>
    <h2>二级标题，Hey！bro</h2>
    <h3>三级标题</h3>

    <p>第一段文本</p>
    <p>第二段文本</p>
    <!-- <p>会换行嗷！ -->

    <ol>
        <li>输入邮箱</li>
        <li>验证邮箱</li>
        <li>登  录</li>
        <!-- 条目用li实现 -->
    </ol>
    <!-- <ol>即order list，有序表-->

    <ul>
        <li>输入邮箱</li>
        <li>验证邮箱</li>
        <li>登  录</li>
    </ul>
    <!-- <ul>即unorder list，即dot-->

    <hr width="1300px"><!-- 横线,可设置宽度，px为分辨率v，以分辨率为单位-->
    <div>
        这里是逻辑分区！（比如查询区、文本区）
    </div>
    <hr>

    <span>这是第一句话</span>
    <span>这是第二句话//不换行嗷！</span>
    <br><!-- 换行符br-->
    <span>这是第三句话</span>

</body>
</html>

在这里插入图片描述

practice_02 图片

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test02</title>
</head>
<body>
    <!--图片标签-->
    <img src="images/实习plog01.jpg" width="500">
    <!-- 输入img+Tab键--，src即source，源，此处为相对地址（目录）-->
    <img src="images/证件照.jpg" width="500">
    <hr>
</body>
</html>

图片就不放啦！

practice_03 表单制作！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test03</title>
</head>
<body>
    <!--表单标签-->
    <form action="">
        <!--注册页面，placeholder即在文本框中加入提示信息-->
        用户名：<input type="text" placeholder="请输入用户名"><br>
        密码:<input type="password" placeholder="请输入密码"><br>
        确认密码：<input type="password" placeholder="请确认密码"><br>
        邮箱：<input type="text" placeholder="请输入邮箱"><br>
        <!--单选按钮，checked为默认选择-->
        性别：<input type="radio" name="sex" checked> 男 <input type="radio" name="sex"> 女 <br>
        爱好：<input type="checkbox"> 读书 <input type="checkbox"> 音乐 <input type="checkbox"> 跑步 <br>
        日期：<input type="date"><br>
        地址：<select name="address">
            <option value="0">请选择</option>
            <option value="北京">北京</option>
            <option value="济南">济南</option>
            <option value="上海">上海</option>
            <option value="深圳">深圳</option>
            </select><br>
        头像: <input type="file"><br>
        <hr>
        <!--文本域的宽高和它的行数、列数有关-->
        自我介绍：<textarea rows="5" cols="20" name="selfintro" id="" cols="30" rows="10"></textarea><br>
        <input type="submit" value="注册">
        <input type="button" value="普通按钮">
        <input type="reset">
    </form>
</body>
</html>

在这里插入图片描述

practice_04 超链接！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
    <!-- 页面间连接：从一个页面跳转到另一个页面，可以是内部资源，也可以是外部资源-->
    <!-- target属性：跳转到何处_blank在新页面打开，_self在原页面打开-->
    <a href="my_html_practice01.html" id="button01">这是一个超链接</a><br>
    <a href="https://www.bilibili.com/">摸鱼啦！</a><br>
    <a href="my_html_practice03.html" target="_blank">表单填写</a><br>
    <!-- 锚链接：从页面的一个位置跳转到另一个位置 -->
    <a href="#buttom00">这是一个回到底部的锚链接</a>
    <img src="images/实习IMG_20220106_车站的月亮.jpg"><br>
    <a href="#button01" id="buttom00">这是一个回到顶部的锚链接</a>
</body>
</html>

在这里插入图片描述

practice_05 表格制作！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sign in web</title>
</head>
<body>
    <!--快捷键：table>tr>td+Tab键-->
    <!--三行两列快捷键：table>tr*3>td*2+Tab键-->
    <form action=""><!--表单标签-->
        <table border="1" align="center"><!--表格标签-->
            <tr>
                <td>用户名：</td>
                <td><input type="text" size="30"></td>
            </tr>
            <tr>
                <td align="center">密码：</td>
                <td><input type="password" size="30"></td>
            </tr>
            <!-- 合并单元格：colspan rowspan 合并行 -->
            <!-- 合并单元格的步骤：
                1.找到要合并的单元格
                2.添加属性
                3.删除多余的单元格
            -->
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" value="登录">
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

在这里插入图片描述

02.CSS

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。
CSS用于对网页进行美化，调整页面的样式。
CSS通过以下方式添加到HTML中：
行内样式表、内部样式表、外部样式表
常用选择器：id选择器、class选择器、标签选择器，以及组合选择器、后代选择器。

01.行内样式表:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内样式表</title>
</head>
<body>
<!-- 块元素：独占一行，可设置宽高 -->
<!-- 行内元素：可以和其他行内元素在同一行，不能设置宽高 -->
    <div style="color: red">
        这是块元素
    </div>
    <div>
        这是块元素
    </div>
    <a style="color: red">这是超链接，是行内元素</a>
    <a>这是超链接，是行内元素</a>
</body>
</html>

02.内部样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部样式</title>
    <!-- 在head标签中添加style标签 -->
    <style>
        /*CSS的注释*/  /*
        语法：
        选择器{
            样式
        }             */
        div{
            color: red;
            background-color: burlywood;
        }/*标签选择器*/
        #div1{
            color: blue;
        }/*id选择器*/
        .fruit{
            color: greenyellow;
        }/*类class选择器*/
        .fruit,.milk{
            font-family: 楷体;
        }/*组合选择器*/
    </style>
    <style>
        ol li{
            background-color: aliceblue;
        }/*后代选择器 空格*/
    </style>
</head>
<body>
    <div id="div1">
        这是一个div
    </div>
    <div>
        这是另一个div
    </div>
    <ul>
        <li class="fruit">苹果</li>
        <li class="fruit">梨</li>
        <li class="milk">牛奶</li>
    </ul>
    <ol>
        <li>泡面</li>
        <li>火腿</li>
        <li>面包</li>
    </ol>
</body>
</html>

03.CSS常用样式、外部样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css常用样式、使用外部样式表</title>
    <style>
        #p1{
            font-size: 30px;/*字体大小*/
            font-family: 楷体;/*字体*/
            border-style: solid;/*边框*/
        }
    </style>
    <!-- 外部样式表引入 -->
    <link rel="stylesheet" href="CSS/test.css">
</head>
<body>
    <p id="p1">段落文本1</p>
    <p>段落文本2</p>

</body>
</html>

p{
    color: azure;
    text-align: center;/*设置文字对齐方式：居中*/
    background-image: url("../img/实习IMG_20220106_车站的月亮.jpg");
}

03.JavaScript

SwanInK

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实习实训学习笔记

2022.1实习实训学习笔记！01.HTMLHTML：超文本标记语言：<html>被称为一个标记（或标签）。环境：Intellij IDEA，输入head/body/…，按Tab即生存一对对应的标签。- <html><head><title>这是你的第一个网页！</title></head>第一个网页嗷！(叉腰）<!--
复制链接

扫一扫