有趣的前端知识（一）

于 2024-01-07 22:55:52 发布
阅读量1.2k 收藏 16
点赞数 38
分类专栏： 前端 文章标签： 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_82095378/article/details/135446408
版权

推荐阅读

智能化校园：深入探讨云端管理系统设计与实现（一）
智能化校园：深入探讨云端管理系统设计与实现（二）

文章目录

image.png

HTML

简介

** 超文本标记语言**（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。
HTML预览
image.png

浅析html,.css,js区别

  • html

用于勾勒出网页的结构和内容

  • CSS

用于美化网页

  • JavaScript

让网页呈现动态的数据和效果
jQuery
web项目基础
浏览器 HTTP协议 服务器
网页存到服务器上，运在浏览器上

基础

声明

为了让浏览器识别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">
html 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

对于中文网页需要使用 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，但是，只要在HTML文件里写了<!doctype hmtl>和 ，浏览器将会按照utf-8编码解析网页。
不过，一定要确保文档编码和meta设置的编码，一定要相同。比如，在记事本保存时，选择编码为utf-8，保存。（代码无需变动）。另一种，改变方式可以变动meta中所设置的编码和文档编码保持一致。
utf-8和utf8的区别
“UTF-8” 是标准写法，php 在 Windows 下边英文不区分大小写，所以也可以写成 “utf-8”。“UTF-8” 也可以把中间的"-“省略，写成 “UTF8”。
在数据库中只能使用"utf8”(MySQL) 在MySQL的命令模式中只能使用"utf8"，不能使用"utf-8"，也就是说在PHP程序中只能使用 “set names utf8(不加小横杠)”，如果你加了"-“此行命令将不会生效，但是在 PHP 中 header 时却要加上”-"

<?php header('Content-Type: text/html; charset=UTF-8'); ?>

即
除了在命令 “mysql_query(set names utf8)” 外一律用大写"UTF-8"。

HTML标签

HTML标签对于大小写不敏感：

等同于

。

  • HTML 标签是由尖括号包围的关键词，比如
  • 标签分为开放标签和闭合标签。
  • HTML 标签通常是成对出现的，但也有例外,
    和这两个都是单独存在的，本身也都是开放标签和闭合标签,不包含内容，所以只是个标签。
<标签>内容<标签>

单标签 等于无内容的双标签

<student/>

双标签

<student "id=""uid"></student>

浏览器并不会直接显示HTML标签，但是通过标签来决定如何展示HTML页面的内容.

标题

标题（Heading）是通过

-

标签进行定义的。

<h1>hello</h1>
<h2>hello</h2>

尽量不要使用标题这个标签来生成粗体或者大号字体，这种可能会打乱原有的文档结构。

段落

标签（块级元素）
HTML可以将文档分成若干段落。

折行，不产生新段落的情况下进行换行，可以借助
标签

<p>hello</p>
<p>你好<br>bob</p>

注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

<!--这是注释-->

水平线
标签在HTML页面中创建水平线，可以用于分隔内容。 ```

hello

world

``` ![image.png](https://img-blog.csdnimg.cn/img_convert/1157a8280ba01f6f4c16cfc4560ad7b3.png)

文本格式化标签
    一些 HTML 标签除了具有一定的语义（含义）外，还有默认的样式，例如<b>（加粗），通过这些标签我们无需借助 CSS 就可以为网页中的内容定义样式。在这些具有语义和默认样式的标签中，有许多是针对文本的，通过这些标签我们可以格式化文本（为文本添加样式），例如使文本加粗、倾斜或者添加下划线等。<br />文本格式化标签
标签描述
…加粗标签中的字体
…强调标签中的内容，并使标签中的字体倾斜
…定义标签中的字体为斜体
…定义标签中的字体为小号字体
…强调标签中的内容，并将字体加粗
…定义下标文本
…定义上标文本
…定义文档的其余部分之外的插入文本
…在文本内容上添加删除线
…定义一段代码
…用来表示文本是通过键盘输入的
…定义程序的样本
…定义变量
…
定义预格式化的文本，被该标签包裹的文本会保留所有的空格和换行符，字体也会呈现为等宽字体
…用来表示标签中的内容为缩写形式
…
用来定义文档作者的联系信息，被该标签包裹的文本通常会以斜体呈现，并在文本前面换行
…定义标签中的文字方向
…
定义一段引用的文本，例如名人名言，文本会换行输出，并在左右两边进行缩进
…定义一段短的引用，浏览器会将引用的内容使用双引号包裹起来
…表示对某个文献的引用，例如书籍或杂志的名称，文本会以斜体显示
…用来定义一个术语，标签中的文本会以斜体呈现

关于 和
在显示上，这两个标签都可是加粗文本，呢么为什么会有两个功能"相同"的标签呢？而且好像 strong 并非个例。

  • 首先，这两个并非完全相同。比如，如果使用网页阅读器阅读网页（盲人使用），strong 会重读，b 则不会。
  • 其次，从起源上来说，strong 是为了在未来建设语义网而诞生的。应该知道的是，html 是负责显示的标记，不能表示语义。也就是说，浏览器知道这个标签如何显示，而不知道标签所标记的内容应该是什么含义。而 strong 在语义上走出了第一步。

示例：

<b>这个文本是加粗的</b>
<br />
<strong>这个文本是加粗的</strong>
	
<br />
这个文本包含
<sub>下标</sub>
<br />
这个文本包含
<sup>上标</sup>
	
<br>
<del>这是删除线</del>
<br>
	<p>前面是宋体，<dfn>后面是斜体</dfn></p>

image.png

超链接
    HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。<br />**<a>标签来设置超文本链接，**在标签<a> 中使用了href属性来描述链接的地址。

<a href="链接地址">链接文本</a>
<a href="#">回到顶部</a>

链接文本不一定是要文本，可以是图片，HTML其他元素都行。

  • target属性

    使用 target 属性，你可以定义被链接的文档在何处显示。

  1. target=“_blank”:在新窗口中浏览新的页面。
  2. target=“_self”:在同一个窗口打开新的页面。
  3. target=“_parent”:在父窗口中打开新的页面。（页面中使用框架才有用）
  4. target=“_top” :以整个浏览器作为窗口显示新页面。（突破了页面框架的限制）
<a href="https://www.baidu.com/" target="_blank"
rel="noopener noreferrer">访问百度!</a>

<p>如果你将 target 属性设置为"_blank";, 链接将在新窗口打开，同时
加上rel="noopener noreferrer"意思是不会打开其他的网站，
因为恶意病毒可能会修改你的浏览器空白页地址。。</p>
  • id属性

id 属性可用于创建一个 HTML 文档书签.(注意，id不能重复)
书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的。

在HTML文档中插入ID:

<a id="tips">有用的提示部分</a>

在HTML文档中创建一个链接到"有用的提示部分(id=“tips”）"：

<a href="#tips">访问有用的提示部分</a>

或者，从另一个页面创建一个链接到"有用的提示部分(id=“tips”）"：

<a href="https://www.baidu.com/html/html-links.html#tips">访问有用的提示部分</a>

注意：
请始终将正斜杠添加到子文件夹。一般情况，依赖服务器配置。

  1. 主要问了区分访问的是文件还是文件夹，比如访问路径为http://www.a.com/b浏览器不知道访问的是文件还是文件夹，会先访问一遍确认是那种类型，如果是文件夹则会加上/,重新访问地址为http://www.a.com/b/的路径。
  2. 如果带后缀名http://www.a.com/b.html可以明确知道访问的是文件，不需要再次请求。

图像

标签

图像由** 标签**定义。
是空标签，只包含属性，并且没有闭合标签。
源属性（src）
源属性的值就是图像的URL地址
**Alt属性 **
图像定义一串预备的可替换的文本。
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，。
高度和宽度属性
height（高度）与width（宽度）属性用于设置图像的高度与宽度。

<img src="http://www.a,com/images/a.jpg" alt="error"
width="400px" height="400">

绝对路径与相对路径

1绝对路径
从盘符开始写出图片的绝对路径
C:/images/1.jpg或者/home/soft01/images/1.jpg
缺点
1.路径过长
2.不方便迁移，路径易报错。

2相对路径
只需要写出图片和网页的相对位置。方便迁移，简单。
1.平级 （同目录下）
2.下级
3.上级
（照片最好全放到一个文件下里，使用上级最方便）
（然后统一放到src下）

标签

标签用于客户端图像映射。
图像映射指带有可点击区域的一幅图像。
中的 usemap 属性可引用 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 添加 id 和 name 属性。
area 元素永远嵌套在 map 元素内部。
area 元素可定义图像映射中的区域。
image.png

<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
//shape指的是点击区域的形状，
coords指的应该是链接区域在图片中的坐标（像素为单位

表格

表格由

标签来定义。

  • table 表格声明范围
  • tr 行
  • td 行里的单元格
  • tr 声明表头

表格中的标签

标签描述
定义表格
定义表格的表头
定义表格的行
定义表格单元
定义表格标题
定义表格列的组
定义用于表格列的属性
定义表格的页眉
定义表格的主体
定义表格的页脚

实例：

<table border="1"cellspacing="0" width="30%" >
<caption>单元格间距</caption>
    <tr>
        <td>alice</td>
        <td>bob</td>
    </tr>
    <tr>
         <td>cc</td>
         <td>dd</td>
     </tr>
</table>

<table border="1" cellpadding="0" width="30%" >
<caption>单元格边距</caption>
    <tr>
        <td>Alice</td>
        <td>Bob</td>
    </tr>
  <tr>
         <td>cc</td>
         <td>dd</td>
     </tr>
</table>


<table border="1">
    <tr>
        <td rowspan="2" >alice</td>
        <td>bob</td>
    </tr>
    <tr>
        <td>cc</td>
    </tr>
</table>

<table border="1">
    <tr>
        <td colspan="2">bob</td>
    </tr>
    <tr>
        <td >alice</td>
        <td>cc</td>
    </tr>
</table>

<table border="1">
  <caption>带有标题的表格</caption>
  <tr>
    <th>A</th>
    <th>B</th>
  </tr>
</table>

<table border="1">
<caption>多元化的表格</caption>
<tr>
  <td>
   <p>这是一个段落</p>
   <p>这是另一个段落</p>
  </td>
  <td>这个单元格包含一个表格:
   <table border="1">
<caption>表格中的表格</caption>
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>
<tr>
  <td>这个单元格包含一个列表
   <ul>
    <li>apples</li>
    <li>bananas</li>
    <li>pineapples</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>

image.png

框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
iframe标签

  • height 和 width 属性用来定义iframe标签的高度与宽度。
  • frameborder 属性用于定义iframe表示是否显示边框，设置属性值为"0"可移除
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.runoob.com" target="iframe_a">
	RUNOOB.COM</a></p>

<p>因为 a 标签的 target 属性是名为
	iframe_a 的 iframe 框架，
	所以在点击链接时页面会显示在 iframe框架中。</p>

image.png

网页对于嵌套的设置：
X-Frame-Options
这个有三个可配置值

  • DENY：表示该网站页面不允许被嵌套，即便是在自己的域名的页面中也不能进行嵌套。
  • SAMEORIGIN：表示该页面可以在相同域名页面中被嵌套展示。
  • ALLOW-FROM uri：表示该页面可以在指定来源页面中进行嵌套展示。

#### 脚本标签

标签

  • 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
  • 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
  • 只有在浏览器不支持脚本或者禁用脚本时，才会显示 元素中的内容：
<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

在这里插入图片描述

天马行空的程序猿
关注
  • 38
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
前端性能优化原理与实践
08-20
为了使同学们耐心学习一些理论性稍强的知识，我也会尽自己所能去讲述得有趣、易读、可用，同时希望大家可以真的沉下心去理解这些知识，它们与大家喜闻乐见的框架和工具无异，一样是实实在在的生产力。 “经验丰富...
Web前端黑客技术解密
10-30
Web前端的黑客攻防技术是一门非常新颖且有趣的黑客技术，主要包含Web前端安全的跨站脚本（XSS）、跨站请求伪造（CSRF）、界面操作劫持这三大类，涉及的知识点涵盖信任与信任关系、Cookie安全、Flash安全、DOM渲染、...
前端不为人知的一面--前端冷知识集锦
weixin_34228387的博客
04-10 166
前端已经被玩儿坏了！像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了，像用||操作符给变量赋默认值也是人尽皆知的旧闻了，今天看到Quora上一个帖子，瞬间又GET了好多前端技能，一些属于技巧，一些则是闻所未闻的冷知识，一时间还消化不过来。现分类整理出来分享给大家，也补充了一些平时的积累和扩展了一些内容。 HTML篇 浏览器地址栏运行JavaScript代码 这个...
前端必备：10个有趣的 JavaScript 开发技巧，让编码更轻松
你若盛开，清风自来
07-03 538
它返回一个新的函数，该函数在首次调用后，会设置一个定时器，在指定的延迟后执行传入的函数。当再次调用函数，并传入相同的 key 时，函数会直接从缓存中获取数据，避免了重复的数据获取操作，提高了函数执行效率。除了更简洁的写法，箭头函数还有其他特性，比如更方便的处理回调函数和简化的语法结构。在严格模式下，一些常见的编码问题会被捕获并抛出错误，这有助于发现和消除潜在的 bug，并提高代码的可靠性。在编写代码时，应该尽量减少全局变量的使用，并采用适当的方法来限制变量的作用范围，以提高代码的可维护性和可复用性。
14款炫酷好玩的前端特效代码分享（附在线演示效果）
qq_50594742的博客
12-15 3149
分享14款非常不错炫酷的前端特效源码 其中包含css动画特效、js原生特效、svg特效等 下面我会给出特效样式图或演示效果图 但你也可以点击在线预览查看源码的最终展示效果及下载源码资源。
有用的一些前端技术
ys_dd的博客
09-08 398
如何实现快速生成朋友圈海报分享图 https://developers.weixin.qq.com/community/develop/article/doc/000ac686c5c5506f18b87ee825b013
几个非常有意思的javascript知识点总结
趣谈前端
04-17 1470
作为一名前端爱好者, 笔者利用空余时间研究了几个国外网站的源码,发现不管是库,还是业务代码,都会用到了一些比较有意思的API,虽然平时在工作中部分接触过,但是经过这次的研究,觉得很有必要...
个人前端知识集合汇总react、vue、typescript、js、css、html、前端面试题、设计模式、有趣的前端demo
最新发布
04-03
个人前端知识集合汇总，计划囊括react、vue、typescript、js、css、html、前端面试题、设计模式、有趣的前端demo等.zip
前端常用小知识点总结
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
07-25 752
一、文字输入回车转换为– var text = (‘.wra′).html();text=text.replace(/[\n\r]/g,′′)(‘.wra′).html();text=text.replace(/[\n\r]/g,″)(‘.wra’).html(); text=text.replace(/[\n\r]/g,’ ’) (‘.wra’).html(text);...
有关前端的一些小知识
hbshhb的博客
05-19 212
有关前端的一些小知识 1.在form表单中，如果input标签的type是checkbox，那么将会提交标签的value属性的值 2.JQ获取单选框的内容，把它们name设为一样，name一样的为一组，然后判断它们的checked，如： addrId=$('input[name=addr]:checked').val() 3.JS中获取页面数据都是string类型，比如传递过来的是一个切片[3,...
分享 30+ 个常用的前端技术知识点
热门推荐
前端达人
05-23 1万+
前端要会打组合拳，复盘30+技术点打出的功能一、前言tips：总结。①会用才算学到，能灵活运用打组合拳是学会的标志之一。②每一个技术点都值得优写优学，当他们组合在一起可能会有惊喜。③要用的时候能想到，想到的时候会用，用的时候能优雅，就是精通了。这也是我坚持写“每个技术点都值得优学优写系列”的初衷。④写到后面有点疲惫，其实可以算是50+的知识技术点，组合一起偷懒了。⑤前端是...
趣味学习前端小技巧
qq_45431103的博客
07-31 522
最近无意中看到一些前端趣味学习网站，总结分享一哈（ps：小编也是前端初学小白，欢迎各位大牛指教哦
技术分享：前端开发小技巧
qianfeng_dashuju的博客
08-25 3148
一般人不知道的黑科技 今天, 我们来说几个前端比较冷门, 不是很常用的小玩意 标签语句 JavaScript 语言是允许语句前面有标签的, 但是和 html 的标签不是一个意思 相当于一个定位符的作用 比如看一下下面这段代码 for (var i = 1; i <= 3; i++) { console.log('开始吃第 ' + i + ' 个包子') for (var j = 1; j <= 3; j++) { if (i === ..
好玩的css3技术分享
weixin_44538083的博客
01-17 621
开发工具与关键技术：DW，css3 作者：陈梅 撰写时间：2019年1月16日 说到css3是我学编程以来，最感兴趣的一门技术，通过老师的学习，再自己的摸索一下。只学会css3一些简单的技术。 那我就分享一下我学习到的css3动画吧！首先页面布局什么的就不多说了，定好div，弄好背景图片，设计好背景图片的尺寸，我们就开始设计动画效果了。 ``` .lizi{ position: absolu...
好玩的前端技术开发，给你刺激
习惯就好了(✿◡‿◡)
05-31 772
本文前端地址：http://www.manonggu.com/biancheng/412 你还在为不会做按钮组被老板骂而忧心忡忡吗，你还在为拼不过同事的才华而羡慕嫉妒吗，静下心来享受前端“福利”   下一篇bootstrap静态框的前端：http://www.manonggu.com/biancheng/413
有趣实用的前端技术（3个月总结）
陈嗯嗯的博客
09-02 2241
1.国际化 2.vue前端性能优化 该项目是企业级项目，不断增加新功能。导致项目肿大，加载需要32s(简直恐怖)。后面通过gzip，路由懒加载，cdn加速等方法提速到毫秒级别。 3.cnzz页面埋点 vue的页面埋点方法比较特殊，需要改点东西。 事件埋点，通过对某些事件进行埋点，如：某些点击是用户最常用的。就可以知道用户的心理。 （没有图，因涉及公司数据。） 4.im客服沟通（离线版） 众所周知，websocket是实时通讯的，使用websoket可以做到实时通讯，小微信的功能，但一旦通讯断开就会无法通
深入前端学习原来这么有趣 第1期
MrXu的博客
07-01 851
我总想写点东西，可是写出来的东西并没有我想的那么好（少的可怜的阅读量证明了这一点），这些事情令我懊恼了很久。可以说是在写作过程中我渐渐的忘记了写作的初衷（从别人的文章中获取了知识，得到了答案。有应该分享自己的知识，解决别人的困难）。这可能也是导致我写的比较多，但是质量不佳的原因吧。 我是阮一峰的忠实读者了，他写的每一篇文章我都会读，敬佩他的文笔与见解，写 “每周分享”这个主题也是借鉴的阮大大，...
前端技术分享和发展网站总结
Calamus
03-02 2665
github上有人总结的不错，分享过来 https://github.com/foru17/front-end-collect https://github.com/jsfront/src/blob/master/qq.md 下面我自己拿来看的，慢慢更 segmentfault stackoverflow w3ctech cnodejs社区 前端乱炖 ruby-chin...
很不错实用的前端工具
qq_35876316的博客
05-08 1310
▍CSS 相关 ●1CSSBattle-在线比拼 CSS https://cssbattle.dev 在线比拼 CSS ，一个挺有趣的竞争性游戏，一共有12个级别，需要你用 HTML和 CSS 100%还原它给出的页面，然后再尽量减少代码，你也可以查看全球的排行榜，看解决方案。 ●2Learn CSS layout - 学习CSS 布局 http://learnlayout.com 在线CSS布局学习，它会一步一步引导初学者学习 CSS 基础知识，在实践中帮助初学者...
写一份漂亮的前端页面
08-22
总之，写一份漂亮的前端页面需要综合运用设计、交互和技术的知识，在保证用户体验的同时，注意页面的性能和兼容性。 ### 回答2： 作为一名前端开发者，我理解您的需求是要求一份漂亮的前端页面。要写一份漂亮的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

天马行空的程序猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值