zoukankan      html  css  js  c++  java
  • 前端基础 html

    即html、css、js部分组成

      骨架,修饰,动态修饰

    一、HTTTP

      Web服务的本质:浏览器+服务器

        浏览器向服务端发送请求

        服务端接收请求

        服务端返回相应的响应

        浏览器接收响应,根据特定的规则渲染页面展示给用户看

      HTTP协议:

        超文本传输协议

        规定了浏览器与服务端之间消息传输的数据格式

    四大特性 请求数据格式 响应数据格式 响应状态码
    1.基于请求响应 请求首行(标识HTTP协议版本,当前请求方式) 响应首行(标识HTTP协议版本,响应状态码) 1XX:正在处理数据
    2.基于TCP/IP之上的作用于应用层的协议 请求头(一大堆K,V 键值对) 响应头(一大堆k,v键值对) 2XX:成功响应
    3.无状态     3XX:重定向(例如跳转登陆页面)
    4.无连接 请求体(携带敏感信息) 响应体(返回给浏览器页面的数据 通常响应体都是html页面) 4XX:请求错误(404)
    5XX:服务器内部错误

      请求方式:

        1.get请求:朝服务端要资源(比如浏览器窗口输入网址)

        2.post请求:朝服务端提交数据(如用户登陆,提交用户名和密码)

      ps:URL(统一资源定位符  即  网址)

    二、HTML

      超文本标记语言:让你的页面能够被浏览器显示出来,内部都是html代码

      浏览器只认识html,css,js

      1、html注释:

        格式:<!--单行注释--!>

          :<!--

           多行注释

           --!>

      2、html文档结构

        <html>

        <head></head>:head内的标签,定义一些配置给浏览器看

        <body></body>:body内的标签,是浏览器展示给用户看的

        </html>

      3、标签分类

        3.1方法一:

          双标签  例: <h1></h1>   <a></a>

          单标签  例:自闭合标签<img/>

        3.2方法二:

          块儿级标签(独占浏览器一行)  div

            1.可以修改长度

            2.内部可以嵌套块儿级标签(p标签除外) 

          行内标签:  span 

      4.常用标签

       4.1.head内常用标签

        title  用来显示网页标题

        style  用来控制样式,内部支持写css代码

        script  内部支持写js代码,也支持导入外界的js文件

        link  专门用来引入的css文件

       4.2.body内常用标签

        4.2.1基本标签

          h标签:标题标签

          p标签:段落标签

          <b>加粗</b>、<i>斜体</i>、<u>下划线</u>、<s>删除</s>、<!--换行--><br>、<!--><hr>

        4.2.2符号:

          空格 &nbsp、 > &gt、< &lt、& &amp、¥ &yen、版权© &copy、注册 &reg

        4.2.3常用标签:

          div(块级)

          span(行内)

          p(段落)

          img标签(图片)

            <img src="图片路径" alt="加载不出的提示" title="悬浮提示" height="高度">

          a标签(超链接)

            <a href="" id="d1">顶部</a> ... <a href="#d1" id="d1">点此顶部</a>

            <a href="URL网址" target="(_self本页跳,_blank另开跳转)">click me</a>

       ps:每一个标签都有三个重要属性:

         id值,class值,style值(标签内支持直接写css代码)

       4.3列表标签

        4.3.1无序列表

    <ul type="disc">
      <li>第一项</li>
      <li>第二项</li>
    </ul>

          type属性:

            disc(实心圆点,默认值)

            circle(空心圆圈)

            square(实心方块)

            none(无样式)

        4.3.2有序列表

    <ol type="1" start="2">
      <li>第一项</li>
      <li>第二项</li>
    </ol>

          type属性:

            1 数字列表,默认值

            A 大写字母

            a 小写字母

            Ⅰ大写罗马

            ⅰ小写罗马

        4.3.3标题列表

    <dl>
      <dt>标题1</dt>
      <dd>内容1</dd>
      <dt>标题2</dt>
      <dd>内容1</dd>
      <dd>内容2</dd>
    </dl>

       4.4表格

                <table>
                    <thead></thead>
                    <tbody></tbody>
                </table>
                <table border="20(表边框)" cellpadding="10(内边距)" cellspacing="10(外边框)">
                
                tr表示一行
    
                th和td都是文本
                    建议在thead内用th
                    tbody内用td
                
                colspan表示的水平方向
                rowspan表示的竖直方向

      4.5 from表单

        功能:用于向服务器传输数据,从而实现用户与web服务器的交互

       
    action 控制数据提交的目的地
    input

    text:普通文本
    password:密文 不展示明文
    date:日期

    file:获取用户上传的文件

    submit:触发提交动作
    button:普通按钮 没有实际意义 但是可以通过js绑定事件实现自定义动作
    reset:重置表单内容

    radio:单选 可以通过checked控制默认选择(当属性值和属性名相同的情况下 可以简写 checked) checked="checked"
    checkbox:多选 同上 可以设置默认值

    hidden:隐藏

    select 默认单选,
    可以指定multiple变多选,默认选择selected = "selected"
    用的是option标签
    textarea      获取用户输入的大段文本
    disabled 禁用
    readonly 只读
            form表单默认是get请求 你需要通过method参数 换成post提交
            form表单中 要想触发提交动作 
                只有两种情况可以
                    1.input标签type指定成submit
                    2.直接写button标签
                
                获取用户输入(输入 选择 上传...)的标签 都必须有一个name属性
                这个name属性就类似于字典的key,而标签获取到的用户写入的值就类似于字典的value
                
            
            
            <input type="text" id="d1" name="username" value="默认值">
                name就相当于是字典的key
                value就是字典的值
                获取都的用户输入都会被放入value属性中

      4.6 label标签

        定义:<label> 标签为 input 元素定义标注(标记)

          整块标签绑定,鼠标点击整块都有效果    

        说明: 1.label 元素不会向用户呈现任何特殊效果。

            2.<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

  • 相关阅读:
    C# 读写ini文件
    How to Create DLL(Dynamic link library)
    运算符优先级
    汇编指令:lea
    AT&T汇编语法与x86语法基本区别
    栈的生长方向理解
    Mac Mojave 10.14.5安装python tesserocr
    一台电脑发布多个网站
    局域网内电脑之间互相访问网站
    判断两个对象是否相等——javascript实现
  • 原文地址:https://www.cnblogs.com/xiaowangba9494/p/11455934.html
Copyright © 2011-2022 走看看