HTML最全笔记（第一弹）

1.audio:音频

HTML <audio> 元素用于在文档中嵌入音频内容。 <audio> 元素可以包含一个或多个音频资源， 这些音频资源可以使用 src 属性或者`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/source) 元素来进行描述：浏览器将会选择最合适的一个来使用。也可以使用 [MediaStream` 将这个元素用于流式媒体

2.progress：进度指示元素

HTML中的<progress>元素用来显示一项任务的完成进度.虽然规范中没有规定该元素具体如何显示,浏览器开发商可以自己决定,但通常情况下,该元素都显示为一个进度条形式.

3.p :段落标签 块状标签

独占一行

4..Img：

插入图片

alt 即当图片无法加载时，alt就给出提示信息

<img> 作为内部标签，并不会为自己争取新的一行。

（<p> </p>)作为块状标签，会为自己争取新的一行

5.strong

加粗 内部标签

6.span:

内部标签

7.a :

<a href="#">

用于链接

<a href=" " target=" ">

_self 在该页面打开链接

_blank 在新页面打开链接

8.h1-h6

独占一行

标题标签

​

~

​

9.ul

li为块元素

无序列表

​

​

10.ol

有序列表

​

​

11.表单标签

::placeholder {

color: #aaaaaa;

font-size: 19px;

font-weight: normal;

}

单行输入

<input type="text">

// input 作为行内元素，它的对齐方式受到父元素的字体大小影响，设置font-size:0可以解除影响

label 标签

<input id="male" type="radio" name="gender" value="male" />
<label for="male">男</label>
<input id="female" type="radio" name="gender" value="female" />
<label for="female">女</label>

​​

1. action：一个处理此表单信息的程序所在的 URL，所述表格信息将在表单提交时被发送到定义的地址；

2. method：它的值可以是 GET 或 POST，用来规定如何发送表单信息;

<!-- <form>是块状标签，要注意：<form>标签不能嵌套<form>标签 -->
<form action="">
  <!-- 这里会有一些表单控件 -->
</form>

12.表单输入

多行输入

<!-- name属性表示表单元素的名称，placeholder属性表示表单元素的占位文本 -->

​

​

rows:行数（高度）

cols:宽度

13.单(多)选框

单选框 type="radio"

多选框 type="checkbox"

14.选项菜单

​

​

<select name="career">
  <option value="default">请选择职业</option>
  <option value="staff">公司职员</option>
  <option value="freelancer">自由职业者</option>
  <option value="student">学生</option>
  <option value="other">其他</option>
</select>

15.字体大小(颜色)(粗细)(文字对齐方式)(文字行高)(字间距)(字体)

style=" "

大小 font-size:33px

颜色 "color: # "

粗细 font-weight:400

文字对齐方式 text-align:center

文字行高 line-height:32px

字间距 letter-spacing:32px

字体 font-family:'GGGGG' , sans-serif , 'hhhhh';

字体写法有一些注意事项：

• 多个字体之间用英文逗号（,）隔开

• 字体名称中间有空格的时候，要加引号。单引号和双引号都行："Times News Roman"

• 中文字体名称要用空格："宋体"

16.link

建立html 和css的联系，

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

17.相对路径

用相对路径引入文件记住三点：

• 找到引用资源的文件所在位置，以引用资源的文件为基准，寻找资源

• ../返回一层，如果有多层，就用多个../，比如返回两层就用../../

• 文件夹名代表进入该文件夹，例如css/，表示进入css文件夹，比如从test文件夹里出来进入css文件夹找到index.css文件，可以这样写../css/index.css

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

18.层叠性

在头部文件的<style>中的标签，会逐层改变，就是先定义什么，后又把它定义为别的。

1. 添加新的效果（如果添加的是一个新属性）

2. 改变之前已经存在的效果（如果该属性之前就存在）

19.类选择器

定义

<p class="article">
  class是定义类的关键字，article是类名，类名可以任意，但是要符合规范
</p>

class 是定义类的关键字，article 是类名，类名可以任意，但是要符合规范

使用

.article {
  color: red;
  font-size: 14px;
}

如果是内部样式，上面的代码就要写在<style></style>标签之间，如果是外部样式，直接写在.css文件中即可。

类选择器的作用就是在普通中寻找特别

一个标签可以添加多个类名

<p class="common color font-size">
  common设置通用样式，color设置特殊颜色，font-size设置特殊字体大小
</p>

20.id选择器

在标签中定义 id

<p id="p-item">这是一段文字</p>

使用 id 选择器

#p-item {
  font-size: 24px;
  font-weight: 400;
}

1.id 选择器在文档中只会出现一次

2.不能像类选择器一样，一个标签上定义多个 id 名