前端三件套 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基础知识内容笔记的主要内容,如果未能解决你的问题,请参考以下文章