当前标签 / HTML / 总共6篇

HTML+CSS基础

· 大约 200 个字 · 预计 1 分钟 读完
书籍
书籍 · HTML · CSS

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

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

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

阅读更多

Web前端基础（5）JavaScript基础

· 大约 300 个字 · 预计 2 分钟 读完
Web前端 · 基础
Web · HTML · CSS · JavaScript

字符串

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

1
2

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

字符串长度

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

1
2

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

转义字符

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

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

1

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

阅读更多

Web前端基础（4）JavaScript基础

· 大约 500 个字 · 预计 2 分钟 读完
Web前端 · 基础
Web · HTML · CSS · JavaScript · 函数

JavaScript基础

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

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

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

1

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

JavaScript用法

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

<head> 中的 JavaScript 函数 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

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

<body> 中的 JavaScript 

1
2
3
4
5
6
7
8
9

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

外部的 JavaScript 

1
2
3
4
5
6

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

阅读更多

Web前端基础（3）CSS基础知识

· 大约 700 个字 · 预计 4 分钟 读完
Web前端 · 基础
Web · HTML · CSS · JavaScript

浏览器兼容问题

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

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

1
2

 _height: 4px;
 _font-size: 0px

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

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

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

1
2

overflow: hidden;
_zoom:1;

阅读更多

Web前端基础（2）CSS 基础知识

· 大约 900 个字 · 预计 4 分钟 读完
Web前端 · 基础
Web · HTML · CSS · JavaScript

CSS 基础知识

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

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

css样式语法结构 css样式语法结构

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

样式分类

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

  • 外部样式表 (External style sheet)
1
2
3

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

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

  • 内部样式表 (Internal style sheet)

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

1
2
3
4
5
6
7

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

内联样式不建议使用

1

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

阅读更多

Web前端基础（1）HTML基础知识

· 大约 400 个字 · 预计 2 分钟 读完
Web前端 · 基础
Web · HTML · CSS · JavaScript

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新建文件

阅读更多