新人学习记录:前端语法html和css学习

前端学习记录

​ 说点题外话,上期写到了markdown语法,这次写就发现了很大的问题,关于图片,感觉还是需要一个图床,但搞了两天gitee+picgo+typora 也没搞出来搞明白,但感觉这篇学习记录不能拖了,于是用了微博作图床,这个图片的清晰度属实难顶,近两天想办法找个好用的图床吧另外下面的笔记大多是武沛齐老师上课的笔记我对其进行了学习和实现,望周知!老师课程的链接在底部!~

1.浏览器能识别的标签

1.1 编码(head)

​ 编码是用预先规定的方法将文字、数字或其它对象编成数码,或将信息、数据转换成规定的电脉冲信号。为保证编码的正确性,编码要规范化、标准化,即需有标准的编码格式。常见的编码格式有ASCII、ANSI、GBK、GB2312、UTF-8、GB18030和UNICODE等。

系统内码 说明
阶段一 ASCII 计算机刚开始只支持英语,其它语言不能够在计算机上存储和显示。
阶段二 ANSI编码(本地化) 为使计算机支持更多语言,通常使用 0x80~0xFF 范围的 2 个字节来表示 1 个字符。比如:汉字 '中' 在中文操作系统中,使用 [0xD6,0xD0] 这两个字节存储。不同的国家和地区制定了不同的标准,由此产生了 GB2312, BIG5, JIS 等各自的编码标准。这些使用 2 个字节来代表一个字符的各种汉字延伸编码方式,称为ANSI 编码。在简体中文系统下,ANSI 编码代表 GB2312 编码,在日文操作系统下,ANSI 编码代表 JIS 编码。不同 ANSI 编码之间互不兼容,当信息在国际间交流时,无法将属于两种语言的文字,存储在同一段ANSI 编码的文本中。
阶段三 UNICODE(国际化) 为了使国际间信息交流更加方便,国际组织制定了UNICODE 字符集,为各种语言中的每一个字符设定了统一并且唯一的数字编号,以满足跨语言、跨平台进行文本转换、处理的要求。
<meta charset="UTF-8">

1.2 title(head)

<head>
    <meta charset="UTF-8">
    <title>东华大学</title>
</head>

1.3 标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>东华大学</title>
</head>
<body>
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
</body>
</html>

展示1

1.4 div和span

<div>内容</div>

<span>东华大学</span>
  • div,一个占一整行。【块级标签】

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>东华大学</title>
    </head>
    <body>
        <div>666</div>
        <div>走向人生巅峰</div>
    </body>
    </html>
    
  • span,自己多大占多少,不会占一整行。【行内标签、内联标签】

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>dhu</title>
    </head>
    <body>
        <span>山东蓝翔</span>
        <span>挖掘机哪家强</span>
    </body>
    </html>
    
    

注意:这两个标签比较简单朴素后续要 + CSS样式。

1.5 超链接

跳转到其他网站
<a href="http://www.chinaunicom.com.cn/about/about.html">点击跳转</a>
跳转到自己网站其他的地址

<a href="http://wangzhandizhi/get/news">点击跳转</a>
<a href="/get/news">点击跳转</a>
# 当前页面打开
<a href="/get/news">点击跳转</a>

# 新的Tab页面打开
<a href="/get/news" target="_blank">点击跳转</a>

根据需求选择target

1.6图片

<img src="图片地址" />
直接显示别人的图片地址(防盗链):
<img src="https://pic4.zhimg.com/v2-b23f984c2aeaa7bed12e890b4338d499_720w.jpg" />
<img src="自己图片的地址" />
显示自己的图片:
	- 自己项目中创建:static目录,图片要放在static,后续开发网站一般用static,目前用img或别的也可
	- 在页面上引入图片
	    <img src="/static/wbq.png" />

关于设置图片的高度和宽度

<img src="图片地址" style="height:100px; width:200px;" />
<img src="图片地址" style="height:10%; width:20%;" />

总结

  • 学习的标签

    <h1></h1>
    <div></div>
    <span></span>
    <a></a>
    <img />
    
  • 划分

    - 块级标签
    	<h1></h1>
    	<div></div>
    - 行内标签
    	<span></span>
        <a></a>
        <img />
    
  • 嵌套

    <div>
        <span>xxx</span>
        <img />
        <a></a>
    </div>
    

案例:简单商品列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>商品列表</h1>

<a href="https://www.mi.com/redmiwatch2" target="_blank">
    <img src="/img/A1.png" style="width: 150px">
</a>

<a href="https://www.mi.com/shouhuan6/nfc" target="_blank">
    <img src="/img/A2.png" style="width: 150px">
</a>

<a href="https://www.mi.com/xiaomibuds3pro" target="_blank">
    <img src="/img/A3.png" style="width: 150px">
</a>

</body>
</html>

1.7列表

<ul>
    <li>东华大学</li>
    <li>西华大学</li>
    <li>南华大学</li>
</ul>
<ol>
    <li>东华大学</li>
    <li>西华大学</li>
    <li>南华大学</li>
</ol>

1.8表格

<table>
    <thead>
    	<tr>  <th>ID</th>  <th>姓名</th>   <th>年龄</th>  </tr>
    </thead>
    <tbody>
    	<tr>  <td>10</td>  <td>张浩</td>  <td>19</td>   </tr>
        <tr>  <td>11</td>  <td>杨宇星</td>  <td>19</td>   </tr>
        <tr>  <td>12</td>  <td>张哲瀚</td>  <td>19</td>    </tr>
        <tr>  <td>13</td>  <td>董文昊</td>  <td>19</td>    </tr>
        <tr>  <td>14</td>  <td>哈哈哈</td>  <td>19</td>    </tr>
    </tbody>
</table>

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>用户列表</h1>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>头像</th>
                <th>姓名</th>
                <th>邮箱</th>
                <th>更多信息</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>
                    <img src="/static/a1.jpeg" alt="" style="height: 50px">
                </td>
                <td>张浩</td>
                <td>休息@live.com</td>
                <td>
                    <a href="http://www.chinaunicom.com.cn/about/leaders.html" target="_blank">查看详细</a>
                </td>
                <td>
                    编辑
                    删除
                </td>
            </tr>

             <tr>
                <td>1</td>
                <td>
                    <img src="/static/a1.jpeg" alt="" style="height: 50px">
                </td>
                <td>yyx</td>
                <td>休息@live.com</td>
                <td>
                    <a href="http://www.chinaunicom.com.cn/about/leaders.html" target="_blank">查看详细</a>
                </td>
                 <td>
                    编辑
                    删除
                </td>
            </tr>

             <tr>
                <td>1</td>
                <td>
                    <img src="/static/a1.jpeg" alt="" style="height: 50px">
                </td>
                <td>董文昊</td>
                <td>休息@live.com</td>
                <td>
                    <a href="http://www.chinaunicom.com.cn/about/leaders.html" target="_blank">查看详细</a>
                </td>
                 <td>
                    编辑
                    删除
                </td>
            </tr>

             <tr>
                <td>1</td>
                <td>
                    <img src="/static/a1.jpeg" alt="" style="height: 50px">
                </td>
                <td>zzh</td>
                <td>休息@live.com</td>
                <td>
                    <a href="http://www.chinaunicom.com.cn/about/leaders.html" target="_blank">查看详细</a>
                </td>
                 <td>
                    编辑
                    删除
                </td>
            </tr>
        </tbody>
    </table>
  </body>
</html>

1.9input系列(7个)

<input type="text" />
<input type="password">    
<input type="file"> 

<input type="radio" name="n1"><input type="radio" name="n1"><input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox">乒乓球
<input type="checkbox">棒球

<input type="button" value="提交">  -->普通的按钮
<input type="submit" value="提交">  -->提交表单

1.10 下拉框

<select>
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
</select>

<select multiple>
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
</select>

1.11多行文本

<textarea></textarea>

案例:用户注册

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


<h1>用户注册</h1>
<div>
    用户名:<input type="text"/>
</div>
<div>
    密码:<input type="password"/>
</div>

<div>
    性别:
    <input type="radio"><input type="radio"></div>

<div>
    爱好:
    <input type="checkbox">篮球
    <input type="checkbox">足球
    <input type="checkbox">乒乓球
</div>

<div>
    城市:
    <select>
        <option>太原</option>
        <option>上海</option>
        <option>深圳</option>
    </select>
</div>

<div>
    爱好:
    <select multiple>
        <option>游戏</option>
        <option>睡觉</option>
        <option>吃饭</option>
        <option>学习</option>
    </select>
</div>

<div>
    备注:<textarea></textarea>
</div>

<div>
    <input type="button" value="button按钮">
    <input type="submit" value="submit按钮">
</div>
</body>
</html>

知识点回顾和补充

  1. 网站请求的流程

  2. 一大堆的标签

    h/div/span/a/img/ul/li/table/input/textarea/select
    
  3. 网络请求

    • 在浏览器的URL中写入地址,点击回车,访问。

      浏览器会发送数据过去,本质上发送的是字符串:
      "GET /explore http1.1\r\nhost:...\r\nuser-agent\r\n..\r\n\r\n"
      
      浏览器会发送数据过去,本质上发送的是字符串:
      "POST /explore http1.1\r\nhost:...\r\nuser-agent\r\n..\r\n\r\n数据库"
      
    • 浏览器向后端发送请求时

      • GET请求【URL方法 / 表单提交】

        • 现象:GET请求、跳转、向后台传入数据数据会拼接在URL上。

        • GET请求明显不太安全

          https://www.sogou.com/web?query=安卓&age=19&name=xx
          

          注意:GET请求数据会在URL中体现。

      • POST请求【表单提交】

        • 现象:提交数据不在URL中而是在请求体中。

案例:用户注册

  • 新创建项目

  • 创建Flask代码

    from flask import Flask, render_template, request
    
    app = Flask(__name__)
    
    
    @app.route('/register', methods=['GET', "POST"])
    def register():
        if request.method == "GET":
            return render_template('register.html')
    
        else:
            user = request.form.get("user")
            pwd = request.form.get("pwd")
            gender = request.form.get("gender")
            hobby_list = request.form.getlist("hobby")
            city = request.form.get("city")
            skill_list = request.form.getlist("skill")
            more = request.form.get("more")
            print(user, pwd, gender, hobby_list, city, skill_list, more)
            # 将用户信息写入文件中实现注册、写入到excel中实现注册、写入数据库中实现注册
    
            # 2.给用户再返回结果
            return "注册成功"
    
    
    if __name__ == '__main__':
        app.run()
    
    
  • HTML代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <h1>用户注册</h1>
    
    <form method="post" action="/register">
        <div>
            用户名:<input type="text" name="user"/>
        </div>
        <div>
            密码:<input type="password" name="pwd"/>
        </div>
        <div>
            性别:
            <input type="radio" name="gender" value="1"><input type="radio" name="gender" value="2"></div>
        <div>
            爱好:
            <input type="checkbox" name="hobby" value="10">篮球
            <input type="checkbox" name="hobby" value="20">足球
            <input type="checkbox" name="hobby" value="30">乒乓球
            <input type="checkbox" name="hobby" value="40">棒球
        </div>
    
        <div>
            城市:
            <select name="city">
                <option value="bj">北京</option>
                <option value="sh">上海</option>
                <option value="sz">深圳</option>
            </select>
        </div>
    
        <div>
            爱好:
            <select name="skill" multiple>
                <option value="100">吃饭</option>
                <option value="101">睡觉</option>
                <option value="102">打球</option>
            </select>
        </div>
    
        <div>
            备注:<textarea name="more"></textarea>
        </div>
    
        <input type="submit" value="submit按钮">
    </form>
    
    </body>
    </html>
    
    

案例:登录()

见代码示例。

页面上的数据,想要提交到后台:

  • form标签包裹要提交的数据的标签。
    • 提交方式:method="get"
    • 提交的地址:action="/xxx/xxx/xx"
    • 在form标签里面必须有一个submit标签。
  • 在form里面的一些标签:input/select/textarea
    • 一定要写name属性 <input type="text" name="uu"/>

总结

  1. 称呼

    - 浏览器能够识别的标签(不专业)
    - HTML标签。
    
    什么是是HTML?超文本传输语言(与浏览器搭配)。
    
  2. HTML标签(默认格式样式、以后通过手段可以修改)

  3. HTML标签与编程语言无关

    • java + HTML
    • c# + HTML
    • php + HTML
    • python + HTML
  4. 提醒:HTML标签比较多,标签还有很多很多,不必逐一学会。

3.CSS样式

css,专门用来“美化”标签。

  • 基础CSS,写简单页面 & 看懂 & 改。
  • 模块,调整和修改。

3.1 快速了解

<img src="..." style="height:100px" />

<div style="color:red;">东华大学</div>

3.2 CSS应用方式

1. 在标签上

<img src="..." style="height:100px" />

<div style="color:red;">东华大学</div>

2. 在head标签中写style标签(*)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color:red;
        }
    </style>
</head>
<body>

<h1 class='c1'>用户登录</h1>
<h1 class='c1'>用户登录</h1>
<h1 class='c1'>用户登录</h1>
<h1 class='c1'>用户登录</h1>
    
</body>
</html>

3.写到文件中(*)

.c1{
    height:100px;
}

.c2{
    color:red;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="common.css" />
</head>
<body>

<h1 class='c1'>用户登录</h1>
<h1 class='c2'>用户登录</h1>
<h1 class='c2'>用户登录</h1>
<h1 class='c1'>用户登录</h1>
    
</body>
</html>

3.3 选择器

  • ID选择器

    #c1{
        
    }
    
    <div id='c1'></div>
    
  • 类选择器(最多)

    .c1{
        
    }
    
    <div clss='c1'></div>
    
  • 标签选择器

    div{
        
    }
    
    <div>xxx</div>
    
  • 属性选择器

    input[type='text']{
    	border: 1px solid red;
    }
    .v1[xx="456"]{
    	color: gold;
    }
    
    <input type="text">
    <input type="password">
    
    <div class="v1" xx="123">s</div>
    <div class="v1" xx="456">f</div>
    <div class="v1" xx="999">a</div>
    
  • 后代选择器

    .yy li{
        color: pink;
    }
    .yy > a{
        color: dodgerblue;
    }
    
    <div class="yy">
        <a>百度</a>
        <div>
            <a>谷歌</a>
        </div>
        <ul>
            <li>美国</li>
            <li>日本</li>
            <li>韩国</li>
        </ul>
    </div>
    

关于选择器:

多:类选择器、标签选择器、后代选择器
少:属性选择器、ID选择器

关于多个样式 & 覆盖的问题:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: red;
            border: 1px solid red;
        }
        .c2{
            font-size: 28px;
            color: green;
        }
    </style>
</head>
<body>
    <div class="c1 c2">中国联通</div>
</body>
</html>

补充:下面的不要覆盖我,要用important。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: red !important;
            border: 1px solid red;
        }
        .c2{
            font-size: 28px;
            color: green;
        }
    </style>
</head>
<body>
    <div class="c1 c2">中国联通</div>
</body>
</html>

3.4 样式

1. 高度和宽度

.c1{
    height: 300px;
    width: 500px;
}

注意事项:

  • 宽度,支持百分比。
  • 行内标签:默认无效
  • 块级标签:默认有效(霸道,右侧区域空白,也不给你占用)

2. 块级和行内标签

  • 块级
  • 行内
  • css样式:标签 -> display:inline-block

示例:行内&块级特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            display: inline-block;

            height: 100px;
            width: 300px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <span class="c1">中国</span>

    <span class="c1">中国</span>

    <span class="c1">中国</span>

    <span class="c1">中国</span>
</body>
</html>

示例:块级和行内标签的设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
    <div style="display: inline;">中国</div>
    <span style="display: block;">联通</span>
</body>
</html>

注意:块级 + 块级&行内。

3.字体设置

  • 颜色
  • 大小
  • 加粗
  • 字体格式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: #00FF7F;
            font-size: 58px;
            font-weight: 600;
            font-family: Microsoft Yahei;
        }
    </style>
</head>
<body>
    <div class="c1">中国联通</div>
    <div>中国移动</div>
</body>
</html>

4.文字对齐方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 59px;
            width: 300px;
            border: 1px solid red;

            text-align: center; /* 水平方向居中 */
            line-height: 59px; /* 垂直方向居中 */
        }
    </style>
</head>
<body>
    <div class="c1">郭智</div>
</body>
</html>

5.浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <span>左边</span>
        <span style="float: right">右边</span>
    </div>
</body>
</html>

div默认块级标签(霸道),如果浮动起来,就不一样了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item{
            float: left;
            width: 280px;
            height: 170px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

如果你让标签浮动起来之后,就会脱离文档流。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item {
            float: left;
            width: 280px;
            height: 170px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div style="background-color: dodgerblue">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div style="clear: both;"></div>
    </div>
    <div>你哦啊呀</div>
</body>
</html>

6.内边距

内边距,我自己的内部设置一点距离。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            border: 1px solid red;
            height: 200px;
            width: 200px;

            padding-top: 20px;
            padding-left: 20px;
            padding-right: 20px;
            padding-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div style="background-color: gold;">听妈妈的话</div>
        <div>
            小朋友你是否有很多问号
        </div>
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            border: 1px solid red;
            height: 200px;
            width: 200px;
            
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div style="background-color: gold;">听妈妈的话</div>
        <div>
            小朋友你是否有很多问号
        </div>
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            border: 1px solid red;
            height: 200px;
            width: 200px;

            padding: 20px 10px 5px 20px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div style="background-color: gold;">听妈妈的话</div>
        <div>
            小朋友你是否有很多问号
        </div>
    </div>
</body>
</html>

7.外边距

外边距,我与别人加点距离。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="height: 200px;background-color: dodgerblue;"></div>
<div style="background-color: red;height: 100px;margin-top: 20px;"></div>
</body>
</html>

总结

  • body标签,默认有一个边距,造成页面四边都有白色间隙,如何去除呢?

    body{
    	margin: 0;
    }
    
  • 内容居中

    • 文本居中,文本会在这个区域中居中。

      <div style="width: 200px; text-align: center;">东华</div>
      
    • 区域居中,自己要有宽度 + margin-left:auto;margin-right:auto

      .container{
          width: 980px;
          margin: 0 auto;
      }
      
      <div class="container">
      	adfasdf
      </div>
      

以上学习过程及记录均参考自武沛奇老师的《最新Python的web开发全家桶(django+前端+数据库)》链接:最新Python的web开发全家桶(django+前端+数据库)

posted @   粟一柯种一棵树  阅读(111)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
点击右上角即可分享
微信分享提示