网页设计课堂笔记

<html>网页中所有内容都在这对标签之中
   <head>网页的标题以及部分属性信息会放在这里</head>
   <title>网页的标题</title>
   <style>部分属性词条</style>
   <body>网页主题内容</body>
   
   <h1>一级标题</h1>
   <h2>二级标题</h2>
   ……
   <h6>六级标题</h6>
   
   <p>段落标签</p>
   换行标记<br>
</html>
   
   <!-- 注释，ctrl+/ 快速注释 -->

跳转标签

a标签的格式是这样的：

<a href="跳转地址">跳转连接</a>

跳转地址的方式有三种

1. 绝对路径：从根目录开始，一层一层的寻找。
D:\ProgrammingLanguage\Web\HTML_Run\3-1(3-4)\html\3-4-1.html
2. 相对路径：从当前文件所在的文件夹开始，向下或者向上寻找。
如果在本层或者向下寻找，接续本文件夹直接续写即可：html/3-4-1.html
如果需要返回上一层，每返回一层添加一个`../`：../3-4.html
3. IP路径：会随IP改变而变化，故不唯一。
<http://127.0.0.1:8555/HTML_Run/2-27(1-2)/1-2.html>

属性

一般的文本等需要更改：颜色color 字号font-size
字体font-family 字重font-weight 斜体fent-style

我们通过`CSS`代码改变这些属性，改变这些属性的方法有三种：

1. 添加CSS方法1：内联式/行内式

<p style="color: orange;">行内式</p>

2. 添加CSS方法2：内嵌式，嵌入在head标签中，标定一类标签下文本的属性

1. 元素选择器`(类型、标签、选择器)`，根据标签选择设置属性

     h1{
         color: skyblue;
      }

该例所示为将`h1`标签下文本改为`天蓝色`。
之后h1标签无需任何标识都自动为天蓝色。

2. 类选择器——可多个叠加

命名规则：".类名{ }"

 ```css
      /* style标签内 */
      /* CSS注释 */
      /* CSS代码区域，与html区不同 */
      .orange{
         color: orange;
      }
      .font24{
         font-size: 24px;
      }

      ```

类选择器的使用：

``html
      <h2 class="orange font24">橙色，字号24px</h2>

      ```

3. ID选择器——每个ID与该选择器一一对应

命名规则："#ID名{ }"

    ```css
      #h3id{
          color: orangered;
      }
      ```

ID选择器的使用：

 ```html
      <h3 id="h3id">橙红色</h3>
      ```

3. 添加CSS方法3：链入式

需要创建`.css`文件

``css
   /* 该文件中只能是CSS代码 */
   .red{
   	color: red;
   }
   .blue{
   	color: blue;
   }
   .font24{
   	font-size: 24px;
   }
   #pid{
   	color: blue;
   }
   ```

使用方法和第二类相同，但需要在head标签内添加一个link标签到该css文件。


   ```html
   <head>
   	……
       <link rel="stylesheet" href="3-4.css" />
   </head>
   <body>
       <!-- 可以想第二种一样直接调用 -->
       <h1 class="red">红色</h1>
   	<p id="pid">蓝色</p>
   </body>
   ```

属性补充

优先级:ID>类>标签，越特殊的选择器优先级更高。

颜色的三种表示法：

 ```css

    <p>{
        /* 1.预定义词 */
      color: skyblue
      /* 2.rgb (255最大) */
        color: rgb(255,150,190)
      /* 3.16进制写法 (每两位对应rgb中一个数) */
        color: #55ff00
    }

    ```

字重的两种表示法：

 ```css
    <p>{
        /* 1.预定义词：bold/bolder/normal/lighter */
        font-weight: bold;
        /* 2.100-900的整百数，默认值 normal 400 */
        font-weight: 900;
    }

    ```

字体设置

电脑预定义了很多字体都可以使用。

 ```css
    <p>{
        font-family: '仿宋';
    }

    ```

斜体设置

```css
    <p>{
        /* oblique/italic 都表示字体倾斜 */
        font-style: italic;
    }

    ```

盒模型

在html文件中使用盒模型的方法如下

<head>
	<link rel="stylesheet" href="7-8.css"/>
</head>
<body>
	<!-- 盒模型 -->
	<!-- div标签——特殊的自定义标签 -->
	<div class="box">开盒啦</div>
</body>

盒模型中的文字信息均在<div>标签内。
可以使用F12打开网页开发人员工具
需要设置在`.css`文件中，其格式：.box{ }
盒的内部由内到外依次为padding border margin

/* .css文件中编辑盒模型的属性 */
.box{
    /* 盒的宽度 */
    width: 200px;
    /* 盒的高度 */
	height: 200px;
    /* 盒的背景颜色 */
	background-color: lightskyblue;
    
/* 1.padding：边框属性 */
	/* 四边 */
	padding: 10px;
	/* 上下 左右 */
	padding: 10px 20px;
	/* 上 左右  下 */
	padding: 10px 20px 30px;
	/* 上 右 下 左 */
	padding: 10px 20px 30px 40px;
    
    /* 单独设置 */
	padding-top: 11px;
	padding-right: 12px;
	padding-bottom: 13px;
	padding-left: 14px;
    
/* 2.border：边线属性 */
	/* 整体写 宽度 线形 颜色 */
	border: 10px solid red;
	
	/* 分开写1 */
	border-width: 10px;
	border-style: solid;
	/* 实线solid 虚线dashed	点线dotted	双线double	无线none */
	border-color: orange;
	
	/* 分开写2 */
	border-top: 10px solid red;
	border-left: 10px solid blue;
	border-bottom: 10px solid olivedrab;
	border-right: 10px solid fuchsia;
	
	/* 分开写3——1+3并用 */
	border-top-width: 11px;
	border-right-color: purple;
	
	/* 设置边框无格式 */
	border-bottom: none;

/*3.margin：边缘属性——当前这个东西距离页面边缘边多远 */
	margin-left: 100px;
	/* 相反方向顶格 */
	margin-left: auto;
	/* margin-right 和 margin-bottom 一般没啥用 */
	/* 上边距离0,左右居中 */
	margin: 0 auto;
}

背景

1.通用选择器

选择全部标签，优先级很低，一般用于消除白边

*{
	margin: 0;
	padding: 0;
}

2.背景颜色

优先级低于image

background-color: red;

渐变背景色

参数：方向（30deg 顺30度方向 to right/left 向左向右渐变）颜色1 颜色2

background-image: linear-gradient(-30deg,green,pink);

image控制，与插入图片url冲突（谁在下面生效谁）

控制元素背景显示区域

border-box padding-box默认值 content-box 超出对应部分会被裁剪 text 只会渲染text部分

background-clip:text ;

3.插入图片背景

background-image: url('1.png');

平铺

repeat平铺(用图片填充多余像素)
repeat-X repeat-Y no-repeat(不填充)

 background-repeat: repeat-x;

设置背景图片大小

cover：铺满整个容器，多余的部分会被裁掉
contain：至少有一张完整的图呈现出来，一定会有多余的空间

 background-size: contain;

4.固定视窗

.box{
    background-attachment: fixed;(#背景图片不会随着页面的滚动而滚动)
    background-attachment: scroll;(#背景图片随着页面的滚动而滚动，默认值)
    background-attachment: local;(#背景图片会随着元素的内容滚动而滚动)
}

透明色

 .box{
     color: transparent;(#将字体设置为透明)
     background-clip: text;(#以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉)
     text-align: center;(#让字的位置居中)
}

行内/块元素

<img src="1.png" alt="">
<!-- 元素类型 块元素black ele 行内元素inline ele -->

<!-- 块元素div p h1-h6 table ul ol li dl-- >
1. 每个元素具有宽高属性独占一行，相当于前后都带有换行符
2. 块级元素内可以嵌套行内元素和块级元素
<!-- 行内元素：img input a em span -->
1. 不独占一行
2. 行内元素内只能嵌套行内元素
3. 宽度只与内容有关
4. 行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。

在.css文件中可以设置图片的一些属性

```css
img{
	width: 1080px;
    height: 680px;
    /* 两个往往不同时使用，单个使用会按照比例缩放，一起使用会改变原图形状 */
}
```

浮动

浮动：设置元素浮动，可以让元素脱离文档流，从而不具有元素在文档流中特点

块元素不会独占一行，行内元素也可以设置宽高等等

设置元素浮动：float

可选值：none 默认值

left 向左浮动

right 向右浮动

设置元素浮动后的特点

1、元素脱离文档流，元素一旦脱离文档流，就不会占据原来在文档流中的位置，其下面的元素会立即跑上去
2、元素浮动之后，不会超过它前一个兄弟，最多一边齐
3、如果前一个兄弟没有浮动，下面浮动的元素，也不会跑到前面
4、设置元素浮动后，元素也是尽量的向左或者向右进行浮动
5、浮动元素不会超过其父元素的范围

块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开，

如果希望块元素在页面中水平排列，可以使块元素脱离文档流

使用float来使元素浮动，使一个元素向其父元素的左侧或右侧移动，从而脱离文档流


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    
    <style type="text/css">
      #box {
        width: 500px;
        height: 600px;
        background-color: #ccc;
        margin: 0 auto;
      }
      #box>div{
        width: 100px;
        height: 100px;
        background-color: red;
      }
      /* margin可以调整元素的位置 ，但大的位置调整最好不用，常用于小的位置间距调整*/
      #box>.box1{
        float: left;
      }
      #box>.box2{
        width: 150px;
        height: 150px;
        background-color: green;
        float: left;
      }
      #box>.box3{
        background-color: yellow;
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
    </div>
  </body>
</html>

布局常用样式属性

width 设置元素(标签)的宽度，如：width:100px;
height 设置元素(标签)的高度，如：height:200px;
background 设置元素背景色或者背景图片，如：background:gold; 设置元素的背景色, background: url(images/logo.png); 设置元素的背景图片。
border 设置元素四周的边框，如：border:1px solid black; 设置元素四周边框是1像素宽的黑色实线
以上也可以拆分成四个边的写法，分别设置四个边的：
border-top 设置顶边边框，如：border-top:10px solid red;
border-left 设置左边边框，如：border-left:10px solid blue;
border-right 设置右边边框，如：border-right:10px solid green;
border-bottom 设置底边边框，如：border-bottom:10px solid pink;
padding 设置元素包含的内容和元素边框的距离，也叫内边距，如padding:20px;padding是同时设置4个边的，也可以像border一样拆分成分别设置四个边:padding-top、padding-left、padding-right、padding-bottom。
margin 设置元素和外界的距离，也叫外边距，如margin:20px;margin是同时设置4个边的，也可以像border一样拆分成分别设置四个边:margin-top、margin-left、margin-right、margin-bottom。
float 设置元素浮动，浮动可以让块元素排列在一行，浮动分为左浮动：float:left; 右浮动：float:right;

文本常用样式属性

color 设置文字的颜色，如： color:red;
font-size 设置文字的大小，如：font-size:12px;
font-family 设置文字的字体，如：font-family:'微软雅黑';为了避免中文字不兼容，一般写成：font-family:'Microsoft Yahei';
font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
line-height 设置文字的行高，如：line-height:24px; 表示文字高度加上文字上下的间距是24px，也就是每一行占有的高度是24px
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px

伪类选择器

hover 选择器用于修改鼠标悬停时的元素效果

a:hover{
/* 鼠标悬停时应用 */
background-color: red;
color: wheat;
}

列表标签"< li >"

可以生成多级列表。

组合选择器和后代选择器

组合选择器和后代选择器都是用来寻找特定的标签，修改其对应的样式，往往是一组标签都适用的

情况。


<body>
<!-- 列表标记 -->
<ul>
<li>1
<ul>
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
<!-- li标签嵌套表示列表分级 -->
</ul>
</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>

组合选择器和后代选择器

组合选择器和后代选择器都是用来寻找特定的标签，修改其对应的样式，往往是一组标签都适用的

情况。

<body>
<div>
divwai
<h1>
divnei
<p>neirong</p>
</h1>
</div>
</body>

/* 组合选择器 */
/* 格式：选择器1[空格]选择器2 */
div p{
color: red;
}
/* 后代选择器（子代选择器） */
/* 格式：子代选择器1>选择器2 */
div>h1>p{
color: blue;
}

交集选择器

特殊的类选择器，优先级较高。

<a href="#" class="fa">推荐</a>

/* 交集选择器（限定版的类选择器） */
a.fa{
background-color: red;
color: white;
}

该例所展示的表示带有 fa 类的 a 标签可以无视其他的样式修改，强制变成背景红色，字体颜色白色。

表单标签"< form >"

<body>
<!-- 表单 -->
<form action="">
<!-- 输入文本 -->
<input type="text" /><br />
<!-- 输入密码 -->
<input type="password" /><br />
<!-- 单选选项 -->
<input type="radio" /><br />
<!-- 多选选项 -->
<input type="checkbox" /><br />
<!-- 提交按钮 -->
<input type="submit" />
</form>
</body>

<form action="">
<!-- 产生选项 -->
<select name="" id="">
<option value="">选项</option>
<option value="">1.1</option>
<option value="">1.2</option>
<option value="">1.3</option>
</select>
<!-- 生成一个文本框 -->
<textarea name="" id="" cols="30" rows="10">
文本框
</textarea>
</form>

表格

<table> 标签表示 HTML 中的表格，简单的 HTML 表格由 table 元素以及一个或多个 <tr> 列标签、

<th> 或 <td> 行标签元素组成表格结构；其中： <tr> 元素定义表格行， <th> 元素定义表头， <td>

元素定义表格单元。

<table>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<!-- 合并单元格效果（横向） -->
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<!-- <td>3.1</td> -->
<td>3.2</td>
<td>3.3</td>
案例二，知乎登录界面<4.16>
</tr>
<tr>
<!-- 合并单元格效果（纵向） -->
<td colspan="2">4.1</td>
<!-- <td>4.2</td> -->
<td>4.3</td>
</tr>
</table>

/* 设置表格边框 */
table{
border-collapse: collapse;
}
td{
border: 1px solid black;
}
/* 伪类 :nth-child 周期性改变表格内单元格的样式 */
/* even odd */
/* an+b a周期，b偏移量 n自增*/
table tr:nth-child(2n+1){
background-color: gray;
}

表单—input标签

<form action="#">
<!-- 点击 -->
<input type="button" value="Click" /><br />
<!-- 取色器 -->
<input type="color" /><br />
<!-- 选取日期 -->
<input type="date" /><br />
<!-- 选取年月 -->
<input type="month" /><br />
<!-- 选取周 -->
<input type="week" /><br />
<!-- 选取日期及时间 -->
<input type="datetime-local" /><br />
<!-- 电子邮件地址 -->
<input type="email" /><br />
<!-- 选择附件 -->
<input type="file" /><br />
<!-- 隐藏的标签-用于传输数据 -->
<input type="hidden" /><br />
<!-- 只填写数字 -->
<input type="number" /><br />
<!-- 进度条 -->
<input type="range" /><br />
<!-- 清除？ -->
<input type="reset" /><br />
<!-- 电话号码 -->
<input type="tel" /><br />
<!-- 提交按钮 -->
<input type="submit" /><br />
</form>
表单
<form action="">
<input type="text"><br>
<input type="password"><br>
<input type="radio"><br>
<!-- <input type="radio" name="sex">男
<input type="radio" name="sex">女
<br>-->
<input type="checkbox"><br>
<!-- <input type="checkbox">A
<input type="checkbox">B-->
<input type="sunmit">
</form>

<table>
<tr>
<td>1,1</td>
<td rowspan="2">2,2</td>
<td>3,3</td>
<!-- 一行三列 -->
</tr>
<tr>
<td colspan="2">4,4</td>
<!-- <td>5,5</td> -->
<td>6,6</td>
</tr>
<!-- 两行三列 -->
<!-- table>tr>td -->

圆角

.box{
border-radius: 50px;
/* 50px 50% */
}

flex布局

display: flex; 可以将元素改为 flex 布局。

.container{
/* container内变成flex布局 */
display: flex;
flex-direction: row;
/* row横向排布 row-reverse横向倒置排布
column纵向排布 column-reverse纵向倒置排布 */
}

flex布局下对齐方式

display: flex;
flex-direction: row;
/* row row-reverse column column-reverse */
flex-wrap: wrap;
/* wrap nowrap wrap-reverse */
/* 主轴方向上的对齐方式 */
justify-content: space-evenly;
/* flex-start flex-end center space-between space-around space-evenly */
align-items: center;
/* 默认值stretch flex-start flex-end center baseline */
align-content: space-between;
/* stretch flex-start flex-end center space-between space-around */

flex布局下元素排列优先级

<div class="container">
<div class="item bg-1"></div>
<div class="item bg-2"></div>
<div class="item bg-3"></div>
<div class="item bg-4"></div>
</div>

.item{
width: 30%;
height: 100px;
/* 默认：flex-grow: 1; */
}
.bg-1{
background-color: lightblue;
flex-grow: 2;
/* order: 1; */
/* 越大越靠后 */
flex-shrink: 5;
}

定位和变形

<div class="container">
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
</div>
1. 两端对齐
.container{
width: 300px;
height: 300px;
background-color: lightgray;
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.row{
width: 300px;
height: 100px;
/* background-color: lightblue; */
display: flex;
justify-content: space-between;
}
.col{
width: 100px;
height: 100px;
background-color: lightpink;
}
2. 变形
.box1{
width: 100px;
height: 100px;
background-color: lightblue;
/* 平移 */
transform: translate(100px,50px);
/* translate(水平位移,垂直位移) */
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: ease;
/* ease linear */
/* transition-delay: 1s; */
}
.box1:hover{
/* 动画效果 */
width: 300px;
transition-property: all;
/* 动画持续时间 */
transition-duration: 1s;
transition-timing-function: ease;
}
.box2{
width: 100px;
height: 100px;
background-color: lightcoral;
/* 放缩 */
transform: scale(2,1);
/* scale(宽度放缩倍数,高度放缩倍数); */
}
.box3{
width: 100px;
height: 100px;
background-color: lightpink;
/* 旋转变形 */
transform: skew(30deg,0);
/* skew(x轴度数,y轴度数) */
}
.box4{
width: 100px;
height: 100px;
background-color: yellow;
/* 旋转 */
transform: rotate(30deg);
/* rotate(旋转度数) */
}
3. 定位
.box1{
width: 100px;
height: 100px;
background-color: lightcoral;
/* 显示优先级 */
z-index: 1;
position: relative;
}
.box2{
定位补充<5.21>
拿起的阴影效果
width: 100px;
height: 100px;
background-color: lightgreen;
position: relative;
/* 1. relative 相对定位 以原位置为起点 原位置保留 */
/* top left right bottom */
top: 100px;
left: 50px;
}
.box3{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
/* 2. absolute 绝对定位 以左上角为起点 原位置丢失 */
top: 50px;
right: 50px;
}

.box1{
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
left: 50px;
top: 50px;
/* 一个元素使用的绝对定位，如果他的祖先元素中使用了非静态定位的定位方式，
那么该元素将在这个祖先元素中开始定位 */
}
.box2{
width: 500px;
height: 500px;
background-color: skyblue;
margin: 0 auto;
position: relative;
}

粘性定位

.box{
width: 100%;
height: 50px;
/* 粘性定位 */
position: fixed;
background-color: skyblue;
}

JS代码(javascript)

<body>
<!-- 两种使用js的方法 -->
<!-- 1.标签内写js代码 -->
<script>
// alert("hello world!")
</script>
<!-- 2.标签连接js文件，代码写在文件中 -->
<script src="./37-38-2.js"></script>
</body>

js 代码有独立的语言标准

// 弹窗输出提示
alert("hello world!")
// 变量
let str = "hello";
// 变量的数据类型由值决定
// 不能重复定义
str = "111"
// Number
// String
// Boolean
alert(typeof(str));

js获取元素

// alert输出p标签中的文字
// javascript就是为web而生
// ECMAScript + DOM + BOM
// DOM Document Object Model
// 节点 => DOM树
// 获取元素节点,通过id获取
let pid = document.getElementById("pid");
// 获取到p元素节点
// alert(pid);
// let type = pid.nodeType;
// alert(type);
// 元素节点 1
// let t = pid.firstChild;
// 获取当前元素节点对象的第一子节点
let t = pid.childNodes[0];
// childNodes获取当前节点的所有子节点 数组
// childNodes[0] = fistChild
// lastChild获取最后一个子节点
// alert(t);
let txt = t.nodeValue;
// nodeValue将获取文本节点的文本内容
// alert(txt);
let type = t.nodeType;
// alert(type)
// 文本类型节点 3
let h1id = document.getElementById("h1id");
let t2 = h1id.firstChild;
let txt2 = t2.nodeValue;
// alert(txt2)
let aid = document.getElementById("aid");
let t3 = aid.firstChild;
let txt3 = t3.nodeValue;
// alert(txt3)
console.log(txt3);
// 不通过选择id而获取元素的方法
const element = document.querySelector('h2');
const text = element.textContent;
alert(text)
const elements = document.querySelectorAll('.h2');
const texts = Array.from(elements).map(element => element.textContent);
alert(text)