前端重点知识总结

最新推荐文章于 2024-02-04 16:20:58 发布
最新推荐文章于 2024-02-04 16:20:58 发布
阅读量444 收藏 7
点赞数 1
分类专栏： 前端 文章标签： html css web html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tothk/article/details/109117699
版权
本文详细介绍了HTML中的声明、文档头标签、表单、input元素、img标签、a链接及注释，以及CSS的基础，如引入方式、选择器、伪类、盒子模型、元素定位和浮动。此外，还提到了清除浮动的方法和CSS的优先级规则。
摘要由CSDN通过智能技术生成

文章目录

HTML

<!DOCTYPE> 文档格式

  • Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。

  • HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。

  • <!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。

常用的声明

文档格式常用声明
HTML5<!DOCTYPE html>
HTML 4.01<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”“http://www.w3.org/TR/html4/loose.dtd”>
XHTML 1.0<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

文档头标签

标签含义
title元素可定义文档的标题。
lang规定元素中内容的语言代码。
head标签用于定义文档的头部，它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
bodyhtml主体

其他常用重点标签

form表单

  • 标签用于为用户输入创建 HTML 表单。

  • 表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

  • 表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

  • 表单用于向服务器传输数据。

input

  • 用于搜集用户信息。
  • 根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
常用type属性
属性作用
button单纯的按钮
checkbox多选框
file上传文件控件
text文本框
password密码框
reset重置
submit提交

img

  • 向网页中嵌入一幅图像
  • 从技术上讲， 标签并不会在网页中插入图像，而是从网页上链接图像。 标签创建的是被引用图像的占位空间。
  • img标签有两个必需的属性：src 属性 和 alt 属性。

a

  • 定义超链接，用于从一张页面链接到另一张页面。
  • 最重要的属性是 href 属性，它指示链接的目标
    • 未被访问的链接带有下划线而且是蓝色的
    • 已被访问的链接带有下划线而且是紫色的
    • 活动链接带有下划线而且是红色的
提示和注释
提示：如果不使用 href 属性，则不可以使用如下属性：download, hreflang, media, rel, target 以及 type 属性。

提示：被链接页面通常显示在当前浏览器窗口中，除非你规定了另一个目标（target 属性）。

提示：请使用 CSS 来设置链接的样式。

table

内容解释
作用定义 HTML 表格。
组成简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
具体定义tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

li

  • 标签定义列表项目。
  • 可用在有序列表 (ol) 和无序列表 (ul) 中。

颜色

表示方式具体举例
可以直接使用表示颜色的英语单词例如：pink blue balck
使用16进制的字符表示颜色取值范围：#000000–#FFFFFF
RGB三原色的值：0-255
RGBA三原色+Alpha的色彩空间（透明度）

CSS

如何在html文件中引入css

样式引用方式
行内样式在html的标签里面加入style的属性 通过该属性去加入一些样式
内嵌样式在head的标签结束之前 加入
外链样式在head标签结束之前加入标签 引入css文件
嵌入样式不建议使用 遇到的时候要求能看懂代码
  • 执行优先级
    • 行内>内嵌>外链>嵌入 提供一种参考
    • 谁的优先级高，要取决于谁离修饰的目标越近，越近的优先级越高

CSS选择器

选择器类型解释
标签选择器以标签命名的选择器
id选择器给某标签加入id属性 例如id=“somename”；属性的值不能为数字；id属性的值要有意义 要求满足望文生义；适用场景：在页面中的标签具有单独的样式要进行显示时使用。
class（类）选择器以 标签中含有class属性的 例如 class=”yellow”；属性不能为数字；注意：class属性的值要有意义 要求满足望文生义；适用场景：在页面中多个标签具有相同的样式 使用class选择器。
全选择器（通配符选择器）* {} ；* 通配符 代表所有的标签；表示修饰页面中的所有标签。
包含选择符器格式：两个选择器之间间隔一个空格；表示选中前选择器包含的标签中符合后面选择器的标签。
分组选择器格式：两个选择器之间间隔一个英文逗号；表示选中写出的选择器选中的所有标签。
指定选择器格式：两个选择器之间不间隔任何符号；举例：h1#content{} 表示针对所有id为content的h1标签。
组合选择器将以上7种选择符混合使用而组成的一种选择器。

伪类

执行顺序L-H-V-A
未访问的链接link
已访问的链接visited
鼠标移动到链接上hover
鼠标按下到链接上active

盒子模型

在网页的设计中所有的页面都是盒子套盒子。大的分区就是大盒子、小的分区就是小盒子

内容属性
内容content
内边距padding
边框border
外边距margin
边框边框宽度 实线 颜色 举例：border:1px solid blue;
计算宽度左外边距+左边框+左内边距+content+右内边距+右边框+右外边距

元素的分类

  • 块状元素
    • 标签具有宽度、高度的属性，且独自成行
  • 内联元素
    • 没有宽度和高度的属性，且其他元素可以与其同行显示

隐藏元素 3种方式

  • display:none
  • 宽度和高度设置成0
  • overflow:hidden

浮动

什么是浮动？浮动是css实现布局的一种方式，包括div在内的任何元素都可以以浮动的方式进行显示。

float

  • none 不浮动
  • left 左浮
  • right右浮

浮动的清理

当元素有浮动属性时，会对其父元素或后面的元素产生影响，会出现一个布局错乱现象，可以通过消除浮动的方法来解决，浮动元素的影响。

方法一：clear
  • none：默认值。允许两边都可以有浮动对象
  • left：不允许左边有浮动对象
  • right：不允许右边有浮动对象
  • both：左右两侧不允许有浮动对象
方法二：额外标签法

这种方法应该说是最简单的一种了，w3c建议在容器的末尾增加一个“clear: both”的元素，强迫容
器适应它的高度以便装下所有的float元素

方法三：父元素使用overflow的方法

通过设置父元素overflow值设置为hidden，是最简单的清楚浮动方法，但如果子元素使用了定位布局，就会很难实现

方法四：利用伪对象after方法:
  • 定义一个类。使用为对象after，控制浮动元素的影响。
  • clearFix{zoom:1}解决ie6/7兼容问题

定位: position

项目Value
属性positon
描述设置对象的定位方式
static静态定位：页面中的每一个对象的默认值。
absolute绝对定位：将对象从文档流分离出来，通过设置left、right、top、bottom四个方向相对于父级对象进行绝对定位。如果不存在这样的父对象，则依据body对象。
relative相对定位：对象不从文档中分离，通过设置left，right，top。bottom四个方向相对于自身位置进行相对定位

思维图

在这里插入图片描述

「已注销」
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
前端知识点梳理
日常笔记/总结/系列知识梳理
08-15 2069
标签基础、DTD与META、语义化、选择器、权重与优先级、匹配规则、浮动与清除、BFC、类名组合规则、前端技巧、定位、叠加技巧、伪类、伪元素、盒子模型、代码规范、性能优化、渲染原理、 Sprites、iconfont字体图标、布局思路、布局定式、css3动画、css3选择器、css3过渡、flex布局、背景渐变、css3实用动效、3D、块、css3变量、em/rem/vw、企业内部多页面项目实战。zepto：移动端的jquery、DOM操作、移动端事件、click延迟处理、touch事件组。...
前端部分知识点总结
m0_61679135的博客
11-07 1427
目录 一、HTML、CSS阶段 1.盒子模型的组成部分 2.定位相关 3.浮动相关 4.精灵图 5.标签的显示模式 6.margin塌陷现象 7.如何使一个盒子水平垂直居中？ 8.如何垂直居中一个img？ 9.如何实现双飞翼（圣杯）布局？ 10.css中选择器的优先级以及css权重如何计算 11.H5新增的语义化标签和特性 12.C3新增的特性 13.css中link和@import的区别 二、移动web阶段 1.什么是移动端的视口？ 2.为...
前端知识点汇总
qq_64314976的博客
07-13 6827
常用标签 1. 标题标签，双标签，一共有6个，h1~h6，标题标签里的文字，加粗，大小不一。 文字的大小的单位 像素px 默认的文字大小：16px h1 === 32px,h2 === 24px,h3 === 18.72px,h4 === 16px,h5 === 13.28px,h6 === 12px 大部分浏览器对文字大小的最小值做了限制，最小12px 语义化 emmet语法： (1) 标签名 tab键 ===> 直接生成对应标签...
前端知识点整理
老余的博客
10-27 1475
BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。参考链接：BOM主要对象属性方法总结。
学习web（前端）的知识点汇总，初学者稳稳拿捏!!!
m0_59273150的博客
10-01 7505
目录 1、HTML知识点汇总 2、CSS知识点汇总 3、JS知识点汇总 一、HTML5（网页的骨架） 常用开发软件：Hbuilderx 使用过程：创建项目—创建目录—编写代码—运行（crtl+R） >>> <1>标签： 6类： 标题标签：h1-h6 *用之标题标记，六级标题之间不可嵌套，默认换行、变粗（h7和普通标题标记相同的样式） div标签:（块级标签） *有换行默认样式 p标...
前端知识点总结
qq_39648794的博客
01-08 286
排序算法 冒泡排序 for(let i=0;i<length;i++){ for(let j=0;j<length-1;j++){ if(compareFn(array[j],array[j+1])===Compare.BIGGER_THAN){ swap(array,j,j+1); } } } 选择排序 let indexMin; for(let i=0;i&lt...
前端知识点部分总结
weixin_47454918的博客
05-29 1379
1.怪异盒模型 标准盒模型：在标准模式下，一个块的总宽度 = 内容的width + padding(左右) + border(左右) + margin(左右) 怪异盒模型：一个块的总宽度 = 内容的width + margin(左右)（这里的width包含了padding(左右)和border(左右)的值） 2.vuex状态管理工具 state：仓库中的状态（数据）； getters：状态的衍生状态（数据）； mutation：状态的修改方法； actions：状态的异步修改方法。 2.1 dispatch
前端基础汇总
m0_55191098的博客
05-02 2115
灵活高效地实现居中、对齐等有规律的弹性布局；采用flex布局的元素称为flex容器，容器内的子元素称为项目。
前端高频面试题（实训二）
Mark Sheng的博客
05-07 780
前端高频面试题 编辑人:郝金利 目录 JS相关： （1） 闭包 （2） 说一下JS中的原型链的理解？ （3）说一下JS继承（含ES6的）--或者人家这样问有两个类A和B,B怎么继承A？ （3） 说一下JS原生事件如何绑定 （4） 说一下JS原生常用dom操作方法？ （6） (了解)JS设计模式有哪些(单例模式观察者模式等) （7）说一下你对JS面像对象的理解 （8） 说一下JS数组常用方法（至少6个） （9） 说一下JS数组内置遍历方法有哪些和区别 （10）..
前端基础知识总结
Shi_haoliu的博客
04-03 901
归纳，总结，理解。慢慢更新，打工人-http,html,es6,js
前端笔记汇总
西楼的博客
01-06 4913
目录 目录 前端基础 HTML 1.基本标签 2.页面结构分析 3.高级标签 CSS 1.基础知识 2.美化网页 JS 1.基础知识 2.数据类型详解 3.函数 4.面向对象编程 5.操作BOM对象(重点) 6.操作DOM对象(重点） 7.操作form表单 8. jQuery 9.总结 前端基础 课程听的是b站狂神说：狂神说 笔记有些是借鉴：夜里的雨 HTML 1.基本标签 <!DOCTYPE html> <html...
HTML第一课，HTML基础。
qq_71471435的博客
03-31 81
</ul>中只能嵌套<li></li>，直接在<ul><title></title>
前端知识点大全
wiki_Wei的博客
11-16 1541
                                                     前端知识点总结  花了几个晚上整理的前端知识点，收录进来以备后续查看。 1、自动化构建工具Gulp的使用方法。 考察nodejs安装，npm依赖库安装，全局安装，本地安装，--save和—save-dev 区别，gulp基本脚本编写，gulp常用功能。 2、什么是跨域问题？如何解决？表...
【前端收藏】前端小作文-前端八股文知识总结（超万字超详细）持续更新
最新发布
天天打码-16年老码农
02-04 1254
渲染引擎(Layout Engine或Rendering Engine)和js引擎渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
前端需要总结的知识点（仅用于自己学习）
ingenuou_的博客
02-24 2231
前端需要总结的知识点（仅用于自己学习）
前端中高级知识要点总结（3w+长文）
热门推荐
qq_39025670的博客
10-09 1万+
本文整理前端常见的知识要点，方便随时复盘。内容主要涵盖JS基础、CSS、HTML，JS面向对象，渲染机制，网络HTTP，前端安全，设计模式，算法等方面。 注：文章内容相对而言有一定的难度，所以需要读者有一定的基础。另外，若文章有何不妥之处或者你有任何疑问，欢迎留言讨论。 一.JS基础 1.手写实现call() call()、apply()和bind()这是前端人逃不过的三个方法，是从初级向中级进阶所必会的。通过使用这些方法，我们可以修改函数绑定的this，使其成

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值