H5C3

标签#

结构：头 、 体#

<html>
<head>
    <title></title>
</head>
<body>
    
</body>
</html>

页面标签#

<html>
<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>页面标题</title>
</head>
<body>
    <h1>标题标签</h1>
    <h1>标题一共六级选,</h1>
    <h2>文字加粗一行显。</h2>
    <h3>由大到小依次减，</h3>
    <h4>从重到轻随之变。</h4>
    <h5>语法规范书写后，</h5>
    <h6>具体效果刷新见。</h6>

    <p>段落标签</p>
    <!--   换行-->
    <br />

    我是<strong>加粗</strong>的文字
    我是<b>加粗</b>的文字
    我是<em>倾斜</em>的文字
    我是<i>倾斜</i>的文字
    我是<del>删除线</del>
    我是<s>删除线</s>
    我是<ins>下划线</ins>
    我是<u>下划线</u>


    <div>我是一个div标签我一个人单独占一行</div>
    <div>我是一个div标签我一个人单独占一行</div>
    <span>百度</span>
    <span>新浪</span>
    <span>搜狐</span>
    <br/>

    <img src="https://imgccl.oss-cn-shenzhen.aliyuncs.com/typora/20220522155207.png" alt="替换文本 图像显示不出来的时候用文字替换" title="图像标签"  border="5" width="640" height="560">


    <h4>超链接</h4>
    <h4>1.外部链接</h4>
    <a href="http://www.qq.com" target="_blank"> 腾讯</a>
    target 打开窗口的方式  默认的值是 _self 当前窗口打开页面  _blank 新窗口打开页面
    <a href="http://www.itcast.cn" target="_blank">传智播客</a>
    <h4>2.内部链接: 网站内部页面之间的相互链接</h4>
    <a href="../gongsijianjie.html" target="_blank">公司简介</a>
    <h4>3.空链接:#</h4>
    <a href="#">公司地址</a>
    <h4>4.下载链接: 地址链接的是 文件 .exe 或者是 zip 等压缩包形式</h4>
    <a href="https://imgccl.oss-cn-shenzhen.aliyuncs.com/typora/20220522155207.png">下载文件</a>
    <h4>5.网页元素的链接</h4>
    <a href="http://www.baidu.com"> <img src="https://imgccl.oss-cn-shenzhen.aliyuncs.com/typora/20220522155207.png" width="640" height="560"/></a>

</body>
</html>

image-20220608224625755

表格标签#

CSS#

复合选择器#

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复合选择器</title>
    <style>
        /*后代选择器*/
        ol li{
            color: pink;
        }

        ul li a{
            color: brown;
        }

        .nav li a{
            color: khaki;
        }

        /*子元素选择器*/
        .nac>a{
            color: olivedrab;
        }

        /*并集选择器*/
        h1,
        strong,
        .pig li{
            color: #1c036c;
        }
        
        /*链接伪类选择器*/
        /* 1.未访问的链接 a:link  把没有点击过的(访问过的)链接选出来 */
        a:link{
            color: lawngreen;
            text-decoration: none;
        }

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

        /*3. a:hover 选择鼠标经过的那个链接 */
        a:hover{
            color: skyblue;
        }

        /* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
        a:active{
            color: green;
        }
    </style>
</head>
<body>
    <ol>
        <li>后代选择器</li>
    </ol>
    <ul>
        <li>无后代选择器</li>
        <li><a>后代选择器</a></li>
    </ul>
    <ul class="nav">
        <li><a>后代选择器</a></li>
    </ul>

    <div class="nac">
        <a href="#">子元素选择器</a>
        <p>
            <a href="#">孙元素</a>
        </p>
    </div>

    <h1>并集选择器</h1>
    <strong>并集选择器</strong>
    <ul class="pig">
        <li>并集选择器</li>
        <li>并集选择器</li>
    </ul>
    
    <a href="#">链接选择器</a>
    <a href="http://www.xxxxxxxx.com">未知的网站</a>
</body>
</html>

focus选择器#

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*把获得光标的input表单元素选取出来*/
        input:focus{
            background-color: pink;
            color: red;
        }
    </style>
</head>
<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>
</html>

显示模式#

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示模式</title>
    <style>
        /*块级元素*/
        div {
            height: 200px;
            background-color: pink;
            /* 把 div 块级元素转换为行内元素 */
            display: inline;
        }

        /*行级元素*/
        span{
            width: 100px;
            height: 100px;
            background-color: hotpink;
            display: inline-block;
        }

        a{
            width: 100px;
            height: 100px;
            background-color: #2319dc;
            display: block;
        }

        input{
            width: 249px;
            height: 35px;
        }

        strong{
            width: 150px;
            height: 50px;
            background-color: pink;
            /* 把行内元素 strong 转换为 块级元素 */
            display: block;
        }
    </style>
</head>
<body>
    <div>块级元素</div>
    <div>块级元素</div>
    中间
    <P>
        <div>
            块级元素
        </div>
    </P>

    <span>行级元素</span> <span>行级元素</span>
    <strong>行级元素</strong>
    <span>行级元素</span>
    
    <a href="http://www.baidu.com">
        a
        <a href="#">b</a>
    </a>
    
    <input type="text">
    <input type="text">
</body>
</html>

背景#

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            /* background-color: transparent;   透明的 清澈的  */
            /*background-color: red;*/
            /*背景颜色*/
            background-color: pink;
            /*背景图片*/
            background-image: url("https://imgccl.oss-cn-shenzhen.aliyuncs.com/typora/image-20220608224625755.png");
            /* 1.背景图片不平铺 */
            background-repeat: no-repeat;
            /* 2.默认的情况下,背景图片是平铺的 */
            /* background-repeat: repeat; */
            /* 3. 沿着x轴平铺 */
            /* background-repeat: repeat-x; */
            /* 4. 沿着Y轴平铺 */
            /*background-repeat: repeat-y;*/
            /* 页面元素既可以添加背景颜色也可以添加背景图片 只不过背景图片会压住背景颜色 */
            
            /* background-position:  方位名词; */
            /* background-position: center top; */
            /* background-position: right center; */
            /* 如果是方位名词  right center 和 center right 效果是等价的 跟顺序没有关系 */
            /* background-position: center right; */
            
            /* 此时 水平一定是靠右侧对齐  第二个参数省略 y 轴是 垂直居中显示的 */
            /* background-position: right; */
            
            /* 此时 第一个参数一定是 top y轴 顶部对齐   第二个参数省略x  轴是 水平居中显示的 */
            /*background-position: top;*/
            
            /* 20px 50px; x轴一定是 20  y轴一定是 50 */
            /* background-position: 20px 50px;*/
            /*background-position: 50px 20px;*/
            /*background-position: 20px;*/
            
            /* 20px center  一定是x 为 20  y 是 center  等价于   background-position: 20px */
            /* background-position: 20px center; */
            /* 水平是居中对齐  垂直是 20 */
            background-position: center 20px;

        }
    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>
posted @   yonugleesin  阅读(28)  评论(0)  编辑  收藏  举报
相关博文：
·  短链微服务
·  IDEA_DEBug
·  h5(html5)+css3前端笔记一
·  HTML5-part1
·  20220823 第七小组 王茜
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 零经验选手，Compose 一天开发一款小游戏！
· 通过 API 将Deepseek响应流式内容输出到前端
· AI Agent开发，如何调用三方的API Function，是通过提示词来发起调用的吗
点击右上角即可分享
微信分享提示
主题色彩