HTML、CSS

2021-04-10 03:34

阅读:708

标签:实现   设置   下拉   jpg   target   名称   颜色   title   按钮   

一、HTML

        1.概念:是最基础的网页开发语言,

              * 标记语言:

                由标签构成的语言。 如 html,xml;
               标记语言不是编程语言;

         2.基本标签

               1)文件标签:构成html最基本的标签

                    * html:html文档的根标签
                    * head:头标签。用于指定html文档的一些属性。引入外部的资源
                    * title:标题标签。
                    * body:体标签
                    * :html5中定义该文档是html文档

             2)文本标签:和文本有关的标签

                  * 注释:

                  *

to

:标题标签

                  * h1~h6:字体大小逐渐递减

                  *

:段落标签

                  *
:换行标签

                  *


:展示一条水平线

                   * :字体加粗

                  * :字体斜体

                 * :字体标签

                 *

:文本居中

              

          * 属性定义:
              * color:
                1. 英文单词:red,green,blue
                2. rgb(值1,值2,值3):值的范围:0~255 如 rgb(0,0,255)
                3. #值1值2值3:值的范围:00~FF之间。如: #FF00FF
              * width:
                1. 数值:width=‘20‘ ,数值的单位,默认是 px(像素)
                2. 数值%:占比相对于父元素的比例

          3.图片标签

             古镇

               相对路径: ./:代表当前目录       

                                 ../:代表上一级目录

           4.列表标签:

               * 有序列表:1. ol 、2.li:

             * 无序列表: 1. ul 、 2. li

            5.链接标签

                  属性:

                          href:指定访问资源的URL(统一资源定位符)

                           target:指定打开资源的方式:

                                 1) _self:默认值,在当前页面打开

                                 2)_blank:在空白页面打开

 

           6.HTML的表单标签

               6.1.表单:

                   * form:用于定义表单的。可以定义一个范围,范围代表采集用户数据的范围

                       属性:* action:指定提交数据的URL

                                  * method:指定提交方式:

                                         get  :1. 请求参数会在地址栏中显示。会封装到请求行中. 

                                                 2.请求参数大小是有限制的。

                                                 3.不太安全

                                         post: 1.请求参数不会再地址栏中显示。会封装在请求体中

                                                  2.请求参数的大小没有限制。

                                                  3.较为安全

                     表单项标签:

                              input:可以通过type属性值,改变元素展示的样式

                                  tyep属性:

                                             text:文本输入框,默认值 ,placeholder:指定输入框的提示信息,当输入框的内容发生变化,会自动清空提示信息;

                                             password:密码输入框;

                                              radio:单选框 ;      注意:1.要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样;2.一般会给每一个单选框提供value属性,指定其被选中后提交的值;3.checked属性,可以指定默认值

                                               checkbox:复选框;  注意:1.一般会给每一个单选框提供value属性,指定其被选中后提交的值;2.checked属性,可以指定默认值

                                               file:文件选择框;

                                               hidden:隐藏域,用于提交一些信息。但不在页面显示

                                                按钮:

                                                         * submit:提交按钮。可以提交表单

                                                         * button:普通按钮

                  * image:图片提交按钮

                  * src属性指定图片的路径

                                               label:指定输入项的文字描述信息 ;作用:label的for属性一般会和 input 的 id属性值 对应。如果对应了,则点击label区域,会让input输入框获取焦点。

用法:                                                     

label for="username"> input type="text" id="username">

                                             select: 下拉列表

                                                      子元素:option,指定列表项

                                             textarea:文本域 ; cols: 指定列数,每一行有多少个字符 ;     rows: 默认多少行。

二、CSS

    1.css的使用:

        1.1.内联样式:                 


div style="color:red;">hello cssdiv>

        1.2.外联样式      


            style>
                div{
                    color:blue;
                }
        
            style>
            div>hello cssdiv>

       1.3.外部样式

          



                div{
                    color:green;
                }


link rel="stylesheet" href="css/a.css">
            div>hello cssdiv>
            div>hello cssdiv>

     2.css的语法:

          2.1.格式:

               选择器 {
                 属性名1:属性值1;
                 属性名2:属性值2;
                  ...
                   }

           2.2.选择器:

                1)基础选择器:

                   id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一;     语法:#id属性值{}

              style>
            #div5{
                font-size: 20px;
                color: red;
            }
        style>
div id="div5">
逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!55
div>

                   元素选择器: 选择具有相同标签名称的元素  ;  语法: 标签名称{}; 注意:id选择器优先级高于元素选择器

 style>
            div{
                font-size: 20px;
                color: pink;
                
            }
        style> 
                div>
            逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!11
        div>

                   类选择器:选择具有相同的class属性值的元素; * 语法:.class属性值{};   * 注意:类选择器选择器优先级高于元素选择器

.div2{
                font-size: 20px;
                color: pink;
            }
div class="div2">
            逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!22
        div>

           2.3.其他选择器:

               选择所有元素:语法: *{};

                并集选择器: 语法: * 选择器1,选择器2{};div,p{}

              子选择器:筛选选择器1元素下的选择器2元素  ;  语法: 选择器1 选择器2{}       div  p{}

              父选择器:筛选选择器2的父元素选择器1;   语法:  选择器1 > 选择器2{}          div > p{} 

              属性选择器:选择元素名称,属性名=属性值的元素 ;      语法:  元素名称[属性名="属性值"]{}    

style>
            input[type=‘text‘]{
                background: #FF0000;
            }            
            input[type=‘password‘]{
                background: #FFC0CB;
            }
style>
用户名;input type="text" name="username"/>br />
密码:input type="password" name="password"/>

              伪类选择器:选择一些元素具有的状态;   语法: 元素:状态{}

                             * link:初始化的状态;

                             * visited:被访问过的状态

                             * active:正在访问状态

                            * hover:鼠标悬浮状态

     

      3. 属性
          1. 字体、文本
              * font-size:字体大小
              * color:文本颜色
              * text-align:对其方式
              * line-height:行高
          2. 背景
             * background:
          3. 边框
             * border:设置边框,符合属性
          4. 尺寸
            * width:宽度
            * height:高度
         5. 盒子模型:控制布局
             * margin:外边距
             * padding:内边距
                  * 默认情况下内边距会影响整个盒子的大小
              * box-sizing: border-box; 设置盒子的属性,让width和height就是最终盒子的大小

              * float:浮动
                    * left
                    * right

             

 

HTML、CSS

标签:实现   设置   下拉   jpg   target   名称   颜色   title   按钮   

原文地址:https://www.cnblogs.com/cqyp/p/12434617.html


评论


亲,登录后才可以留言!