HTML

前端基础

发布日期: 2020-07-15

更新日期: 2021-07-05

文章字数: 1.9k

阅读时长: 7 分

# 概览

HTML 的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的 Internet 资源连接为一个逻辑整体。HTML 文本是由 HTML 命令组成的描述性文本，HTML 命令可以说明文字，图形、动画、声音、表格、链接等。

# HTML 标签

# 效果及注意点

<p>: 段落文字，忽略连续多个空格，不显示空行且不换行
块元素不能放在<p>里面

<pre>:预留格式,一般和 <code>混用

超链接 href是链接地址,_blank是新页面跳转
<a href="" target="_blank">文字或图片</a>
# 虚拟超链接(不会刷新页面会跳转到到页面顶部，不加#会重新刷新页面)
a:link 普通的，未被访问的链接
a:visited 已访问过的链接
a:hover 鼠标在连接上悬停
a:active 链接被点击的时刻

<img src="路径" alt="图片替换文字" title="标题(提示文字)">

<sub>下角标
<sup>上角标
<del>打折 在原价上有一道横线
<ins>500元 500元下边有一道横线

<table>表格
<tr>行
<td>列(表示n个单元格)
<th>表头(会加粗显示)
<table border="1" cellspacing=0(单元格空隙)>

表单
<form action="提交的URL地址" method="get/post">
大量表单一般使用post 地址，链接，变量值一般使用get
get:通过地址传输，信息会在地址中显示，不安全，有长度限制(受限于URL长度)
post:通过报文传输(通过浏览器内部传输)，信息不会在地址中显示，安全，没有长度限制
元素包括：文本框，按钮，单/复选框，下拉列表，文本域

<input type="text/password/submit/reset/radio/checkbox">
radio:单选框 name属性必须相同
checkbox:复选框 name属性可以不同
默认选择要将checked属性设为checked
不可改(灰)disabled属性

select:下拉列表框
option:下拉列表项 默认选择要将selected属性设为selected

submit:提交按钮 用value属性改文本文字

文本框中可以用 text-indent 来控制 placeholder 的位置，
也可以用padding来控制placeholder或其他的位置，然后在width中减去相对应的值

# 制作一个别样的 checkbox (复选框)

<label for="my-check">
 <!-- 当label内的for和input的id相同的时候点击label就相当于点击了input -->
  <input type="checkbox" id="my-check" />
  <span class='text'>
</label>

#my-check {
  display: none;
}
.text {
  width: 40px;
  height: 40px;
  display: block;
  border: 1px solid #ccc;
}
/* 选中的input后面的text */
#my-check:checked + .text {
  background-color: red;
}

# 视频播放器

<video
  poster="./jingdong02.jpg.webp"
  width="200"
  height="400"
  src="./1.mp4"
  controls
  autoplay
  muted
  loop
></video>
controls 显示控件 autoplay 自动播放(谷歌浏览器要求静音时才可以自动播放)
muted静音 poster 封面 loop 循环播放

# 音频

<audio src="./music/Alan Walker - Faded.mp3" controls muted loop></audio>
<audio src="./music/Alan Walker - Faded.mp3" autoplay></audio>
背景音乐自动播放,但是有些浏览器不支持，比如谷歌

# 行内元素 & 块级元素

# 粗通皮毛

行内元素有：
a, span, label, strong, em, img, input, select, textarea
块级元素：
div, h1~h6, p, form, ul, li, ol, table

# 驾轻就熟

1. 块级元素会独占一行，其宽度自动填满其父元素宽度
行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化
2. 块级元素可以设置 width, height 属性，【注意：块级元素即使设置了宽度，仍然是独占一行的】
行内元素设置 width, height 无效；
3. 块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
4. 行内元素与块级元素属性的不同，主要是盒模型属性上
块级元素可以设置 margin 和 padding.
行内元素设置 width 无效，height 无效 (可以设置 line-height)，margin 上下无效，padding 上下无效（水平方向有效，竖直方向无效）
```
display:inline
/* 行内元素/内联元素 */
display:block
/* 块级元素 */
display:inline-block
/* 设置成行内块级元素。 */
```
5. 行内块级元素：和其他元素同一行（行内元素特点），可以设置元素的宽高等（块级元素特点）；这样的元素有 img input；它们为行内元素，但可以改变宽和高；

# 融会贯通

# 行内元素属性
- 行内元素属性标签它和其它标签处在同一行内
- 行内元素属性标签无法设置宽度，高度行高距顶部距离距底部距离
- 行内元素属性标签的宽度是直接由内部的文字或者图片等内容撑开的
- 行内元素属性标签内部不能嵌套行属性标签（a 链接内不能嵌套其他链接）
# 块级元素属性
- 每一个块级元素属性标签都是从新的一行开始，而且之后的元素也都会从新的一行开始（因为每一个块属性标签都会直接占据一整行的内容，导致下面的内容也只能从新的一行开始）
- 块级元素属性标签都是可以设置宽度、高度，行高，距顶部距离，距底部距离
- 块级元素属性标签的宽度假如不做设置，会直接默认为父元素宽度的 100%
- 块级元素属性标签是可以直接嵌套的
- p 标签中不能嵌套 div 标签

# 出类拔萃

# CSS 设置行内元素的

水平居中

div {
  text-align: center;
} /*DIV内的行内元素均会水平居中*/

垂直居中

div {
  height: 30px;
  line-height: 30px;
} /*DIV内的行内元素均会垂直居中*/

# CSS 设置块级元素的

水平居中

div p {
  margin: 0 auto;
  width: 500px;
} /*块级元素p一定要设置宽度， 才能相当于DIV父容器水平居中*/

垂直居中

div {
  width: 500px;
} /*DIV父容器设置宽度*/

div p {
  margin: 0 auto;
  height: 30px;
  line-height: 30px;
} /*块级元素p也可以加个宽度， 以达到相对于DIV父容器的水平居中效果*/

# 返璞归真

在标准文档流里面，块级元素具有以下特点：

总是在新行上开始，占据一整行；
高度，行高以及外边距和内边距都可控制；
宽度始终是与父元素宽度一样，与内容无关；
它可以容纳内联元素和其他块元素。

行内元素的特点：

和其他元素都在一行上；
高，行高及外边距和内边距部分可改变；
宽度只与内容有关；
行内元素只能容纳文本或者其他行内元素。
不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用，也可以设置内边界，但是内边界在 ie6 中不对上下起作用，只能对左右起作用

本文节选自：https://www.cnblogs.com/yc8930143/p/7237456.html

Mrr-cxh

https://mrr-cxh.github.io/2020/07/15/html/