html,css学习记录

最新推荐文章于 2024-09-02 21:36:01 发布

隔壁的小公举

最新推荐文章于 2024-09-02 21:36:01 发布

阅读量1.5k

点赞数 15

文章标签： html css 学习

本文链接：https://blog.csdn.net/2301_79347603/article/details/141782330

版权

html,css学习记录

html
css
盒子模型

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mykingdom</title>
    <link rel="stylesheet" href="1.css">
</head>

<body id="ceiling">
    <h1>我的王国</h1>
    <h2>基础文本</h2>
    <p>sada<b>adf</b>fmkmklnkm <br /> <br /> klmmkoooji</p>
    <i>fafaf</i>
    <strong>affa</strong>
    <em class="blue">fagag</em>
    <s>faag</s>
    <ins>asfga</ins>
    <div id="green">我一个人占一行</div>
    <div>我一个人占一行</div>
    <div>我一个人占一行</div>
    <p>adfklfjf</p>
    <h2 class="blue back-yellow">图片标签</h2>
    <h4>皮卡丘</h4>
    <img src="img/ds.jpg" width="100">
    <h4>alt:图像显示不出来是显示的文字</h4>
    <img src="img1/ds.jpg" alt="哎呀，图片显示不出来啦~~" width="100">
    <h4>title:鼠标放到图片上显示的文字</h4>
    <img src="img/ds.jpg" title="皮卡丘" width="100">
    <h4>border:给图像设定边框</h4>
    <img src="img/ds.jpg" title="皮卡丘" width="100" border="5">
    <h2>超链接</h2>
    <h3>外部链接</h3>
    <h4>从本页面跳转</h4>
    <a href="https://blog.csdn.net/2301_79347603?spm=1000.2115.3001.5343" target="_self">欢迎关注我的博客</a>
    <h4>另开一个页面</h4>
    <a href="https://blog.csdn.net/2301_79347603?spm=1000.2115.3001.5343" target="_blank">欢迎关注我的博客</a>
    <h3>内部链接</h3>
    <a href="sss.html" target="_blank">嘿嘿</a>
    <a href="sss.html" target="_blank">嘿嘿</a>
    <h3>空链接</h3>
    <a href="#">还没考虑好</a>
    <h3>下载链接</h3>
    <a href="img.zip">下载</a>
    <h3>网页元素链接：例如点击一个图片切换页面</h3>
    <a href="https://blog.csdn.net/2301_79347603?spm=1000.2115.3001.5343" target="_blank"><img src="img/ds.jpg"
            title="皮卡丘" width="100"></a>
    <h3>锚点链接：快速定位到页面中某个位置,根据id</h3>
    <a href="#ceiling">回到顶部</a>
    <h2>注释和特殊字符</h2>
    <!-- 第三方 -->
    <img src="img/s.jpg" width="500">
    <h2>表格标签</h2>
    <table align="center" border="1" cellpadding="20" cellspacing="0" width="400">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小红</td>
                <td colspan="2">18</td>
            </tr>
            <tr>
                <td>我</td>
                <td>114514</td>
                <td>男</td>
            </tr>
        </tbody>
    </table>
    <h2>列表标签</h2>
    <!-- 无序列表 -->
    <h4>你喜欢的食物</h4>
    <ul>
        <li>巧克力</li>
        <li>蛋糕</li>
        <li>奶茶</li>
    </ul>
    <!-- 有序列表 -->
    <ol>
        <li>中国</li>
        <li>美国</li>
        <li>英国</li>
    </ol>
    <!-- 自定义列表 -->
    <dl>
        <dt>周江杭</dt>
        <dd>语文140</dd>
        <dd>数学150</dd>
        <dd>英语150</dd>
    </dl>
    <dl>
        <dt>小呆瓜</dt>
        <dd>语文150</dd>
        <dd>数学130</dd>
        <dd>英语150</dd>
    </dl>
    <h2>表单标签</h2>
    <!-- 用来收集用户信息 -->
    <form action="xxx.php" method="get" name="">
        <!-- value是默认值 -->
        <!-- maxlength是文本最大长度，但一般较少使用 -->
        用户名:<input type="text" name="username" value="请输入用户名"> <br />
        密码: <input type="password" name="pwd"> <br>
        <!-- 单选按钮和复选框可以设置checked 属性，来默认勾选状态 -->
        <!-- name 使表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选一 -->
        性别：男<input type="radio" name="sex" checked="checked"> 女<input type="radio" name="sex"><br>
        爱好：吃饭<input type="checkbox" name="hobby"> 睡觉<input type="checkbox" name="hobby"> 打豆豆<input type="checkbox"
            name="hobby"><br>
        <!-- 点了提交按钮，可以把表单里的数据提交给后台人员 -->
        <input type="submit" value="免费注册">
        <!-- 重置按钮，顾名思义 -->
        <input type="reset" value="重置">
        <!-- 普通按钮,后期结合js使用 -->
        <input type="button" value="获取验证码">
        <!-- 选择文件上传 -->
        <input type="file" value="选择文件"><br>
        <!-- 下拉表单标签 ,selected默认选项-->
        <select name="" id="">
            <option value="">浙江</option>
            <option value="" selected>上海</option>
            <option value="">辽宁</option>
            <option value="">河北</option>
        </select>
        <!-- 文本域标签，特大号文本框 -->
        个人陈述：<textarea name="hh" id="hei"></textarea>
    </form>
    <h3>label标签,扩大选中范围</h3>
    <label for="text">用户名</label><input type="text" id="text"><br>
    <label for="r">男</label><input type="radio" id="r">

</body>

</html>

css

/* 标签选择器 */
p {
    text-indent: 20px;
    color: red;
    font-size: 20px;
    font-weight: 400;
    font-style: italic;
}

h1 {
    text-align: center;
    font-family: '微软雅黑';
    font-size: 35px;
    color: pink;
}

/* 类选择器 */
.blue {
    text-decoration: underline;
    color: blue;
}

.back-yellow {
    background-color: yellow;
}

/* id选择器 ,一次性的，只能用给一个标签，*/
#green {
    color: green;
}

/* 通配符选择器 */
/*把所有都变成红色
        * {
            color: red;
        } 
        */

/* 后代选择器 */
ol li {
    color: red;
}

/* 子选择器,亲儿子 */
ul>li {
    color: aqua;
}

/* 并集选择器 */
h2,
h3 {
    color: green;
}

/* 伪类选择器 ，冒号表示*/
/* 1.链接伪类选择器 */
/* (1)未访问过的链接 */
a:link {
    color: none;
}

/* (2)点击/访问过的链接 */
a:visited {
    color: red;
}

/* (3)鼠标指向的链接 */
a:hover {
    color: yellowgreen;
}

/* (4)鼠标按下未弹起的链接 */
a:active {
    color: burlywood;
}

input {
    width: 200px;
    transition: all .3s;
}

/* 2.focus伪类选择器 ,用于表单*/
input:focus {
    color: purple;
    background-color: blanchedalmond;
    width: 300px;
}

/* 元素显示模式：行内，块内，行内块 */
a {
    /* 转化为块内元素：block,转成行内：inline,转成行内块 */
    display: inline-block;
    width: 140px;
    height: 40px;
    background-color: gold;
    line-height: 40px;
    text-align: center;
}

/* 背景 */
body {
    background-image: url(img/bg9.png);
    /* 是否平铺 */
    background-repeat: no-repeat;
    /*背景位置，也可用具体坐标*/
    background-position: right top;
    /* 背景固定，scroll && fixed */
    background-attachment: fixed;
}

/* 背景色半透明 */
a {
    background: rgba(0, 0, 0, 0.3);
}

/* div三大特性 */
/* 1.层叠性（不重要) */
/* 2.继承性 ：子承父业，但不是全部，只限于文本，颜色，字号等*/
/* 3.优先性 */

盒子模型

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left,
        .right {
            /* 浮动 ：可以让多个块级元素一行内排列显示*/
            float: left;
            width: 300px;
            height: 200px;
            /* 边框粗细 */
            /* border-width: 5px; */
            /* 边框样式 */
            /* border-style: solid; */
            /* 边框颜色 */
            /* border-color: rgb(111, 0, 255); */
            /* 简写 */
            border: 5px solid pink;
            /* 单独一条边 */
            border-bottom: 6px dashed darkblue;
            /* 合并相邻边框的边 ???好像不大行对div*/
            /* border-collapse: collapse; */
            /* 左内边距 */
            padding-left: 20px;
            /* 上内边距 */
            padding-top: 20px;
            /* 简写：1.padding: 5px; 上下左右为5
            2.padding: 2px 10px; 上下为2 左右为10
            3.padding: 2px 10px 20px; 上为2 左右为10 下为20
            4.padding: 5px 2px 3px 4px; 上为5 右为2 下为3 左为4
            */
        }

        .right {
            float: right;
        }
    </style>
</head>

<body>
    <!-- 1.border边框 2.content内容 3.padding 内边距 4.margin 外边距 -->
    <div class="left"><img src="img/ds.jpg" width="200"></div>
    <div class="right"><img src="img/bg9.png" width="200"></div>
    <p>dsfadf</p>
</body>

</html>

隔壁的小公举

关注

15
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
html,css学习记录

html,css学习记录htmlcss盒子模型html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>mykingdom</title> <link
复制链接

扫一扫