html自学笔记

html

01html基础语法

01-标题标签

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

1. h1 标签在一个网页中只能用一次，用来放新闻标题或网页的 logo
2. h2 ~ h6 没有使用次数的限制

02-段落标签

<p>段落</p>

• 独占一行
• 段落之间存在间隙

03-换行和水平线

• 换行：br
• 水平线：hr

<br>
<hr>

04、文本格式化标签

05、图像属性

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

6、超链接标签

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

超链接默认是在当前窗口跳转页面，添加 target=“_blank” 实现新窗口打开页面。

<a href="./01-标签的写法.html" target="_blank">跳转到01-标签的写法</a>

7、音频

<audio src="音频的 URL"></audio>

常用属性

<audio src="./media/music.mp3" controls loop autoplay></audio>

8、视频

<video src="./media/vue.mp4" controls loop muted autoplay></video>

02列表 、表格、表单

01-列表

无序列表
作用：布局排列整齐的不需要规定顺序的区域。
标签：ul 嵌套 li，ul 是无序列表，li 是列表条目。

 <ul>
    <li>列表条目1</li>
    <li>列表条目2</li>
    <li>列表条目3</li>
  </ul>

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

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

  <ol>
    <li>buzhou 1</li>
    <li>buzhou 1</li>
    <li>buzhou 1</li>
  </ol>

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

  <dl>
    <dt>服务中心</dt>
    <dd>申请售后</dd>
    <dd>售后政策</dd>
  </dl>

02-表格

table 嵌套 tr，tr 嵌套 td / th。

提示：在网页中，表格默认没有边框线，使用 border 属性可以为表格添加边框线。

<table border="1">
  <tr>
    <th>姓名</th>
    <th>语文</th>
    <th>数学</th>
    <th>总分</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>99</td>
    <td>100</td>
    <td>199</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>98</td>
    <td>100</td>
    <td>198</td>
  </tr>
  <tr>
    <td>总结</td>
    <td>全市第一</td>
    <td>全市第一</td>
    <td>全市第一</td>
  </tr>
</table>

表格结构标签-了解

作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰。

合并单元格

作用：将多个单元格合并成一个单元格，以合并同类信息。

合并单元格的步骤：

1. 明确合并的目标
2. 保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
   • 跨行合并，保留最上单元格，添加属性 rowspan
   • 跨列合并，保留最左单元格，添加属性 colspan
3. 删除其他单元格

<table border="1">
  <thead>
    <tr>
      <th>姓名</th>
      <th>语文</th>
      <th>数学</th>
      <th>总分</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>99</td>
      <td rowspan="2">100</td>
      <td>199</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>98</td>
      <!-- <td>100</td> -->
      <td>198</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>总结</td>
      <td colspan="3">全市第一</td>
      <!-- <td>全市第一</td>
      <td>全市第一</td> -->
    </tr>
  </tfoot>
</table>

03-表单

input 标签

<input type="..." >

input 标签占位文本
占位文本：提示信息，文本框和密码框都可以使用。

<input type="..." placeholder="提示信息">

单选框

<input type="radio" name="gender" checked> 男
<input type="radio" name="gender"> 女

上传文件

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

<input type="checkbox" checked> 选择器

下拉菜单

<select>
  <option>北京</option>
  <option>上海</option>
  <option>广州</option>
  <option>深圳</option>
  <option selected>武汉</option>
</select>

文本域
作用：多行输入文本的表单控件。

<textarea>默认提示文字</textarea>

label标签
经验：用 label 标签绑定文字和表单控件的关系，增大表单控件的点击范围。

写法一

• label 标签只包裹内容，不包裹表单控件
• 设置 label 标签的 for 属性值 和表单控件的 id 属性值相同

<input type="radio" id="man">
<label for="man">男</label>

写法二：使用 label 标签包裹文字和表单控件，不需要属性

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

按钮

<button type="">按钮</button>

<!-- form 表单区域 -->
<!-- action="" 发送数据的地址 -->
<form action="">
  用户名：<input type="text">
  <br><br>
  密码：<input type="password">
  <br><br>

  <!-- 如果省略 type 属性，功能是 提交 -->
  <button type="submit">提交</button>
  <button type="reset">重置</button>
  <button type="button">普通按钮</button>
</form>

语义化
作用：布局网页（划分网页区域，摆放内容）

• div：独占一行

<div>div 标签，独占一行</div>
<span>span 标签，不换行</span>

03css样式

字体大小

p {
  font-size: 16px;
}

字体样式（是否倾斜）

属性名：font-style

属性值

• 正常（不倾斜）：normal
• 倾斜：italic

行高

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

属性名：line-height

属性值

• 数字 + px
• 数字（当前标签font-size属性值的倍数）

line-height: 30px;


/* 当前标签字体大小为16px */
line-height: 2;

单行文字垂直居中

垂直居中技巧：行高属性值等于盒子高度属性值

注意：该技巧适用于单行文字垂直居中效果

div {
  height: 100px;
  background-color: skyblue;

  /* 注意：只能是单行文字垂直居中 */
  line-height: 100px;
}

font复合属性

font: 是否倾斜 是否加粗 字号/行高 字体（必须按顺序书写）

div {
  font: italic 700 30px/2 楷体;
}

文本缩进

属性名：text-indent

属性值：

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

p {
  text-indent: 2em;
}

文本对齐方式

作用：控制内容水平对齐方式

属性名：text-align

text-align: center / left /right;

04背景图

网页中，使用背景图实现装饰性的图片效果。

• 属性名：background-image（bgi）
• 属性值：url(背景图 URL)
  平铺方式
  属性名：background-repeat（bgr）
  

div {
  width: 400px;
  height: 400px;
  background-color: pink;
  background-image: url(./images/1.png);

  background-repeat: no-repeat;
}

背景图位置

属性名：background-position（bgp）

属性值：水平方向位置 垂直方向位置

• 关键字
  

div {
  width: 400px;
  height: 400px;
  background-color: pink;
  background-image: url(./images/1.png);
  background-repeat: no-repeat;

  background-position: center bottom;
  background-position: 50px -100px;
  background-position: 50px center;
}

背景图缩放

作用：设置背景图大小

属性名：background-size（bgz）

常用属性值：

• 关键字
  • cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
  • contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白
• 百分比：根据盒子尺寸计算图片大小
• 数字 + 单位（例如：px）

div {
  width: 500px;
  height: 400px;
  background-color: pink;
  background-image: url(./images/1.png);
  background-repeat: no-repeat;
  
  background-size: cover;
  background-size: contain;
}

背景图固定

作用：背景不会随着元素的内容滚动。

属性名：background-attachment（bga）

属性值：fixed

body {
  background-image: url(./images/bg.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

显示模式

05盒子模型

单方向边框线

属性名：border-方位名词（bd+方位名词首字母，例如，bdl）

属性值：边框线粗细 线条样式 颜色（不区分顺序）

div {
  border-top: 2px solid red;
  //实先
  border-right: 3px dashed green;
  //虚线
  border-bottom: 4px dotted blue;
  //点西安
  border-left: 5px solid orange;
  width: 200px;
  height: 200px;
  background-color: pink;
}

内边距

作用：设置 内容 与 盒子边缘 之间的距离。

• 属性名：padding / padding-方位名词

div {
  /* 四个方向 内边距相同 */
  padding: 30px;
  /* 单独设置一个方向内边距 */
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 40px;
  padding-left: 80px;
  width: 200px;
  height: 200px;
  background-color: pink;
}

元素溢出

作用：控制溢出元素的内容的显示方式。

属性名：overflow

盒子阴影（拓展）

作用：给元素设置阴影效果

属性名：box-shadow

属性值：X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色 内外阴影

注意：

• X 轴偏移量 和 Y 轴偏移量 必须书写
• 默认是外阴影，内阴影需要添加 inset

div {
  width: 200px;
  height: 80px;
  background-color: orange;
  box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.5) inset;
}

06Flex布局

浮动

基本使用

作用：让块元素水平排列。

属性名：float

属性值

• left：左对齐
• right：右对齐

 float: left;

清除浮动

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

解决方法：清除浮动（清除浮动带来的影响）
场景搭建

<style>
  .top {
    margin: 10px auto;
    width: 1200px;
    /* height: 300px; */
    background-color: pink;
  }

  .left {
    float: left;
    width: 200px;
    height: 300px;
    background-color: skyblue;
  }

  .right {
    float: right;
    width: 950px;
    height: 300px;
    background-color: orange;
  }

  .bottom {
    height: 100px;
    background-color: brown;
  }

</style>

<div class="top">
  <div class="left"></div>
  <div class="right"></div>
</div>
<div class="bottom"></div>

额外标签法

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

<style>
.clearfix {
  clear: both;
}
</style>

<div class="father">
  <div class="left"></div>
  <div class="right"></div>
  <div class="clearfix"></div>
</div>

单伪元素法

1. 准备 after 伪元素

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

2. 父级使用 clearfix 类

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

双伪元素法

1. 准备 after 和 before 伪元素

/* before 解决外边距塌陷问题 */
/* 双伪元素法 */
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

/* after 清除浮动 */
.clearfix::after {
  clear: both;
}

2、父级使用 clearfix 类

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

overflow法

.father {
  margin: 10px auto;
  width: 1200px;
  /* height: 300px; */
  background-color: pink;

  overflow: hidden;
}

Flex组成

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

• 弹性容器
• 弹性盒子
• 主轴：默认在水平方向
• 侧轴 / 交叉轴：默认在垂直方向

主轴对齐方式

属性名：justify-content

侧轴对齐方式

• align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
• align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

修改主轴方向

主轴默认在水平方向，侧轴默认在垂直方向

属性名：flex-direction

弹性盒子换行

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

属性名：flex-wrap

属性值

• wrap：换行
• nowrap：不换行（默认）

行内对齐方式

属性名：align-content

08定位

定位

作用：灵活的改变盒子在网页中的位置

实现：

1.定位模式：position

2.边偏移：设置盒子的位置

• left
• right
• top
• bottom

相对定位

position: relative

特点：

• 不脱标，占用自己原来位置
• 显示模式特点保持不变
• 设置边偏移则相对自己原来位置移动
• `在这里插入代码片

div {
  position: relative;
  top: 100px;
  left: 200px;
}	

绝对定位

position: absolute

使用场景：子级绝对定位，父级相对定位（子绝父相）

特点：

• 脱标，不占位
• 显示模式具备行内块特点
• 设置边偏移则相对最近的已经定位的祖先元素改变位置
• 如果祖先元素都未定位，则相对浏览器可视区改变位置

.father {
  position: relative;
}

.father span {
  position: absolute;
  top: 0;
  right: 0;
}


//  /* 方便： 50% 就是自己宽高的一半 */
  transform: translate(-50%, -50%);

固定定位

position: fixed

场景：元素的位置在网页滚动时不会改变

特点：

• 脱标，不占位
• 显示模式具备行内块特点
• 设置边偏移相对浏览器窗口改变位置

div {
  position: fixed;
  top: 0;
  right: 0;

  width: 500px;
}

CSS修饰属性

属性名：vertical-align

过渡

img {
  width: 200px;
  height: 200px;
  transition: all 1s;
}

img:hover {
  width: 500px;
  height: 500px;
}

光标类型cursor

作用：鼠标悬停在元素上时指针显示样式

属性名：cursor