前端三件套知识点

已于 2023-02-05 10:57:00 修改
阅读量2.8k 收藏 14
点赞数 1
文章标签： html css javascript
于 2023-01-11 13:14:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50918411/article/details/123947856
版权

html

常用插件

image-20220221133817436

文件比较

image-20220221135039515

image-20220221135103433

常用快捷键

ctrl +f 查找当前页面的内容

!后按table 或者 html:5 代码模板快捷键

alt+b调试快捷键

ctrl+k ctrl+t改颜色主题

alt+shift+a注释快捷键

image-20220223084004307

image-20220221135746947

html基础概念

image-20220221143256453

一、 WEB标准的概念及组成

WEB标准不是某一个标准，而是一系列标准的集合。

网页主要由三部分组成：结构、表现和行为。

结构：html
表现：css
行为：script

html------hyper text markup language 超 文本 标记 语言
css----cascading style sheet 层叠 样式 表
js-----javascript 第二阶段

对应的标准也分三方面：

结构化标准语言主要包括HTML(超文本标记语言)和XML（可扩展标记语言，主要用于传输数据），
hyper text markup language

表现标准语言主要包括CSS，

行为标准主要包括文档对象模型DOM、ECMAScript等。

W3C( World Wide Web Consortium )万维网联盟，创建于1994年是Web技术领域最具权威和影响力的国际中立性技术标准机构。

W3C（ World Wide Web Consortium 万维网联盟）制定的结构和表现的标准;

结构：(html)

表现：(css)

ECMA（欧洲电脑场商联合会）制定的行为的标准;

行为 （DOM ,ECMAScript）

二、 HTML及相关概念的介绍

​ HTML 指的是 超文本标记语言 (Hyper Text Markup Language)

​ XHTML 指可扩展超文本标记语言（EXtensible HyperText Markup Language）。

​ 并没有引入任何新标签或属性，唯一得区别是语法，XHTML有着更严格语法
​ （比如：不允许大写字母，标签必须闭合等严格规范。）

​ XHTML2 不向前兼容，乃至不兼容之前得 HTML。
​ 它是一种全新得语言，赤条条来去无牵挂。这着实是一场灾祸

​ 超文本应用技术事变组（WHATWG）。

​ WHATWG网页超文本应用技术工作小组是一个以推动网络HTML 5 标准为目的而成立的组织。在2004年，由Opera、Mozilla基金会和苹果这些浏览器厂商组成。

​ HTML5 指的是HTML的第五次重大修改（第5个版本）
​ 2004年提出草案，2008年正式发布；
​ HTML5 既支持疏松语法，也支持 XHTML 1.0 版本的严格语法。

html结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pygILHJ6-1649006857347)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220221144316227.png)]

所有标签在body里面写 有开始和结束标签

image-20220221144736780

html语法

1.写在<>中的第一个单词叫做标记，标签，元素。

2.标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在“”内。

3.一个标记可以没有属性也可以有多个属性，属性和属性之间不分先后顺序。

4.空标记没有结束标签,但是必须关闭，用“/”代替。

5.一个属性可以有多个属性值，多个属性值之间用空格隔开，不分先后顺序。

例如

叫标记，也叫标签，也叫元素
class 属性/类

image-20220221150539687

image-20220221150645291

标签

常规标记（双标记） （标签 标记 元素）

<标签 属性=“属性值” 属性=“属性值 属性值”></标签>

空标记（单标记）

<标签 属性=“属性值” 属性=“属性值”/>

image-20220302133914810

image-20220302133936213

image-20220302134004534

image-20220302134039997

标题标签

段落标签

* 段落§

段落文本内容

标识一个段落(段落与段落之间有段间距) 语义化标签

image-20220221152020775

斜体标签

image-20220221152114827

空格标签

* 空格 ( ) 
（所占位置没有一个确定的值,这与当前字体字号浏览器都有关系）

image-20220221152440985

加粗标签

image-20220222082145686

行内标签
  <!-- <span>我们的displa值inline 并且不能设置宽高 由字体大小 长度决定 只能
       设置左右margin 和左右padding</span> -->

image-20220222084108325

image-20220222084604182

超链接标签

image-20220222090108550

超链接锚点
<!-- 超链接锚点 -->
    <a href="#one">星期一</a>
    <a href="#two">星期二</a>
    <a href="#three">星期三</a>
    <a href="#four">星期四</a>
    <a href="#five">星期五</a>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <a name="one">锅包肉</a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a name="two">红烧肉</a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a name="three">红烧排骨</a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a name="four">小鸡炖蘑菇</a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a name="five">火锅</a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

image-20220222091644792

9）超链接的应用

语法：

<a href="目标文件路径及全称/连接地址" title="提示文本">链接文本/图片</a>

属性：target 页面打开方式
属性值：_blank 新窗口打开 ；  _self 当前窗口打开

<a href="#" target="_blank">新页面打开</a> 
<a href="#">链接</a>   空链接

拓展：

定义书签：<a href="#box">第一处</a>
                 <a name="box">我在这^_^</a>
邮箱跳转：<a href="mailto:906823104@qq.com">906823104@qq.com</a>
其他标签

<hr/>一条横线

<br/>强制换行

小结1

一、 WEB标准的概念及组成
WEB标准不是某一个标准，而是一系列标准的集合。

网页主要由三部分组成：结构、表现和行为。

html------hyper  text   markup   language    超 文本 标记 语言
css----cascading   style   sheet    层叠  样式  表
js-----javascript   第二阶段

对应的标准也分三方面：

结构化标准语言主要包括HTML(超文本标记语言)和XML（可扩展标记语言，主要用于传输数据），
hyper   text   markup   language

表现标准语言主要包括CSS，

行为标准主要包括文档对象模型DOM、ECMAScript等。

W3C( World Wide Web Consortium )万维网联盟，创建于1994年是Web技术领域最具权威和影响力的国际中立性技术标准机构。

W3C（ World Wide Web Consortium 万维网联盟）制定的结构和表现的标准;

结构：(html)

表现：(css)

ECMA（欧洲电脑场商联合会）制定的行为的标准;

行为 （DOM ,ECMAScript）
二、 HTML及相关概念的介绍
 HTML 指的是 超文本标记语言 (Hyper Text Markup Language)

 XHTML  指可扩展超文本标记语言（EXtensible HyperText Markup Language）。

 并没有引入任何新标签或属性，唯一得区别是语法，XHTML有着更严格语法
（比如：不允许大写字母，标签必须闭合等严格规范。）

 XHTML2  不向前兼容，乃至不兼容之前得 HTML。
 它是一种全新得语言，赤条条来去无牵挂。这着实是一场灾祸

 超文本应用技术事变组（WHATWG）。

 WHATWG网页超文本应用技术工作小组是一个以推动网络HTML 5 标准为目的而成立的组织。在2004年，由Opera、Mozilla基金会和苹果这些浏览器厂商组成。

 HTML5 指的是HTML的第五次重大修改（第5个版本）
 2004年提出草案，2008年正式发布；
 HTML5 既支持疏松语法，也支持 XHTML 1.0 版本的严格语法。
三、拓展：
补充快捷键知识： 
1）方向键加shift可选中文本
2）复制Ctrl+c
3) 粘贴Ctrl+v
4) 剪切Ctrl+x
5) 关闭ctrl+w
6) delete向后删除
7）撤销Ctrl+z  
8) 输入法的切换：Ctrl+空格 
9) F2 重命名
四、 调试工具 -浏览器
1）PC端调试工具的使用 -浏览器

   测试浏览器(chrome,firefox)

   先了解，后期我们写页面了会经常使用，边用边学。
五、HTML5 基本结构 （新建一个html文件时默认有的那些代码）
<!DOCTYPE html>   文档类型声明头，DOCTYPE大小写均可
<html>  开始html文件的书写
	<head>  头部
		<meta charset="utf-8" />  字符编码	
		<title></title>  页面标题
	</head>
	<body></body>  网页主体
</html>
六、 HTML基本语法
常规标记（双标记） （标签 标记 元素）

<标签 属性=“属性值” 属性=“属性值    属性值”></标签>

空标记（单标记）

<标签 属性=“属性值” 属性=“属性值”/>

说明：

1.写在<>中的第一个单词叫做标记，标签，元素。

2.标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在“”内。

3.一个标记可以没有属性也可以有多个属性，属性和属性之间不分先后顺序。

4.空标记没有结束标签,但是必须关闭，用“/”代替。 <meta     />

5.一个属性可以有多个属性值，多个属性值之间用空格隔开，不分先后顺序。
七、 HTML常用标记
1）文本标题（h1-h6）

<h1>一级标题</h1>
<h2>二级标题</h2>
...
<h6>六级标题</h6> 
2） 段落(p)

<p>段落文本内容</p>
标识一个段落(段落与段落之间有段间距) 
语义
3）空格 ( )
&nbsp;（所占位置没有一个确定的值,这与当前字体字号浏览器都有关系）
4）换行(br)
<br /> 换行是一个空标记(强制换行)
5）加粗
加粗有两个标记
1.<b>加粗内容</b>    bold
2.<strong>加粗内容</strong>  有突出强调之意
6）倾斜
倾斜标记
1.<em></em>
2.<i></i>        图标icon   italic

插入图片

在网上复制图片

image-20220222092928639

8）插入图片
<img src="目标文件路径及全称" alt="图片替换文本" title="图片标题" />
注:所要插入的的图片必须放在站点下 
路径：绝对路径、相对路径；
绝对路径：不需要参照物，放哪里都能找到，可以跨盘符（本地的图片不可跨电脑）；---本地，网络
相对路径：当前文件为参照物，从当前文件出发去寻找目标文件，不可跨盘符；
*相对路径的写法：
1)当 当前文件与目标文件在同一目录下，直接书写  目标文件（文件名+扩展名）；
2)当 当前文件与目标文件所处的文件夹在同一目录下，写法如下：
     文件夹名/目标文件全称+扩展名； 
3)当 当前文件所处的文件夹和目标文件在同一目录下，写法如下：
      ../目标文件文件名+扩展名；
../../  出两层的情况
title的作用: 在你鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了，
HTML的绝大多数标签都支持title属性，title属性就是专门做提示信息的
alt的作用:alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息，
它会直接输出在原本加载图片的地方。
width  图片宽度  height  图片高度
为了保证图片不发生变形，width和height最好只写一个；

image-20220222094500719

当图片加载不出来时，显示alt的属性值

image-20220222094252029

image-20220222101800261

列表

三种：有序ol,无序ul,自定义dl

无序ul

属性type=“square（实心方块）/circle(空心圆）/disc(实心圆）”

image-20220222103311564

image-20220222103354179

有序ol

属性type=“1/a/A/i/I” start=“数字”

image-20220222110226085

image-20220222110241929

自定义dl

dt最好只写一个 类似于名词

dd类似于解释

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2mdUqP7H-1649006857365)(https://s2.loli.net/2022/02/22/oRfJvUeAjOQdGmS.png)]

image-20220222111505193

表格

bgcolor="表格的背景色"
cellspacing="单元格与单元格之间的间距"
cellpadding="单元格与内容之间的间距"
水平对齐方式：align="left/center/right"

快捷方式 table>tr*2>td*2

image-20220222132609599

 <table width="200" height="200" border="1">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>

image-20220222132745235

<table width="200" height="200" border="1" cellspacing="0">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>

image-20220222132938314

<table width="200" height="200" border="1" cellpadding="0">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>

image-20220222132827666

<table width="200" height="200" border="1" cellspacing="0" cellpadding="0" align="center">
        <tr>
            <td align="right">1</td>
            <td bgcolor="pink">2</td>
        </tr>
        <tr align="center">
            <td>3</td>
            <td>4</td>
        </tr>
    </table>

image-20220222132856111

行列合并

合并行
<p>合并行</p>
    <p>rowspan="所要合并的单元格的行数"合并行 上下合并</p>
    <table width="200" height="200" border="1" cellspacing="0" cellpadding="0">
        <tr align="center">
            <td rowspan="2">1</td>
            <td>2</td>
        </tr>
        <tr align="center">
            <td>4
最低0.47元/天 解锁文章
二氧化硅.
关注
前端三件套知识点小结
weixin_45932704的博客
03-28 1344
前端入门 开发工具：浏览器（Chrom、FireFox、Edge、Safari） 编辑器：VSCode HTML 1.HTML HTML：超文本标记语言 ( HTML ) 是用来构建你的网页内容并将其语义化的代码。 HTML5：HTML5指的是包括 HTML 、 CSS 和 JavaScript 在内的一套技术组合。 HTML5元素定义: 结构性元素：负责web上下文的定义，section、header、footer、nav、article 块级性元素：完成web页面区域的划分，确保内容的有效分割，
前端三件套 HTML +CSS +JS基础知识内容
a1272159758的博客
12-27 2448
HTML 课堂笔记 1、什么是HTML？ Hyper Text Markup Language 超文本标记语言 超文本？超级文本，例如流媒体，声音、视频、图片等。 标记语言？这种语言是由大量的标签组成。 任何一个标签都有开始标签和结束标签，例如： <标签> : 开始标签 </标签> : 结束标签 HTML严格意义上来只能说是一种规范，一种浏览器上的规范， 标签语言，不能称为编程语言，因为HTML中没有变量、数据类型 控制语句if 、for，这些都没有的。
jquery+bootstrap+layui前端框架三件套
08-03
包含jquery-1.9.1和bootstrap-3.3.7和layui-v2.5.6三个前端框架，这三个都是前端开发常用的强大框架
前端三件套
merury的博客
09-17 3781
前端三件套一级目录CSS1. 内联样式：2. **内部样式：**3. 外部样式4.css的语法5.选择器属性 一级目录 CSS 层叠样式表 1. 内联样式： *在标签内使用style属性指定css代码* <div style = "color :red ;">hello css</div> 2. 内部样式： 在head标签内，定义style标签 <style> div{ color:bl
Web前端入门必备知识，从零基础到精通，收藏这篇就够了！
最新发布
bdfcfff77fa的博客
03-06 996
关注+星标，每天学习前端新技能。
前端三件套(HTML + CSS + JS)
m0_72047169的博客
11-02 3944
内部样式是将CSS规则直接放在HTML文档的。
前端“三件套“——HTML,CSS,Javascript（一）
qq_50692350的博客
09-21 5639
HTML
前端开发入门基础三件套
07-03
"前端开发入门基础三件套"通常指的是HTML、CSS和JavaScript这三种核心技术，它们是构建任何现代网页的基础。对于初学者来说，掌握这三者是踏入前端开发领域的第一步。 **HTML (HyperText Markup Language)**：HTML...
入门级前端三件套的作业
06-27
在学习"入门级前端三件套"的过程中，建议先从基础概念入手，通过编写简单的网页来实践。逐步掌握每种技术的关键点后，可以尝试解决更复杂的问题，例如响应式设计、异步数据处理等。同时，参与开源项目或者做一些个人...
简单聊聊前端三件套
akdjhgwehw的博客
09-11 2150
这篇文章是博主学习前端的第一篇文章，具体会介绍一下Web是什么意思，还会包括HTML的内容，大家可以按需求直接跳转到对应的部分。在现代Web开发中，HTML（超文本标记语言）、CSS（层叠样式表）和JavaScript是不可或缺的关键技术。它们各自负责不同的任务，协同工作以创建交互性、美观和高性能的网页应用程序。3博主还会持续更新相关文章，如果有什么意见或者建议可以给博主私信，欢迎大家多多评论交流。
HTML、CSS、JavaScript（JS）入门
cyt涛的博客
09-20 4554
HTML是网页的基础结构，负责内容的组织和呈现。CSS提供样式，使网页美观、布局清晰。JavaScript为网页添加动态交互功能，响应用户的操作。三者相互协作，共同构成了一个完整的现代网页。HTML 构建结构，CSS 提供样式，JavaScript 赋予网页交互性，合力打造用户体验良好的网页。
前端“三件套“——HTML,CSS,Javascript（二）
qq_50692350的博客
09-26 1445
Java
前端三件套（CSS）
weixin_51202803的博客
09-25 437
CSS入门一、CSS入门二、浮动三、定位   本文章分为css入门、浮动和定位 一、CSS入门 二、浮动 三、定位
前端三件套（HTML）
weixin_51202803的博客
09-23 936
HTML基础基础入门一、HTML语法二、表格三、表单（重点掌握的部分）最后 基础入门 HTML是前端的基础部分，也是相当于页面的毛胚房，后续还需要经过CSS对毛胚房的装修，变成精装别墅，再接着可以通过JS对别墅进行改造，成为结合智能一体的居住房。 一、HTML语法 二、表格 三、表单（重点掌握的部分） 最后 如果有错误的地方希望大家及时指正！ ...
前端三件套-css
m0_63324578的博客
11-07 1317
ul li{后面的后代标签都会生效1也会生效
前端三件套（JavaScript）
weixin_51202803的博客
09-25 1016
JavaScript本篇文章包含了JavaScript基础、JSON、Jquery和Ajax等内容一、JavaScript基础二、JSON三、jQuery四、Ajax 本篇文章包含了JavaScript基础、JSON、Jquery和Ajax等内容 一、JavaScript基础 二、JSON 三、jQuery 四、Ajax 前端三件套（html、css、js）等内容就学习完了，如果有错误的地方，欢迎指正！ ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值