web学习-CSDN博客

本文链接：https://blog.csdn.net/MptRe/article/details/137558241

day01-03

<h> :标题

<img>:图像 src 表示属性表示地址时用/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML快速入门</title>
</head>
<body>
    <h1>hello html</h1>
    <img src = "images/1.png"/>
</body>
</html>

HTML标签不分大小写

HTML属性值单双引号都可以

HTML语法结构松散

day01-05

<!DOCTYPE html> 文档类型

<meta charset="UTF-8"> 字符集

路径书写方式：

绝对路径：

1.绝对磁盘路径

2.绝对网络路径：（必须保证有网络，而且这张图片必须网上存在）

相对路径：

./:当前目录（可以省略）

../:上一级目录（不可省略）

高度和宽度单位：px:表示像素（一般情况下只写一个，另外一个等比例变化）%：相对于父元素的百分比

标题只有1-6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
</head>
<body>
    <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png" > 新浪政务 > 正文

    <h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
    <hr>
    2023 03 02
    <hr>

</body>
</html>

day01-06

day01-07

day01-08

day01-09

视频和音频中想显示进度条要用controls

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
<!--    CSS方式2-->
    <style>
        h1{
            /*color:red;*/
            /*color: rgb(255, 0, 0);*/
            color:#4D4F53;
        }
        /*元素选择器*/
        /*span{*/
        /*    color:#968D92;*/
        /*}*/
        /*.cls{*/
        /*    color:#968D92;*/
        /*}*/
       /*ID选择器*/
        #time{
            color:#968D92;
            font-size: 13px;  /*设置字体大小*/
        }
        a{
            color:black;
            text-decoration: none;  /*设置文本为一个标准的文本*/
        }
        p{
            text-indent: 35px;/*设置首行缩进*/
            line-height: 35px; /*行高*/
        }
        #plast {
            text-align: right; /*对齐方式*/
        }

    </style>
<!--    CSS第三种-->
<!--    <link rel = "stylesheet" href = "css/news.css">-->

</head>
<body>
    <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png" > <a href="https://www.w3school.com.cn/html/html_elements.asp" target="_self">新浪政务</a> > 正文
    <!-- CSS第一种-->
<!--    <h1 style="color: red">焦点访谈：中国底气 新思想夯实大国粮仓</h1>-->
    <h1 style>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
    <hr>
    <span class = "cls" id = "time">2023年03月02  21:50 </span> <span> <a href="https://www.w3school.com.cn/html/html_elements.asp" target="_blank">央视网</a></span>
    <hr>


    <!--    正文-->
    <video src ="video/1.mp4" controls width="200px"></video>
    <audio src="audio/1.mp3"></audio>
    <p><b>1</b></p>
    <p><strong>2</strong> </p>
    <p id="plast">3</p>
</body>
</html>

day01-10

相同的元素可以简写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
<!--    CSS方式2-->
    <style>
        h1{
            /*color:red;*/
            /*color: rgb(255, 0, 0);*/
            color:#4D4F53;
        }
        /*元素选择器*/
        /*span{*/
        /*    color:#968D92;*/
        /*}*/
        /*.cls{*/
        /*    color:#968D92;*/
        /*}*/
       /*ID选择器*/
        #time{
            color:#968D92;
            font-size: 13px;  /*设置字体大小*/
        }
        a{
            color:black;
            text-decoration: none;  /*设置文本为一个标准的文本*/
        }
        p{
            text-indent: 35px;/*设置首行缩进*/
            line-height: 35px; /*行高*/
        }
        #plast {
            text-align: right; /*对齐方式*/
        }
        #center{
            width:65%;
            margin:0% 17.5% 0% 17.5%; /*外边距 上 右 下 左*/
            /*margin: 0 auto;   自动计算*/
        }

    </style>
<!--    CSS第三种-->
<!--    <link rel = "stylesheet" href = "css/news.css">-->

</head>
<body>
    <div id = "center">
    <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png" > <a href="https://www.w3school.com.cn/html/html_elements.asp" target="_self">新浪政务</a> > 正文
    <!-- CSS第一种-->
<!--    <h1 style="color: red">焦点访谈：中国底气 新思想夯实大国粮仓</h1>-->
    <h1 style>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
    <hr>
    <span class = "cls" id = "time">2023年03月02  21:50 </span> <span> <a href="https://www.w3school.com.cn/html/html_elements.asp" target="_blank">央视网</a></span>
    <hr>


    <!--    正文-->
    <video src ="video/1.mp4" controls width="200px"></video>
    <audio src="audio/1.mp3"></audio>
    <p><b>1</b></p>
    <p><strong>2</strong> </p>
    <p id="plast">3</p>
    </div>
</body>
</html>

day01-11

boeder :边框的宽度 cellspacing单光格之间的空白

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
</head>
<body>
    <table border="1px" cellspacing="0" width="600px">
        <tr>
            <th>序号</th>
            <th>品牌logo</th>
            <th>品牌名称</th>
            <th>企业名称</th>
        </tr>
        <tr>
            <td>1</td>
            <td><img src = "images/1.png" width="100px"> </td>
            <td>华为</td>
            <td>华为技术有限公司</td>
        </tr>
        <tr>
            <td>2</td>
            <td><img src = "images/1.png" width="100px"></td>
            <td>阿里</td>
            <td>阿里巴巴集团控股有限公司</td>
        </tr>
    </table>

</body>
</html>

day01-12

表单项中必须有name属性才可以提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML - 表单</title>
</head>
<body>
<!--    form 表单属性:-->
<!--        action:表单提交的url,往何处提交数据,如果不指定,默认提交到当前页面-->
<!--        method:表单的提交方式
        get:在url后面拼接表单数据, 比如: ?username=Tom&&age=12 , url长度有限制(默认)
        post:在消息体(请求体)中传递,参数大小无限制的
-->
    <form action="" method="get">
        用户名:<input type = "text" name = "username">
        年龄:<input type = "text" name = "age">
        <input type = "submit" value = "提交">
    </form>
</body>
</html>

day01-13

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单项标签</title>
</head>
<body>
<form action="" method="post ">
    姓名:<input type = "text"name = "name"> <br> <br>
    密码:<input type = "text"name = "password"> <br><br>
    性别:<label><input type="radio" name = " gender" value="1"> 男</label>
    <label><input type="radio" name = "gender" value = "2">女</label> <br><br>
    爱好:<label><input type="checkbox" name="hobby" value="java">java</label>
    <label><input type="checkbox" name="hobby" value="game">game</label>
    <label><input type="checkbox" name="hobby" value="sing">sing</label><br><br>
    图像:<input type = "file"name = "image"> <br><br>
    生日:<input type = "date"name = "birthday"> <br><br>
    时间:<input type = "time"name = "time"> <br><br>
    日期时间:<input type = "datetime-local"name = "datetime"><br><br>
    邮箱:<input type = "email"name = "email"> <br><br>
    年龄:<input type = "number"name = "age"> <br><br>
    学历:<select name="degree">
        <option value="">----------请选择--------------</option>
        <option value="1">大专</option>
        <option value="2">本科</option>
        <option value="3">硕士</option>
        <option value="4">博士</option>

</select> <br><br>
    描述:<textarea name = "description" clos="30" rows="10"></textarea> <br><br>
    <input type="hidden" name = "id" value="1">
    <--隐藏域-->
    <input type="button"  value="按钮">
    <input type="reset"  value="重置">
    <input type="submit"  value="提交">
    <br>
</form>
</body>
</html>