当前位置：首页 > news >正文

前端html+css+js 基础总结

news 2025/12/30 17:23:08

HTML

行级元素

标签分为行级元素与块级元素

行级元素占据区域由其显示内容决定，如span，img(图片)，<a></a>基本格式: <a href="链接" target="_blank"></a>用于跳转到其他网站，target="_blank"使其跳转时会打开新窗口值是下划线blank，否则会在原窗口打开链接），strong（加粗文字），em（斜体文字）等。

块级元素

块级元素会换行显示，并占据整行区域，如div（布局标签），h，p，form（表单标签）等；

属性写在开始标签中，格式是键值对的形式，属性名：键；引号里的：值

列表标签

/********无序列表******/
<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>...
</ul>
//1.无序列表的各个列表项之间没有顺序级别之分，是并列的,
//2.<u></u> 中只能嵌套 <li></i>,直接在 <u|></u> 标签中输入其他标或者文字的做法是不被允许的,.
//3.<li> 与 </i>之间相当于一个容器,可以容纳所有元素。

/*******有序列表*****/
<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li>...
</ol>
//1.<o|></0l>中只能嵌套<li></i>,直接在<o|></0|>标签中输入其他标签或者文字的做法是不被允许的,
//2.<li>与 </i>之间相当于一个容器，可以容纳所有元素,
//3.有序列表会带有自己样式属性，但在实际使用时，我们会使用CSS来设置

/****自定义列表*****/
<dl><dt>名词1</dt><dd>名词1 解释1</dd><dd>名词1 解释2</dd>
</dl>

表格标签

<table><tr><td>单元格内的文字</td>...</tr>...
</table>
//<table></table>是用于定义表格的标签;
//<tr></tr>标签用于定义表格中的行,必须嵌套在<table></table>标签中;
//<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中;
//字母 td 指表格数据(tabledata),即数据单元格的内容;

合并单元格操作：
跨行合并:rowspan="合并单元格的个数，最上侧单元格为目标单元格,写合并代码；
跨列合并:colspan="合并单元格的个数，最左侧单元格为目标单元格,写合并代码；

表单标签

表单域是一个包含表单元素的区域。<form>会把它范围内的表单元素信息提交给服务器

表单控件（表单元素）

1.<input>表单元素

<input type="属性值" />

除 type属性外，<input>标签还有其他很多属性，其常用属性如下:

name 和value 是每个表单元素都有的属性值,主要给后台人员使用
name 表单元素的名字,要求单选按钮和复选框要有相同的name值
checked属性主要针对于单选按钮和复选框,主要作用一打开页面,就要可以默认选中某个表单元素
maxlength是用户可以在表单元素输入的最大字符数,一般较少使用

2.select下拉表单元素

<select> //带有选项的控件<option value="a">男</option><option value="b">女</option><option value="c">其他</option></select>
//1.<select>中至少包今-对<option>
//2.在<option>中定义selected=“selected"时，当前顶即为默认选中顶

**布局标签**
<header>	头部信息
<nav>	导航栏
<aside>	侧边栏
<main>	内容区域
<footer>	底部信息
<article>	文章详情
<section>	页面分区

3.<label>标签

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
/***label>标签的 for 属性应当与相关元素的 id 属性相同**/

4.<textarea>表单元素

<textarea rows="3" cols="20">文本内容
</textarea>

br/：换行符

hr/：水平分割线

textarea：更大区域的输入控件

scope 是 HTML <th> 元素的一个属性，表示表头单元格的作用范围。该属性可以设置为以下值之

col：表示该表头单元格适用于一整列;

row：表示该表头单元格适用于一整行;

colgroup：表示该表头单元格适用于一个列组;

rowgroup：表示该表头单元格适用于一个行组;

锚链接标签

首先定义一个锚点：在标签中添加一个id属性；

超链接到锚点:

<a href="跳转目标" target=" 目标窗口的弹出方式"> 文本或图像 </a>

链接分类:
外部链接: 例如<a href="CSDN - 专业开发者社区" ></a>;
内部链接:网站内部页面之间的相互链接,直接链接内部页面名称即可,例如<a href="index.html">首页</a>;
空链接: 如果当时没有确定链接目标时,<a href="#">首页</a>;
下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件;
网页元素链接:在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接;
锚点链接:点我们点击链接,可以快速定位到页面中的某个位置:
在链接文本的 href 属性中，设置属性值为 #名字的形式,如<ahref=“#two">第2集</a>
找到目标位置标签，里面添加一个id属性=刚才的名字，如:<h3 id="two">第2集介绍</h3>

span标签

<span>标签被用来组合文档中的（块）行内元素，标签不会自动换行，span没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

link标签

链接外部样式表文件<link rel="stylesheet" href="1.css">;

设置网站icon：<meta rel="icon" href="xxx.png">

音乐标签

<embed src="" hidden="true" />

hidden设置为true时，隐藏音乐播放器，

比audio标签多一块黑色的背景<embed src="" hidden="true" />。

图像标签

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.@”><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>图像标签</title>
</head>
<body><h4>图像标签的使用:</h4><img src="img.jpg"/><h4>alt 替换文本 图像显示不出来的时候用文字替换:</h4><img src="img1.jpg” alt="hello"/><h4>title 提示文本 鼠标放到图像上,提示的文字:</h4><img src="img.jpg”alt"Hi” title="hello"/></body>
</html>

图像标签属性注意点
① 图像标签可以拥有多个属性，必须写在标签名的后面;
② 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开;
③ 属性采取键值对的格式，即 key=“value"的格式，属性=“属性值”;

跑马灯：页面自动滚动效果

<marquee height="80" weight="200" bgcolor="red" behavior="alternate" direction="down">...</marquee>

中间的内容可以是文字、图片，也可以是由程序生成的文字或图片；

behavior设置滚动的方式

alternate表示在两端之间来回滚动

scroll表示一端滚动到另一端（会重复）

slide表示由一端滚动到另一端（不会重复）

direction设置滚动方向: down表示向下滚动，left向左，right向右，up向上

loop表示滚动的次数，-1时无限滚动

scrollamount设置滚动速度，值越大滚动速度越快

meta标签

编码格式，在meta标签里面设置charset，英语用ascll、ansi；日文、韩文用Unicode；中文的用gbk、gbk2312；台湾big5（繁体字符）；utf-8支持180到200个国家语言，所以用utf-8基本能解析所有国家语言<meta charset="utf-8">；

关键字：给搜索引擎看，主要用于SEO，<meta name="keywords" content="阳光,帅气,有担当,进步">(逗号使用英语格式的)；

网页描述：在搜索的时候会出现的描述：

<meta name="description" content="江苏是一个好地方，有山有人妹子水灵">

网页重定向：

<meta http-equiv="refresh" content="5;http://baidu.com">过5秒之后跳转到设定的页面;

告诉搜索引擎站点的作者：<meta name="author" content="姓名">（不常用）；

<meta name="robots" content="all/none/index/noindex/follow/nofollow">（不常用，了解）：

all：文件将被检索，且页面上的链接可以被查询；

none：文件将不被检索，且页面上的链接不可以被查询；

index：文件将被检索；

noindex：文件将不被检索，但页面上的链接可以被查询；

follow：页面上的链接可以被查询；

nofollow：文件将不被检索，页面上的链接可以被查询。

单选框

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

一组单选按钮必须要设置同样的name，否则单选无效；

通过checked来设置默认选中项；

多选框

<input type="checkbox" name="hobby" checked="checked">喝酒

<input type="checkbox" name="hobby">抽烟

<input type="checkbox" name="hobby">烫头发

多行文本框

<textarea cols="30" rows="10"></textarea>

cols：控制输入字符的长度；

rows：控制输入的行数；

文件上传控件 <input type="file">

下拉列表

1. 普通下拉列表

<select multiple="multiple"><option>下拉列表选项1</option><option>下拉列表选项2</option><option selected="selected">下拉列表选项2</option>
</select>

2. 分组下拉列表：

<select><optgroup label="江苏"><option>苏州</option><option>无锡</option><option>常州</option></optgroup><optgroup label="浙江"><option>杭州</option><option>温州</option><option>绍兴</option></optgroup>
</select>

概述详细信息标签

action:处理信息；
method：有两个值可取，get和post。
get：通过地址栏提供（传输）信息，安全性差；
post：通过xxx来处理信息，安全性相对较高。
multiple:设置多选；
selected:设置默认选中项，如果不设置，默认选择第一个选项；

注释

<!-- 注释语句 -->    快捷键:ctrl + /

特殊字符

CSS

选择器分冲基础选择器和复合选择器个大类

CSS基础选择器

基础选择器是由单个选择器组成的
基础选择器包括:标签选择器、类选择器、id选择器和通配符选择器

1. 标签选择器
标签选择器(元素选择器)是指用 HTML标签名称作为选择器，按标签名称分类，为页面中某一类标答指定统-的 CSS 样式。
作用
标签选择器可以把某一类标签全部选择出来，比如所有的<div>标签和所有的<span>标签
优点
能快速为页面中同类型的标签统一设置样式
缺点
不能设计差异化样式，只能选择全部的当前标签

2.类选择器

/****类选择器语法****/
.类名{属性1：属性值1；...
}

3.id选择器

id 选择器可以为标有特定id 的 HTML元素指定特定的样式。
HTML 元素以 id 属性来设置id 选择器,CSS 中 id 选择器以“#"来定义。

#id名{属性1：属性值1;...
}

CSS字体属性

字体系列

p{ font-family:"微软雅黑";}
div {font-family:arial,"Microsoft Yahei"，"微软雅黑";

各种字体之间必须使用英文状态下的逗号隔开
一般情况下,如果有空格隔开的多个单词组成的字体加引号,
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
最常见的几个字体 :body{font-family."MicrosoftYaHei ,tahoma,arial,'Hiragino Sans GB': }

样式

内部样式：写在head标签里

使用style标签，里面有一个或多个CSS规则，内部样式仅对当前的页面有效

外联样式（常用）：把link标签放在head标签内

然后指定link标签的href属性来指定外部css文件路径来引入外部样式表，引入的样式也仅对当前的html页面有效

JS

常量与变量

let : 变量，可多次赋值；

const : 常量,只能赋一次值，但const声明的是数组或对象时其内部元素可以被改变不过不能完全更改；

模板字符串

"my name is" + name

'my name is ${name}'

数组

const numbers = new Array(1,2,3,4,5);

const fruits = ["apple",10,true];

从0开始排序

在末尾添加新元素fruits.push("name");

在头部添加fruits.unshift("");

删除末尾元素fruits.pop();

// 数组的简单定义

const number = ["asd0",'dwad','dwadasufg',true,null,10];

console.log(number);

console.log(number[0]);

// 在末尾加上

number.push("NewAdd");

// 在头部加上

number.unshift("Fornt");

// 删除末尾的

number.pop();

// 判断数据是否为数组

console.log(Array.isArray('hello'));

console.log(Array.isArray(number));

// 得到索引

console.log(number.indexOf("asd0"));

对象

跟学b站设计优品购前端页面总结：

网站TDK三大标签SEO优化
1.title 网站标题
title 具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。
建议:网站名(产品名)-网站的介绍(尽量不要超过30个汉字 )例如:
京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物!
·小米商城-小米5s、红米Note 4、小米MIX、小米笔记本官方网站
2.description 网站说明
简要说明我们网站主要是做什么的。
我们提倡，description作为网站的总体业务和主题概括，多采用“我们是.."“我们提供…"“xxx网作为..”、“电话 :010...”之类语句。
3.keywords关键字
keywords是页面关键词，是搜索引擎的关注点之一
keywords最好限制为6~8个关键词,关键词之间用英文逗号隔开,采用关键词1,关键词2 的形式
例如:<meta name=“keywords" content=“网上购物,网上商城手机,笔记本,脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>
1)logo 里面首先放一个h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要。
2)h1里面再放一个链接，可以返回首页的，把logo 的背景图片给链接即可。
3)为了搜索引擎收录我们，我们链接里面要放文字(网站名称)，但是文字不要显示出来,
方法1:text-indent移到盒子外面(text-indent:-9999px),然后overflow:hidden,淘宝的做法。
方法2:直接给 font-size:0;就看不到文字了，京东的做法。
4)最后给链接一个title属性，这样鼠标放到logo 上就可以看到提示文字了
通过以上的方式能够增加网站的浏览热度。

​​​HTML