HTML，CSS

已于 2022-05-15 18:32:03 修改
阅读量340 收藏
点赞数
分类专栏： web 文章标签： css html
于 2022-05-15 18:05:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59392076/article/details/124784431
版权

一，Html

我的第一个网页html



<!DOCTYPE html>
<html lang="en">
<!--head标签地表网页头部-->
<head>
<!--meta 描述性标签，它用来描述我们网站的一些信息一般用来做SEO-->
    <meta charset="UTF-8">
<!-- <title>网站的标题   -->
    <title>Title</title>
</head>
hellow worid
<body>

</body>
</html>

html基本内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
<!--    img学习-->
</head>
<body>
<!--img学习
src；图片地址  必填
相对地址，绝对地址
../ 上一级目录-->


<a href="http://localhost:63342/idea%E6%95%B0%E6%8D%AE/untitled104/%E9%93%BE%E6%8E%A5%E6%A0%87%E7%AD%BE.html?_ijt=q1pd81q3oc342gbrc5hf4i5qa4#top">跳转</a>
</body>
</html>

页面结构 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<header><h2>网页头部</h2></header>
<section><h2>网页主体</h2></section>

<footer><h2>网页脚部</h2></footer>



<body>

</body>
</html>

基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<!--段落标签-->
<p>段落标签</p>

<br/><!--换行标签-->

<hr><!--水平换行标签-->

<strong></strong><!--粗体标签-->

<em></em>
<!--斜体标签-->
空格 &<nbsp></nbsp>


<!--大于号 &gt-->
<!--小于符合 &lt-->
<!--&copy 版权符合-->



</body>
</html>

媒体元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素的学习</title>
</head>
<body>
<!--src；资源路径
controls；控制路径
outoplay；自动播放-->
<video src="../resources/image/01安装包解压方法.mp4"controls></video>
</body>
</html>

表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
<!--    table
行；tr
列；td-->
</head>
<body>
<table border="1px"width="500"hight="500">
    <tr >
<!--        colspan跨列-->
        <td colspan="4">1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
        <td>1-5</td>
    </tr>
    <tr>
<!--        rowspan 跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
        <td>2-5</td>
    </tr>
    <br>
    i
</table>








</body>
</html>

链接标签 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--使用那么作为标记-->
<a name="top">顶部</a>
<!--a标签
href ；必填表示要跳转到哪个页面
target；表示窗口在哪里打开
    _blank在新标签中打开
    _self 在自己的网页中打开
-->

<a href="http://localhost:63342/idea%E6%95%B0%E6%8D%AE/untitled104/.idea/%E6%88%91%E7%9A%84%E7%AC%AC%E4%B8%80%E4%B8%AA%E7%BD%91%E9%A1%B5.html?_ijt=o4efpg3g2ja1fl97l3dhvlc8ru">点击我跳转到1</a>

<br>
<a href="https://hao.360.com/"><img src="../resources/image/1.jpg" alt="我的图片"title="悬停文字"width="800"hight="1000" ></a>
<br>
<a href="https://hao.360.com/"><img src="../resources/image/1.jpg" alt="我的图片"title="悬停文字"width="800"hight="1000" ></a>



<a href="mailto:1158630056@qq.com">点击联系我</a>

<a href="#top">回到顶部</a>
<a href="down">down</a>

</body>
</html>



<!--锚链接
1.需要一个标记
2.跳到标记-->
<!--功能性链接
邮件链接；mailto；


-->

二、CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范. style  可以编写css的代码，每一个声明最好使用 ；结尾
语法：
    选择器{
    声明1；
    声明2；
    声明3；
    }

-->
    <link rel="stylesheet" href="style.css">
</head>

<body>
<h1>第一个标题</h1>
</body>
</html>
h1{
    color: red;
}

 选择器

1.基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器会选择到页面上所有的这个标签元素

         */
        h1{
            color: #AA22FF;
            background: #D2413A;
            border-radius: 24px;
        }
        p{
            font-size: 80px;
        }

    </style>
</head>
<body>

<h1>学java</h1>
<h1>学java</h1>
<p>听狂神说</p>
</body>
</html>

2.类选择器 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        类选择器的格式 .class的名称{}
        好处：可以多个标签归类，是同一个class，可以复用
       */
        .qinjiang{
            color: #4a78c2;
        }
        .kuangshen{
            color: #00A000;
        }
        h1{
            color: #19469D;
        }
    </style>
</head>
<body>
<h1 class="qinjiang">标题1</h1>
<h1 class="kuangshen">标题2</h1>
    <h1>标题3</h1>
    <p class="kuangshen">p标签</p>
</body>
</html>

3. ID选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* id选择器 : id必须保证全局唯一
        不遵循就近原则，固定的
        id选择器>类选择器>标签选择器
        #id名称{
        }
         */
        #qingjiang{
            color: lightsalmon;
        }
        .ks{
            color: #D2413A;
         }
    </style>
</head>
<body>
<h1 id="qingjiang">标题</h1>
<h1 class="ks">标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
</body>
</html>

高级选择器 

1.层次选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    后代选择器：在某个元素的后面-->

    <style>
        /*p{
            background: #D2413A;}*/
        /* 后代选择器 body p{
         background:#00A000;
        }*/
       /* 子选择器 一代 /
       /* body>p{*/
       /* background: #AA22FF;*/
       /* }*/
        /*相邻兄弟选择器 只有一个，向下 同辈
         */
        /*.asd + p{*/
        /*    background: #E9DC51;*/
        /*}*/
        /*通用选择器，当前选中元素的向下的所有兄弟元素*/
        .asd~p{
            background: #D2413A;
        }
    </style>
</head>
<body>
<p>p1</p>
<p class="asd">p2</p>
<p>p3</p>
<ul>
   <li>
       <p> p4</p>
   </li>
   <li>
       <p>p5</p>
   </li>
   <li>
       <p>
           p6
       </p>
   </li>
   <li>
       <p>p7</p>
   </li>
</ul>
<p>p9</p>
<p>p10</p>
<p>p11</p>

</body>
</html>

2.属性选择器 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            float: left;
            display: block;
            hight:50px;

            width: 50px;
            border-radius: 10px;
            background: #219161;
            text-align: center;/*对齐方式，居中对齐*/
            color: #AA22FF;
            text-decoration: none;/*去下划线*/
            margin-right: 5px; /*外边距*/
            font:bold 20px/50px Arial;
        }

        /*存在id属性的元素a[]{}  属性名，属性名=属性值（正则）*/
        a[id]{/*a[id=first]{}*/
            color: blue;
        }
        /* = 绝对等于 *= 包含这个元素*/
        a[class*=links]{
            background: yellow;
        }
        /*
       选中href中一http开头的元素^=开头
       选中                     $=结尾
         */
        a[href^=http]{
            background: palegreen;
        }

    </style>
</head>
<body>
<p class="demo">
    <a href="http://www.baidu .com"class="linksitem first"id="first" >1</a>
    <a href=""class="links item active ">2</a>
    <a href="image/123.jpg"class="links item">3</a>
    <a href="image/123.jpg"class="links item">4</a>
    <a href="abc">5</a>
    <a href="/a.pdf">6</a>
    <a href="/abc.pdf">7</a>
</p>
</body>
</html>

3.结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*伪类*/
        a:hover{
            background: salmon;
        }
        /*ul的第一个子元素*/
        ul li:first-child{
            background: #D2413A; }
        /*  ul的最后一个子元素  */
            ul li:last-child{
                background: #219161;
            }
    /*    选中p1：定位到父元素。选择当前的第一个元素*/
    /*    p:nth-child(1){*/
    /*        background: #D2413A;*/
    /*    }*/
    /*    p:nth-of-type(2)选中父元素，下的p元素的第二个，类型*/
    </style>
</head>
<body>
<h>21</h>
<a href="">5114</a>
<p>p1</p>
<p>p1</p>
<p>p1</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
    <li>li4</li>
</ul>
</body>
</html>

美化网页元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        span标签：重点突出的字 使用span标签套起来
        div：自定义样式用div
        font-family：字体
        font-size：字体的大小
        font-weight：字体的粗细 bold/light
        color：字体颜色
         */
    </style>
</head>
<body>

</body >
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /**
        颜色：color
            RGB 0~F
           透明度 RGBA A：0~1
        文本居中 text-align center  right/left
        首行缩进 text-indent em
             高度 height
            行高 line-height   高度和行高一致 可以上下居中
            下划线 text-decoration:underline
            去下划线 text-decoration:none
            文本图片水平对齐 vertical-align：middle

            中划线 text-decoration：line-through
           */
        h1{color:#5f9ea0;


            font-family: 楷体;
        }
        p{
            height: 200px

            line-height:200px}
        a:hover{
            color: #AA22FF;
            font-size: 50px;
        }
        a:active{
            color: yellow;
        }

    </style>

</head>
<body>
<a href="#">狭窄的山洞之内，药鼎中的火焰，反射在山壁之上，张牙舞爪的不断跳动</a>
<h1 >萧炎全神贯注的注视着药鼎中那翻腾的火焰，略微有些苍白的脸庞上，密布着汗珠，长时间炼药，是一件极其消耗斗气的工作，而且萧炎此时的功法，又只是最低的黄阶低级，在雄厚程度依旧持久性之上，很难有什么优势，所以，他能在药鼎前坚持炼药接近两个小时，已经很是不易武动乾坤。<br>
   微眯着眼睛望着萧炎再次成功的将凝血草提炼成白色粉末，知道他已经到了极限的药老微微点头，轻声道：“好了，先休息一会吧。”<br>
    <p>闻言，萧炎努力保持平衡的肩膀顿时跨了下来，身子犹如脱力一般，软软的倒躺在了冰冷的地面之上，大口大口的喘着气，胸膛不断的起伏着，全身酸麻的他，现在简直连一根手指头都懒得再动弹武动乾坤。<br>
        “这种时候修炼，效果最好。”<br>
         瞟了一眼犹如软泥一般躺在地上的萧炎，药老淡淡的道武动乾坤。</h1>



</body>
</html>

总结

提示：这里对文章进行总结：

例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

两手空空！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+CSS登录界面
tongai1的博客
05-06 4万+
今天学习了一个HTML+CSS登录界面 效果图如下： 背景图片可以选取自己喜欢的，以下是实现代码： login.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录</title> <link rel="stylesheet"...
html css开关按钮样式,纯CSS实现开关按钮
weixin_42522953的博客
06-07 4508
上面这种开关按钮在现代网页UI设计中经常出现，代替了以前丑陋的checkbox。在很多UI框架中如elementUI都有组件可以直接使用。但是画出这样一个开关是十分简单的，不需要借助JS代码就可以实现。核心思路就是将原有input框进行隐藏，通过label标签(自带选中功能)和伪元素就可画出开关。画出开关后实现点击效果就很简单了，利用CSS3提供的伪类:checked，即选中checkbox的时候...
纯HTML CSS设计翻页效果
zyg_web的博客
01-04 1万+
大一网页设计，尝试更多炫酷页面内容，狠狠加分！！！！ 话不多说，直接上代码 这是HTML部分: [图片链接为原神官网图片，请联系作者删除]
登录注册页面（html css）
weixin_47463009的博客
06-09 4845
效果如图：
html css网页代码，源码附上
weixin_43748983的博客
04-19 6229
html编写一个化妆品的网页，在这里的网页代码，我以做了较为精细的计算，每个盒子的尺寸基本链接紧密
纯HTML CSS制作导航栏 下拉菜单
zyg_web的博客
01-07 1万+
纯HTML CSS制作导航栏 下拉菜单
html css奇数行,css怎么选择奇偶行元素
weixin_39814378的博客
06-25 3947
在css中，可以利用“:nth-child(n)”选择器来进行奇偶匹配，选择奇偶行元素；该选择器的参数n可以是数字、关键词或公式，设置n为“Odd”或者“even”关键词即可匹配下标是奇数或偶数的子元素。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。在css中，:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型...
Html CSS的三种链接方式
热门推荐
Jason的学习笔记
06-29 2万+
感谢原文：https://blog.csdn.net/abc5382334/article/details/24260817 感谢原文：https://blog.csdn.net/jiaqingge/article/details/52564348 Html CSS的三种链接方式 css文本的链接方式有三种：分别是内联定义、链入内部css、和链入外部css 1.代码为： <html> ...
html css 内联样式_内联CSS指南–如何直接设置HTML标签的样式
08-17 9179
html css 内联样式You’ve written some HTML and now need to style it with CSS. One way is to use inline styles, which is what this article is about. 您已经编写了一些HTML，现在需要使用CSS对其进行样式设置。 一种方法是使用内联样式，这就是本文的目的。 &l...
html css 距离顶部距离,详解CSS line-height和height
weixin_42549496的博客
06-25 5068
最近在做CSS界面时经常遇到line-height和height这两个属性，一直没搞很明白，今天静下心来好好网上查阅了一下，算是有所领悟。https://blog.csdn.net/a2013126370/article/details/82786681这个博主写的很不错，至少让我对line-height和height的理解更深刻了，值得借鉴。一、一些基本概念1.行高是指文本行基线间的垂直距离(也...
HtmlCss
03-11
HtmlCss
HTML CSS学习练习.zip
12-30
HTML CSS学习练习HTML CSS学习练习HTML CSS学习练习 HTML CSS学习练习HTML CSS学习练习HTML CSS学习练习 HTML CSS学习练习HTML CSS学习练习HTML CSS学习练习 HTML CSS学习练习HTML CSS学习练习HTML CSS学习练习 HTML...
html css 综合学习.zip
12-30
html css 综合学习html css 综合学习html css 综合学习html css 综合学习html css 综合学习 html css 综合学习html css 综合学习html css 综合学习html css 综合学习html css 综合学习 html css 综合学习html css ...
html css js学习.zip
12-30
html css js学习html css js学习html css js学习html css js学习 html css js学习html css js学习html css js学习html css js学习 html css js学习html css js学习html css js学习html css js学习 html css js学习...
html css 学习记录.zip
12-30
html css 学习记录html css 学习记录html css 学习记录 html css 学习记录html css 学习记录html css 学习记录 html css 学习记录html css 学习记录html css 学习记录 html css 学习记录html css 学习记录html css ...
css sprites如何使用
最新发布
codedadi的博客
05-18 390
注意：确保在定位图标时考虑到大图像的尺寸和每个图标的尺寸。例如，如果每个图标都是32x32像素的，并且它们在大图像中水平排列，那么第一个图标的background-position是0 0，第二个图标的background-position是-32px 0，依此类推。在CSS中，定义.icon类以设置所有图标的通用样式（如大小、背景图像等），并为每个图标定义特定的background-position。/* 图标2在大图像中的位置（假设每个图标宽度为32px） *//* 图标1在大图像中的位置 */
TailwindCSS在vite项目中的安装与使用
前端菜菜DayDayUp的博客
05-14 319
TailwindCSS在vite项目中的安装与使用
CSS碎碎念
◝(⑅•ᴗ•⑅)◜..°♡的博客
05-17 272
碎碎念
css去除复选框默认样式
xiaohua0708day的博客
05-17 121
类的样式，包括边框、宽度、高度等。在选中和未选中状态下，我们分别定义了不同的背景颜色，以便在复选框被选中或取消选中时改变其外观。的支持可能有所不同。你可能需要根据实际情况进行调整，以确保在各种浏览器下都能正确显示自定义的复选框样式。属性来覆盖默认的复选框外观。这些属性允许你重置浏览器的默认外观，以便你可以自定义样式。需要注意的是，不同浏览器对。在这个例子中，我们使用了。
html css八股文
01-03
HTML CSS八股文是指在前端开发中常见的一些基本技巧和知识点的总结。下面是一个简单的HTML CSS八股文示例： HTML部分： ```html <!DOCTYPE html> <html> <title>HTML CSS八股文示例 /* CSS样式 */ .container...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值