zoukankan      html  css  js  c++  java
  • CSIC_716_20191225【HTML基础入门】

    HTTP协议

    超文本传输协议HyperText Transfer Protocol

    四大特性

    1、HTTP是一个简单的请求-响应协议。 

    2、基于TCP协议,作用于应用层上。  

    3、无状态:HTTP是一种无状态协议,即服务器不保留与客户交易时的任何状态。  

    4、无连接:客户与服务器之间的HTTP连接是一种一次性连接,它限制每次连接只处理一个请求,当服务器返回本次请求的应答后便立即关闭连接,下次请求再重新建立连接。

    数据格式:

    1、请求格式(4行)     请求首行(请求方式、协议版本) 请求头(key--value键值对) 空行     请求体(携带的数据此处有可能为空,要视请求方式而定)

    请求方式:

    get请求(向服务端索要数据,例如打开网址)    post请求(向服务端提交数据,例如登录功能)

    2、响应格式(4行)  响应首行(响应状态码)   响应头(key--value键值对)  空行    响应体(浏览器展示给用户看的数据)

    响应状态码:

    1xx 表示服务端已经收到客户端的数据,正在处理,可以继续提交数据。   2xx:其中200表示请求成功服务端已返回请求的数据。 3xx: 重定向(本来访问的是A,结果转到了B)。4xx :其中403表示不具备请求的条件,没资格访问; 404:表示请求的资源不存在。5xx 其中500表示服务器内部错误

    HTML

    超文本标记语言(HyperText Markup Language)

    浏览器能识别的语言  html、xml、css、javascript

    xml也可以书写前端页面,主要运用于odoo框架,常用于编写企业内部的管理软件(ERP)

    html中要写注释,<!-- 这里是注释,可以写多行  -->

    由于HTML写法复杂,一般都要以注释来分隔代码块,如

    <!-- 左侧菜单栏样式开始  -->

    <!-- 左侧菜单栏样式结束  -->

    HTML文档结构

    <html>
    <head></head>    head里面的参数,是给浏览器识别并做相应操作的
    <body></body>   body里面的参数,是展示给用户的花里胡哨的页面数据
    </html>
    

      

    标签分类:双标签  和  自闭合标签

    标签分类2:块标签 和行内标签

    块标签(h、p、br、hr、div)可以嵌套块标签和行内标签,但是块标签<p>最好不要嵌套块标签,不推荐。

    行内标签(u、i、s、b、span)什么都不能嵌套,自身文本多大就占多大。

     

    <head> </head>中常见的标签

    title 、style 、link、 script 、meta

    title 定义网页标题 。  style支持在标签中直接写css代码。  link 支持引入css文件。  script可以在标签中写js代码,也可以通过src属性引入js文件。  meta,通过name属性定义keywords和description。

     

     

    URL:(Uniform Resource Locator)统一资源定位符

    在WWW上,每一信息资源都有统一的且在网上唯一的地址,该地址就叫URL(Uniform Resource Locator,统一资源定位符),它是WWW的统一资源定位标志,就是指网络地址。

    <body></body>中常见的标签

    基本标签

    h1--h6:标题标签

    s:删除线  u:下划线   i:斜体  b:加粗  p独占一行  br换行  hr分割线

    其中br和hr单独使用。

    特殊符号

    空格&nbsp;  大于号 &gt;  小于号&lt;  &符号&amp;  人民币符号&yen;  版权标识符号&copy;  注册商标&reg;

    常用标签

    块级标签<div></div>   行内标签<span></span> 多用于页面布局

    图片标签  <img>标签  单独使用,不成对

    src参数:可以写入一个网站图片地址、本地图片地址、或url连接(向url发送请求,索要数据)

    alt: 当图片加载不出来的时候,显示alt后面的信息

    title:鼠标悬浮在图片上时,显示的信息

    width和height:如果只修改一个值,另一个值会等比例缩放,如果两个值都改,图片可能会失真

    链接标签  <a></a> 

    href属性:跳转到url所对应的资源

    target属性:‘_blank’是新打开一个窗口访问,如果不写,默认的是‘_self’。

    此外,<a>标签还有锚点功能,配合id一起使用

    标签应具备的属性:

    id属性和class属性,id属性在一个页面中要保证唯一。class属性可直接引用别的类的样式。

    列表标签

    无序列表

     ul中也可以设置 type="None",去掉无序列表开头的小黑点

    有序列表

    标题列表

    表格标签

    固定写法(<th>加粗,常用于<thead>表头;<td>不加粗,常用于<tbody>表体;一个<tr></tr>表示一行)

    <table border="1">
        <thead>
        <tr>
            <th>这里是标题1</th>    
            <th>这里是标题2</th>
            <th>这里是标题3</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>这里是内容1</td>
            <td>这里是内容2</td>
            <td>这里是内容3</td>
        </tr>
        <tr>
            <td>this 1</td>
            <td>this 2</td>
            <td>this 3</td>
        </tr>
        </tbody>
    </table>

     

    如果要合并单元格, 跨行的合并用 ,即列方向的竖向合并,用rowspan,并且需要手工注释被合并的单元格

    <table border="1">
        <thead>
        <tr>
            <th>这里是标题1</th>
            <th>这里是标题2</th>
            <th>这里是标题3</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td rowspan="2">这里是内容1</td>
            <td>这里是内容2</td>
            <td>这里是内容3</td>
        </tr>
        <tr>
    <!--        <td>this 1</td>-->   被手工注释
            <td >this 2</td>
            <td>this 3</td>
        </tr>
        </tbody>
    </table>
    

      

     如果要合并单元格, 跨列的合并用 ,即行方向的横向合并,用clospan,并且需要手工注释被合并的单元格,此时注释本行的单元格,在同一个<tr>中

    <table border="1">
        <thead>
        <tr>
            <th>这里是标题1</th>
            <th>这里是标题2</th>
            <th>这里是标题3</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td rowspan="2">这里是内容1</td>
            <td colspan="2">这里是内容2</td>
    <!--        <td>这里是内容3</td>-->
        </tr>
        <tr>
    <!--        <td>this 1</td>-->
            <td >this 2</td>
            <td>this 3</td>
        </tr>
        </tbody>
    </table>
    

      

    表单标签(很重要)

    form标签

    可以获取用户输入(包括获取输入内容、选择内容、上传的文件),并将其打包发送给后端。

    action参数:用来控制参数提交的路径。

    action参数三种写法 1、如果action为空,默认提交数据到当前页面所在地址。  2、写上准确的绝对路径。  3、只写路径的后缀名/index/

    method参数有 get 和 post 等。method = 'get' 时,会将输入的信息展示在浏览器的地址栏,不安全。method= ‘post’ 时,地址栏中不会出现输入信息。

    ecctype参数是encode_type的简写,含义是  发送到服务器之前应该如何对表单数据进行编码,当表单中含有文件上传时,必须指定为 enctype='multipart/form-data'

     ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    label标签常常结合input标签一起使用,<label for=' ' ><input  type='  ' ></label>,  for用来表示input的id值。input外部加上lable后,点击label内的任意内容,都会跳转到input中去,即让input标签聚焦。

    通过<input>标签来获取用户输入

    input的type属性

    text普通文本框

    password界面看不到输入内容

    date 日期插件

    radio多选一,通过关键字checked来设置一个默认值

    checkbox多选多,通过关键字checked来设置一个或多个默认值

    file 打开文件上传

    submit 出发form表单提交的动作, 通过value='XX'设置按钮的名字,注意:<input type='submit' value=’‘提交>  和<button>提交<button>效果是一样的。

    reset 重置表单中的所有内容,通过value='XX'设置按钮的名字

    button 一个没有任何功能的按钮,只起到占位的作用,通过value='XX'设置按钮的名字

    通过select来获取用户选择的内容

    <select><option></option></select>  option中的内容就是选项,

    可以在select标签中加入multiple改成多选,可以在option标签中加selected进行默认

    通过textarea设置大文本框

    <textarea cols=' ', rows = ' '>  </textarea>

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>login</title>
    
    </head>
    
    <body>
    <p>登录界面</p>
    <form action="">
    
        <p>
            <label for="d1">用户名 <input type="text" id="d1" name="username"></label>
        </p>
    
    
        <p><label for="d2">密码 <input type="password" name="password" id="d2"> </label></p>
    
        <p>
            <label>性别: <input type="radio" name="gender" checked>男
                <input type="radio" name="gender">女
                <input type="radio" name="gender">其他
            </label>
        </p>
        <p><label for="d4">爱好
            <input type="checkbox" name="hobby" checked>唱
            <input type="checkbox" name="hobby" checked>跳d
            <input type="checkbox" name="hobby" checked>rap
            <input type="checkbox" name="hobby" checked>篮球
    
        </label></p>
        <p><label for="d4">出生日期 <input type="date" id="d4" name="birthday"> </label></p>
    
    
        <p><label for="d89">选人 <select name="province" id="d89" multiple>
            <option value="" selected>张三</option>
            <option value="" selected>李四</option>
            <option value="">浙江</option>
            <option value="">广东</option>
        </select></label></p>
    
        <p><label for="06">附件 <input type="file" id="06"> </label></p>
    
        <p><label for="07">用户名 <input type="text" id="07"> </label></p>
    
    
        <p><label>省份 <select name="province" id="d8">
            <option value="">上海</option>
            <option value="" selected>江苏</option>
            <option value="">浙江</option>
            <option value="">广东</option>
        </select> </label></p>
        <p>
            <label for="009">简介<textarea name="简介" id="009" cols="30" rows="10"></textarea></label>
        </p>
    
        <p>
            <input type="submit" value="register">
            <input type="reset" value="chogngzhi">
            <!--    <input type="text" value="">-->
            <input type="button" value="闲置">
            <button>点我提交</button>
        </p>
    
    </form>
    </body>
    </html>
    

      

  • 相关阅读:
    Elasticsearch
    Docker
    Python 目录
    淘宝
    MyBatis
    Docker 安装ubuntu服务器
    goodrain云平台 mysql主从同步应用创建
    flask入门
    virtualenv
    进程 线程(二)
  • 原文地址:https://www.cnblogs.com/csic716/p/12098135.html
Copyright © 2011-2022 走看看