互联网程序设计HTML+CSS+JS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题</title>
</head>
<body>
  网页主体
</body>
</html>

VS Code可以快速生成骨架：！（英文）配合Enter/Tab键

3、标签的关系

明确标签的书写位置，让代码格式更整齐。

父子关系：子级标签换行且缩进；

兄弟关系：兄弟标签换行且对齐。

4、注释

注释是对代码的解释和说明，能够提高程序的可读性。

注释不会在浏览器中显示；

<!-- 我是HTML注释 -->

5、标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

显示特点：文字加粗，字号逐渐减小，独占一行。

h1标签在一个网页中只能用一次，用来放标题或logo，h2~6没有使用限制。

6、段落标签

一般用在新闻段落、文章段落、产品描述信息等等。

<p>段落</p>

显示特点：独占一行，段落之间存在空隙。

7、换行和水平线

换行：<br>

水平线：<hr>

8、文本格式化标签

9、图像标签

在网页中插入图片。

<img src="图片的URL">

属性语法：

属性名=“属性值”

属性写在尖括号里，标签名在后面，标签名和属性之间用空格隔开，不区分先后顺序。

<img src="URL" alt="替换文本" title="提示文本">

10、超链接标签

点击跳转到其他页面

<a href="https://www.baidu.com">跳转到百度</a>

href属性值是跳转地址，是超链接的必须属性，超链接默认是在当前窗口跳转页面，添加target="_blank"实现新窗口打开页面。

开发初期，不确定跳转地址，则href属性值写为#，表示空链接，页面不会跳转，在当前页面刷新一次。

11、音频

<audio src="URL"></audio>

12、视频

<video src="URL"></video>

二、HTML进阶

1、列表

布局内容排列整齐的区域

列表分类：无序列表、有序列表、定义列表

无序列表：布局排列整齐的不需要规定顺序的区域。

标签：ul嵌套li，ul是无序列表，li是列表条目

<ul>
    <li></li>
</ul>

PS:ul标签里面只能包裹li标签，li标签里面可以包裹任何内容。

有序列表：布局排列整齐的需要规定顺序的区域。

标签：ol嵌套li，ol是有序列表，li是列表条目

<ol>
    <li></li>
</ol>

PS:ol标签中只能包裹li标签，li标签可以包裹任何内容。

定义列表：

标签：dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的描述。

<dl>
    <dt>列表标题</dt>
    <dd>列表描述</dd>
</dl>

PS:dl里面只能包含dt和dd，dt和dd里面可以包含任何内容。

2、表格

网页中的表格与Excel表格类似，用来展示数据

基本使用，标签：table嵌套tr，tr嵌套td/th

table：表格，tr：行，th：表头单元格，td：内容单元格。

<table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>爱好</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>王德发</td>
                <td>狗</td>
                <td>咬狗</td>
            </tr>
            <tr>
                <td>王大发</td>
                <td>猪</td>
                <td>咬猪</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </tfoot>
    </table>

3、表单

收集用户信息

使用场景：登录、注册、搜索区域

1、input标签

input标签的type属性值不同，则功能不同。

2、input标签占位文本

提示信息，文本框和密码框都可以使用

选择你的英雄:<input type="text" placeholder="请选择王德发">

3、单选框

您是否是王德发:
    <input type="radio" name="choice" id="Yes"><label for="Yes">是</label>
    <input type="radio" name="choice" id="no" checked><label for="no">否</label>

4、上传文件

默认情况下，文件上传表单控件只能上传一个文件，添加multiple属性可以实现文件多选功能。

<input type="file" multiple>

5、多选框

王德发是(多选): 
    <input type="checkbox">狗
    <input type="checkbox" checked>猪
    <input type="checkbox">傻鸟

6、下拉菜单

标签：select嵌套option，select是下拉菜单整体，option是下拉菜单的每一项

默认显示第一项，selected属性实现默认选中功能。

您叫什么名字：
    <select>
        <option selected>我的发</option>
        <option>王德发</option>
        <option>王大发</option>
    </select>

7、文本域

多行输入文本的表单控件

<textarea>
        请输入王德发的100个缺点：
</textarea>

8、label标签

网页中，某个标签的说明文本

用label绑定文字和表单控件的关系，增大表单控件的点击范围

<label><input type="radio">女</label>

9、按钮

<button type="reset">原神启动！</button>

4、语义化

布局网页（划分区域，摆放内容）

div：独占一行

span：不换行

有语义的布局标签：

5、字符实体

三、CSS基础

1、CSS初体验

层叠样式表（CSS）是一种样式表语言，用来描述HTML文档的呈现（美化内容）。

书写位置：title标签下方添加style标签，style标签内书写CSS代码。

<!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>
        /* CSS代码 */
        /* 选择器 {CSS键值对} */
        /* 属性名和属性值成对出现-键值对 */
    </style>
</head>

2、CSS引入方式

内部样式表：CSS代码写在style标签里；

外部样式表：CSS代码写在单独的CSS文件中（.CSS），在HTML中使用link标签引入。

<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/index.css">

行内样式：配合JS使用，CSS写在标签的style属性值里。

<div style="color: red;font-size: 20px;">标签</div>

3、选择器

查找标签，设置样式

1、标签选择器

使用标签名作为选择器，选中同名标签设置相同的样式。

例如：p、h1、div、a……

<style> 
/* 标签选择器：无法差异化同名标签的显示效果 */
        p {
            color: red;
            font-size: 30px;
        }
</style>

2、类选择器

查找标签，差异化设置标签的显示效果

定义类选择器：.类名

使用类选择器：标签添加class="类名"

<style>
/* 类选择器：差异化同名标签 */
        .red {
            color: red;
        }
        .size {
            font-size: 30px;
        }
</style>

<div class="red size">使用类选择器了</div>

PS:类名自定义，不要用纯数字或中文；

一个类选择器可供多个标签使用；

一个标签可以使用多个类名，类名之间用空格隔开。

3、id选择器

查找标签，差异化设置标签的显示效果。

id选择器一般配合JS使用，很少用来设置CSS样式；

定义id选择器：#id名

使用id选择器：标签名添加id="id名"。

<style>
/* id选择器：差异化，一般配合JS使用 */
        #black {
            color: black;
        }
</style>

<p id="black">使用id选择器了</p>

4、通配符选择器

查找页面的所有标签，设置相同的样式

通配符选择器：*不需要调用，浏览器自动查找页面所有标签，设置相同的样式。

通配符选择器可以用于清除标签的默认样式，例如：标签默认的外边距，内边距。

<style>
* {
    margin:0;
    padding: 0;
    box-sizing: border-box;
}
</style>

4、盒子尺寸和背景色

<style>
/* 画盒子 */
        .big {
            width: 100px;
            height: 100px;
            background-color:chartreuse;
            font-weight: bold;
            text-indent: 0%;
        }
        .small {
            width: 200px;
            height: 200px;
            background-color: chocolate;
        }
</style>

    <!-- 画盒子 -->
    <div class="small">1</div>
    <div class="big">2</div>

5、文字控制属性

文字大小

属性名：font-size

属性值：文字尺寸，单位px

PS：谷歌浏览器的默认字号是16px；

字体样式（是否倾斜）

作用：清楚文字默认的倾斜效果；

属性名：font-style；

属性值：不倾斜：normal，倾斜：italic；

行高

作用：设置多行文本的间距；

属性名：line-height

属性值：数字加px；数字（当前标签font-size属性值的倍数）；

行高的测量方法：上间距+下间距+文本高度；

单行文字垂直居中

行高属性值等于盒子高度属性值；

<style>
    div {
            height:100px;
            background-color:skyblue;
            /*注意：只能是单行文字*/
            line-height:100px;
        }
</style>

字体族

属性名：font-family

属性值：字体名

font复合属性

设置网页文字公共样式

<style>
body {
    font: 14px/1.5 "Nicrosoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
    color: #333;
}
</style>

文本缩进

属性名：text-indent

属性值：数字+px，数字+em（推荐：1em=当前标签的字号大小）

文本对齐方式

属性名：text-align

属性值：left：左对齐，center：居中对齐，right：右对齐。

text-align本质是控制内容的对齐方式，属性要设置给内容的父级；

<style>
    div {
            text-align:center;
        }
</style>

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

文本修饰线

属性名：text-decoration

属性值：none：无，underline：下划线，line-through：删除线，overline：上划线

文字颜色

四、CSS进阶

1、复合选择器

由两个或多个基础选择器，通过不同的方式组合而成，更准确更高效的选择目标元素。

1、后代选择器

选中某元素的后代元素。

写法：父选择器子选择器{CSS属性}，父子选择器之间用空格隔开

<style>
 /* 后代选择器 选中所有后代 */
        div span {
            color: blueviolet;
        }
</style>

<span>span标签</span>
<div>
    <span>这是div的儿子span</span>
</div>

2、子代选择器

选中某元素的子代元素（最近的后代）

写法：父选择器>子选择器{CSS属性}，父子选择器之间用>隔开

<style>
/* 子代选择器 */
        div > span {
            color: cadetblue;
        }
</style>

<div>
    <span>这是div的子代span</span>
    <p>
        <span>这是div的子代p的子代span<span>
    </p>
</div>

3、并集选择器

选中多组标签设置相同的样式；

写法：选择器1，选择器2，…，选择器n{CSS属性}，选择器之间用，隔开。

 <style>
/* 并集选择器 */
        div，
        p，
        span {
            color: aqua;
        }
</style>

<div>div标签</div>
<p>p标签</p>
<span>span标签</span>

4、交集选择器

选中同时满足多个条件的元素。

写法：选择器1选择器2{CSS属性}，选择器之间没有任何符号。

<style>
/* 交集选择器 */
        p.sex {
            color: burlywood;
        }
</style>

<p class="sex">使用了sex类标签的p标签</p>

5、伪类选择器

伪类表示元素状态，选中元素的某个状态设置样式。

鼠标悬停状态：选择器：hover{CSS属性}

 <style>
/* 鼠标悬停 */
        span:hover {
            color: darkgreen;
        }
</style>

6、超链接伪类

如果要给超链接设置以上四个状态，需要按LVHA的顺序书写。

工作中，一个a标签选择器设置超链接的样式，hover状态特殊设置。

2、CSS特性

1、继承性

子级默认继承父级的文字控制属性

如果标签有默认文字样式会继承失败，例如：a标签的颜色、标题的字体大小。

2、层叠性

相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性，

不同的属性会叠加：不同的CSS属性都生效。

3、优先级

当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。

基础选择器：选择器优先级高的样式生效。

通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important（选中标签的范围越大，优先级越低）

复合选择器：需要权重叠加计算。

4、背景属性

背景图

属性名：background-image；

属性值：url

<style>
div.gxy {
            width: 400px;
            height: 500px;
            background-color: darkred;
            background-image: url(./派大星.jpg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            background-attachment: unset;
        }
</style>

背景图默认有平铺（复制）效果。

平铺方式

属性名：background-repeat

属性值：no-repeat：不平铺，repeat：平铺，repeat-x：水平方向平铺，repeat-y：垂直方向平铺。

背景图位置

属性名：background-position

属性值：

背景图缩放

属性名：background-size

属性值：cover：等比例缩放背景图完全覆盖背景区，可能图片一部分看不见；

contain：等比例缩放以完全装入背景区，可能背景区部分空白。

背景图固定

属性名：background-attachment

属性值：fixed

5、显示模式

标签的显示方式

作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放位置。

块级元素

特点：

独占一行；

宽度默认是父级的100%；

添加宽高属性生效；

行内元素

特点：一行可以显示多个；

设置宽高属性不生效；

宽高尺寸由内容撑开。

行内块元素

特点：一行可以显示多个；

设置宽高属性生效；

宽高尺寸也可以由内容撑开。

转换显示模式

属性：display

属性值：block：块级，inline-block：行内块，inline：行内

五、盒子模型

1、选择器

结构伪类选择器

作用：根据元素的结构关系查找元素；

<style>
    li:first-child {
                backgrond-color:green;
        }
</style>

:nth-child公式：

PS：公式中的n取值从0开始。

伪元素选择器

作用：创建虚拟元素，用来摆放装饰性的内容。

<style>
    div {
            background-color:hotpink;
            width: 200px;
            height: 200px;
            /* 内边距 */
            padding: 50px 50px 50px 50px;
            /* 边框线 solid直线 dashed虚线 dotted点线 */
            border-top:5px dotted rebeccapurple;
            border-bottom: 5px solid greenyellow;
            border-left: 5px dashed blue;
            border-right: 5px dashed hsl(14, 76%, 48%);
            /* 外边距 */
            margin: 0 auto;
            /* 圆角效果 */
            border-radius: 100px;
            /* 阴影 */
            box-shadow: chartreuse;
        }
        div::after {
            content: "后";
        }
        /* 必须设置content属性 */
        div::before {
            content: "前";
        }
</style>

2、盒子模型

作用：布局网页，摆放盒子和内容

组成：内容区域：width&height

内边距：padding

边框线：border

外边距：margin

版心居中：

div {
    margin：0 auto;
    }

清除默认样式：

<style>
    * {
        margin:0;
        padding:0;
       }
</style>

元素溢出：

属性名：verflow

圆角：

属性名：border-radius

PS：正圆形状：给正方形盒子设置圆角属性值为宽高的一半/50%。

胶囊形状：给长方形盒子设置圆角属性职位盒子高度的一半

盒子阴影：

属性名：box-shadow

六、Flex布局

1、标准流

标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行。

2、浮动

基本使用：让块元素水平排列，属性名：float

属性值：left：左对齐，right：右对齐；

特点：

浮动后的盒子顶对齐；

浮动后的盒子具备行内块的特点；

浮动后的盒子脱标，不占用标准流的位置。

清除浮动：

浮动元素会脱标，如果父级没有高度，子级无法撑开父级的高度，可能导致页面布局错乱。

额外标签法：

在父元素内容的最后加一个块级元素，设置CSS属性clear：both

单伪元素法：

1、准备after伪元素

2、父级使用clearfix类。

overflow法：

3、Flex布局

Flex布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。Flex模型不会产生浮动布局中的脱标现象，布局网页更简单灵活。

组成：

设置方式：给父元素设置display：flex，子元素可以自动挤压或拉伸。

组成部分：弹性容器、弹性盒子、主轴（默认在水平方向）、侧轴。

主轴对齐方式：

属性名：justify-content

侧轴对齐方式：

align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）

align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

修改主轴方向：

属性名：flex-direction

弹性盒子换行：

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子在一行显示。

属性名：flex-wrap

属性值：wrap：换行，nowrap：不换行

行内对齐方式：

属性名：align-content

案例：德莱厄斯技能展示界面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>郭鑫宇皮干的解决方案</title>
    <style>
        /* 给父元素设置display；flex，子元素可以自动拉伸或压缩 */
        /* 组成部分：弹性盒子、弹性容器、主轴（默认横轴）、侧轴 */
        /* 案例 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        li {
            list-style: none;
        }
        .box {
            margin: 50px auto;
            width: 1200px;
            height: 418px;
            border: 3px solid #ddd;
            border-radius: 10px;
        }
        .box ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
            padding: 90px 40px 90px 60px;
            height: 418px;
        }
        .box li {
            width: 500px;
            height: 83px;
            background-color: pink;
            display: flex;
        }
        .box .pic img{
            margin-right: 15px;
            width: 65px ;
            height: 65px;
            display: flex;
            margin: 5px auto;
        }
        .box .text h4 {
            line-height: 40px;
            font-size: 20px;
            font-weight: 400;
            color: #333;
        }
        .box .text p {
            font-size: 14px;
            color: #666;
        }
    </style>
</head>
<body>
    <!-- 标准流：标签在页面的默认布局 -->
    <!-- 浮动：让块级元素在一行显示 -->
    <!-- Flex布局 弹性布局 适合结构化布局-->
    <!-- 案例 -->
    <div class="box">
        <ul>
            <li>
                <div class="pic">
                    <img src="q.png" alt="">
                </div>
                <div class="text">
                    <h4>大杀四方</h4>
                    <p>在短暂的延迟后，环绕自身挥舞斧头，打击敌人。</p>
                </div>
            </li>
            <li>
                <div class="pic">
                    <img src="w.png" alt="">
                </div>
                <div class="text">
                    <h4>致残打击</h4>
                    <p>下次普攻造成40/45/50/55/60%总攻击力的额外物理伤害，并使敌人减速90%，持续1秒。</p>
                </div>
            </li>
            <li>
                <div class="pic">
                    <img src="e.png" alt="">
                </div>
                <div class="text">
                    <h4>无情铁手</h4>
                    <p>将敌人拉到面前，并使其减速40%，持续1秒。</p>
                </div>
            </li>
            <li>
                <div class="pic">
                    <img src="r.png" alt="">
                </div>
                <div class="text">
                    <h4>诺克萨斯断头台</h4>
                    <p>跃向敌人并进行致命打击，造成125/250/375 (+75%额外攻击力)点真实伤害。 </p>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>