safari | 易学教程

新手理解HTML、CSS、javascript之间的关系-修订

阅读更多关于新手理解HTML、CSS、javascript之间的关系-修订

几年前写过一篇博文《新手理解HTML、CSS、javascript之间的关系》，没想到网上出现了不少转载，当时没有太用心，里面的很多内容有待商榷，这里发布重新发布一篇。网页主要有三部分组成，结构(HTML)、表现(CSS)、行为(Javascript)。一、HTML、CSS、JavaScript简介和分工 1、什么是HTML（超文本标记语言 Hyper Text Markup Language），HTML 是用来描述网页的一种语言。 2、CSS(层叠样式表 Cascading Style Sheets),用来定义如何显示 HTML 元素，语法为：selector {property：value} (选择符 {属性：值}) 3、JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行对于一个网页，HTML定义网页的结构，CSS描述网页的样子，JavaScript定义网页的行为，打个比喻，HTML就像一个人的骨骼、器官，而CSS就是人的皮肤，有了这两样也就构成了一个植物人了，加上javascript这个植物人就可以对外界刺激做出反应，可以思考、运动、可以给自己整容化妆（改变CSS）等等，成为一个活生生的人；如果说HTML是肉身、CSS就是皮相、Javascript就是灵魂。没有Javascript

CSS学习笔记

阅读更多关于 CSS学习笔记

Cascading Style Sheet（层叠样式表、级联样式表） px与屏幕分辨率有关 css样式表推荐的书写顺序：显示属性（display、list-style、position、float、clear) 自身属性（width、height、margin、padding、border、background）文本属性（color、font、text-decoration、text-align、vertical-align、white-space、othertext、content)。边偏移 top：定义元素相对于其父元素上边线的距离。 right：定义元素相对于其父元素右边线的距离。 bottom:定义元素相对于其父元素下边线的距离。 left:定义元素相对于其父元素左边线的距离。例如： top:auto/长度值/百分比层叠定位属性 z-index h1和p元素之间默认会保留间隙，浏览器在标记上应用默认的上下边界为标题指定一个负的下边距边距可以是负值，填充不可以是负值 span可以单独设置样式行间距（行高）可以用line-height line-height可以不用单位，有单位的话，span将会继承实际的行距，而不会继承比例。 hr水平线的样式：基于Mozilla的李岚清使用background-color定义线的颜色，IE用color定义图片边框：img {

浅析html+css+javascript之间的关系与作用

阅读更多关于浅析html+css+javascript之间的关系与作用

三者间的关系一个基本的网站包含很多个网页，一个网页由html, css和javascript组成。 html是主体，装载各种dom元素；css用来装饰dom元素；javascript控制dom元素。用一扇门比喻三者间的关系是：html是门的门板，css是门上的油漆或花纹，javascript是门的开关； html介绍 html是用来描述网页的一种语言，它不是一种编程语言，而是一种标记语言（标记标签），总的来说，html使用标记标签来描述网页，本文就用标签来代替标记标签进行说明。标签是指<html></html>，<div></div>。标签是有语义的：标题用<h1>，表格展示用<table>，链接用<a>，无序排列用<ul>等等。标签里可带有各类属性，最基本的就是class和id。class属性的作用是引用css样式；id的作用是配合javascript使用，具有唯一性。下面举几个例子说明 l 图片标签<img>的主要属性有src，alt。src是引用图片的网络地址（必要）；alt是对这张图片的描述，如果图片加载不成功，则会显示alt的文字。 l 超链接<a>的主要属性有href，target。href是指链接要跳转的网址（必要）；target是告诉浏览器点击这个链接后要以哪种形式找开窗口，target=”_blank”是指打开一个新窗口若想了解更多关于html的资料

Problems with html RTE Editor in TYPO3 7.6 with Safari Browser

阅读更多关于 Problems with html RTE Editor in TYPO3 7.6 with Safari Browser

问题 I'm using TYPO3 7.6.32 where I have a problem with my editor in the backend with the Safari browser. In all other browsers this does not appear. Does anyone know this problem and know how to fix it? This is the screenshot of the backend in the Safari browser: Best Regard 回答1: Since the release of Chrome 73 the Rich Text Editor (RTE) of TYPO3 is broken. Safari and Chrome both use webkit as basis so I assume, the problem is the same. Since TYPO3 7.6 is End of Life (EOL) since end of November

Dates in Safari appear off by one using Intl.DateTimeFormat with en-US locale

阅读更多关于 Dates in Safari appear off by one using Intl.DateTimeFormat with en-US locale

问题 It looks like Safari's implementation of Int.DateTimeFormat assumes that the second Sunday in March will ALWAYS be the DST time cutoff which is not correct as prior to 2007 it was the first Sunday in April. It also appears that this affects the other end as well when DST ends. PS: This code is being run in Indiana, USA which is in the eastern time zone (GMT-4) More specifically... 2007 and newer: correctly for all dates. 2006: incorrectly for dates between the second Sunday in March and first

How to fix Safari mix-blend-mode: color-dodge bug?

阅读更多关于 How to fix Safari mix-blend-mode: color-dodge bug?

问题 I want to achieve some text that sits on top of an image and using mix-blend-mode: color-dodge to make the text looks better. Here is the example: https://codepen.io/pizza0502/pen/KepWGM It works perfectly in Chrome and Firefox, but in Safari, the text that is not on top of the image will become white...any solution on this? 回答1: Wrap your items in a container, isolate the container, and don't absolutely position your h1 . div { isolation: isolate; } h1 { font-size: 10rem; color: #fb4b6b; mix

iOS - Safari - images not rendering fully / cut off

阅读更多关于 iOS - Safari - images not rendering fully / cut off

问题 We are loading images in a popup, via an Ajax request, and they intermittently only partially render. I've basically removed any weird Javascript/nonsense other than the core flow - just a basic HTML image, and it is still happening - only on iOS. Once you 'rotate' the device, the image renders correctly - so, it's not a weird div floating above or anything (I can select the image in iOS debugger mode when attached to a Mac) Any help would be most appreciated. 回答1: It seems this is an issue

Exact same CSS font taking more space in Safari

阅读更多关于 Exact same CSS font taking more space in Safari

问题 I'm using this CSS to style a div: #mainSection .mainArticle .text { width: 600px; margin-top: 0px; margin-left: 20px; line-height: 26px; color: white; float: left; font-family: 'Open Sans', sans-serif; font-size: 15px; } The image below shows the difference between Safari and Chrome: I can't tell why it's this different. The font looks 'bolder' in Chrome, yet each character takes an tiny bigger length in Safari, meaning it sticks on average less chars on each line. Because the div box size

JS popup is not working on Safari (hide/show)

阅读更多关于 JS popup is not working on Safari (hide/show)

问题 Simple popup with js is not working on IPhone and IPad Tried to replace href="javascript:PopUpShow()" to onclick="PopUpShow()", but still the same, it works everywhere but Safari <a href="javascript:PopUpShow()" id="pop-show">click me</a> <div onclick="PopUpShow()"><i class="fas fa-phone"></i> </div> <div class="b-popup" id="popup1"> <div class="b-popup-content"> <a class="b-popup-close" href="javascript:PopUpHide()"> <div class="col-md-4 col-12 padding-pop"> <div class="right-cont-pop" id=

Why is my code slow in safari desktop only?

阅读更多关于 Why is my code slow in safari desktop only?

问题 I'm building a website that uses a few animations/libraries, AOS, simpleParallax and slick are the main ones. The website seems to run okay everywhere except Safari desktop. It runs fine in Chrome, Firefox, Microsoft edge, Opera, and it also runs fine in Safari on mobile, but it's extremely laggy, and choppy on Safari Desktop. This is the function I use for the sliders on the 'services' and 'faq' pages // slider (function () { var work = $('.js-work'), sliderWork = work.find('.js-work-slider'

订阅 safari