HTML01(html组件,类选择器)

HTML显示组件

修改文本的样式span

<p> <span style="color: aquamarine;">床前明月光</span>,疑是地上霜</p>

标签可以嵌套,不可以交叉
合并单元格 colspan 跨两列 rowspan 跨两行
显示图片
```
<img id='easyimg' src="./img/b.jpg" >
```

超链接

<a href="https://www.baidu.com" target="_blank">百度</a>

列表
1. 有序列表 ol li
2. 无序列表 ul li
3. 自定义列表 dl dd
div 默认高度为0,宽度为100%的透明容器

表单作用收集数据,提交数据

        <form action="提交表单的地址" method="get/put"  >

隐藏域用户不需要知道,对程序业务十分重要的数据
```
<input type="hidden" name="id" value="1001" />
```

文本框 readonly不能更改,但能提交

<input type="text"  name="username" value="张三" readonly="readonly"/>

密码框

<input type="password" name="userpass" value="123">

单选框在同一个表单里的单选框,name一样就有互斥性 checked默认选中

<input id="sexa" type='radio'checked="checked" name='sex' value='男'>
<label for="sexa">男</label>d

复选框 disabled 不能选中不能提交数据, for表示选中文字就能选中选项

<input checked="checked" id="hobbya" type="checkbox" name="hobby" value="唱"/>
<label for="hobbya">唱</label>

下拉框如果option不标注value属性,标签中的内容就是value值默认选中是selected

<option disabled="disabled" selected="selected">请选择</option> <!-- disabled默认被选中但是选不了 -->
                <option >青岛</option>
                <option value ="002">徐州</option> <!-- selected="selected" 默认选择 -->
                <option value ="003">曹县</option>
                <option value ="004">淄博</option>

文本域

 　　<textarea name="info">
     12  <!--默认值>
    </textarea>
    </div>

input 按钮的默认值是text

提交
```
<input type="submit" value="提交" />
```
重置让表单回到初始状态
```
<input type="reset" value="重置" />
```

按钮

<input type="button" name="" id="" value="按钮" />

button button按钮的type默认属性是submit

    <button >提交</button>
    <button type="reset">重置</button>
    <button type="button">按钮</button>

css显示样式

字体设置
1. 字体颜色: color:red;
2. 字体大小:font-size:30px;
3. 字体加粗:font-weight:bold;
4. 字体样式:font-family:"宋体"
css样式设置方法:
1. 内联样式: 写在标签上的样式
2. 外部样式: 定义在css文件,使用方式:
```
<link rel='stylesheet' href="css/easy.css">
```
3. 内部样式: 在本html文件<head>中定义, <style> </style>

选择器

id选择器

        #box{
            text-align: center;
        }

类选择器

        .easyb{
            height:100px;
            border-radius: 20px;
        }

属性选择器

        [name="username"]{
            outline: none;
            color: #FF0000;
        }

标签选择器每一个标签的设置都是平等的

        table,td,th{
            border:1px solid blueviolet;
            border-collapse: collapse;
        }

子代选择器只有第一层子代生效

        .easyb>div{  
            /* 字体 */
            font-family: "宋体";
            margin:10px;
        }

后代选择器不管多少层都生效

        .easyb div{  /* 不管多少层都会生效 */
            margin:10px;
        }

权重选择器

        div.easyb{  /* 是div并且class是easyb */
            
        }

伪类选择器选择特定状态的元素

:link - 选择所有未被访问的链接
:visited - 选择所有已经被访问过的链接
:hover - 当鼠标悬停在元素上时，选择该元素

:active - 当鼠标点击并保持在一个元素上时，选择该元素

        a:link{
            color: #8A2BE2;
        }
        a:active{
            color: #FF0000;
        }
        a:visited{  /* 点击后 */
            color: aquamarine;
        }
        a:hover{  /* 悬浮 */
            color: palevioletred;
        }
        .easyb:hover{
            border: 1px solid #FF0000;
        }

posted @ 2023-11-09 21:02 卡皮巴拉阅读(21) 评论(0) 收藏举报

刷新页面返回顶部

HTML01(html组件,类选择器)

公告