前端三件套 HTML+CSS+JS基础知识内容笔记
Posted 明金同学
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端三件套 HTML+CSS+JS基础知识内容笔记相关的知识，希望对你有一定的参考价值。
文章目录
- HTML基础
- CSS基础语法
- 盒子模型
- 页面布局与规划
- JavaScript基础语法
- jQuery
- Vue.js
html基础
HTML5标签
doctype 标签
| HTML 版本 | doctype 声明 |
|---|---|
| HTML5 | <!doctype html> |
| XHTML1.0 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| HTML4.0 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
html标签
<html>
文件的全部内容
</html>
head标签
<html>
<head>文件头</head>
<body>文件主体</body>
</html>
meta标签
<html>
<head>
<meta charset="utf-8" />
</head>
<body>文件主体</body>
</html>
title标签
<html>
<head>
<meta charset="utf-8">
<title>窗体标题</title>
</head>
<body>文件主体</body>
</html>
body标签
<html>
<head>
<meta charset="utf-8">
<title>窗体标题</title>
</head>
<body>
body 标签里面的文本
<!--body 标签里面的文本 -->
</body>
</html>
文本和超链接标签
标题标签
<h1> 这是 h1 标签效果 </h1>
<h2> 这是 h2 标签效果 </h2>
<h3> 这是 h3 标签效果 </h3>
<h4> 这是 h4 标签效果 </h4>
<h5> 这是 h5 标签效果 </h5>
<h6> 这是 h6 标签效果 </h6>
段落标签
<p> 段落正文内容 </p>
换行标签
一行文本 <br> 另起一行
水平标签
<hr 属性 =" 属性值 ">
强调标签
<b> 要以粗体显示的文字 </b>
<strong> 要以粗体显示的文字 </strong>
图片标签与超链接标签
图片标签
<img src="路径" alt="提示信息" align="对齐方式" border="边框大小" width="宽度" height="高度"/>
| 属性 | 说明 | 默认值 |
|---|---|---|
| src | 图 片 地 址， 接 受 GIF、JPG 及 PNG 格式。若图片文件与该 html 文件处于同一目录，则只写文件名称，否则必须添加正确的相对路径或绝对路径 | left |
| width、height | 设定线条厚度。以像素作单位 | 2 |
| align | 设定线条长度。可以是绝对值（以像素为单位）或相对值 | 100% |
| alt | 设定线条颜色。#0000FF 代表蓝色，也可以采用颜色的名称，即 color=“blue” | 黑色 |
| noshade | 设定线条为平面显示，若取消此项则具有阴影或立体 | — |
超链接标签
<a 属性 ="属性值"> 链接显示文本 </a>
| 属性 | 说明 | 默认值 |
|---|---|---|
| href | 链接的目标 URL | — |
| target | 在何处打开目标 URL。仅在 href 属性存在时使用 | _self |
音频标签视频标签
音频标签
<audio width="640" height="360" src="music.mp3" controls="true">
您的浏览器不支持 audio 元素！
</ audio >
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果是 autoplay，则音频在就绪后马上播放 |
| controls | controls | 如果是 controls，则向用户显示控件，如播放按钮 |
| end | 数字值 | 定义播放器在音频流中的何处停止播放。默认声音会播放到结尾 |
| loopend | 数字值 | 定义在音频流中循环播放停止的位置，默认是end 属性的值 |
| loopstart | 数字值 | 定义在音频流中循环播放的开始位置。默认是start 属性的值 |
| playcount | 数字值 | 定义音频片断播放多少次，默认是 1 |
| src | url地址 | 所播放音频的 url地址 |
| start | 数字值 | 定义播放器在音频流中开始播放的位置。默认声音在开头进行播放 |
视频标签
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持 audio 元素！
</video>
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果是 autoplay，则视频在就绪后马上播放 |
| src | url地址 | 所播放视频的 url地址 |
| perload | none | metadata | auto | 用于指定视频或音频数据是否预加载：none（不进行预加载）、metadata（只预加载媒体的元数据）和 auto（预加载全部视频或音频） |
| loop | loop | 用于指定是否循环播放视频或音频 |
| poster | url地址 | 视频加载时显示的图像，或者在用户点击播放按钮前显示的图像 |
| controls | controls | 如果是 controls，则向用户显示控件，如播放按钮 |
| width | 数字值 | 用于指定视频的宽度 |
| height | 数字值 | 用于指定视频的高度 |
列表、div 以及 span 标签
列表标签
一、无序列表
<ul type="项目符号类，取值为 disc（默认值，实心圆）、circle（空心圆环）和 square（正方形）">
<li> 第 1 项 </li>
<li> 第 2 项 </li>
</ul>
二、有序列表
<ol type="序列类型" start="序号起始值">
<li> 第一项 </li>
<li> 第二项 </li>
</ol>
三、自定义列表
<dl>
<dt> 名词 1<dd> 解释 1
<dt> 名词 2<dd> 解释 2
<dt> 名词 3<dd> 解释 3
</dl>
div 标签
div标签没有特定的含义，只是作为组合其他 HTML 元素的容器，默认情况下，div标签将占满一行，当存在多个div标签时，将按照从上到下的方式排列。
<div>
其他标签或内容
</div>
span标签
span 标签也没有特定的含义，可作为文本的容器。span 标签与 div 标签不同，默认情况下，多个 span 标签可以存在于同一行，将按照从左到右的方式进行排列。
<span> 文本 </span>
表格标签
| 标签 | 描述 | |
|---|---|---|
| ……
| 表格标签 | |
| 行标签 | ||
| …… | 单元格标签 |
<table>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
<tr>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
<tr>
</table>
colspan 表示跨越的列数，rowspan 表示跨越的行数
<table>
<tr>
<td colspan=“所跨的列数”> 单元格内容 </td>
</tr>
</table>
其他相关标签
- 表格标题标签 *caption*，用于描述整个表格的标题。
- 表格表头 *th*，用于定义表格的表头，通常是表格的第一行数据，以粗体、居中的样式显示数据。
- 表格数据的分组标签 *thead*、*tbody* 和 *tfoot*，这 3 个标签通常配合使用，主要对表格数据进行逻辑分组。
表单标签
| 表单控件标签写法 | 说明 |
|---|---|
<input type="text"> | 单行文本输入框。使用的是 input 标签和 type 属性 |
<input type="submit"> | 将表单中的信息提交给表单中 action 属性所指向的地址 |
<input type="checkbox"> | 复选框 |
<input type="radio"> | 单选钮 |
<input type="password"> | 密码输入框（输入的文字用 * 表示） |
<select> | 下拉框 |
<textArea> | 多行文本输入框 |
<form name="表单名字" action="URL" method="get/post">
表单元素
</form>
get方式提交：使用 get 方式提交数据时，表单数据会附加在 URL 之后，由用户端直接发送至服务器，所以速度比 post 快，但缺点是数据长度不能太长。
post方式提交：使用 post 时，表单数据是与 URL 分开发送的，客户端的计算机会通知服务器来读取数据，所以通常没有数据长度上的限制，缺点是速度比 get 慢。
输入框
**文本框：**表单中最常用的输入元素就是文本框（text），它提供给用户输入的单行文本信息，如用户名的输入。文本框的用法很简单，只需将 input 标签的 type 属性设置为 text 即可。
<input name="表单元素名称" type="text" id="表单元素名称" value="值" />
| input标签属性 | 说明 |
|---|---|
| type | 指 定 表 单 元 素 的 类 型， 可 用 的 选 项 有 text、password、checkbox、radio、submit、reset、file、hidden、image 和button，默认为 text |
| name | 指定表单元素的名称 |
| value | 指定表单元素的初始值 |
| size | 指定表单元素的初始宽度。如果 type 为 text 或 password，则表单元素的大小以字符为单位；对于其他输入类型，宽度以像素为单位 |
| maxlength | 指定可在 text 或 password 元素中输入的最大字符串，默认无限制 |
| checked | 此属性只有一个值，为 checked，表示选中状态，如果不选中，则无须添加此属性 |
| readonly | 当文本框标签的 readonly 属性指定为 readonly 时，文本框中的值不允许更改 |
密码框： 密码框主要用于一些保密信息的输入，如密码。因为用户输入时，显示的不是输入的内容，而是“*”。
<input type="password" id="userPwd" name="userPwd" />
**多行文本域：**多行文本域用于显示或输入两行或两行以上的文本，它使用的标签是 textarea。
<textarea name="指定名称" cols="列数" rows="行数">
文本域的内容
</textarea>
单选按钮
<input type ="radio" name="名称" value ="值" checked="checked" />
复选框
<input type ="checkbox" name="名称" checked="checked" />
下拉框
<select name="指定列表的名称" size="行数">
<option value="可选择的值" selected="selected"> 显示项的内容 </option>
<option value="可选择的值"> 显示项的内容 </option>
</select>
表单验证
<input type="text" name="usr_name" required="required" />
required 属性可应用于大多数 input 标签上。在提交时，如果元素中的内容为空白，则不允许提交，同时在浏览器中显示信息提示文字，提示用户该元素中必须输入内容。
类型匹配验证
| type 属性 | 说明 |
|---|---|
| 在提交表单时，会自动验证值是否符合 e-mail 格式要求 | |
| url | 在提交表单时，会自动验证值是否符合 url 格式要求 |
| number | 在提交表单时，会自动验证值是否为数字，并可以配合 min、max 以及 step 属性进行数值的限定 |
| range | 在提交表单时，会自动验证值是否在指定的范围内的数字，使用配合 min、max 以及 step 属性进行数值的限定，显示为滑动条 |
| date | 用于选取年、月、日 |
控制字符数量
验证输入范围
自定义错误消息
CSS基础语法
样式表的分类
外部样式表
1、链接外部样式： 链接外部样式表是指通过HTML的link链接标签，建立样式文件和网页的关联。
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
2、导入样式表： 在网页中，还可以使用@import方法导入样式表。
<head>
<style type="text/css">
@import "css/style.css";
</style>
</head>
内嵌样式表
<head>
<style type=”text/css”>
选择符 样式属性：属性值;......
选择符 样式属性：属性值;......
</style>
</head>
行内样式表
<标签名 style="样式属性：属性值;" >......</标签名>
<p style="color:red; font-size:30px; font-family:黑体;">
CSS基本选择器
标签选择器
<style type="text/css">
标签名
属性1：属性值1;
属性2：属性值2;
</style>
类选择器
1、定义类样式
<style type="text/css">
.类名
属性1：属性值1;
</style>
2、应用类样式
<标签名 class="类名"> 标签内容 </标签名>
ID选择器
<style type="text/css">
#ID标识名
属性1：属性值1;
属性2：属性值2;
</style>
CSS 扩展选择器
组合选择器
p,.red,#header
color:red;
font-size:12px;
包含选择器（后代选择器）
#header ul li a
color:red;
font-size:12px;
交集选择器
p.red
color: red;
font-size: 以上是关于前端三件套 HTML+CSS+JS基础知识内容笔记的主要内容，如果未能解决你的问题，请参考以下文章