zoukankan      html  css  js  c++  java
  • Day12 前端html

    前端基础之HTML

    老师博客:

    http://www.cnblogs.com/yuanchenqi/articles/6835654.html

    http://www.cnblogs.com/yuanchenqi/articles/6856399.html

    html:静态的内容都是一个html标签,是有一组组标签构成的文件

    css:对一个个标签做渲染定位

    js:所有页面的动态效果做渲染定位

    当写一个简单服务端的时候,一般这样写:

    主要的是这:conn.send=("HTTP/1.1 201 OK  %s" %response).encode("utf-8")

    :后面的内容才是发给客户端的,这里 的含义就是告诉客户端,后面是要接收的内容

     1 import  socket
     2 
     3 sock=socket.socket()
     4 sock.bind(("127.0.0.1",10001))
     5 sock.listen(5)
     6 
     7 while 1:
     8     print("waiting")
     9     conn,addr=sock.accept()
    10     data=conn.recv(1024)
    11     print("data",data)
    12     with open("index.html",encoding="utf-8") as f:
    13         response=f.read()
    14     conn.send=("HTTP/1.1 201 OK 
    
     %s" %response).encode("utf-8")
    15     conn.close()
    View Code


    2开头:成功

    3开头:重定向

    4开头:文件有问题

    5开头:服务器故障


    HTML结构:

    <!DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档
    <html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档,在它们之间是文档的头部<head>和主体<body>。
    <head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示,但是其间的元素有特殊重要的意义。
    <title></title>定义网页标题,在浏览器标题栏显示。 
    <body></body>之间的文本是可见的网页主体内容
    

    <head>内常用标签:

    meta介绍
    <meta>元素可提供有关页面的元信息(meta-information),针对搜索引擎和更新频度的描述和关键词。
    <meta>标签位于文档的头部,不包含任何内容。
    <meta>提供的信息是用户不可见的

    meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name 属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。 

    (1)name属性: 主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。    

    <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">    #网站搜索的关键字
     
    <meta name="description" content="老男孩培训机构是由一个很老的男孩创建的">  #网站首页的介绍
    

     (2)http-equiv属性:相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。

    <meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(注意后面的引号,分别在秒数的前面和网址的后面)
    #做跳转的,几秒后跳转到哪个网页
    <meta http-equiv="content-Type" charset=UTF8"> <meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />

    非meta标签:

    <title>oldboy</title>
        <link rel="icon" href="http://www.jd.com/favicon.ico">   #标签上显示的小图片
        <link rel="stylesheet" href="css.css">
        <script src="hello.js"></script> 
    

    标签:(分为两类,块级(boack)标签和内联(inline)标签)

    渲染规则:从上到下,从左到右

    block(块级):自己独占一行

    inline(内联):自己不独占一行

    块级标签可以嵌套内联标签和块级标签。

    内联标签只能嵌套内联标签。

    基本标签: 

    块级标签:

    <h1>:从1级到6级标签,都可以使用

    <p>:段落(内部可调属性)

    <br>:换行

    内联标签:

    <a href="https://www.baidu.com">click</a>:跳转标签

    <img src="图片地址" title=“当你将鼠标放在图片上想要显示的内容”>

    <b>和 <strong>: 加粗标签.

    <strike>: 为文字加上一条中线.

    <em>: 文字变成斜体.

    <sup>和<sub>: 上角标 和 下角表.

    <div></div>和<span></span>:没有什么效果

    常用标签:

    <img  src="图片地址" alt=“加载错误时显示的内容”  title=“当鼠标悬浮是显示的内容”

      width="100px" height="100px">

    <a href="https://www.baidu.com">点击</a>

    <a href="https://www.baidu.com" target="_blank">点击</a>

    #中间的文字可以换成其他对象

    <a href="https://www.baidu.com" target="_blank">

      <img  src="图片地址" alt=“加载错误时显示的内容”  title=“当鼠标悬浮是显示的内容”

        width="100px" height="100px">

      </a>

    #点击按钮跳转到别的网页

    <a>标签的锚功能:

    <a href="#c1">1</a>
    <a href="#c2">2</a>
    <a href="#c3">3</a>
    
    <div style="height: 500px;background-color: green" id="c1">第一章</div>
    <div style="height: 500px;background-color: wheat" id="c2">第二章</div>
    <div style="height: 500px;background-color: gray" id="c3">第三章</div>
    
    #上面写的利用href="#名字"来进行跳转
    #下面定义的模块里边id里边有名字
    #返回顶部的话可以利用空<a href="">返回顶部</a>来执行

    无序列表:

    <u1>

      <li>111</li>

      <li>111</li>

      <li>111</li>

    </u1>

    有序列表:

    <ol>

      <li>111</li>

      <li>222</li>

      <li>333</li>

    </ol>

    自己定义列表:

    <dl>

      <dt>河北省</dt>

        <dd>保定市</dd>

        <dd>衡水市</dd>

    </dl>

    表格标签<table>:

    #<tr>:一行的标签,     

    <td>:一列的标签

    #border:边框

    #cellpadding:字体距离边框的距离

    #cellspacing:边框距离边框的距离,一般利用="*px"来调试

    #让一个单元格独占几行或者几列:在<td>标签里边写:

      rowspan:单元格竖跨多少行

      colspan:单元格横跨多少列(合并单元格)

    <table border="1px">

      <tr>

        <td>111</td>

        <td>111</td>

      </tr>

      <tr>

        <td>222</td>

        <td>222</td>

      </tr>

    </table>

    form表单标签:与server端交互

    url == IP+port+路径+子页+?(当有问号时侯斌就是数据了)

    <form  action=""  method="..." >

      数据

    </form>

    #method:这里有两种方式的数据可以填,put 和 get,但是get的时候,会将数据放在url后边的数据里边去,如果是put,会将数据放到form表单里边的数据里边。   

    表单的数据可以写成:

    <p>姓名:<input type="text" name="useradmin" ></p>
    <p>密码:<input type="password" name="pwd"></p>
    <p>性别:<input type="radio" name="gender" value="1">男   <input type="radio" name="gender" value="0">女</p>
    <p>爱好:<input type="checkbox" name="hobbies" value="basketball" checked>足球  <input type="checkbox" name="hobbies" value="football">蓝球  <input type="checkbox" name="hobbies" value="doublecolorball">双色球  </p>
    #当有checked这个选项的时候,默认会将有将checked的打钩

    <p>上传:<input type="file"></p>
    #需要在表单<form>属性里边添加 enctype="multipart/form-data"

    <p><input type="reset"></p>
    #将页面内容刷新

    <p><input type="button" value="按钮" onclick="alert(1234)"></p>
    #定义一个按钮,可以绑定事件,后边的onclick就相当于一个事件
    <p>提交<input type="submit"></p> #提交按钮 #数据会以键值对来发送,是以后边name来定义的 #单选是利用radio类型来使用的,后边可以利用value跟上值 #复选框是利用checkbox来执行,后边可以利用value跟上值

      

    select标签:下拉菜单

    <select name="province" size="3" multiple="multiple">

    #size是默认显示几个,multiple的意思是可不可以多选

      <option value="1">河北省</option>

      <option value="2">湖北省</option>  

      <option value="3">湖南省</option>

      <option value="4" selected="selected">日本省</option>

    </select>

    #<option value="4" selected="selected">日本省</option>当标签里边有selected的时候,默认会显示这个标签。

    文本框:

    <textarea name="wenben"  id="" cols="30" rows="10"></textarea>

    可以在<p>和<texttarea>等属性中加入placeholder="wenben",这会显示一个默认灰色的字体,作为提醒用。

    点击前面对应的数字跳转到后边的文本框:

    <p>

      <label for="c1">姓名:</lable>

      

      <input type="text" name="useradmin" id="c1">

    </p>

    相当于点击上面的姓名自动跳转到后面c1对应的文本框

  • 相关阅读:
    Source InSight context 窗口丢失的解决办法
    [EffectiveC++]item41:了解隐式接口和编译器多态
    [EffectiveC++]item04:Make sure the objects are initialized before they're used
    [EffectiveC++]item3:尽可能使用const
    linux man指令问题
    解读ARM成功秘诀:薄利多销推广产品
    source insight设置问题 [问题点数:20分,结帖人leecapacity]
    totalcommander
    firefox
    处理SecureCRT中使用vim出现中文乱码问题
  • 原文地址:https://www.cnblogs.com/sexiaoshuai/p/7560594.html
Copyright © 2011-2022 走看看