前端（一）

最新推荐文章于 2024-03-28 22:24:41 发布
最新推荐文章于 2024-03-28 22:24:41 发布
阅读量88 收藏
点赞数
文章标签： html html5 css css3 javascript
原文链接：https://zhuanlan.zhihu.com/p/183185523
版权

常见浏览器内核介绍

浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。

浏览器内核

浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。

Trident(IE内核) 国内很多的双核浏览器的其中一核便是 Trident，美其名曰 “兼容模式”。代表： IE。Window10 发布后，IE 将其内置浏览器命名为 Edge，Edge 最显著的特点就是新内核 EdgeHTML。
Gecko(firefox) --------(火狐浏览器) 采用该内核

webkit(Safari) ------ Safari 是苹果公司开发的浏览器，所用浏览器内核的名称是大名鼎鼎的 WebKit。
Chromium/Blink(chrome) 在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome浏 览器之中。Blink 其实是 WebKit 的分支。
Presto(Oper a) （已经废弃） 是挪威产浏览器 opera 的 “前任” 内核
Android手机而言，使用率最高的就是Webkit内核。iOS以及WP7平台上，由于系统原因，系统大部分自带浏览器内核，一般是Safari或者IE内核Trident的

Web标准

Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。

主要包括结构（Structure）-----html

表现（Presentation）--------------css

行为（Behavior） ------------JavaScript

HTML骨架

HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”。是用来描述网页的一种语言。用文字来描述网页标签

标题

head标签： 文档的头部

title标签： 文档的标题

body标签：文档的主体 body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

字符集

utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。

gb2312 简单中文 包括6763个汉字

GBK包含全部中文字符 是GB2312的扩展，加入对繁体字的支持，兼容GB2312

遵循的原则：先确定语义的HTML ，再选合适的CSS。

标题标签

1.标题标签

标题1

标题2

标题3
标题3
.。。。。。
标题6

H1~h6由大到小

标题标签语义： 作为标题使用，并且依据重要性递减

  1. div span标签

div span 是没有语义的 是我们网页布局主要的2个盒子

div 就是 division 的缩写 分割， 分区的意思 其实有很多div 来组合网页。

span, 跨度，跨距；范围

这是头部

今日价格

3.段落标签

在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标签就是

文本内容

是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

  1. 图像标签img

HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签，

  1. 链接标签

文本或图像

href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用

target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。

注意：

1.外部链接 需要添加 http:// http://www.baidu.com

2.内部链接 直接链接内部页面名称即可 比如 < a href=“index.html”> 首页

3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

  1. 锚点定位

被点击

第2集

点击后的位置

7.常用的单标签

水平线


换行

  1. 文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

strong em del ins 语义更强烈

  1. 特殊字符标签

路径

实际工作中，通常新建一个文件夹专门用于存放图像文件，这时再插入图像，就需要采用“路径”的方式来指定图像文件的位置。

路径可以分为： 相对路径和绝对路径

相对路径

图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，
同一级

图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，
。

图像文件位于HTML文件的上一级文件夹：在文件名之前加入“…/” ，如果是上两级，则需要使用 “…/ …/”，以此类推，

绝对路径

绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的

<img src=” http://www.itcast.cn/images/logo.gif” />http://www.itcast.cn/images/logo.gif<img src=” http://www.itcast.cn/images/logo.gif” />

列表标签

容器里面装载着文字或图表的一种形式，叫列表。

列表最大的特点就是 整齐 、整洁、 有序

无序列表

无序列表的各个列表项之间没有顺序级别之分，是并列的。

  • 列表项1
  • 列表项2
  • ......
    1. 中只能嵌套
    • ，直接在
        标签中输入其他标签或者文字的做法是不被允许的。
      • 与
      • 之间相当于一个容器，可以容纳所有元素。

      • 无序列表会带有自己样式属性，放下那个样式，一会让CSS来！

      2.有序列表

      有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义.

      1. 列表项1
      2. 列表项2
      3. 列表项3
      4. ......

      所有特性基本与ul 一致。

      1. 自定义列表

      定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

      名词1
      名词1解释1
      名词1解释2
      ... 名词2
      名词2解释1
      名词2解释2
      ...
      春夏秋冬320
      关注
      • 0
        点赞
      • 踩
      • 0
        收藏
        觉得还不错? 一键收藏
      • 0
        评论
      HTML——标签，路径，锚点，列表
      流楚丶格念的博客
      06-24 4717
      这里写目录标题标签换行标签(熟记)div span标签(重点)文本格式化标签(熟记)标签属性图像标签img (重点)链接标签(重点)锚点定位 （难点）base 标签 基本的注释标签路径(重点、难点)相对路径绝对路径列表标签无序列表 ul （重点）有序列表 ol （了解）自定义列表（理解）链接小案例 标签 换行标签(熟记) 单词缩写： break 打断 ,换行 在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签 &l
      HTML（三）锚点与列表
      Insane_Loafer的博客
      09-29 248
      锚点标签 <a name="ziti">....</a> 作用：同一个文档中创建指向该锚(位置)的链接 定义是用的name属性，锚点链接使用href属性并在锚点名称前加上#号进行定位 示例： <h1>目录<h1> <h2><a href=" #duanluo">段落标签</a></h2> <h2><a href= "page1. html#ziti">字体标签</a>&lt
      Html学习笔记4：路径和锚点
      孔孟老儿
      09-25 472
      目录结构语法：同一目录下：直接文件名.后缀名或./文件名.后缀名。子目录下：xxx/文件名.后缀名。孙子目录下：xxx/xxx/文件名.后缀名。父目录下：../文件名.后缀名。爷爷目录下：../../文件名.后缀名。锚点： <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"
      ＜a name=“maodian“＞锚点标签
      qq_34771938的博客
      07-05 434
      标签结构： <a name="name"></a> 常用属性： name：设置锚点的名称。 示例： 锚点必须先定义，再使用。 1.定义示例 <a name="first page">锚点一</a> 2.使用示例 <a href="#first page">锚点一</a> 注：在锚点名称前面加上“#”...
      HTML常用标签之锚点标签
      anig2014的专栏
      03-06 2813
      本章学习锚点标签, 类似于超链接标签, 或者说属于超链接标签的一种. 四. 锚点标签  1. 作用: 一种网页内部的超链接(不是网站内部), 在页面中一个位置设置锚点, 可从其他位置返回到这个锚点, 类似与常见的返回顶部的功能.  2. 属性作用:  name">XXX  任意字符 代表返回顶部 --> 3. 代码示例: <!-- 注意:1.超连接
      前端一年经验面试题详解1.0
      最新发布
      04-01
      前端一年经验面试题详解1.0
      前端大屏展示框架一
      10-20
      大屏展示的框架，，，，，
      dashboard前端
      04-21
      "dashboard前端"是一个关于构建和设计用户界面的专题，主要关注的是前端开发中的仪表板（Dashboard）部分。在Web应用程序中，仪表板通常用于展示关键数据指标、统计数据和操作控制，为用户提供一目了然的信息概览。...
      前端一个包就能从测试晋级生产的配置方案
      01-19
      前端打同一个包从测试晋升到生产环境的方案，是一种高效、可靠且易于维护的部署方式。在这种方案中，前端代码在开发完成后，经过测试验证无误后，可以直接打包部署到生产环境，无需进行额外的配置或修改。这样可以...
      前端优化总结
      03-23
      前段时间简单的研究了下前端优化相关的知识，本文算是一个阶段性的总结，或者当做一个优化的参考List。前言前端是庞大的，包括HTML、CSS、Javascript、Image、Flash等等各种各样的资源。前端优化是复杂的，针对...
      HTML常用标签（4）————锚点标签
      wzqnls
      07-06 1298
      练习时可使用如下代码： 建立锚点标签 第一篇 第二篇 第三篇 aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa
      链接标签及锚点标签
      zhou1742213872的博客
      03-28 101
      【代码】链接标签及锚点标签。
      目录锚点Demo
      随便写写
      02-27 349
      title: 目录锚点Demo。
      html a 标签 锚点,a标签中的锚点使用方法
      weixin_39922749的博客
      06-16 347
      今天要和大家分享的是a标签中的锚点的使用方法在html5中，标签有一种用途，是能够在当前文档中用来作为一个标记，提供一个可以直接衔接的标签。例如，一个大的文档可能有好几个部分，我们可以在文档的顶部放置到每个部分的衔接，以允许用户很容易的访问每个部分。为了文档中创建一个锚点，我们使用标签的name属性。例如，下面代码在“第一章”的头部创建了一个“chapter1”锚点： 第一章 为了衔接到锚点，我们...
      html中<a>标签中锚点的用法
      weixin_34034670的博客
      11-15 214
      在html中,<a>标签作为超级链接使用频繁，然后我们在日常浏览网页的时候，经常会看到它的另一种作用--锚点。通俗来说就是给页面的某些位置打上“标记”日后便于寻找。 实际生活中，我们在浏览一个较长的页面时，往往会看一个类似“top”的控件，实际上这就是锚点的作用，当我们触发这个控件时便能回到页面顶部，即回到页面标记的锚点位置。下面看一下具体代码：<!D...
      js 根据文章内容生成目录，锚点链接跳转，根据标题生成目录
      PrimaryColor
      03-11 1583
      效果图： 我们都知道锚点链接的跳转是通过<a href="#t0">标题</a>和<a name="t0"></a>实现的，点击a标签后，会跳转到与当前href值（除#号）与之相同的a标签name值的位置。 一般的文章都是都过h1-h5标题和p标签的富文本来实现，有些为了美观，比如csdn，只有总共1-3级标题，所以我们可以通过遍历文章内容的标题标签，进行生成对应的目录。 代码： <!DOCTYPE html> <html.
      文章标题目录锚点定位功能
      ITMrZhu的博客
      03-03 1210
      想必大家开发网站，可能会用到一些文章或者一段长篇幅的介绍，那么方便用户阅读与定位，这个功能就十分方便啦 最近刚开发的新站中，对于软件的介绍内容，需要做标题的提取与锚点定位，就如下图效果所示： 项目地址在www.macw.com 软件内容展示页面中 这个时候，对于后台动态生成的内容，我们如何去提取标题并且生成目录呢，又如何去确定标题所在文档的高度，并且在图片加载完成后不影响高度的定位？ 从思路上，...
      HTML a标签链接路径问题
      小破孩的博客
      11-30 1000
      最近在自学django框架，在学到request的属性是遇到了a标签的一个坑，现在总结一下此坑： / ├───a │ ├───c.html │ ├───d.html ├───e.html 如上所述，假设当前访问的地址为：www.xiaopohai.xin/a/c.html 若要访问e.html,则应写成： `<a href=”/e.html”>`
      文章内部设置目录，锚点
      weixin_30627381的博客
      06-10 186
      <html> <head> </head> <body> <p style="margin-left: 60px;">一、<a href="#title01">跳转</a></p> <div style="width:100%;height:800px;">22222</...
      前端一个input框后端怎么连接这个前端input java代码
      07-08
      - 在Java后端中，创建一个Servlet类来处理前端表单的提交。你可以使用`doPost()`方法来接收表单数据，并进行处理。 - 在Servlet中，使用`request.getParameter("inputName")`来获取输入框的值，其中"inputName"是...
      评论
      添加红包

      请填写红包祝福语或标题

      个

      红包个数最小为10个

      元

      红包金额最低5元

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

      抵扣说明：

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

      余额充值