zoukankan      html  css  js  c++  java
  • 前端之HTML篇

    HTTP协议:

    超文本传输协议,用来规定服务端和浏览器之间的数据交互格式

    四大特性:

      基于请求响应

            基于TCP/IP作用于应用层之上的协议

      无状态:不会保存用户信息跟状态

          cookie、session、token...这些出现就是为了弥补无状态这个特性,可以用来记录用户的状态

      无/短链接:请求后得到响应后,就没有任何链接和关系了

    请求格式:(请求首行 + 请求头 + + 请求体)

      请求首行(标识http协议版本,当前请求方式)

      请求头(一大推k,v键值对)

      

      请求体(只用post请求才有,存放post请求提交的敏感数据)

      注意:如果请求头没有,则要用  代替,也就是无论请求首行、请求头还是请球体缺失,都要用 补上)

    响应数据格式
           响应首行 (标识http协议版本,响应状态码)
           响应头 (一大推k,v键值对)
           
           响应体 (返回给浏览器展示给用户看的数据)

    请求方式
      get请求:跟服务端要数据 
      post请求:向服务端提交数据

    响应状态码:用一串简单的数字来表示一些复杂的状态或者描述性信息,主要有五个系列
      1xx:服务端已经成功接收到了你的数据正在处理,你可以继续提交额外的数据
      2xx:服务端成功响应了你想要的数据
      3xx:重定向(当你在访问一个需要登陆后才能看到的页面,会自动跳转到登陆页面)
      4xx:请求错误
      5xx:服务器内部错误。

    url:统一资源定位符 

    HTML

    HTML:超文本标记语言,是一种用于创建网页的标记语言,文件扩展名:.htm或.htm

    HTML文档结构:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8"> #设置编码
        <title>Title</title>  #设置标题
    </head>
    <body>
    </body> </html> 

    #注释 <!--单行注释-->
    <!-- 1 多行注释 2 3 -->

    HTML标签分类及语法:

    1. 单标签:<标签名 属性1=“属性值1” 属性2=“属性值2”…… />
    2. 双标签:<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>

    HTML三个重要属性:

    • id:定义标签的唯一ID,HTML文档树中唯一
    • class:css样式类名,作用于html元素
    • style:规定元素的行内样式(css样式)

    HTML常用标签

    head内常用标签:

    • <title></title>  定义网页标题
    • <style>内部样式内容(css代码) </style>  定义内部样式表

    Meta标签

    组成:http-equiv属性和name属性组成

    • http-equiv属性:相当于http的文件头作用,主要向浏览器传回一些有用的信息,以帮助正确的显示网页
    • name属性:主要用于描述网页,属性值content的内容主要是便于搜索引擎机器的查找
    <!--指定文档的编码类型(需要知道)-->
    <meta http-equiv="content-Type" charset=UTF8">  
    <!--2秒后跳转到对应的网址,注意引号(了解)-->
    <meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
    
    <!--name属性-->
    <meta name="keywords" content="战争,战争片、战争电影">
    <!--
    当你用浏览器搜索的时候,只要输入kwywords后面指定的关键字,比如战争等,那么该网页就有可能被百度搜索出来展示给用户
    -->
    <meta name="description" content="NQ31">

    body内常用标签

    基本标签:

    <h1>标题标签</h1> <!--1~6级标题-->
    <b>加粗</b>
    <i>斜体</i>
    <u>下划线</u>
    <s>删除</s>
    <p>段落标签</p>
    <!--换行-->
    <br>
    <!--水平分割线-->
    <hr>

    特殊符号:

    • &nbsp;   空格
    • &gt;        大于号
    • &lt;         小于号
    • &amp;    &
    • &yen;     ¥
    • $copy;    ©
    • &reg;      ®(商标)

    常用标签

    • div标签:块儿级标签,用来定义一个块级元素,独占一行
    • span标签:行内标签,用来定义内联(行内)元素

      块儿级标签:独占一行(h1-h6、p、div这些都是块儿级标签)

      行内标签:自身文本多大就占多大(i、u、s、b、span 这几个都是行内标签)

           总结:只要是块儿级标签都可以嵌套任意块儿级标签和行内标签

         但是p标签只能嵌套行内标签

         块儿级标签可以修改长宽,行内标签不可以。  

    img标签及参数:

    <img src="" alt=""  title=""/>
    src:图片路径,也可以是图片的url
    alt: 当图片加载不出来的时候,给图片的描述性信息
    title: 当鼠标悬浮在图片上之后,自动展示的提示信息
    heightwidth:图片的高度和宽度
    注意:当高度和宽度只修改一个的时候,另一个参数会等比例缩放
         两个同时修改,没有考虑比例时,图片会失真。

    a标签

    <a href=""></a>
    
    href:放url,当用户点击就会跳转到该url页面
          放其他a标签的id值 也叫锚点跳转  例如:<a href="#id值"></a>
    
    target:
        默认a标签是在当前页面完成跳转   _self
        <a href="www.baidu.com" target="_self"></a>
        新建页面跳转                            _blank
        <a href="www.baidu.com" target="_blank"></a>

     列表标签

    1、无序列表

    <ul type="disc">
      <li>第一项</li>
      <li>第二项</li>
    </ul>
    <!--type属性:-->
    disc(实心圆点,默认值)
    circle(空心圆圈)
    square(实心方块)
    none(无样式)

    2、有序列表

    <ol type="1" start="2">
      <li>第一项</li>
      <li>第二项</li>
    </ol>
    <!-- type属性-->
    1 数字列表,默认值
    A 大写字母
    a 小写字母
    Ⅰ大写罗马
    ⅰ小写罗马
    <!--start属性:表示起始位置-->

    3、标题列表

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

    表格

    表格的基本结构:

    <table>
      <thead>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>爱好</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>1</td>
        <td rowspan='2'>Egon</td>
        <td colspan='2'>杠娘</td>
      </tr>
      </tbody>
    </table>
    <!--
        <thead>表示表格头,用来放表格标题也就是表格的列名
              <th>表格的列名
        <tbody>用来放表格数据的身体部分
            <tr>表示行
            <td>表示行里面的每一列
    -->
    <!--table属性-->
    border: 表格边框.
    cellpadding: 内边距
    cellspacing: 外边距.
     像素 百分比.(最好通过css来设置长宽)
    <!-- td的属性--> rowspan: 单元格竖跨多少行 colspan: 单元格横跨多少列(即合并单元格)

     表单标签

    form 标签

    <form action=""></form> 在该form标签内部书写的、获取用户的数据都会被form标签提交到后端
    
    action属性:控制数据提交的后端路径(给哪个服务端提交数据)
          1、什么都不写,默认就是朝当前页面所在的url提交数据
          2、写全路径,比如:https://www.baidu.com  这样就是朝百度服务端提交数据
          3、只写路径后缀 action=“/index/"
            自动识别出当前服务端的ip和port拼接到前面。比如:host:port/index/
    accept-charset: 规定在被提交表单中使用的字符集(默认:页面字符集)
    autocomplete: 规定浏览器应该自动完成表单(默认:开启)
    enctype: 规定被提交数据的编码(默认:url-encoded)。
    method: 规定在提交表单时所用的 HTTP 方法(默认:GET)。
    name: 规定识别表单的名称(对于 DOM 使用:document.forms.name)。
    novalidate: 规定浏览器不验证表单。
    target:规定 action 属性中地址的目标(默认:_self)

    label标签

    <label for="d1">第一种,直接将input写在label内
      username:<input type="text" id="d1">
    </label>
    
    <label fro="d2">  第二种,通过id连接即可,不用嵌套在label内
      password:
    </label>
    <input type="passwor" id="d2">
    <!---注意:label和input都是行内标签,input可以不跟label关联-->

    input标签

    input属性:

    • name:表单提交时的键,类似于参数
    • value:表单提交时对应项的值
    • checked:radion和checkbox默认被选中的项
    • readonly:text和password设置只读
    • disabled:所有input均适用。

    type属性:

    text:普通文本
    password:密文
    date:日期
    submit:用来触发form表单提交数据的动作
    button:一个普通按钮,没有任何功能,可以给它自定义各种功能
    <!--能够触发form表单提交数据的按钮有
          <input type="submit" value="注册”>
          <button>点击</button>
    -->
    reset:重置内容
    radio: 单选
        <!--默认选中要加checked="checked"-->
        <input type="radio" name="gender" checked="checked"><!--当标签的属性名跟属性值一样的时候可以简写-->
        <input type="radio" name="gender" checked>男
    checkbox:多选
        <input type="checkbox" checked>肠粉
    file: 获取文件 也可以一次性获取多个文件
        <input type="file" multiple>
    注意:form表单提交文件需要注意
    1、method必须是post
    2、enctype="multipart/form-data"
      enctype类似与数据提交的编码格式
      默认是urlencoded 只能够提交普通的文本数据
      formdata 就可以支持提交文件数据。

    select 标签 默认是单选 可以mutiple参数变多选,默认选中是selected="selected"简写为selected

    <select name="" id="" multiple>
        <option value="" selected>航母</option>
        <option value="" selected>战斗机</option>
        <option value="">坦克</option>
    </select>

    textarea标签:获取大段文本

    <p>个性签名:
        <textarea name="" id="" cols="30" rows="10"></textarea>
    </p>
    name:名称
    cols:列数
    rows:行数
    disable:禁用

    注意:所有获取用户输入的标签,都应该有name属性:

       name就类似于字典的关键字key

       用户输入的数据就类似于字典的值value

    <p>gendeer:
        <input type="radion" name="gender"><input type="radion" name="gender"></p>
    不将就
  • 相关阅读:
    shell的一本书
    linux设置网络三种方法
    BIOS讲解
    对于ssh和hadoop联系讲解和ssh的基本内容
    Httphandler
    ASP.NET配置文件
    Httpmoudle
    ASP.NET页面生命周期
    ASP.NET页面跳转方法的集合
    OutputCache的使用
  • 原文地址:https://www.cnblogs.com/nq31/p/13681416.html
Copyright © 2011-2022 走看看