前端html进阶

最新推荐文章于 2021-06-10 14:48:06 发布

Zz Apollo

最新推荐文章于 2021-06-10 14:48:06 发布

阅读量1.3w

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/ch_improve/article/details/90115406

版权

html 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

1.相对路径(地址)和绝对路径(地址)

1.1.相对路径

使用斜杠/
./ 表示当前目录
…/ 表示上一级目录

1.2.绝对路径

从根目录写起,使用反斜杠
例如c:\

2.列表标签

列表一般应用在布局中的新闻标题列表和文章标题列表以及菜单，它是有语义的，标签结构如下：

无序列表：

<ul>
<li>列表标题<li>
</ul>

列表一般都是带链接的，如下

<ul>
<li><a href="链接">列表文字</a></li>
</ul>

有序列表：

<ol>
<li>有序列表</li>
</ol>

2.1.列表样式

列表开头序号：
list-style:none;
        none 无效果；
        cricle 空心圆；
        decimal 序号（1 2 3）；
        decimal-leading-zero 序号（01 02 03）；
        disc 实心圆；
        llower-alpha 序号（a b c d）；
        lower-greek 序号（α β）；
        lower-latin 序号（a b c）；
        lower-roman 序号（i ii iii）；
        upper-alpha 序号（A B C）；
        upper-roman 序号（Ⅰ Ⅱ Ⅲ）

3.表单

表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下

1、标签定义整体的表单区域

action属性定义表单数据提交地址
为空表示提交到当前地址
method属性定义表单提交的方式，一般有“get”方式和“post”方式
get显示在地址栏
post 显示在报文里

2、标签为表单元素定义文字标注

<label for="id">aaa</label>
<input type="text" id="id">

点aaa就能到文本框里

3、标签定义通用的表单元素

type属性
type=“text” 定义单行文本输入框
type=“password” 定义密码输入框
type=“radio” 定义单选框
type=“checkbox” 定义复选框
type=“file” 定义上传文件
type=“submit” 定义提交按钮
type=“reset” 定义重置按钮
type=“button” 定义一个普通按钮
value属性定义表单元素的值
name属性定义表单元素的名称，此名称是提交数据时的键名

4、标签定义多行文本输入框

5、标签定义下拉表单元素

6、标签与标签配合，定义下拉表单元素中的选项

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>注册表单</h1>
    <form action="http://www.baidu.com" method="get">
        <p>
        <label for="">用户名：</label>
        <input type="text" name="用户名">
        </p>
        <p>
        <label for="">密&nbsp;&nbsp;&nbsp;码：</label>
        <input type="password" name="密码">
        </p>
        <p>
            <label for="">性&nbsp;&nbsp;&nbsp;别：</label>
            <input type="radio" name="gender" value=0>男
            <input type="radio" name="gender" value=1 checked="checked">女
        </p>
        <p>
            <label for="">爱&nbsp;&nbsp;&nbsp;&nbsp;好：</label>
            <input type="checkbox" name="favorate" value=0 checked="checked">学习
            <input type="checkbox" name="favorate" value=1 checked="checked">唱歌
            <input type="checkbox" name="favorate" value=2 checked="checked">游泳
            <input type="checkbox" name="favorate" value=3 checked="checked">打篮球
            <input type="checkbox" name="favorate" value=4 checked="checked">玩游戏
        </p>
        <p>
            <label for="">裸&nbsp;&nbsp;&nbsp;照：</label>
            <input type="file" name="个人照片">
        </p>
        <p>
            <label for="">籍&nbsp;&nbsp;&nbsp;贯：</label>
            <select name="" id="">
                <option value="0">上海</option>
                <option value="1">北京</option>
                <option value="2" selected="selected">深圳</option>
                <option value="3">广州</option>
            </select>
        </p>
        <p>
            <label for="">个人简介：</label>
            <textarea name="个人简介" id="" cols="30" rows="10"></textarea>
        </p>
        <p>
            <input type="submit" value="提交">
            &nbsp;&nbsp;&nbsp;
            <input type="reset" value="重置">
            &nbsp;&nbsp;&nbsp;
            <input type="button" value="普通按钮">
        </p>
    </form>
    
</body>
</html>

四.css选择器进阶

4.1.id选择器

通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项智能对应于页面上的一个元素，不能重复用，id名一般给程序使用，所以不推荐用id作为选择器
举例：

#box{color:red}
<p id="box">..........</p>

4.2.组选择器

多个选择器，如果有同样的样式设置，可以使用组选择器。
举例：

.box1,.box2,.box3{
            width: 200px;
            height: 200px;
        }
        .box1{background: hotpink;}
        .box2{background: indigo;}
        .box3{background: khaki;}

4.3.伪类选择器

常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态。
举例：

.box1:{width:100px;height:100px;background:gold;}
.box1:hover{width:300px;}