3、常用标签和样式

小猪VS恒哥

已于 2022-08-05 15:39:55 修改

阅读量801

点赞数

分类专栏： 3.HTML5+CSS 文章标签： html

于 2022-08-05 15:38:13 首次发布

本文链接：https://blog.csdn.net/qq_42263859/article/details/126178832

版权

3.HTML5+CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.表单：form是表单标签
（1）form是表单标签
       action属性：设置表单提交的服务器地址
       method属性：表单内容提交方式，常用值有get(默认)和post两种
           表单提交的时候，数据没有发送给服务器的三种情况：
               1、表单项没有name属性值
               2、单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
               3、表单项不在提交的form标签中

           GET请求的特点是：
               1、浏览器地址栏中的地址是：action属性[+?+请求参数]
                   请求参数的格式是：name=value&name=value
               2、不安全
               3、它有数据长度的限制

           POST请求的特点是：
               1、浏览器地址栏中只有action属性值
               2、相对于GET请求要安全
               3、理论上没有数据长度的限制
（2）input标签：输入框
       type：设置输入框的类型
           text：       是文本输入框   value设置默认显示内容
           password   是密码输入框   value设置默认显示内容
           radio：       是单选框       name属性可以对齐进行分组，checked="checked"表示默认选中
           checkcbox：   是复选框       checked="checked"表示默认选中
           file:       是文件域
           button：   是按钮        value属性修改按钮上的文本，οnclick="alert('你点我干嘛')" 表示点击此按钮显示警告信息
           reset:       是重置按钮       value属性修改按钮上的文本
           submit：   是提交按钮       value属性修改按钮上的文本
           image：       是图片按钮
           hidden       是隐藏域       当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）
       注：checked属性：可以给单选按钮、复选框设置默认选项
（3）textarea:表示多行文本输入框（起始标签和结束标签中的内容是默认值）
       rows 属性设置可以显示几行的高度
       cols 属性设置每行可以显示几个字符宽度
（4）select标签：标签是下拉列表框
   option标签：下拉列表框中的选项 selected="selected"设置默认选中

2.行内元素、块元素、行内块元素
   （1）行内元素（inline element）
           特点：主要用来包裹文字的，不会独占一行
           例如：em、strong、span、a、......
   （2）块元素（block element）
           特点：主要用来布局，它会独占一行
           例如：h1-h6标签、p、div、header、footer、.....
   （3）行内块元素（inline-block）
           例如：img.....

       注意：
1.一般情况下，会在块元素中放行内元素，而不会在行内元素中放块元素
2.块元素中基本什么都能放（除P元素外）
3.P元素中不能放任何块元素特殊的存在

3.内部样式、外部样式
（1）内部样式：css写在html页面的<html></html>标签里面，如

3-1.行内样式、内部样式和外部样式优先级：就近原则
   例如：
   （1）外部样式：
           <link href="css/05样式选择器.css" rel="stylesheet" type="text/css"/>
   （2）内部样式：
           <style type="text/css">
               p{
                   color: blue;
               }
           </style>
   （3）行内样式：<p style="color: red;" >你猜猜我是什么颜色</p>
   解析：
       ①当上述三者样式同时存在，显示行内元素中的红色（因为此时行内样式离p标签最近最近）
       ②注释行内样式，使得外部样式在内部样式上方，则此时显示内部样式中的蓝色（因为此时内部样式离p标签最近）
       ③注释行内样式，使得内部样式在外部样式上方，则此时显示外部样式中的黄色（因为此时外部样式离p标签最近）
4.标签选择器、class选择器、ID选择器
   （1）标签选择器：
       <style>
           p{
               color: red; /* 设置文字颜色为红色 */
           }
           a{
               color: blue; /* 设置文字颜色为蓝色 */
               text-decoration: none; /* 设置对象中的文本装饰，此处设置无装饰(去除下划线) */
           }
       </style>
   （2）class选择器;
       <style>
           /* 标签选择器 */
           p{
               color: blue;
           }
           /* class选择器 */
           .second{
               color: red;
           }

       </style>
   （3）id选择器：
       <style>
           #abc{
               color: blue;
           }
       </style>
4-1.行内样式、id选择器、class选择器、标签选择器优先级：
       行内样式>id选择器>class选择器>标签选择器

5.层级选择器：
   （1）后代选择器   E F
   （2）子代选择器   E>F
   （3）相邻兄弟选择器 E+F
   （4）通用兄弟选择器 E~F
       (1)后代选择器 E F
           选择body标签里的后代P标签：p0~p7
           body p{
               background-color: red;
           }

       (2)子代选择器 E>F
           选择body标签里的子代p标签：p0、p1、p2、p22、p7
           body>p{
               background-color: red;
           }

       (3)相邻兄弟选择器 E+F
           选择紧跟在类名为test的元素后面的那个相邻兄弟：p2
           .test+p{
               background-color: red;
           }

       (4)通用兄弟选择器 E~F
           选择在类名为test的标签后面的所有兄弟：p2、p22、p7
           .test~p{
               background-color: red;
           }

6.属性选择器
   /* (1)存在属性id的元素 */
   a[id]{
       background: yellow;
   }

   /* (2)属性id=first的元素 */
   a[id=first]{
       background: red;
   }

   /* (3)属性class="links item first"的元素 */
   a[class="links item first"] {
       background: red;
   }

   /* (4) 属性class里包含links字符串的元素*/
   a[class*=links]{
       background: red;
   }

   /* (5)属性href里是以http开头的元素 */
   a[href^=http]{
       background: red;
   }

   /* (6)属性href里以png结尾的元素 */
   a[href$=png]{
       background: red;
   }