狂神说HTML+CSS

最新推荐文章于 2022-05-03 16:13:55 发布
最新推荐文章于 2022-05-03 16:13:55 发布
阅读量470 收藏 10
点赞数
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42367504/article/details/118399437
版权 
# HTML

1、初始HTML

1.1、什么是HTML
  • HTML：Hyper Text Markup Language（超文本标记语言）
  • 超文本：文字、图片、视频、音频、动画等
1.2、W3C标准
1.2.1、W3C
  • World Wide Web Consourtium（万维网联盟）
  • 成立于1994年，Web技术领域最权威和最具影响力的国际中立性技术标准机构
  • w3c
  • w3c中国
1.2.2、W3C内容
  • 结构化标准语言（HTML、XML）
  • 表现标准语言（CSS）
  • 行为标准（DOM、ECMAScript）

2、网页的基本信息

  • DOCTYPE：告诉浏览器我们要是用什么规范，html是html5的规范
  • meta标签：描述性标签，一般来做SEO
  • meta标签的属性：
    • 1、charset：定义文档的字符编码
    • 2、name：context信息属性的名称
    • 3、context：name属性的信息内容
<!DOCTYPE html>
<html lang="en">
<!--代表网页头部-->
<head>
<!--  meta:  描述性标签，用来描述我们网站的一些信息，一般来做SEO-->
    <meta charset="UTF-8">
    <meta name="keyword" content="学习，工作，交友">
    <meta name="description" content="一起学编程">
<!--    网页标题-->
    <title> 我的第一个HTML</title>
</head>
<!--网页主题-->
<body>
helloworld
</body>
</html>

3、网页的基本标签

3.1、标题标签
  • h1-h6一共6个级别的标题标签
3.2 、段落标签
  • <p>p标签</p>
3.3 、换行标签
  • <br>
3.4、 水平线标签

<hr>

3.5 、字体样式标签

<strong>粗体</strong>
<em>斜体</em>

3.6 、注释和特殊符号

&nbsp;空格
&gt;大于
&lt;小于
&copy;版权符

<!DOCTYPE html>
<html lang="en">
<!--代表网页头部-->
<head>
    <meta charset="UTF-8">
<!--    网页标题-->
    <title> 我的第一个HTML</title>
</head>
<!--网页主题-->
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h5>六级标签</h5>
<!--水平标签-->
<hr/>
<!--段落标签-->
<p>两只老虎</p>
<p>两只老虎</p>
<p>两只老虎</p>
<p>  两只老虎</p>
<!--换行标签-->
两只老虎<br/>两只老虎<br/>两只老虎<br/>两只老虎<br/>
<!--换行标签比较紧凑，段落标签有明显段间距-->
<!--粗体 斜体-->
<h1>字体样式标签</h1>
<p>粗体：<strong>Hello,World</strong></p>
斜体：<em>Hello,World</em><br/>
<!--特殊符号-->
空格：你&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;好
<br/>
大于号：&gt;<br/>
小于号：&lt;<br/>
版权符:&copy;
<!--特殊符号记忆：&开头;结尾，只要在idea中&敲出后就有提示-->
</body>
</html>

4、 图像标签

4.1、img 标签
4.2、img 标签属性

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--src:资源地址
    相对地址，绝对地址
    ../上级地址
    alt：在图片加载失败的时候，就会用文字代替
    title:鼠标悬停在图片上时，所显示的名字
    width height 图片的高和宽-->
<img src="../resouse/image/9.jpg" alt="第一张图片" title="我的图片">

</body>
</html>

5、链接标签

5.1、 a 标签
5.2 、属性
  • href 跳转
  • target 表示窗口在哪里打开， target="_blank" 在新标签中打开， target="_self" 在本页中打开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--使用name作为标记-->
<a name="top">顶部</a><br>
<!--href：跳转页面的地址
    a标签内文字：即显示的文字
    可以把图片放在a标签内，点击图片跳转网页
    target:表示在哪打开新网页
        _self:当前标签打开(默认)
        _blank:新的页面中打开-->
<a href="HtmlDemo02.html" target="_self">点击跳转到HtmlDemo02</a><br>
<a href="https://www.baidu.com/">点击跳转到百度首页</a><br>
<a href="HtmlDemo02.html" target="_blank"><img src="../resouse/image/8.jpg" title="点我实现跳转"></a><br>
<p><a href="HtmlDemo02.html" target="_blank"><img src="../resouse/image/8.jpg" title="点我实现跳转"></a><br></p>
<p><a href="HtmlDemo02.html" target="_blank"><img src="../resouse/image/8.jpg" title="点我实现跳转"></a><br></p>
<p><a href="HtmlDemo02.html" target="_blank"><img src="../resouse/image/8.jpg" title="点我实现跳转"></a><br></p>
<p><a href="HtmlDemo02.html" target="_blank"><img src="../resouse/image/8.jpg" title="点我实现跳转"></a><br></p>
<p><a href="HtmlDemo02.html" target="_blank"><img src="../resouse/image/8.jpg" title="点我实现跳转"></a><br></p>
<p><a href="HtmlDemo02.html" target="_blank"><img src="../resouse/image/8.jpg" title="点我实现跳转"></a><br></p>
<!--锚链接
    1.需要一个标记锚
    2.跳转到标记
    #页面内跳转-->
<a href="#top">点击回到顶部</a>
</body>
</html>
5.3 、锚链接
5.3.1 、 跳转到本页的顶部
<a name="top">顶部</a>
...
...
...
<a href="#top">回到顶部</a>
5.3.1 、 跳转到其它页面的底部
<a herf="其它页面的路径#bottom">跳转到其它页面的底部</a>
  • 其他页面
...
<a name="bottom">底部</a>
5.4 、功能性链接
5.4.1、 邮件标签
<a href="mailto:xxxxxxqq.com">点击联系我</a>
5.4.2、 qq链接
<a target="_blank" href="http://wpa.qq.com/msgrd?v=xxx&uin=&site=qq&menu=yes">
    <img border="0" src="../resouse/image/8.jpg" alt="点击这里加我领取小电影" title="点击这里加我领取小电影"/>
</a>

6 、块内元素和行元素

  • 块内元素：无论内容多少，该元素独占一行 （p、h1-h6…）
  • 行元素：内容撑开宽度，左右都是行内元素可以排成一行，及行内元素可以在同一行（a、strong、em…）

7 、列表标签

  • 列表的概念
    • 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷的获得相应信息
7.1、无序列表
 <!--有序列表-->
    <!-- 应用范围：试卷\问答...-->
    <ol>
        <li>Java</li>
        <li>Python</li>
        <li>C</li>
        <li>C#</li>
    </ol>

在这里插入图片描述

7.2、有序列表
<!--无需列表-->
    <!-- 应用范围：导航、侧边栏...-->
    <ul>
        <li>Java</li>
        <li>Python</li>
        <li>C</li>
        <li>C#</li>
    </ul>

在这里插入图片描述

7.3、自定义列表
 <!--自定义列表
      dl：标签
      dt：列表名称
      dd：列表内容
      应用范围：公司网站底部
      -->
    <dl>
        <dt>学科</dt>
        <dd>Java</dd>
        <dd>Python</dd>
        <dd>C</dd>
        <dd>C#</dd>
        <dt>位置</dt>
        <dd>上海</dd>
        <dd>北京</dd>
        <dd>西安</dd>
    </dl>

在这里插入图片描述

7 、表格标签

  • 特点：
    • 简单通用
    • 结构稳定
  • 基本结构
    • 单元格
    • 行
    • 列
    • 跨行
    • 跨列
<!--表格table
       行：tr
       列：td
    -->
    <table border="1px">
        <tr>
<!--        colspan 跨列    -->
            <td colspan="4" align="center">1-1</td>
        </tr>
        <tr>
            <td rowspan="2">2-1</td>
            <td>2-2</td>
            <td>2-3</td>
            <td>2-4</td>
        </tr>
        <tr>
            <td>3-2</td>
            <td>3-3</td>
            <td>3-4</td>
        </tr>
    </table>

在这里插入图片描述

8 、媒体元素

  • 视频元素：video
  • 音频元素：audio
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>
    <!--音频和视频
    src：资源路径
    controls：控制条
    autoplay ：自动播放
    -->
    <video src="../resources/video/xxx.mp4" controls autoplay></video>

    <audio src="../resources/audio/xxx.mp3" controls autoplay></audio>


</body>
</html>

9、 页面结构分析

在这里插入图片描述

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

10、iframe内联框架

在这里插入图片描述

    <!--iframe内联框架
    src：地址
    w-h：宽度高度
    -->
    <!--    <iframe src="path" name="mainFrame"></iframe>-->
	<!--    path:引用网页地址-->
	<!--    mainFrame:框架标识名-->
    <iframe src="https://www.baidu.com" frameborder="0" height="800px" width="1000px"></iframe>
    <iframe src="" name="hello" frameborder="0"></iframe>
    <a href="HtmlDemo01.html" target="hello">点击跳转</a>
    <iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257627&page=10"
            scrolling="no" border="0"
            frameborder="no" framespacing="0" allowfullscreen="true">
    </iframe>

11、表单语法

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
    <h1>注册</h1>
    <hr>
    <!--表单form
      action：表单提交的位置，可以是网站，也可以是一个请求处理地址
      method：post，get 提交方式
          get方式提交：外面可以在url中看到外面提交的信息，不安全，高效
          post方式提交，比较安全，可以传输大文件
      -->
    <form action="HtmlDemo01.html" method="post">
        <!--文本输入框-->
        <span>姓名：</span><input type="text" name="username"><br>
        <!--密码框-->
        <span>密码：</span><input type="password" name="pwd"><br>
        <p>
            <input type="submit">
            <input type="reset">
        </p>
    </form>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

12、input

在这里插入图片描述
####12.1、 单选框

 <!--单选框标签
        type="radio"：单选框的值
        value：单选框的值
        name：表示组(radio在一个组时只能选中一个，没有分组或不在同一组则可以多选 )
        -->
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex" checked/>女

在这里插入图片描述

####12.2、 多选框

 <!--多选框
        type="checkbox"
        -->
        <p>爱好：
            <input type="checkbox" value="sleep" name="hobby">睡觉
            <input type="checkbox" value="code" name="hobby" checked>敲代码
            <input type="checkbox" value="chat" name="hobby">聊天
            <input type="checkbox" value="game" name="hobby">游戏
        </p>

在这里插入图片描述

12.3、按钮

在form中，type="image"具有和type="submit"一样的特性，点击提交

  <!--按钮
        input type="button"    普通按钮
        input type="image"     图片按钮
        input type="submit"     提交按钮
        input type="reset"      重置按钮
        -->
        <p>
            <input type="button" name="btn1" value="点击变长">
            <input type="image" src="../resources/img/1.jpg">
        </p>

        <p>
            <input type="submit">
            <input type="reset">
        </p>

13、列表框文本域和文件域

13.1、下拉框
 <!--下拉框
            selected：默认选中的值-->
        <select name="下拉框名称" id="sele1">
            <option value="选项一的值">选项一</option>
            <option value="选项二的值" selected>选项二</option>
            <option value="选项三的值">选项三</option>
        </select>

在这里插入图片描述

13.2、文本域
<p>反馈：
	<textarea name="tarea" cols="50" rows="10" >文本域内容</textarea>
</p>

在这里插入图片描述

13.3、文件域
<!--文件域
        -->
<p>
   <input type="file" name="files">
   <input type="button" value="上传" name="upload">
</p>

在这里插入图片描述

14、简单验证和滑块

14.1、 简单验证
  • 如果验证的输入框为空则跳过验证
 <!--邮件验证-->
<p>邮件：
    <input type="email" name="email">
</p>
<!--URL-->
<p>URL：
    <input type="url" name="url">
</p>
<!--数字-->
<p>数字：
    <input type="number" name="num" max="100" min="0" size="10">
</p>
14.2、滑块
<!--滑块-->
<p>音量：
    <input type="range" name="voice" min="0" max="100" step="2">
</p>

在这里插入图片描述

14.3、搜索
 <!--搜索框-->
 <p>搜索：
     <input type="search" name="search">
 </p>

在这里插入图片描述

15、表单应用

  • 隐藏域：hidden
  • 只读：readonly
  • 禁用：disabled
    在这里插入图片描述
    在这里插入图片描述
   <!--增强鼠标可用性，点击label，光标自动到text上-->
    <p>
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>

16、表单初级验证

  • 常用方式
    • placeholder：提示信息
    • required：非空判断
    • pattern：正则表达式
<p>名称：<input type="text" name="username" placeholder="请输入用户名"></p>
<p>名称：<input type="text" name="username" required></p>
<!--常用的正则：https://www.jb51.net/tools/regexsc.htm-->
<p>自定义邮箱：
    <input type="text" 
           name="diy" 
           pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/">
</p>

CSS

1、学习线路

  • CSS是什么
  • CSS怎么用（快速入门）
  • CSS选择器（重点+难点）
  • 美化网页（文字，阴影，超链接，列表，渐变…）
  • 盒子模型
  • 浮动
  • 定位
  • 网页动画（特效效果）

2、CSS介绍

2.1、CSS概述
  • Cascading Style Sheet层叠样式表
  • CSS：表现（美化网页）
  • 字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动
2.2、发展
  • CSS1.0
  • CSS2.0：DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO
  • CSS2.1：浮动，定位
  • CSS3.0：圆角、阴影、动画…浏览器兼容性~
2.3、快速入门
  • HTML内写css（不建议）
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <!--规范，<style>可以编写CSS的代码，每一个声明最好以“;”结尾
   语法：
   	选择器{
   			声明1;
   			声明2;
   			声明3;
   		}

   -->
   <style>
       h1{
           color: red;
       }
   </style>
</head>
<body>
   <h1>CSS测试</h1>
</body>
</html>
  • CSS和HTML分离(建议)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范，<style>可以编写CSS的代码，每一个声明最好以“;”结尾
	语法：
		选择器{
				声明1;
				声明2;
				声明3;
			}

    -->
<!--    <style>-->
<!--        h1{-->
<!--            color: red;-->
<!--        }-->
<!--    </style>-->
    <link href="./css/style.css" rel="stylesheet">
</head>
<body>
    <h1>CSS测试</h1>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

2.4、CSS优势
  • 1、内容和表现分离；
  • 2、网页结构表现统一，可以实现复用
  • 3、样式十分的丰富
  • 4、建议使用独立于html的css文件
  • 5、利用SEO，容易被搜索引擎收录！
2.5、CSS导入方式
  • 优先级：就近原则（行内最先生效，没有行内样式，内样式和外部样式谁里标签近谁生效）
2.5.1、方式一（行内样式：简单粗暴）
<body>
    <h1 style="color: blue">CSS测试</h1>
</body>
2.5.2、方式二（内样式）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>
    <h1 >CSS测试</h1>
</body>
</html>
2.5.3、方式三（外部样式）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="./css/style.css" rel="stylesheet">
</head>
<body>
    <h1>CSS测试</h1>
</body>
</html>
2.5.4、拓展（外部样式）

外部样式有两种写法：

  • 链接式：
    <link href="./css/style.css" rel="stylesheet">
  • 导入式：(很少见到)@import是CSS2.1特有的！
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*导入式*/
        @import "./css/style.css";
    </style>
<!--    <link href="./css/style.css" rel="stylesheet">-->
</head>
<body>
    <h1>CSS测试</h1>
</body>
</html>

3、选择器

作用：选择页面上的某一个或者某一类元素

3.1、基本选择器

优先级：id > class > 标签

3.1.1、标签选择器

格式：选择一类标签 标签{}

  • html
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <h1>学习</h1>
    <p>java</p>
</body>
</html>
  • css
    h1{
    color: red;
    background: aquamarine;
    border-radius: 30px;
}
p{
    font-size: 20px;
    color: red;
}
3.1.2、类选择器

选择所有class一致的标签，跨标签，格式：.类名{}

  • html
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
<!-- 	类选择器的格式 .class的名称{}
        好处：可以多个标签归类，是同一个class，可以复用
-->
    <h1 class="h1">学习</h1>
    <h1 class="h2">学习</h1>
    <h1 class="h1">学习</h1>
</body>
</html>
  • css
    .h1{
       color: red;
       background: aquamarine;
       border-radius: 30px;
  }
.h2{
       font-size: 20px;
       color: red;
  }
3.1.3、Id选择器

全局唯一，格式：#id名{}

  • html
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
<!--        id选择器：id必须保证全局唯一-->
<!--        #id名称{}-->
<!--        不遵循就近原则，优先级是固定的-->
<!--        id选择器 > 类选择器  >  标签选择器-->
        
    <h1 id="h1">学习1</h1>
    <h1 id="h2">学习2</h1>
    <p id="h3">学习3</p>
</body>
</html>
  • css
    #h1{
    color: red;
    background: aquamarine;
    border-radius: 30px;
}
#h2{
    font-size: 20px;
    color: red;
}
#h3{
   color: azure;
   background: blue;
}
3.2、层次选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/style2.css">
</head>
<body>
    <p>p1</p>
    <p class="p">p2</p>
    <p>p3</p>
    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>

    </ul>
    <p>p7</p>
    <p>p8/p>
</body>
</html>'
3.2.1、后代选择器

注：某个元素的后面

 /*后代选择器*/
 body p{
     background: red;
 }
3.2.2、 子选择器(一代)
/*子选择器*/
body>p{
    background: blue;
}
3.2.3、 相邻的兄弟选择器( 同辈)

/相邻兄弟选择器：只有一个，相邻（向下）/

/*相邻兄弟选择器(p)：只有一个，相邻（向下）*/
.p +p{
    background: aquamarine;
}
3.2.4、 通用选择器
/*通用兄弟选择器，当前选中元素的向下的所有兄弟(p)元素*/
.p~p{
  background: #ffdb7f;
}
3.3、结构伪类选择器

伪类：在css中 带：

  • html
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
</body>
</html>
  • css
    /*ul的第一个子元素*/
ul li:first-child{
    color: blue;
}
/*ul的最后一个子元素*/
ul li:last-child{
    color: red;
}
/*选中p1：定位到父元素，选择当前的第一个元素
        选择当前p元素 的父级元素，选中父级元素的第一个，并且是当前元素才生效！
    */
 p:nth-child(1){
    background: orange;
 }


 /*选中父元素下的，第2个p元素*/
  p:nth-of-type(2){
     background: red;
  }
3.4、属性选择器（常用）

id + class结合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         .demo a{
            display: block;
            height: 50px;
            width: 50px;
            float:left;
            border-radius: 10px;
            background: blue;
            text-align: center;
            color: beige;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
         /*属性名，属性名=属性值（正则）
         =表示绝对等于
         *=表示包含
         ^=表示以...开头
         $=表示以...结尾
         存在id属性的元素  a[]{}
         */
        /* a[id]{
             background: red;
         }*/

         /*id=first的元素*/
       /* a[id=first]{
            background: aqua;
        }*/

        /*class中有links元素*/
       /* a[class = "links item2 first2"]{
            background: orange;
        }*/
        /*a[class*="links"]{
            background: black ;
        }*/
        /*选中href中以http开头的元素*/
        a[href^="http"]{
            background: orange;
        }
    </style>

</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="/adad/faf" class="links item2 first2" >2</a>
    <a href="qwe123" class="links item3 first3" >3</a>
    <a href="eweqe" class="links item4 first4" >4</a>
    <a href="rrrrr" class="links item5 first5" >5</a>
    <a href="ttt" class="links item6 first6" >6</a>
    <a href="yyy" class="links item7 first7" >7</a>
</p>
</body>
</html>

4、美化网页元素

目的：提高用户体验

4.1、span标签
  • 重点要突出的字，使用span标签套起来
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
        /*
        font-family：字体
		font-size：字体大小
		font-weight：字体粗细
        */
            font-family: 隶书;
            font-size: 30px;
            color: aliceblue;
            background-color: blue;
            font-weight: bolder;
        }
    </style>
</head>
<body>
欢迎学习<span>Java</span>
</body>
</html>
  • 字体样式
font-weight:bolder;/*也可以填px，但不能超过900,相当于bloder*/
/*常用写法：*/
font:oblique bloder 12px "楷体"
  • 字体属性:
    font属性是以下属性的简写属性：
    • font-style(规定文本的字体样式)
    • font-variant(规定是否以小型大写字母的字体显示文本)
    • font-weight(规定字体的粗细)
    • font-size/line-height(字体大小/行高)
    • font-family（规定文本的字体系列（字体族））
      注意：font-size 和font-family 的值是必需的。如果缺少其他值之一，则会使用其默认值
4.2、文本样式
  • 颜色–>color
  • 文本对齐方式
    • text-align（水平居中）：center
    • 垂直居中：height==line-height
  • 首行缩进–>text-indent：2em
  • 行高–>line-height：300px；
  • 划线–>text-decoration
    • 下划线：text-decoration: underline
    • 中划线：text-decoration: line-through
    • 上划线：text-decoration: overline
h1{
       text-align: center;/*文字水平居中*/
       background-color: blue;/*背景颜色*/
       color:white;/*字体颜色*/
       /*通过height==line-height可设置文字垂直居中*/
       height: 300px;
       line-height: 300px;
   }
   .p1{
       text-indent: 2em;/*首行缩进：1em=一个字*/
       text-decoration: line-through;
   }
   .p3{
       text-decoration: underline;/*下划线*/
   }
   .p4{
       text-decoration: line-through;/*中划线*/
   }
   .p5{
       text-decoration: overline;/*上划线*/
   }
   a{
   		text-decoration: none;/*超链接去除下划线*/
   }
  • 图片、文字水平对齐
img,span{vetical-align:middle}
4.3、阴影和超链接伪类
4.3.1、超链接伪类
a{
      /*超链接有默认的颜色*/
      text-decoration: none;
      color: #000000;
  }
  a:hover{
      /*鼠标悬浮的状态时字体颜色(需要记住)*/
      color: orange;
  }
  a:active{
      /*鼠标按住未释放的状态字体颜色*/
      color: green;
  }
  a:visited{
      /*点击之后的状态字体颜色*/
      color: red;
  }
4.3.2、阴影
.h{
   /*	第一个参数：表示水平偏移
      第二个参数：表示垂直偏移
      第三个参数：表示模糊半径
      第四个参数：表示颜色
      */
      text-shadow: 5px 5px 5px red;
}
4.4、列表ul li
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*list-style{
            none:去掉原点
            circle：空心圆
            decimal：数字
            square：正方形
        }*/
        ul li{
            height:30px;
            text-indent: 2em;
            list-style: square;
        }
    </style>
</head>
<body>
<p>
    <div id="nav">123</div>
    <ul>
        <li>Java</li>
        <li>Python</li>
        <li>C#</li>
    </ul>
</p>
</body>
</html>
4.5、背景
4.5.1、背景颜色(background-color)
  • 透明度(opacity）:取值范围为 0.0 - 1.0。值越低，越透明
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: lightblue;
opacity: 0.3;
}
h1 {
  background-color: green;
}

div {
  background-color: blue;
}

p {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>CSS background-color 实例</h1>

<div>
这是 div 元素内的文本。
<p>本段有其自己的背景色。</p>
我们仍然在 div 元素中。
</div>

</body>
</html>
4.5.2、背景图片(background-image)
  • 默认情况下，图像会重复(默认情况下，background-image 属性在水平和垂直方向上都重复图像)，以覆盖整个元素
    body {
  background-image: url("paper.gif");
}
4.5.3、背景图片平铺(background-repeat)
  • background-image:url("");/默认是全部平铺的/
  • background-repeat:repeat-x/水平平铺/
  • background-repeat:repeat-y/垂直平铺/
  • background-repeat:no-repeat/不平铺/
    /*仅在水平方向重复*/
body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}
/*背景图像仅显示一次*/
body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
}
4.5.4、背景图片位置(background-position)

用于指定背景图像的位置

	body {
	  background-image: url("tree.png");
	  background-repeat: no-repeat;
	  background-position: right top;
	}
4.5.5、背景附着(background-attachment)

指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）

  • 指定应该固定背景图像
    body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}
  • 指定背景图像应随页面的其余部分一起滚动
    body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}
4.5.6、背景简写

如需缩短代码，也可以在一个属性中指定所有背景属性。它被称为简写属性
在使用简写属性时，属性值的顺序为：

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
    注：属性值之一缺失并不要紧，只要按照此顺序设置其他值即可
body {
  background: #ffffff url("tree.png") no-repeat right top;
}
4.6、渐变

5、盒子模型

5.1、什么是盒子模型

在这里插入图片描述
说明：

  • Margin(外边距 - 清除边框外的区域，外边距是透明的
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。
5.2、边框(Border)
5.2.1、CSS 边框样式(border-style)

border-style 属性指定要显示的边框类型
允许以下值:

  • dotted - 定义点线边框
  • dashed - 定义虚线边框
  • solid - 定义实线边框
  • double - 定义双边框
  • groove - 定义 3D 坡口边框。效果取决于 border-color 值
  • ridge - 定义 3D 脊线边框。效果取决于 border-color 值
  • inset - 定义 3D inset 边框。效果取决于 border-color 值
  • outset - 定义 3D outset 边框。效果取决于 border-color 值
  • none - 定义无边框
  • hidden - 定义隐藏边框
5.2.2、CSS 边框宽度

border-width 属性指定四个边框的宽度

  • 可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick
    p.one {
  border-style: solid;
  border-width: 5px;
}

p.two {
  border-style: solid;
  border-width: medium;
}

p.three {
  border-style: dotted;
  border-width: 2px;
} 

p.four {
  border-style: dotted;
  border-width: thick;
}
  • 特定边的宽度
    • border-width 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）
      p.one {
  border-style: solid;
  border-width: 5px 20px; /* 上边框和下边框为 5px，其他边为 20px */
}

p.two {
  border-style: solid;
  border-width: 20px 5px; /* 上边框和下边框为 20px，其他边为 5px */
}

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 上边框 25px，右边框 10px，下边框 4px，左边框 35px */
}
5.2.3、CSS 边框颜色
  • border-color 属性用于设置四个边框的颜
    注释：如果未设置 border-color，则它将继承元素的颜色
    p.one {
  border-style: solid;
  border-color: red;
}

p.two {
  border-style: solid;
  border-color: green;
}

p.three {
  border-style: dotted;
  border-color: blue;
}
  • ·border-color ·属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）
    p.one {
  border-style: solid;
  border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
}
5.2.4、各个边框
  • 单独的边
    p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}
  • 不同的边框样式
    /* 四个值:依次上 下 左 右 */
p {
  border-style: dotted solid double dashed; 
}

/* 三个值：上 左右 下 */
p {
  border-style: dotted solid double; 
}

/* 两个值 上下 左右 */ 
p {
  border-style: dotted solid; 
}

/* 一个值 上下左右 */
p {
  border-style: dotted; 
}
5.2.5、各个边框简写边框属性

border 属性是以下各个边框属性的简写属性

  • border-width
  • border-style（必需）
  • border-color`
p {
  border: 5px solid red;
}
  • 单个边框简写边框属性
p {
  border-left: 6px solid red;
  background-color: lightgrey;
}
5.2.6、CSS 圆角边框

border-radius 属性用于向元素添加圆角边框

p {
  border: 2px solid red;
  border-radius: 5px;
}
5.3、外边距(Margin)

CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间

5.3.1、 Margin - 单独的边
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
5.3.2、 Margin - 边的值(允许负值)
  • auto - 浏览器来计算外边距
  • length - 以 px、pt、cm 等单位指定外边距
  • % - 指定以包含元素宽度的百分比计的外边距
  • inherit - 指定应从父元素继承外边距
p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}
5.3.3、 Margin - 简写属性
/*
上：25px
左右：75px
下：100px
*/
p {
  margin: 25px 75px 100px;
}
5.3.4、Margin - auto 值

将 margin 属性设置为auto，以使元素在其容器中水平居中

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}
5.3.5、Margin - inherit 值

外边距继承自父元素

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}
5.3.5、CSS 外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者，即二者取最大

  • 一个元素出现在另一个元素上面时
    在这里插入图片描述
  • 一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开）
    在这里插入图片描述
  • 注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
5.4、内边距(Padding)

CSS padding 属性用于在任何定义的边界内的元素内容周围生成空间。

5.4.1、 Padding - 单独的边
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
5.4.2、 Padding - 边的值(不允许负值)
  • length - 以 px、pt、cm 等单位指定内边距
  • % - 指定以包含元素宽度的百分比计的内边距
  • inherit - 指定应从父元素继承内边距
div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}
5.4.3、Padding - 简写属性
/*
上内边距是 25px
右和左内边距是 50px
下内边距是 75px
*/
div {
  padding: 25px 50px 75px;
}
5.4.4、内边距和元素宽度

CSS width 属性指定元素内容区域的宽度，内容区域是元素（盒模型）的内边距、边框和外边距内的部分

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

解析：该 <div>元素的宽度为 300px。但是，<div>元素的实际宽度将是 350px（300px + 左内边距 25px + 右内边距 25px），如果要保证宽度保持为 300px，可以使用 box-sizing 属性。这将导致元素保持其宽度。如果增加内边距，则可用的内容空间会减少

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

此时，内边距无论变大变小，div的宽度为300px,内容空间会发生改变

6、浮动

6.1、display 属性（重要）
  • display属性是用于控制布局的最重要的 CSS 属性
  • display 属性规定是否/如何显示元素
    每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为block 或inline
6.1.1、块级元素（block element）

块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）
例子：

  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>
6.1.2、行内元素（inline element）

内联元素不从新行开始，仅占用所需的宽度
例子：

  • <span>
  • <a>
  • <img>
6.1.3、Display: none(同时该元素的位置也删除掉了)

通常与 JavaScript 一起使用，以隐藏和显示元素，而无需删除和重新创建它们。

h1 {
  display: none;
}
  • visibility:hidden:同样是隐藏元素，但该隐藏执行后元素的位置还保留
6.1.3、Display: inline

将块元素更改为行内元素

li {
 display: inline;
}
6.1.3、Display: block

注意：设置元素的 display 属性仅会更改元素的显示方式，而不会更改元素的种类。因此，带有 display: block; 的行内元素不允许在其中包含其他块元素

6.1.4、 block、inline、inline-block
  • display:block–>一般用于将行内元素转为块元素使得该行内元素具备块元素的特性（此元素将显示为块级元素，此元素前后会带有换行符，具备宽高等属性）
  • display:inline–>将块元素转换为行内元素使其具备行内元素的特性（。此元素会被显示为内联元素，元素前后没有换行符，不具备宽高属性）
  • ==display:inline-block=–>块元素具备块元素特性和行内元素特性（行内块元素：没有换行符，具备宽高属性）
6.2、position 属性

position 属性规定应用于元素的定位方法的类型（static、relative、fixed、absolute 或 sticky）
有五个不同的位置值：static,relative,fixed,absolute,sticky

  • 元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同
6.2.1、 position: static
  • HTML 元素默认情况下的定位方式为 static（静态）
  • 静态定位的元素不受 top、bottom、left 和right 属性的影响
    -position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位：
div.static {
  position: static;
  border: 3px solid #73AD21;
}
6.2.2、 position: relative（元素本身位置保留）
  • position: relative; 的元素相对于其正常位置进行定位
  • 设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任- 何空间
div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}
6.2.3、position: fixed（元素本身位置不保留）
  • position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。
  • 固定定位的元素不会在页面中通常应放置的位置上留出空隙。
  • 最常见的一种用途是在页面中创建一个固定头部、固定脚部或者固定侧边栏，不需使用margin、border、padding
div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}
6.2.4、position: absolute(元素本身位置不保留)

position: absolute;的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。如果元素的父级没有设置定位属性，则依据body元素左上角作为参考进行定位。

然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。
解析：如果它的父元素设置了除static之外的定位，比如position:relative或position:absolute及position:fixed，那么它就会相对于它的父元素来定位，位置通过left , top ,right ,bottom属性来规定，如果它的父元素没有设置定位，那么就得看它父元素的父元素是否有设置定位，如果还是没有就继续向更高层的祖先元素类推，总之它的定位就是相对于设置了除static定位之外的定位的第一个祖先元素，如果所有的祖先元素都没有以上三种定位中的其中一种定位，那么它就会相对于文档body来定位（并非相对于浏览器窗口，相对于窗口定位的是fixed）

注意：“被定位的”元素是其位置除 static 以外的任何元素。

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
  left:100px;
  top:100px
} 

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}
6.2.5、relative–absolute

  • 1、文本流位置是否存在

    • 定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在
      在这里插入图片描述
    • 定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不在存在
      在这里插入图片描述

  • 2、定位

    • relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式
      在这里插入图片描述
    • absolute定位是从父元素开始查找，如果父元素不为static定位，则相对于父元素，如果父元素为static定位，则继续向外寻找不为static定位的元素，如果其父层中都未定义absolute或relative，则其将相对body进行定位
      在这里插入图片描述
      在这里插入图片描述
6.2.6、position: sticky

position: sticky; 的元素根据用户的滚动位置进行定位。
粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}
6.2.7、重叠元素

在对元素进行定位时，它们可以与其他元素重叠。

z-index 属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）。

元素可以设置正或负的堆叠顺序：

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前。
注意：如果两个定位的元素重叠而未指定 z-index，则位于 HTML 代码中最后的元素将显示在顶部。

6.3、Overflow属性
  • overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条
  • 属性值：
    • visible - 默认。溢出没有被剪裁。内容在元素框外渲染
    • hidden - 溢出被剪裁，其余内容将不可见
    • scroll - 溢出被剪裁，同时添加滚动条以查看其余内容
    • auto - 与 scroll 类似，但仅在必要时添加滚动条
      注释：overflow 属性仅适用于具有指定高度的块元素
6.3.1、overflow: visible

默认情况下，溢出是可见的(visible)，这意味着它不会被裁剪，而是在元素框外渲染：

div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}

在这里插入图片描述

6.3.2、overflow: hidden

如果使用 hidden值，溢出会被裁剪，其余内容被隐藏：

div {
  overflow: hidden;
}

在这里插入图片描述

6.3.3、overflow: scroll

如果将值设置为 scroll，溢出将被裁剪，并添加滚动条以便在框内滚动。请注意，这将在水平和垂直方向上添加一个滚动条（即使您不需要它）

div {
  overflow: scroll;
}

在这里插入图片描述

6.3.4、overflow: auto

auto值类似于 scroll，但是它仅在必要时添加滚动条：

div {
  overflow: auto;
}

在这里插入图片描述

6.3.5、overflow-x 和 overflow-y
  • overflow-x 和 overflow-y属性规定是仅水平还是垂直地（或同时）更改内容的溢出
    • overflow-x 指定如何处理内容的左/右边缘。
    • overflow-y 指定如何处理内容的上/下边缘。
div {
  overflow-x: hidden; /* 隐藏水平滚动栏 */
  overflow-y: scroll; /* 添加垂直滚动栏 */
}
6.4、浮动和清除
6.4.1、浮动 float

float属性规定元素如何浮动, 用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里

  • 属性：
    • left- 元素浮动到其容器的左侧
    • right - 元素浮动在其容器的右侧
    • `none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
    • inherit - 元素继承其父级的 float 值
  • 用法：最简单的用法是，float 属性可实现（报纸上）文字包围图片的效果。
6.4.2、清除浮动 clear

clear属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧

  • clear 属性可设置以下值之一：
    • none - 允许两侧都有浮动元素。默认值
    • left - 左侧不允许浮动元素
    • right- 右侧不允许浮动元素
    • both - 左侧或右侧均不允许浮动元素
    • inherit - 元素继承其父级的 clear 值
  • 用法：使用 clear 属性的最常见用法是在元素上使用了 float 属性之后
    在清除浮动时，应该对清除与浮动进行匹配：如果某个元素浮动到左侧，则应清除左侧。您的浮动元素会继续浮动，但是被清除的元素将显示在其下方
6.4.3、clearfix Hack

如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外：

然后我们可以向包含元素添加 overflow: auto;，来解决此问题：

.clearfix {
  overflow: auto;
}
阿巴巴巴巴巴巴
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
1.狂神说HTML
weixin_47700419的博客
12-26 356
狂神说HTML1.网页基本信息2.网页基本标签3.图像标签4.超链接标签及应用5.行内元素和块元素6.列表标签7.表格标签8.媒体元素9.页面结构10.内联框架11.表单12.其他标签 1.网页基本信息 <!--DOCTYPE: 告诉浏览器，我们使用什么规范 --> <!DOCTYPE html> <html lang="en"> <!--head标签代表网页头部 --> <head> <!--meta描述性标签，它用来
【狂神说Java】HTML快速入门
路边烧卖
05-17 1604
目录1.初识HTML2.网页基本信息3.网页基本标签4.图像标签5.超链接标签应用6.行内元素和块元素7.列表标签8.表格标签9.媒体元素10.页面结构分析11.iframe内联框架12.初始表单post和get提交13.文本框和单选框14.按钮和多选框15.列表框文本域和文件域16.搜索框滑块和简单验证17.表单的应用18.表单初级验证 初始HTML 网页基本标签 图像，超链接，网页布局 列表，表格，媒体元素 表单及表单应用 表单初级验证 1.初识HTML 什么是HTML HTML Hype
HTML入门学习＜遇见狂神说＞
Nikick的博客
07-13 134
HTML入门 1、VS插件推荐 插件 说明 Chinese 中文语言包 Open in Browser 右击选择浏览器打开html文件 JS-CSS-HTML Formatter 每次保存，都会格式化代码 Auto Rename Tag 自动重命名配对的HTML/XML标签 CSS Peek 追踪至样式 escook-theme 黑马刘龙彬老师主题 Community Material Theme 设置颜色主题 Live Server 自动监测代码修改并在浏览器响
狂神说HTML5笔记
浮生若梦
02-20 538
1 前言 HTML发展史 跨平台，各个平台都支持HTML HTML5标准 HTML开发常用IDE 记事本 Dreamweaver IDEA WebStorm 2.网页基本信息 网页基本信息 DOCTYPE声明 <title>标签 <tmeta>标签 <!-- 告诉浏览器 我们使用的是什么规范 --> <!DOCTYPE html> <html lang="en"> <!--he...
前端学习笔记：HTML狂神说笔记
zzzzzfffftttt的博客
05-03 891
狂神说HTML笔记
狂神说视频-CSS笔记.pdf
11-12
CSS（Cascading Style Sheets）是一种用来表现 HTML 或 XML 等文件样式的计算机语言。它可以静态地美化网页，也可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确...
狂神说-HTML.pdf
11-12
5. **字体样式标签**：HTML提供了如`<b>`（粗体）、`<i>`（斜体）、`<u>`（下划线）等标签来改变文本样式，但现代Web开发更倾向于使用CSS来控制样式。 6. **注释和特殊符号**：`<!-- -->`是HTML的注释语法，用于...
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
此资源为我跟着B站up主【遇见狂神说】java系列视频中前端入门部分学习过程中所写 大部分和视频保持一致，有一些自己的理解和一些扩展的部分
狂神笔记，b站狂神说课程笔记大全(最新)
09-19
b站狂神说课程笔记大全，每个部分都有 狂神说java系列笔记（java基础+javaweb+ssm+微服务）全套 狂神说上课笔记未删减 Java基础到技术升级 1、JavaSE：Java入门 2、JavaSE：基础语法 3、JavaSE：流程控制 4、JavaSE...
狂神说各种学习视频配套笔记
05-30
包括Java、html、CSS、JavaScript、Mysql、JavaWeb、Mybatis、SpringMVC、Linux、Redis、SpringCloud等
html笔记（狂神-完整版）
qq_49898212的博客
06-10 1462
html笔记（狂神-完整版） 生活总是让我们遍体鳞伤，但到后来，那些受伤的地方一定会变成我们最强壮的地方 背景颜色 bgcolor <body bgcolor="widte"> 靓仔 </body> 注释 <!-- 不添加注释 --> <body> 不添加注释： 靓仔 靓仔 </body> <br> <hr> <!-- 添加注释 --> <body>
【狂神】HTML笔记
QinLaoDeMaChu的博客
04-25 1307
目录1. 初识HTMl2. 网页基本元素3. 网页基本标签4. 图像标签5. 链接标签6. 行内元素和块元素7. 列表8. 表格9. 媒体元素10. 页面结构分析11. iframe内联框架12. 初识表单post和get提交13. 文本框和单选框14. 按钮和多选框15. 文本域和文件域16. 搜索框滑块和简单验证17. 表单的应用18. 表单初级验证 1. 初识HTMl 什么是HTML？ Hyper Text Markup Language : 超文本标记语言 超文本包括：文字、图片、音频、视频、动画
css—狂神说
TiAmo的博客
07-06 161
1.什么是css 如何学习？ 1、css是什么 2、css怎么用（快速入门） 3、css选择器（重点 + 难点） 4、美化网页 （文字，阴影，超链接，列表，渐变…） 5、盒子模型 6、浮动 7、定位 8、网页动画（不做要求） 1.1什么是css Cascading Style Sheet 层叠级联样式表 CSS ：表现层（美化网页） 字体，网页颜色，边距，高度，宽度，背景图片，网页定位，网页浮动… 创建css包的格式 1.2快速入门 style 基本入门 <!DOCTYPE html> &l
Flutter技术与实战(3)
八归少年
08-09 413
Dart语言基础 基础语法与类型变量 Dart初体验 printInteger(int a) { print('Hello world, this is $a.'); } main() { var number = 2019; printInteger(number); } —————————————————————————————————————————————————————————————————————————————— Hello world, this is 2019.
狂神Java学习笔记————HTML（二）
hyx的博客
06-08 804
列表 列表就是信息资源的一种展现形式，它可以使信息结构化条理化，并且以列表的样式显示出来，以便浏览者能更快捷地获取相应的信息 可以在列表中嵌套列表，内列表和外层列表缩进明显区分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表</title> </head> <body> <!--有序列表--
[学习笔记]狂神说HTML5
方圆 Blog
01-09 601
前端小笔记
[C/C++11]_[初级]_[使用正则表达式库regex]
Tobey(我是机器人)
03-21 8391
场景 正则表达式在处理非常量字符串查找,替换时能很省事,如果稍微复杂点的字符串匹配, 没有正则表达式还真做不出来. C++11 为我们提供了正则表达式库. 使用起来比boost的正则库方便. 搞Java 的一定觉得很搞笑,这都是Java的标配功能, 怎么C++11才支持这个库,vs2010 以才支持.建议在处理字符串搜索替换时,直接用正则吧,代码量少,快速. 参考std::regex_replace
小书匠语法使用手册xxxxxxxxxxxxxxxxxxxxxxxxxxx
热门推荐
cheshu4246的博客
01-22 4万+
<style> a:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } a:hover { outline: 0; } ...
狂神HTML视频笔记
weiyun_boke的博客
07-22 73
HTML_页面结构分析 iframe内联框架 表单 快捷生成标签：先写字母，然后tab <body> <!--表单form action:表单提交的位置，可以是网站，也可以是一个请求处理地址 method：post，get 提交方式--> <form action="1_我的第一个网页.html" method="post"> <!-- 文本输入框：input type="text"--> ...
狂神说dubbo+zookeeper博客园
最新发布
08-21
对于想要学习Dubbo和Zookeeper的开发者来说，狂神的博客可以说是一个很好的学习资源。 总之，狂神在博客园上分享了关于Dubbo和Zookeeper的知识，为读者提供了宝贵的学习资料和实践经验。通过他的博客，我对Dubbo和...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值