HTML学习笔记Day2

时间:2023-03-08 23:16:08
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>权重与书写位置有关(有争议,有人说后面的类名权重较高)