zoukankan      html  css  js  c++  java
  • HTML学习笔记Day2

    一、部分表单元素的使用

      1.表单的作用:用来收集用户信息

      2.表单元素

        (1)表单控件:

          单行文本框:<input  type="text" value="默认值" />

          密码框:<input type="password" placeholder="文本提示信息" />

          提交按钮:<input type="submit" value="按钮内容" />

          重置按钮:<input type="reset" value="重置" />

      3.表单域

        (1)表单域标签:

          <form method="post/get(传输方式)" action="相对路径"></form>

          扩展知识点:post和get的区别:

            1)get是从服务器上获取数据,post是想服务器传送数据

            2)get是把参数数据队列加到提交表单的action属性所指的URL中,在URL中可以看到。post是通过HTTP post机制,用户看不到这个过程。

            3)get传送的数据量小,不能大于2KB。post传送数据量较大,一般认为不受限制。

            4)get安全性非常低,post安全性较高。但执行效率post方法好。

    二、标签

      <div></div>文档区域,文档区域对象

      <span></span>文本节点

    三、Css基础

      1.Css简介:cascading style sheet 汉译:层叠样式表;

      2.Css语法:

        选择符{属性:属性值;属性:属性值;}  选择符+{声明}   标签可为选择符

        1)css语法由两部分组成,分别是选择符和声明,声明包括属性和属性值;

        2)属性与属性值之间用冒号连接;

        3)当一个选择符有多个属性时,用分号隔开;

        4)当一个属性有多个属性值时,属性之和属性值之间用空格分隔;

        5)使用空格、换行不影响css样式的显示。

      3.css样式表的创建:

        (1)内部样式表(强烈建议写在head文件内)

          语法:<style type="text/css"></style>

        (2)外部样式表

          1)第一种:<link rel="stylesheet" type="text/css" hreaf="目标文件路径及全称" />

          2)第二种:@import url(相对路径);

          3)link与import区别:

            本质上的区别,link属于HTML的标签,import属于css提供的一种方法;

            加载顺序上的区别,用link导入HTML和css会同时加载;

            兼容性区别,link兼容性更好点;

            使用dom控制样式时的差别,当使用JavaScript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的(不支持)

        (3)内联样式表(也叫样式表或直进式样式表或者叫做行内样式表)

          语法:<标记 style=“属性:属性值;”></标记>

      4.css样式表的权重(优先级)

        (1)内联样式的权重级别最高

        (2)内部样式表和外部样式表的权重与书写位置有关,后书写的权重更高

      5.css样式表的作用域

        内联样式表的作用域:只针对当前标签起作用;

        内部样式表的作用域:只针对当前页面起作用;

        外部样式表的作用域:可以连接到多个页面,对多个页面起作用。

      6.css属性:

        width:100px;宽度

        height:100px;高度

        background-color:100px;背景颜色

        border:1px solid red;边框

        color:#ff00ff;文本颜色

       7.css选择符:

        概念:选择符表示要定义样式的对象,可以是元素本身,也可以是一类元素或者是指定名称的元素。

        css选择符包括四大类:类型选择符、id选择符、class类型选择符、特殊选择符

        (1)类型选择符:

          语法:元素名称{属性:属性值;}

          说明:类型选择符就是以文档语言对象类型作为选择符,即使用结构中元素名称作为选择符;

          特点:能够选中页面中所有相同的标签并添加样式

          应用:想统一某一个标签样式的时候

        (2)id选择符

          语法:#id名{属性:属性值}

          说明:当我们使用id选择符时,应先为每个元素定义一个id属性,如<div id="top"></div>

          特点:唯一性(在同一页面中,id名只能出现一次)

          应用:划分网页的外围结构

        (3)class选择符

          语法:.class名{属性:属性值;}

          说明:类选择符的语法格式是:“.”加上定义的class名称,也就是class类选择符;

             当我们使用类选择符时,应先为每个元素定义一个class属性,如<div class="top"></div>

          特点:可以书写一类样式

        (4)群组选择符

          语法:选择符1,选择符2,选择符3{属性:属性值;}

          说明:当多个选择符应用样式相同时,可以将选择符用英文逗号分隔的方式,合并为一组

        (5)包含选择符

          语法:选择符1 选择符2{属性:属性值;}

          说明:选择符1和选择符2之间用空格隔开。含义就是所有选择符1中包含选择符2

        (6)伪类选择符

          a:link{属性:属性值;}未访问状态

          a:visited{属性:属性值;}已访问状态

          a:hover{属性:属性值;}鼠标滑过状态

          a:active{属性:属性值;}鼠标按下状态

        (7)通配符

          语法:*{属性:属性值;} eg:*{margin:0;padding:0;}

          说明:通配选择符的写法是“*”,其含义就是所有元素。

      8.选择符权重

        (1)css中,用四位数表示权重,权重表达方式如:0,0,0,0

          类型选择符权重:0001;

          类(class)选择符权重为:0010;

          ID选择符的权重为:0100;

          伪类选择符的权重为:0010;

          包含选择符的权重为:包含选择符权重之和;

          内联样式的权重为:1000;

    ‘      通配符权重为:0000;

          伪类选择符的权重为:0001;

          子选择符的权重为:0000;

          属性选择符的权重为:0010;

          继承的样式权重为:0000;

    四、扩展

      1.HTML注释<!--注释内容-->

      2.css、js注释:单行文本注释//;多行文本注释/**/

      3.关键选择器<div class="box1 box2"></div>权重与书写位置有关(有争议,有人说后面的类名权重较高)

    Why do you work so hard? Because the things I want to buy are expensive and the places I want to go are far away. The person I like is very excellent.
  • 相关阅读:
    linux下设置SSH无密码登陆
    设置sudo权限
    集群重启后启动ambari-server访问Web页面无法启动集群解决
    使用Ambari部署hadoop集群
    centos7.6安装python3.7
    Locust
    测试框架(自然语言)
    Maven之(七)pom.xml配置文件详解
    git的使用
    elastic search(es)安装
  • 原文地址:https://www.cnblogs.com/liufuyuan/p/10178089.html
Copyright © 2011-2022 走看看