day2

最新推荐文章于 2022-03-05 21:41:00 发布

公冶笑笑

最新推荐文章于 2022-03-05 21:41:00 发布

阅读量117

点赞数 1

分类专栏：实习笔记

本文链接：https://blog.csdn.net/weixin_45044528/article/details/107205531

版权

实习笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Day2

1、html

 超文本标记语言
 浏览器从上往下解析html文件
 后缀.html后者.html

2、http协议

 请求/响应模式
 请求报文
     请求头、请求行、请求数据
     响应头、响应行、响应体
     状态码
    200、404、401

3、开发流程

1）本地测试
2）部署

4、html语法结构

1）注释
    html中  <!--注释内容-->
    css中     /*注释内容*/
2)实体
    空格 &nbsp；
3)块级元素和行内元素
    元素的组成
        外边距margin + 边框border +内边距padding +内容
    块级元素{支撑起整个网页的结构}
        div （）
        h1~h5标题
            margin 
        html
        ul li 无序列表
            margin 、 padding left
            li 黑色原点 list-style设置
        ol li 有序列表
        p 段落标签
            margin
    行内元素{填充网页}
        a 超链接
            href 访问的地址
                url 访问地址
                id  锚点
            target 设置超链接的打开方式
                _self 当前选项卡
                _blank 新的选项卡
    块级元素转换为行内元素
        display:block;  将元素设置为块级元素
        display:inline-block； 将元素设置为行内块元素
    如何给行内元素设置宽高？
        将行内元素设置为块级元素或者行内块元素，再设置宽高即可
4)核心属性[绝大多数标签都可以使用的属性]
    <div 属性名=属性值 属性名=属性值></div>
    id      唯一标识
    class   类名
    title   提示语  
    style   样式
5)特有属性[某些标签才具备的属性]
    a
        href
        target
    img
        src 加载图片的地址
        alt 图片无法加载时显示的文字
6)自定义属性
    data-xxx='xxx'
    <div data-test='hello'></div>

5、表格

table
    属性:border,cellpadding,cellpadding,bgcolor
    caption 表格标题
    thead 表头
        tr 
            th  
    tbody 表体
        tr
            td 
合并单元格
    colspan 跨列数
    rowspan 跨行数

6.h5新增的语义化标签

header,aside,nav,article,section,footer,address

7.表单

form
    

get和post的区别
    get  会将请求的数据拼接再浏览器地址栏上，www:baidu.com?neme=tom&age=13 不安全
   			请求数据的大小有限制
    post 将请求数据放在请求体中，请求数据的大小一般没有限制，比较安全

表单的组件
    label
    input
        type
            text 单行文本框
            submit 提交表单
            radio   单选按钮
            checkbox    复选按钮
            reset       重置表单
            password    密码框
            file        文件的上传
                图片上传
                    文件服务器(图片、文件)
            image 图片按钮
    select
        option
    textarea
    button

表单提交

    用户点击新增按钮 --> 弹出模态框（表单）-->输入信息 -->用户点击确认提交按钮
     -->将数据发送给后台 -->关闭模态框 -->调用重置按钮，清空表单内容 
     -->下一次点击显示模态框的时候内容为空

课后作业
个人简历.课程表.

上课代码：

<!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>
<!-- <style>
    ul li{
        list-style: none;
    }
    /* 上方设置无黑原点。 */
</style> -->
<!-- <style>
    ul li{
        list-style: none;
    }
</style> -->
<body>
    <!-- 这是注释  ctrl+/ -->
    <!-- <img src="" alt="图片无法加载">
    <script>
        console.log(a);
        let a = 1;
    </script>
    <div id="one">hello</div>
    <h1 class="one" title='这是标题一的提示'>标题一</h1> -->
    <ul style="color: rgb(8, 8, 8);">
        <li>1</li>
        <li>2</li>
    </ul>
    <ol>
        <li>1</li>
        <li>2</li>

    </ol>
    <div style="height:500px" @click='clickHandler'></div>
    <p>
        这是一个段落
    </p>
    <a href="#one" target="_self">百度</a>
    <!-- 默认是_self在当前页面打开   _blank新建选项卡 #是id的意思-->
    <!-- <script>
        new Vue({
            methods:{
                clickHandler(a){
                    console.log(a)
                }
            }
        }) -->
    </script>
</body>
</html>

<!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>
    <!-- <div style="width: 500px;"></div> -->
    <!-- cellspacing是单元格间的距离 cellpadding 内容与单元格的距离 bgcolor可以在th中用-->
    <table width='500' border="1" cellspacing='0' cellpadding='5' bgcolor='redS'>
        <!-- 表头标题 -->
        <caption>这是我的第一个表格</caption>
        <!-- 表头 -->
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th colspan="2">操作</th>
            </tr>
        </thead>
        <!-- 表体 -->
        <tbody>
            <!--文本水平居中  -->
            <tr align="center">
                <td>1</td>
                <td>张三</td>
                <td>男</td>
                <td>删除</td>
                <td>详情</td>
            </tr>
        </tbody>
        <!-- <tfoot>
            <tr>
                <td>1</td>
                <td>2</td>
            </tr>
        </tfoot> -->
    </table>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人计划表</title>
</head>
<body>
    <table width='800' border="1" cellspacing='0'>
        <caption>工作计划执行表</caption>
        <thead>
            <!-- tr>th*3 快捷创建-->
            <tr>
                <th colspan="3">技术方向:大前端 填表:公冶</th>
                <!-- <th>2</th>
                <th>3</th> -->
                <th colspan="2">批准:考核 存档:月份:2020</th>
                <!-- <th>5</th> -->
            </tr>
        </thead>
        <tbody align="center">
            <tr>
                <td colspan="2">日期/时间</td>
                <!-- <td>2</td> -->
                <td>工作计划</td>
                <td>执行情况说明</td>
                <td>考核</td>
            </tr>
            <tr>
                <td rowspan="4">07/08/周三</td>
                <td rowspan="2">上午</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <!-- <td>1</td> -->
                <!-- <td>2</td> -->
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <!-- <td>1</td> -->
                <td rowspan="2">下午</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <!-- <td>1</td> -->
                <!-- <td>2</td> -->
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr><tr>
                <td rowspan="4">07/08/周三</td>
                <td rowspan="2">上午</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <!-- <td>1</td> -->
                <!-- <td>2</td> -->
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <!-- <td>1</td> -->
                <td rowspan="2">下午</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <!-- <td>1</td> -->
                <!-- <td>2</td> -->
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
    </table>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>
    <form action="">
        <label for="username">用户名:</label><input type="text" id="username" >
        <label for="password">密码：</label><input type="password" id="password">
        <br>
        性别：
        <label for="man">男</label><input type="radio" id="man" name="gender" value="male">
        <label for="famale">女</label><input type="radio" id="famale" name="gender" value="female">
        <br>
        <!-- checked 是默认选项 -->
        爱好：
        <label for="basketball">篮球</label><input type="checkbox" id="basketball" checked>
        <label for="football">足球</label><input type="checkbox" id="football" >
        <br>
        出生地：
        <select >
            <optgroup label="省">
                <option value="安徽">安徽</option>
                <option value="山西">山西</option>
                <option value="陕西">陕西</option>
            </optgroup>
        </select>
        <select >
            <optgroup label="市">
                <option value="安徽">安徽</option>
                <option value="山西">山西</option>
                <option value="陕西">陕西</option>
            </optgroup>
        </select>
        <br>
        <input type="reset" value="重置按钮">
        <br>
        <textarea  cols="30" rows="10"></textarea>
    </form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块级元素</title>
</head>
<style>
    a{
        /* 将a标签设置为块级元素 */
        display: block;
    }
    div{
        display: inline-block;
    }
</style>
<body>
    <a href="">登录</a>
    <span>测试</span>
    <div>zheshi</div>
</body>
</html>

公冶笑笑

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day2

Day21、html 超文本标记语言浏览器从上往下解析html文件后缀.html后者.html2、http协议请求/响应模式请求报文请求头、请求行、请求数据响应头、响应行、响应体状态码 200、404、4013、开发流程1）本地测试2）部署4、html语法结构1）注释 html中  css中 /*注释内容*/2)实体空格 &nbsp；3)块级元素
复制链接

扫一扫