html基础和CSS基础

已于 2022-12-27 01:35:39 修改
阅读量714 收藏 3
点赞数 2
文章标签： html
于 2020-12-23 20:06:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37025110/article/details/111597399
版权
这篇博客详细介绍了HTML和CSS的基础知识，包括HTML的基本结构、VSCode的推荐插件和快捷键、SEO三大标签、排版标签、文本格式化、div与span的区别、图像和链接的使用、CSS的选择器、背景、定位、表格和表单元素等内容，旨在帮助初学者掌握网页制作的基础技能。
摘要由CSDN通过智能技术生成

HTML和CSS基础

html基本结构

在这里插入图片描述

vscode推荐插件

插件作用
Chinese (Simplified)LanguagePack for vs Code中文(简体)语言包
Open in Browser右击选择浏览器打开html文件
Auto Rename Tag自动重命名配对的HTML/XML标签

vscode快捷键

  • 新建文件(Ctrl+N )
  • 保存(Ctrl +S ),注意移动要保存为.html文件
  • tab 补全代码
  • ctrl+shift+↑（↓） 快速上移或下移一行
  • Ctrl +加号键，Ctrl＋减号键可以放大缩小视图
  • ctrl+k+b 显示后者隐藏侧边栏
  • ctrl+l 快速选中一行
  • ctrl+f 查找
  • ctrl+/注释快捷键 这个主要记住 只可以内部查询 在网页无法查询

SEO三大标签

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 标题标签 -->
    <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
    <!-- description标签 -->
 <meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。">
    <!-- keywords标签 -->
    <meta name="keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东">
    <</title>
    <!-- link:favicon : 浏览器标题栏图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>

排版标签

  • 标题标签h1~h6 字体加粗 上下生成空白行，逐渐从大到小字体显示，
  • 段落标签p 上下生成空白行
  • 水平线hr
  • 换行br

文本格式化标签

  • 加粗 strong b
  • 倾斜 em i
  • 下划线 ins u
  • 删除线 del s
  • 上标 sup
  • 下标 sub

div和span区别

  • div占一行，span在一行内显示
<body>
    <div>我是一个div标签 独自占一行</div>123
    <div>我是一个div标签 独自占一行</div>123
    <span>百度</span>
    <span>新浪</span>
    <span>搜狐</span> 
    <!-- <span></span> 一行可以放好多个人 --> 

</body>

图片标签

  • src 图片来源
  • alt 图片不显示的时候显示的文字 替换文本
  • title 提示文本 鼠标悬停到图片上显示的文字
  • width 宽
  • height 高
  • border 边框
<body>
    <h4>图像标签的使用;</h4>
    <img src="wx1.jpg" width="300px">
    <img src="wx11.jpg" width="300px" alt="我是硕硕">
    <h4> alt 替换文本 图像显示不出来的时候用文字替换</h4>
    <img src="wx1.jpg" width="300px" title="我是硕硕">
    <h4> tilte 提示文本 鼠标放到图像上，提示文字</h4>
</body>
<!---->

路径

绝对路径

从盘符出发

<img src='d:\black\基础班\第一天\代码\images\2.jpg'>

从互联网出发

<img src='http://baidu.jpg'>

相对路径

图片相对于HTML页面的位置

<img src='01.jpg'>同级
<img src='images/01.jpg'>下级
<img src='../images/01.jpg'>上级

音频标签

属性名功能
src音频的路径
controls显示播放的控件
autoplay自动播放（部分浏览器不支持)
loop循环播放
<body>
    <audio src="./music.mp3" controls autoplay loop></audio>
</body>

视频标签

属性名功能
src视频的路径
controls显示播放的控件
autoplay自动播放（谷歌浏览器中需配合muted实现静音播放))
loop循环播放
<body>
    <!-- 谷歌浏览器可以让视频自动播放, 但是必须是静音状态muted -->
    <video src="./video.mp4" controls autoplay muted loop></video>
</body>

超链接

  • href 跳转目标
  • target 打开方式
    • _blank 在新窗口打开（原页面不关闭）
    • _self 在当前窗口打开（原页面关闭）
    • 下载链接:如果href里面地址是一个文件或者压缩包，会下载这个文件。
<h4>1.外部链接</h4>
    <a href="https://www.baidu.com/" target="_blank">百度链接</a>
    target 打开窗口的方式 默认的值实时_self 当前窗口打开页面  _blank 新窗口打开页面
    
    <a href="gongsijianjie.html" target="_blank">公司简介</a>
    <h4>2.内部链接；网站内部页面之间的相互链接</h4>
    
    <a href="#">公司地址</a>
    <h4>3.空链接；#</h4>
    
    <a href="img1.zip">下载文件</a>
    <h4>4.下载链接；地址链接是文件 exe.或者是zip 等压缩包显示</h4>
    
    <a href="https://www.baidu.com/"><img src="img1.jpg"/></a>
    <h4>5.点击图片去往某个网址</h4>

base

  • 控制页面中所有超链接是以什么方式打开
<base target='_blank'>

锚点链接

</head>
<body>
    <!-- 1.设置锚点 -->
    <a name="one">第一章</a>
    <!-- 2.设置启动定位器的开关 -->
    <a herf="#one">点我跳转第一章 </a>
</body>
</html>

跨页锚点

<body>
    <!-- 1.设置锚点 -->
    <a name="one">第一章</a>
    <!-- 2.设置启动定位器的开关 -->
    <a herf="要跳转的页面名称.html#one">点我跳转第一章 </a>
</body>
</html>

特殊字符

<!--
空格符 &nbsp；
&lt; <
&gt; >
&copy;©
&reg;®
&amp;&
&times;x
&divide;÷
&plusmn;±
&degree;°
&sup2;²
&sup3;³
&yen;￥
-->

列表

无序列表

<!--
	ul连不能直接写文字和标签，ul只能嵌套li
	li外面必须有父元素ul或者ol li里面可以嵌套任意标签
-->
<ul>
    <li>元素</li>
    <li>
    	<p>嵌套</p>
    </li>
</ul>

有序列表

<!--
	ol连不能直接写文字和标签，ol只能嵌套li
	li外面必须有父元素ul或者ol li里面可以嵌套任意标签
-->

<ol>
    <li>新闻</li>
</ol>

自定义列表

<body>
	<!--dl标签中只允许嵌套dt/dd标签
	dt/dd标签中可以嵌套任意内容-->
    <dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
    </dl>

**

表格的基本语法

<body>
 - <table> </table>是用于定义表格的标签。
 - <th><th> 表头单元格居中加粗效果
 - <tr> </tr>标签用于定义表格中的行，必须嵌套在<table> </table>标签中。
 - <td> </td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
   4．字母td指表格数据( table data) ，即数据单元格的内容。 
 </body>
</html>

表格相关属性

  • thead 表格的头部
  • tbody 表格的身体
  • tfoot 表格的底部

在这里插入图片描述

表格案例

    <table border="1">
        <caption><strong>学生成绩单</strong></caption>
        <thead>
            <!-- 表格的头部 -->
            <tr>
                <!-- <td></td> -->
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>
        <tbody>
            <!-- 表格的身体 -->
            <tr>
                <td>张三</td>
                <td>100分</td>
                <td>真棒, 第一名</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>99分</td>
                <td>真棒, 第二名</td>
            </tr>    
        </tbody>
        <tfoot>
            <!-- 表格的底部 -->
            <tr>
                <td>总结</td>
                <td>郎才女貌</td>
                <td>真棒, 相亲成功</td>
            </tr>
        </tfoot>
    </table>

合并单元格

    <table width="500" height="249" border="1" cellspacing="0">
    <tr>
        <td></td>
        <td colspan="2"></td> 跨列合并
    </tr>
    <tr>
        <td rowspan="2"></td> 跨行合并
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    </table>

表单元素

在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素)和提示信息3个部分构成。
input标签:比较特殊，可以根据type属性的不同来显示对应的输入效果type属性值:
共他属性:
placeholder:输入框中的提示文字
multiple：上次多个文件

在这里插入图片描述

综合案例注册页面

<body>
    <form action="xxx.php" method="GET">
        用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
        <!-- text 文本框 用户可以里面输入然后文字 -->
        密码：<input type="password" name="password"> <br>
        <!-- password 密码框 用户看不见密码 -->
       性别：男<input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女" checked> 人妖 <input type="radio" name="sex" value="人妖"><br>
       <!-- rodio 单选按钮 可以实现多选一 -->
       <!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
       <!-- 单选按钮和复选框可以设置checked 属性，当页面打开的时候就可以默认选中这个按钮 -->
        爱好：吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby" value="睡觉"> 打豆豆 <input type="checkbox" name="hobby" value="打豆豆" checked="checkbox">
        <!-- checkbox 复选框 可以实现多选 -->
        <br>
           <input type="submit" value="免费注册">
         <!-- 点击提交按钮，可以把 表单域 form 里面的表单元素 里面的值 提交给服务器 -->
        <input type="reset" value="重新填写">
        <!-- 重置按钮可以还表单元素的默认状态 -->
        <input type="button" value="获取短信验证码"><br>
        <!-- 普通按钮 button 后期结合js  搭配使用 -->
        上传头像：<input type="file">
        <!-- 文件域 使用场景 上传文件使用的上传多个文件➕multiple-->
    </form>
</body>

**

label标签

<body>
    <label for="text">用户名：</label><input type="text" id="text">
    <input type="radio" id="nan" name="sex"> <label for="nan"> 男</label>
    <input type="radio" id="nv" name="sex"> <label for="nv"> 女</label>
</body>
<label>标签的for属性应当与相关元素的id属性相同

select下拉表单元素

    <form>
        籍贯：
    <select>
        <option>山东</option>
        <option>北京</option>
        <option>天津</option>
        <option selected>火星</option>  
        <!-- <select>中至少包含一对<option> -->
        <!-- 在<option>中定义selecLed = " selected"时，当前项即为默认选中项 -->
    </select>
    </form>

textarea 文本域

<body>
    <form>
        今日反馈：
        cols规定文本区域可见宽度
        rows规定文本区域可见行数
        <textarea cols="50" rows="5">反馈留言是textarea</textarea>
        </form>
</body>

综合案例 注册页面

<body>
    <h4>青春不常在，抓紧谈恋爱</h4>
    <table width="500" border="1">
        <!-- 第一行 -->
        <tr>
            <td>性别;</td>
            <td>
                <input type="radio" name="sex" id="nan"> <label for="nan"><img src="./images/man.jpg"> 男</label>
                <label><input type="radio" name="sex" id="nv"><img src="./images/women.jpg" >女</label>
            </td>
        </tr>
        <!-- 第二行     -->
        <tr>
            <td>生日：</td>
            <td>
               <select>
                <option>--请选择年份--</option>
                <option>2001</option>
                <option>2002</option>
                <option>2003</option>
              </select>
              <select>
                   <option>--请选择月份--</option>
                   <option>1</option>
                   <option>2</option>
                   <option>3</option>
                </select>
                <select>
                    <option>--请选择日--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                   </select>
            </td>
        </tr>
        <!-- 第三行 -->
        <tr>
            <td>所在地区</td>
            <td><input type="text" value="北京思密达"></td>
        </tr>
        <!-- 第四行 -->
        <tr>
            <td>婚姻状况：</td>
            <td>
                <input type="radio" name="marry" checked="checked">未婚<input type="radio" name="marry">  已婚<input type="radio" name="marry">   离婚
            </td>
         </tr>
        <!-- 第五行 -->
        <tr>
            <td>学历:</td>
            <td><input type="text" value="幼儿园"></td>

        </tr>
        <!-- 第六行 -->
        <tr>
            <td>喜欢的类型</td>
            <td>
                <input type="checkbox" name="love"> 妩媚的
                <input type="checkbox" name="love"> 可爱的
                <input type="checkbox" name="love"> 小鲜肉
                <input type="checkbox" name="love"> 老腊肉
        </td>
        </tr>
        <!-- 第七行 -->
        <tr>
            <td>个人介绍</td>
            <td>
                <textarea></textarea>
            </td>
        </tr>
        <!-- 第八行 -->
        <tr>
            <td></td>
            <td>
                <input type="submit" value="免费注册">
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="checkbox" checked="checked"> 我同意注册条款和会员加入标准
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <a href="#">我是会员，立即登录</a>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <h5>我承诺</h5>
                <ul>
                    <li>年满18岁、单身</li>
                    <li>抱着严肃的态度</li>
                    <li>真诚寻找另一半</li>
                </ul>
            </td>
        </tr>
        </table>

- 有语义的标签-手机端

    <title>有语义的标签-手机端.</title>
</head>
<header>网页头部</header>
<nav>网页导航</nav>
<footer>网页底部</footer>
<aside>侧边栏</aside>
<section>网页区块</section>
<article>文章</article>
</body>

体验css语法规范

```html
    <title>css语法规范</title>
    <style>
        /* 选择器{样式} */
        /* 给谁改样式 {改什么样式} */
        
        p {
            color: red;
            font-size: 12px;
            /* 修改了文字大小为12像素 */
        }
    </style>
</head>

<body>
    <p>有点意思</p>

css选择器

01-基础选择器之标签选择器

<title>基础选择器之标签选择器</title>
<style>
/*标签选择器;写上标签名*/
p {
	color: green;
}
div {
   color: pink;
}
</style>
</head>
    <style>
    <p>男生<p>
    <p>男生<p>
    <p>男生<p>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
    </style>

02-基础选择器之类选择器

<title>基础选择器之类选择器</title>
<style>
	/*类选择器口诀：样式点定义 结构类（class）调用 一个或多个 开发最常用*/
	.red {
	color：red;
}
	.star-sing {
	color: green;
}
</style>
<body>
	<ul>
	<li class="red">冰雨</li>
	<li>来生缘</li>
	<li>李兰春</li>
	<li>生僻字</li>
	<li class="star-sing">江南style</li>
	</ul>
	<div class="red">我也想变红色</div>

利用类选择器画出三个盒子

    <title>利用类选择器画出三个盒子</title>
    <style>
        .red {
            width: 100px;
            height: 100px;
            /* 背景颜色 */
            background-color: red;
        }
        .green {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="red">红色</div>
    <div class="green"></div>
    <div class="red">红色</div>

多类名的使用方式

    <title>多类名的使用方式</title>
    <style>
        .red {
            color: red;
        }
        .font35 {
            font-size: 35px;
        }
    </style>
</head>
<body>
    <div class="red font35">刘德华</div>
</body>

多类名的使用场景

    <title>多类名的使用场景</title>
</head>
<body>
    <style>
        .box {
            width: 150px;
            height: 100px;
            font-size: 30px;
        }
        .red {
        background-color: red;
            /* 背景颜色 */
        }
        .green {
            
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box red">红色</div>
    <div class="box green"></div>
    <div class="box red">红色</div>

03-基础选择器之id选择器

    <title>基础选择器之id选择器</title>
    <style>
        /* id选择器的口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用 */
        #pink {
            color: pink;
        }
    </style>
</head>
<body>
    <div id="pink">迈克尔.杰克逊</div>
</body>

04-基础选择器之通配符选择器

    <title>基础选择器之通配符选择器</title>
    <style>
        * {
            color: red;
            /* 这里把html body div span li等等的标签都改为了红色 */
        }
    </style>
</head>
<body>
    <div>我的</div>
    <span>我的</span>
    <ul>
        <li>还是我的</li>
    </ul>
</body>

基础选择器总结

在这里插入图片描述

CSS Fonts 字体复合属性

    <title>CSS字体属性之复合属性</title>
    <style>
        div {
            /* font-style: italic;
            font-weight: 700;
            font-size: 16px;
            font-family: 'Microsoft yahei'; */
            /* 想要div字体变倾斜 加粗 字号设置为16像素 并且 是微软雅黑 */

            /* font: font-style: font-weight: font-size/line-height font-family; */
            /* font: italic 700 16px 'Microsoft yahei'; */
            /* 复合属性；简写的方式  */
      
            /* Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式 必须遵守顺序 */
        }
    </style>
</head>

<body>
    <div>三生三世十里桃花，一心一意白行代码</div>
</body>

字体属性终结

在这里插入图片描述

css文本外观属性之颜色

    <title>CSS文本外观属性之颜色</title>
    <style>
        div {
            /* color: deeppink; */
            /* color: #ea00ff; */
            color: rgb(255, 0, 242)
        }
    </style>
</head>
<body>
    <div>听说喜欢pink色的男生，都喜欢男人</div>

CSS文本外观之文字对齐

    <title>CSS文本外观之文字对齐</title>
    <style>
        h1 {
            /* 本质是让好h1盒子里面的文字水平居中对齐 */
            /* text-align: left; 左对齐  */
            /* text-align: right; 右对齐 */
            /* text-align: center; 居中对齐  */
            text-align: center;
            居中对齐
            /* CSS文本外观之文字对齐 */
        }
    </style>
</head>

<body>
    <h1>居中对齐的标题</h1>
</body>

CSS文本外观之装饰文本

    <title>CSS文本外观之装饰文本</title>
    <style>
        div {
            /* text-decoration: underline; */
            /* 下划线 */
            /* text-decoration: line-through; */
            /* 删除键 */
            text-decoration: overline;
            /* 上划线 */
        }
        
        a {
            text-decoration: none;
            /* 取消a默认的下划线 */
            color: rgb(105, 105, 105);
        }
    </style>
</head>

<body>
    <div>粉红色的回忆</div>
    <a href="#">粉红色的回忆</a>
</body>

文本外观之文本缩进

    <title>文本外观之文本缩进</title>
    <style>
        p {
            font-size: 24px;
            /* 字体大小 */
            /* text-indent: 20px; */
            /* 文本第一行首行缩进 多少距离 *
            text-indent: 2em;
            /* 如果此时写了2em 则是缩进当前元素 2个文字大小的距离 */
        }
    </style>
</head>

CSS文本外观之行间距

    <title>CSS文本外观之行间距</title>
    <style>
        div {
            line-height: 26px;
        }
    </style>
</head>

html中实现标签和文本居中的方法
在这里插入图片描述

css文本属性总结

在这里插入图片描述

选择器的进阶

01-选择器-后代

    <style>
   		 ol li {
            /* 父选择器   后代选择器 {} */
            color: red;
            }
         ol li a {
            /* 父选择器   后代选择器 {} */
            color: pink;
            }
    </style>
</head>

<body>
    <ol>
        <!-- 后代: 儿子, 孙子, 重孙子..... -->
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li><a href="">我是孙子</a></li>
    </ol>
</body>

02-选择器-子代

    <style>
        /* 空格隔开的是后代, 儿子,孙子,重孙子 */
        /* div a {
            color: red;
        } */
        /* 只想选中儿子a */
        /* div的儿子a文字颜色是红色 */
        
        div>a {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        父级
        <a href="#">这是div里面的a</a>
        <p>
            <a href="#">这是div里面的p里面的a</a>
        </p>
    </div>
</body>

03-选择器-并集

    <style>
        /* p div span h1 文字颜色是红色 */
        /* 选择器1, 选择器2 {} */
        p, 
        div, 
        span, 
        h1 {
            color: red;
        }
    </style>
</head>
<body>
    <p>ppp</p>
    <div>div</div>
    <span>span</span>
    <h1>h1</h1>

    <h2>h2</h2>
</body>

04-选择器-交集

    <style>
        /* 必须是p标签,而且添加了box类 */
        
        p.box {
            color: red;
        }
        /* #dilireba {
            color: red;
        } */
    </style>
</head>

<body>
    <!-- 找到第一个p,带box类的, 设置文字颜色是红色 -->
    <p class="box box1" id="dilireba">这是p标签:box</p>
    <p class="box">这是p标签:box</p>
    <p>pppppp</p>
    <div class="box">这是div标签:box</div>
</body>

05-选择器-链接伪类

    <style>
        /* 悬停的时候文字颜色是红色 */
        a:hover {
            color: red;
            background-color: green;
        }

        /* 用户鼠标悬停到div的时候, 文字是绿色 */
        div:hover {
            color: green;
        }
    </style>
</head>
<body>
    <a href="#">这是超链接</a>
    <!-- 任何标签都可以添加伪类, 任何一个标签都可以鼠标悬停 -->
    <div>div</div>
</body>

05-选择器-focus伪类

    <style>
        input:focus {
            background-color: pink;
            color: red;
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>
拓展
清除表单元素轮廓线: outline: none;
清除文本域可拖拽区域:resize: none;

06-选择器-结构伪类

    <style>
        /* 选中第一个 */
        /* li:first-child {
            background-color: green;
        } */

        /* 最后一个 */
        /* li:last-child {
            background-color: green;
        } */

         任意一个 
        	li:nth-child(1) {
            background-color: green;
        } 

        /* 倒数第xx个 */
        li:nth-last-child(1) {
            background-color: blue;
        }
    </style>
</head>
<body>

属性选择器

    <style>
        /* text:背景色是粉色; password背景色是skyblue */
        input[type='text']  {
            background-color: pink;
        }

        input[type="password"] {
            background-color: skyblue;
        }

        /* input:nth-child(1) {} */
    </style>
</head>
<body>
    <input type="text">
    <input type="password">
</body>

注意点

功能公式
偶数2n、even
奇数2n+1、2n-1、odd
找到前5个-n+5
找到从第5个往后n+5
5的倍数5n

背景-背景色

    <style>
        div {
            width: 400px;
            height: 400px;
            /* background-color: pink; */
            /* background-color: #ccc; */
            /* 红绿蓝三原色, a是透明度0-1 */
            /* background-color: rgba(0, 0, 0, 0.5); */
            background-color: rgba(0, 0, 0, .5);
        }
    </style>
</head>
<body>
    <div>div</div>
</body>

背景-背景图

    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: pink;
            background-image: url(./images/1.jpg);
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>

背景图片和img的区别

  • img标签是作为内容，有图片默认大小
  • 背景图片是作为背景，不是内容不会撑开盒子

应用:

  • img常用于商品、宣传等可替换图片
  • 背景图片常用于长时间不变,用于装饰的图

背景-背景平铺

    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: pink;
            background-image: url(./images/1.jpg);
            /* background-repeat: repeat; */
            /* (默认值)水平和垂直方向都平铺 */
            /* background-repeat: no-repeat; */
            /* 横向和竖向都不平铺（常用） */
            /* background-repeat: repeat-x; */
            /* 仅横向平铺 */
            /* background-repeat: repeat-y; */
            /* 仅纵向竖线平铺 */
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>

背景-背景位置

        div {
            width: 400px;
            height: 400px;
            background-color: pink;
            background-image: url(./images/1.jpg);
            background-repeat: no-repeat;
            /* 先x后y */
            /* background-position: right 0; */
            /* background-position: right bottom; */
            /* background-position: center center; */
            /* background-position: center; */
            /* background-position: 50px 0; */
            /* background-position: 50px 100px; */
            background-position: -50px -100px;
            /* 正数: 向右向下移动; 负数:向左向上移动 */
            /* 注意: 背景色和背景图只显示在盒子里面 */
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>

常见的块级元素、行内元素、行内块元素
常见块级元素

常见块级元素
div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等

常见行内元素
a、span、i、strong、em、label、cite、code等

常见行内块元素
input 、textarea、buttom、select等

在这里插入图片描述

显示模式-块

元素转换

    <style>
        /* 块: 独占一行; 宽度默认是父级100%; 添加宽度都生效 */
        
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            /*转块
            display：block */
            /* 转行内 
            display: inline; */
            /* 转行内块 
            display: inline-block; */
        }
    </style>
</head>

<body>
    <div>11111</div>
    <div>22222</div>
</body>

显示模式-行内

    <style>
        /* 行内: 不换行; 设置宽高不生效;一行可以显示多个 尺寸和内容的大小相同 */
        
        span {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 转行内块  */
            /* display: inline-block; */
        }
    </style>
</head>
<body>
    <span>span</span>
    <span>span</span>
</body>

显示模式-行内块

    <style>
        /* 行内块: 一行显示多个; 加宽高生效 */
        
        img {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <img src="./images/1.jpg" alt="">
    <img src="./images/1.jpg" alt="">
</body>

伪元素

    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        .father::before {
            /* 元素前面加伪元素 */
            /* 内容 */
            /* content属性必须添加, 否则伪元素不生效 */
            content: '老鼠';
            color: green;
            width: 100px;
            height: 100px;
            background-color: blue;

            /* 默认是行内元素, 宽高不生效 */
            display: block;
        }

        .father::after {
            /* 元素后面加伪元素 */
            content: '大米';
        }
    </style>
</head>
<body>
    <!-- 伪元素 通过css创建标签, 装饰性的不重要的小图 -->

    <!-- 找父级, 在这个父级里面创建子级标签 -->

    <div class="father">爱</div>

    <!-- 老鼠爱大米 -->
</body>

双伪元素

::before 在元素内容的最前面添加新内容。
::after 在元素内容的最后面添加新内容。

伪元素，：：before和::after必须要有content定义内容，也可以为空。这种元素只是在css添加内容，也就是在你a标签前面加内容

清除浮动-额外标签法

1.在父元素内容的最后添加一个块级元素
2.给添加的块级元素设置clear:both

<style>
        .clearfix {
            content: "";
            display: block;
            clear: both;
            /* 兼容性做法 */
            height: 0;
            visibility: hidden;
        }
    </style>
</head>

<body>
    <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clearfix"></div>
    </div>

清除浮动-单伪元素

有点：直接给标签加类即可清除浮动

<style>
        .clearfix::after {
            content: '';

            /* 伪元素添加的标签是行内, 要求块 */
            display: block;
            clear: both;

            /* 为了兼容性 */
            height: 0;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
        <!-- 通过css 添加标签 -->
    </div>```

清除浮动-双伪元素

 <style>
        /*  .clearfix::before 作用: 解决外边距塌陷问题
            外边距塌陷: 父子标签, 都是块级, 子级加margin会影响父级的位置
        */
        /* 清除浮动 */
        .clearfix::before,
        .clearfix::after {
            content: '';
            display: table;
        }

        /* 真正清除浮动的标签 */
        .clearfix::after {
            /* content: '';
            display: table; */
            clear: both;
        }
    </style>
</head>
<body>
    <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>

清除浮动overflow:hidden

父子级标签，子级浮动，父级没有高度，后面的标准流盒子会受影响，显示到上面的位置
在这里插入图片描述

定位的使用方法

<style>
        .sun {
            position: absolute;
            right: 20px;
            bottom: 50px;
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>

position 定位的区别:

绝对定位

1.脱标，不占有位置
2.具有行内块元素的特点，可以设置宽高
3.相对于最近一级带有定位的祖先元素进行定位，默认以浏览器可视区域为准

4.对于定位的偏移值一般情况下只会取横向和纵向的其中一个进行定位
5.如果设置了四个方向上的，那么left优先于right，top优先于bottom

相对定位

1.相对于自己原来的位置进行定位
2.不脱离标准流，依然占有位置
3.相对定位不会改变盒子的显示模式

固定定位

1.脱标，不占有位置
2.具有行内块元素的特点，可以设置宽高
3.相对于浏览器的可视区域进行定位

自绝父相

1.儿了标签相对于父亲进行定位,范小定位方便
2.父亲不脱离标准流，不会影响其他标准流盒子的摆放

盒子定位居中

在这里插入图片描述

  1. 沿着x和y的方向移动大盒子的一半，具体实现 left: 50%； top: 50%;

  2. 反方向移动自身盒子的一半

transform：translateX（) ; 表示横向移动的距离
transform：translateY（) ; 表示竖向向移动的距离
transform：translate（x移动距离，y移动距离) ; 表示同时设置横向和竖向移动的距离

position 定位的使用步骤:

1.设置定位的模式 top bottom left right
2.设置偏移值

定位方式属性值
静态定位static
绝对定位absolute
相对定位relative
固定定位fixed

vertical-align行内块垂直对齐

主要用于解决行内块元素和其他行内块元素和行内元素的一个水平对齐问题

属性值作用
top顶线对齐
middle中线对齐
baseline基线对齐（默认值）
bottom顶线对齐

cursor光标类型

属性值效果
default小箭头光标
pointer小手指光标
text工字形文本输入光标
move十字形可拖拽光标
not-allowed禁止光标

overflow益出部分显示效果

属性值效果
visible默认值，溢出部分可见
hidden溢出部分隐藏
scroll无论是否溢出，都显示滚动条
auto根据是否溢出，自动显示或隐藏滚动条

隐藏效果

		不占位隐藏
        display: none;
        对应
        display: block;
        
        占位隐藏 
        visibility: hidden;
        对应
        visibility: visible;

（案例）导航二维码居中定位案例-显示隐藏效果

<style>
                .code {
            position: absolute;
            left: 50%;
            top: 41px;
            /* 不占位隐藏 */
            /* display: none; */
            /* 占位隐藏 */
            visibility: hidden;
            transform: translate(-50%);
        }
        /* 鼠标悬停a 显示二维码图片 */
        
        .nav li a:hover img {
            /* 让元素显示 */
            /* 不占位隐藏  */
            /* display: block; 
            /* 占位隐藏  */
            visibility: visible;
        }
    </style>
</head>

css书写三角形

在这里插入代码片

    <style>
        div {
            /* width: 100px;
            height: 100px; */
            width: 0;
            height: 0;
            /* background-color: pink; */
            /* transparent: 透明 */
            border-top: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-left: 10px solid orange;
        }

        /* 
            1. 书写一个盒子
            2. 盒子添加四个方向的border, 颜色设置不同
            3. 保留其中一个方向的border, 其他方向颜色是transparent
        */
    </style>

css精灵图

   <style>
        span {
            display: inline-block;
            width: 18px;
            height: 24px;
            background-color: pink;
            background-image: url(./images/taobao.png);
            /* 背景图位置属性: 改变背景图的位置 */
            /* 水平方向位置  垂直方向的位置 */
            /* 想要向下侧移动图片, 位置取负数; */
            /* 想要向左侧移动图片, 位置取负数;  */
            background-position: -3px 0;
        }
        
        b {
            display: block;
            width: 25px;
            height: 21px;
            background-color: green;
            background-image: url(./images/taobao.png);
            background-position: 0 -90px;
        }
    </style>
</head>

<body>
    <!-- <img src="./images/taobao.png" alt=""> -->
    <!-- 精灵图的标签都用行内标签  span, b, i -->
    <span></span>
    <b></b>
</body>

过渡属性

    <style>
        /* 过渡配合hover使用, 谁变化谁加过渡属性 */
        
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 宽度200, 悬停的时候宽度600, 花费1秒钟 */
            transition: width 1s, background-color 2s;
            /* 如果变化的属性多, 直接写all,表示所有 */
            transition: all 1s;
        }
        
        .box:hover {
            width: 600px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>
qq964705948
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端学习：html基础和css基础学习（一）
不期而遇的博客
04-06 258
写博客是对自己的学习成果进行总结，记录自己的编程的成长道路，真正的把输入用自己的思维输出出来。 开发工具： 我用到的开发工具是sublime text3，photoshop和chrome浏览器。 sublime text3是一款文本编辑器的软件用来写html代码，使得html语言具有高光和提示，学习效率高。 chrome浏览器：这个浏览器的用户几乎占到半壁江山，说明chrome好一些。 ...
html+css基础.md
02-25
HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体...此资源 原创HTML+CSS基础 实战51zxw.net 小清流吖羞羞萌芽之作。
HTML基础和css基础学习
lxt118518的博客
10-14 265
第三天： 今天是学习的第三天，依旧学习的是HTML的知识 今日学习内容 1、表格标签 为啥使用表格标签？ 简单通用，结构稳定，基本结构 单元格 行 列 跨行 跨列 <!--表格table 行tr 列td border：宽度 --> 代码： <table border="1px"> <tr> <!--colspan跨列--> <td colspan="2">1-1</td>
【Web前端入门】HTML+CSS 万字总结——带你深入学习掌握
网页设计与制作 | HTML+CSS+JS
05-18 812
现在对HTML和CSS的基础知识做一个详细的总结，文章内容很硬核。共有3w+字总结，建议收藏反复学习！适用于初学者学习或者熟练相关操作的人复习使用。 文章目录 HTML篇 一.HTML简介 1.什么是HTML？ 2.HTML 标签 3.HTML 元素 4.HTML版本 5.Web 浏览器 6.HTML 网页结构 7.中文编码 8.编写第一个网页 二.HTML编辑器 三.HTML基础 1.HTML 标题 2.HTML 段落 3.HTML 链接 4.HTML 图像 四.HTML元素 1.
HTML与CSS入门经典(第7版)-4.22-118
ndsc1946的专栏
04-22 447
... 创建锚点，之前不一定要有文本； ... 返回锚点； ... 是将被点击的文本，是单击后跳到的位置。 注意，id属性指定的锚点名称必须以字母字符开头。 send me an email message. subject body 邮件的主题和正文 属性与电子邮件之间用？分开，属性之间用&分开 防止电子邮件收集程序自动收集mailto链接的办法：使用字符实体对电子邮件地址进行编
html与css入门经典 第9版,HTML与CSS入门经典(第9版)
weixin_34208146的博客
06-14 225
内容提要前言超越HTML可视化示例问题、测验和练习关于作者第1章 理解Web的工作方式1.1 HTML和WWW简史1.2 创建Web内容1.3 理解Web内容递送1.4 选择Web托管提供商1.5 利用多种Web浏览器执行测试1.6 创建一个示例文件1.7 使用FTP传输文件1.7.1 选择FTP客户端1.7.2 使用FTP客户端1.8 了解在Web服务器上放置文件的位置1.8.1 基本的文件管理...
html+css基础代码
06-16
本资料包“html+css基础代码”显然是为了帮助初学者理解这两门语言的基础知识。 HTML是一种标记语言，它使用一系列预定义的标签来告诉浏览器如何呈现网页内容。例如，`<html>`标签定义整个HTML文档的开始，`<head>`...
pc网页html css基础
03-10
**CSS基础知识** 1. **选择器**：CSS通过选择器来定位HTML元素，如标签选择器（`p {color: red;}`），类选择器（`.class-name {property: value;}`），ID选择器（`#id-name {property: value;}`）。 2. **属性与值...
Div+Css基础入门教程
最新发布
07-25
Div+Css基础入门教程
html5 css3 简单基础知识笔记
01-27
html5 css3 简单基础知识笔记
HTML学习的各种帮助文档
11-24
有几种不同的版本供您选择，内容丰富，整理的超完善！！！相信你使用后一定不会后悔！！
html与css入门经典 当当,HTML与CSS入门经典
weixin_34611277的博客
06-20 225
?通过阅读本书，读者将学会如何使用HTML和CSS来设计、创建和维护*的网站。本书采用直观、循序渐进的方法，引导读者掌握从基本知识到*功能的所有内容。本书每章内容都建立在已学的知识之上。即使读者没有任何HTML与CSS知识，也可以通过本书，走向成功的坚实之路。 创建网页并将其放到网上； 格式化文本，使其得到*限度的清晰度和可读性； 创建到其他网页和网站的链接： 在网页中添加图像、颜色和视觉效果： ...
HTML与CSS入门经典(第7版)-4.9-103
ndsc1946的专栏
04-09 476
font-weight:normal bold bolder lighter（设置字体的粗细） font-style:normal italic oblique（设置斜体文本）   使用多个样式规则使用分号分开。 small ，big ，sup ，sub ，em(或I) ，strong(或b)，tt，pre   可以使用pre在段落之间插入额外的竖直间隔。 up down
HTML与CSS入门经典（第7版）(試讀)
08-10 1093
HTML与CSS入门经典（第7版） 书名：HTML与CSS入门经典（第7版） 作者：[美] Dick Oliver, Michael Morrison著 陈秋萍译 来源：人民邮电出版社 出版时间：2007年03月 ISBN:711515625 定价：39元 看 书 评 论 收 藏打 分 购 买
html与css入门经典（第8版）文摘
smileberry1的专栏
11-22 1033
第一章 理解web的工作方式 第二章 发布web内容 第三章 理解html和xhtml的关系 第四章 理解层叠样式单 css样式属性: 1.布局属性 2.格式化属性   第五章 使用文本块和列表 三中html列表 1.有序列表 2.无序列表 3.定义列表   第六章 使用字体 第七章 使用表格 第八章 使用外部和内部链接 第九章 使用颜色 140种颜色http:
html与css入门经典doc,HTML+CSS入门 flying-saucer如何利用HTML来生成PDF文件
weixin_32301557的博客
06-10 431
本篇教程介绍了HTML+CSS入门 flying-saucer如何利用HTML来生成PDF文件，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<1、导入maven依赖9.1.0org.xhtmlrendererflying-saucer-pdf${flyingSaucer.version}org.xhtmlrenderer...
HTML+CSS入门
SuiHao
03-10 1231
CSS指层叠样式表 (Cascading Style Sheets)，用来定义HTML网页中的内容用什么样式来显示。HTML: 指定网页显示的内容CSS: 指定内容显示的样式。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值