• HTML标签和CSS基础


    前端技术概要


    HTML 裸体 只需要记住20个标签就可以搞定98%的网页

    CSS 穿衣服 颜色和位置

    Javascript 赋予生命,使其具有能动性。

    HTML的本质以及在web程序中的作用

    #!/usr/bin/env python
    # _*_ coding:utf-8 _*_
    import socket
    
    
    def handle_request(client):
    	buf = client.recv(1024)
    	client.send(bytes('HTTP/1.1 200 OK
    
    ', encoding='utf-8'))
    	client.send(bytes('Hello, Seven.', encoding='utf-8'))
    
    
    def main():
    	sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    	sock.bind(('localhost', 8000))
    	sock.listen(5)
    	while True:
    		connection, address = sock.accept()
    		handle_request(connection)
    		connection.close()
    
    if __name__ == '__main__':
    	main()
    

    然后在浏览器上输入:http://localhost:8000,就会立刻返回 "Hello,Seven.",从本质上来说web服务就是socket服务端,浏览器就是socket客户端。只不过nginx,apache等WEB服务会在上面做了很多的优化。

    可以对返回的内容进行着色,修改

    #!/usr/bin/env python
    # _*_ coding:utf-8 _*_
    import socket
    
    
    def handle_request(client):
    	buf = client.recv(1024)
    	client.send(bytes('HTTP/1.1 200 OK
    
    ', encoding='utf-8'))
    	client.send(bytes("<h1 style='background-color:red;'>Hello, Seven.<h1>", encoding='utf-8'))
    
    
    def main():
    	sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    	sock.bind(('localhost', 8000))
    	sock.listen(5)
    	while True:
    		connection, address = sock.accept()
    		handle_request(connection)
    		connection.close()
    
    if __name__ == '__main__':
    	main()
    

    服务器永远返回的是字符串,而在此时浏览器返回的是红色的字体,则是由浏览器解析到。因此我们必须学习浏览器的解析规则。要发送的字符串的内容(send(xxxxxxx)),我们则可以单独把他写到一个文件中(html文件),然后读取即可。

    HTML规则

    1. HTML规则为一套浏览器认识的规则。  

    2. 开发者:
        学习HTML规则
        开发后台程序:
          - 写HTML文件(充当模版的作用) *******
          - 数据库获取数据,然后替换到html文件指定位置(这里后面会有web框架专门来做这个事情)

    3. 本地测试
      - 找到文件路径,直接浏览器(chrome)打开
      - pycharm打开(Pycharm有时会有问题。)

    4. 编写html文件
      - document对应关系
      - HTML标签,标签内部可以写属性,切记一个文件中HTML标签只能有一个
      - 注释: <!-- 注释的内容 -->

    5. 标签分类
      - 自闭合标签,如:<meta charset="UTF-8">,比较少,没几个。注意自闭合标签</>,后面可以加个反斜杠,里面大写都不影响。推荐加上斜杠
      - 主动闭合标签,如:<title>Title</title>,比较多,一般都是主动闭合标签

    6. head标签中

        - <meta ->编码,跳转,刷新,关键字,描述,IE兼容
          <meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
          表示浏览器能用IE9就用IE9,不能用,用IE8。

        - title标签 页面的标头

        - <link/> 标头上面的图标,
          <link rel="shortcut icon" href="images/favicon.icon">
          <link rel="stylesheet", type="text/css", href="css/common.css">

        - <style/>

        - <script/>


      body标签(20个标签)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8"> # 这里面设置字符编码格式
        <title>Title</title>   # 这里面的Title为页面的标头
    </head>
    <body>
        <a href="https:www.baidu.com">百度走起</a>
    
    </body>
    </html>
    
    
    1. 头document type默认是标准的规范,当然还有很多的规范,如果写成别的规范,得到结果则会不同
    2. 类似html这种格式<html>xxxxxx</html>,叫做标签,这个是HTML标签,下面依次类推,head标签,body标签,a标签
    3. 标签的内部像:lang='en', charset='UTF-8'都是属性。
    4. html的注释是这么写的: <!-- xxxxxxx --> ,如果是多行注释的话把结尾放到多行里面。
    pycharm自动生成HTML的格式的解析

    head标签里面的标签

      

    - meta标签

    定义和用法
    <meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
    <meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

    提示和注释:
    注释:<meta> 标签永远位于 head 元素内部。
    注释:元数据总是以名称/值的形式被成对传递的。


    必需的属性
    属性 值 描述
    content some_text 定义与 http-equiv 或 name 属性相关的元信息

    可选的属性
    属性 值 描述

    http-equiv content-type 把 content 属性关联到 HTTP 头部
    expires
    refresh
    set-cookie

    name author 把 content 属性关联到一个名称。
    description
    keywords
    generator
    revised
    others

    scheme some_text 定义用于翻译 content 属性值的格式


    1,页面编码(告诉浏览器是什么编码)
    <meta httpEquiv="content-type" content="text/html;charset=utf-8">,这是复杂的写法,
    <meta charset="UTF-8"> # 这是简写

    2,刷新和跳转 (用的比较少,后面js会有动态的跳转)
    <meta http-equiv="Refresh", Content="30">
    <meta http-equiv="Refresh" content="5, url=http://www.baidu.com">

    3,关键字(使用表少,这个主要给搜索引擎来用)
    <meta name="keywords" content="Java,多线程,博客,栈,阿里云"/>

    4,描述(使用较少)
    例如:cnblogs
    <meta name="keywords" content="开发者,博客园,开发者,程序猿,程序媛,极客,编程,代码,开源,IT网站,Developer,Programmer,Coder,Geek,技术社区">
    <meta name="description" content="博客园是一个面向开发者的知。xxxxxxxx,博客园的使命是帮助开发者用代码改变世界。">

    5, X-UA-Compatible
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    # 结尾处IE7表示以IE7的标准模式打开


    - title标签 页面的标头

    - <link/> 标头上面的图标,
    <link rel="shortcut icon" href="images/favicon.icon"> # 其中shortcut icon为固定用法,后面为图标的路径
    <link rel="stylesheet", type="text/css", href="css/common.css"> # stylesheet为css会用到的

    - <style/> 欠下

    - <script/> 欠下

    body内标签(20多个标签在这里面)

    - 图标, &nbsp; &gt; &lt; 分别代指空格,大于号,小于号

    - p和br 标签. 其中p标签表示段落,p标签和p标签之间表示不同的段落,br标签则表示换行。

      <p>hello world. my name is tom. <br> I am from china !</p>
      <p>last week, i went to the school</p>
      <p>the sky is blue</p>
    - span标签 有多少字符就占多少地方,即使有多行也会放在一行。属于行内标签

    - H系列标签(H1--H6)

    - div标签 白板

    ---------小结----------
    所有的标签分为:
    块级标签:div(白板,被广泛使用), H系列(加大加粗),P标签(段落和段落之间有间距)
    行内标签:span(白板)
    标签之间可以嵌套
    标签存在的意义:CSS操作,js操作(比如定位某个字符串更加简单)

    小技能:chrome审查元素的使用:
        - 定位
        - 查看样式


    - input系列 + form标签
      input type='text' - name属性 - value 为默认值  (name标签可以让后台程序来区分是那个input标签发送的内容)
      input type='password' - name属性 -value 为默认值
      input type='submit' - value='提交' 提交按钮,表单
      input type='button' - value='登录' 按钮
      input type='radio' -单选框 - value(可以用来区别用户选择哪一个), checked=''checked(默认值), name(name相同则互斥)属性
      input type='checkbox' -复选框 - value ,checked=''checked, name属性(批量获取数据)
      input type='file' - 上传文件,依赖于form表单的一个属性 enctype="multipart/form-data"
      inPut type='reset' - 重置
      <textarea>默认值</textarea> - 多行文本框 -name属性
      select 标签 - name属性,内部option,(optgroup label="河北省" label不能选),value,提交到后台,size=N 显示N个,multiple="multiple" 可以多选


    - form标签 输入框中数据是以form的方式提交的。

    - a 标签
      - 跳转
      - 锚 href="#某个标签的ID" 标签的ID不允许重复

    - img标签
      src 图片路径
      alt 当找不到图片就先实现这个字符
      title 鼠标放在图片上显示的信息

    - 列表 不常用,后来会用css改造
      ul
        li
      ol
        li
      dl
        dt
        dd

    - 表格 常用
      table
        thead
          tr
            th
        tbody
          tr
            td

      cospan = 'N' 列合并单元格,N表示合并几个
      rowspan = 'N' 行合并单元格,N表示合并几个

    - label
      用于点击文字,使得关联的标签获取光标。原来点击"用户名"没有反应,关联之后点击用户名就可以获取光标的,进行输入。
      <label for="username">用户名:</label> # 用id进行关联
      <input id="username" type="text" name="user"/>

    - fieldset  (边框上面的文字,不常用)
      legend

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>输入框</title>
    </head>
    <body>
        <form action="http://localhost:8888/index" method="GET">   #以'GET'方式提交
            <input type="text" name="user"/>
            <input type="text" name="email"/>
            <input type="password" name="pwd"/>
            <!--{'user':'用户输入的用户','email':'xxx','pwd':'xxx'}-->   
            # 这一行为HTML真实提交的内容,是以字典的形式提交的。注意默认只会提交input标签里面的内容
            
            <input type="button" value="登录1" />
            <input type="submit" value="登录2" />    # 登录按钮暂时只有submit生效
        </form>
        <br/>
        <form action="http://localhost:8888/index" method="POST"> #以'POST'方式提交
            <input type="text" name="user" />
            <input type="text" name="pwd" />
            <input type="password" name="email" />
            <!--{'user':'用户输入的用户','email':'xxx','pwd':'xxx'}-->
            <input type="button" value="登录1" />
            <input type="submit" value="登录2" />
        </form>
    </body>
    </html>
    例子1


    GET和POST的区别
    如果是以'GET'的方式(也是默认方式),会把提交的数据拼接到URL上,然后发送到后端。
    如果是以'POST'的方式,也同样会把提交的数据发送到后台,只不过不会在URL上显示出来。
    http请求提交时会传递两部分东西:请求头,请求体(内容)。
    如果以'GET'的方式,提交的数据都会放到请求头里面(URL)中提交过去,请求体中没有数据内容。
    如果以'POST'的方式,提交的数据则会放到请求体(内容)中提交过去,请求头中则没有数据。
    两者没有安全与否的区别,是因为两者在抓包的时候都能够被抓到。

    可以利用这个属性写一个搜狗和百度的搜索引擎!

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <form enctype="multipart/form-data">
            <div>
                <input type="text"/>
                <p>请选择性别:</p><input type="radio" name="gender" value="1" checked="checked"/><input type="radio" name="gender" value="2"/>
                中性<input type="radio" name="gender" value="3"/>
                <p>爱好:</p>
                篮球<input type="checkbox" name="favor" value="1"/>
                足球<input type="checkbox" name="favor" value="2" checked="checked"/>
                排球<input type="checkbox" name="favor" value="3"/>
                桌球<input type="checkbox" name="favor" value="4"/>
                网球<input type="checkbox" name="favor" value="5"/>
                <p>技能:</p>
                撩妹<input type="checkbox" name="skill" checked="checked"/>
                写代码<input type="checkbox" name="skill" />
                <p>上传文件</p>
                <input type="file" name="filename"/>
            </div>
            <input type="submit" value="提交" />
            <input type="reset", value="重置"/>
        </form>
    
    </body>
    </html>
    例子2

    css

    CSS
      在标签上设置style属性:
      backgroup-color:#2459a2
      height:48px;
      ...

      获取背景颜色的两种方式:

      1,通过chrome-->检察源码--> style-->coolor
      2,rgb对照表

      总结:对于CSS我们要学习的东西也就是style属性里面的key:value。

    编写CSS样式:
    1,标签的style属性
    2,写在head里面,style标签中写样式
    - id选择器 # 不常用
      #i1{
        background-color: #66bc71;
      height: 48px;
      }


      - class选择器 # 常用
      .名称{
         ...
      }
      <标签 class='名称'> xxxx </标签>


      - 标签选择器 # 必会
      div{
        ...
      }
      会在下面所有的div标签中应用样式,定义时可以写其他的标签。


      - 层级选择器(空格) # 必会
      .c1 .c2 div {
        ...
      }
      会在class='c1'的标签下面找class='c2'标签下面找标签是div,然后应用此样式。
      最好不要太深,否则用id选择器比较合适!


      - 组合选择器(逗号) # 必会
      #c1,.c2,div{
      ...
      }
      对上面几个CSS选择器进行组合选择


      - 属性选择器 # 必会
      对选择到的标签再通过属性再进行一次筛选
      /*input[type="text"]{background-color: #66bc71; 100px;height: 20px;}*/     # 为注释行
      /*input[n="tom"]{background-color: #66bc71; 100px;height: 20px;}*/    # 为注释行
      .c1[n="tom"]{background-color: #66bc71; 100px;height: 20px;}
      # 还可以对自定义的 n = 'tom' 进行样式应用



    3, CSS的存在形式:


      1,可以写在标签<style>xxxxx</style>里面

      2,CSS样式也可以单独写到文件中
    <link rel="stylesheet" href="common.css"/> #写到head标签中对CSS文件进行引用


    PS:
      优先级,标签里面的style优先,编写顺序,就近原则。


    4,注释
      /* xxxxxxx */


    5,边框
      - 宽度,样式,颜色(4px solid coral)
      - border-left 只打印边框左边的部分

      <div style="border: 4px solid coral">hello world</div>


    6,字体
      height: 30px; 高度 百分比(单独用无效)
       500px; 宽度 像素,百分比
      text-align: center; 水平方向居中
      line-height: 30px; 垂直方向根据标签高度(和标签高度一样才会居中)
      color: darkred; 字体颜色
      font-size: larger; 字体大小
      font-weight: 900; 字体加粗
      border: 3px solid rebeccapurple;


    6,背景


    7,float
      让标签飘起来,块级标签也可以堆叠
      老子管不住: <div style="clear: both"></div>

      <div style=" 20%;background-color: chartreuse; float: left">hello</div>
      <div style=" 80%;background-color: crimson; float: left">world</div>

      高级的写法:

      利用伪类清除浮动

      

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .clearfix {
                background-color: cornflowerblue;
                border: 1px solid red
            }
            .clearfix:after{
                content: ".";
                clear: both;
                display: block;
                visibility: hidden;
                height: 0;
    
            }
            #i2{
                background-color: green;
                float: left;
                height: 100px;
            }
            #i3{
                background-color: aqua;
                float: left;
                height: 50px;
            }
        </style>
    </head>
    <body>
        <div class="clearfix">
            <div id="i2">hello world</div>
            <div id="i3">h2</div>
            <!--<div style="clear: both"></div>-->
        </div>
    
    
    </body>
    </html>
    
    
    
    # 利用伪类清除浮动
    # claerfix:after 相当于在这个clearfix这个标签后要进行的操作

      

    8,display
      display:inline 块级标签转化成行内标签
      display:block 行内标签转化成块级标签
      display:inline-block 既有inline的属性(自己有多少占多少),也有block的属性(可以设置高度,宽度,....)
      display:none 让标签消失(在后面学习js的时候会用到)

      行内标签无法设置:高度,宽度,padding, margin
      块级标签也可以设置:高度,宽度,padding, margin


    9,padding margin(0, auto) 边距

      padding: 内边距
      margin: 外边距



    颜色和位置

  • 相关阅读:
    敏捷开发流程的8个步骤
    PingCode Wiki ——国内最顶级的产研团队知识库产品介绍
    国内外最知名的9大工作任务管理软件盘点
    国内外最好用的18个协同办公系统盘点
    知识库的作用
    国内外好用的OKR管理工具有哪些?
    敏捷宣言及完整解读
    如何在敏捷中管理和减少技术负债?
    敏捷开发框架都有哪些
    PingCode与Jira 敏捷开发管理能力的对比
  • 原文地址:https://www.cnblogs.com/yang-ning/p/6803731.html
Copyright © 2020-2023  润新知