当前标签 / HTML / 总共6篇

HTML+CSS基础

本书籍是自己学习 HTML + CSS 前端技术的学习笔记,笔记最开始发布到个人博客,现在整理到这里方便查看。

作者在写作和整理过程中花费了大量时间和精力,另外服务器费用也是一笔不小的开支,如果你觉得我的文章和书籍对你有所帮助,可以请我喝杯咖啡或者农夫山泉:

如果在阅读过程中有任何疑问,可以去作者博客对应页面留言, 你也可以从我的体系树中找到对应文章。

阅读更多

Web前端基础(5)JavaScript基础

字符串

字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号

var text1 = "www.dp2px.com";
var text2 = 'www.dp2px.com';

字符串长度

可以使用内置属性 length 来计算字符串的长度

var text1 = "www.dp2px.com";
var sln = text1.length;

转义字符

代码输出
\‘单引号
\“双引号
\反斜杠
\n换行
\r回车
\ttab(制表符)
\b退格符
\f换页符

在 JavaScript 中,字符串写在单引号或双引号中,如果要在字符串中表示双引号和单引号就需要用到上面的转义字符。

var text = "my website is \"www.dp2px.com\""

阅读更多

Web前端基础(4)JavaScript基础

JavaScript基础

JavaScrip对于网页的作用有提供网页特效、用户交互、表单验证、控制结构和样式。

JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript是一种脚本语言, 主要目的是动态的控制web标准中的结构和样式(结构、样式、行为)

document.getElementById("demo").style.width = "200px";

JavaScript用法

HTML 中的脚本必须位于 <scrip>与 </script> 标签之间。 脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。 通常的做法是把函数放入部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。

<head> 中的 JavaScript 函数

<!DOCTYPE html>
<html>
    <head>
        <script>
            alert("我的第一个 JavaScript");
        </script>
    </head>
    <body>
        <h1>我的 Web 页面</h1>
    </body>
</html>

<body> 中的 JavaScript

<!DOCTYPE html>
<html>
    <body>
        <h1>我的 Web 页面</h1>
        <script>
            alert("我的第一个 JavaScript");
        </script>
    </body>
</html>

外部的 JavaScript

<!DOCTYPE html>
<html>
    <body>
        <script src="myScript.js"></script>
    </body>
</html>

阅读更多

Web前端基础(3)CSS基础知识

浏览器兼容问题

第一,IE6,不支持小于 12px 的盒子,任何小于 12px 的盒子,在 IE6 中看都大

解决办法很简单,就是将盒子的字号,设置小(小于盒子的高),比如 0px。

 _height: 4px;
 _font-size: 0px

IE6 留了一个后门,就是只要给 css 属性之前,加上下划线,这个属性就是 IE6 认识的专有属性。

第二,IE6 不支持用 overflow : hidden; 来清除浮动的

解决办法,以毒攻毒。追加一条 zoom : 1;

overflow: hidden;
_zoom:1;

阅读更多

Web前端基础(2)CSS 基础知识

CSS 基础知识

一个 HTML 文档可以显示不同的样式, CSS 指层叠样式表 (Cascading Style Sheets)

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:

css样式语法结构

CSS声明总是以分号 ; 结束,声明组以大括号 {} 括起来。

样式分类

插入样式表的方法有三种:

  • 外部样式表 (External style sheet)

    <head>
    	<link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>
    

    浏览器会从文件 mystyle.css 中读到样式声明

  • 内部样式表 (Internal style sheet)

当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 style 标签在文档头部定义内部样式表

<head>
    <style>
        hr { color : sienna; }
        p { margin-left : 20px; }
        body { background-image : url("images/back40.gif"); }
    </style>
</head>
  • 内联样式 (Inline style)

内联样式不建议使用

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

阅读更多

Web前端基础(1)HTML基础知识

HTML开发基础知识

HTML 是 HyperTextMarkupLanguage, 超文本标记语言 的缩写。是一种标记语意的文档格式。

任何纯文本编辑器都能够编辑 html,比如记事本,editplus, notepad++, vscode等。

比较有名的专门制作网页工具

  • DreamWeaver (Adobe公司的产品,过时了,不是一个好的代码编辑器)
  • Sublime (高效率的程序书写工具)
  • WebStorm (更高级的项目级别编程工具)
  • VsCode (一个强大并拥有很多插件的编辑器)

Sublime

Sublime 的中文意思是 华丽的,是 2011 年开始流行的代码编辑器,可以编辑 java, c, php 等很多语言, html, css, js 在 sublime 中支持非常好。

sublime中的常用快捷键

快捷键作用
ctrl + shift + d复制当前行
ctrl + 滚轮放大缩小文字
ctrl + shift + k删除当前行
ctrl + shift + 上箭头上移当前行
ctrl + shift + 下箭头下移当前行
ctrl + n新建文件

阅读更多