当前位置：文江博客文章教程详情

HTML 前端开发移动开发手机开发 Web 开发

Web 开发入门笔记

发布于 2021-03-03 13:05:02 字数 6780 浏览 1526 评论 0

一、大小写和空格

很多计算机，特别是Web服务器，对大小写是敏感的；浏览器，Web服务器，还有编程语言不能一致处理空格。最好使用横线而不是下划线来分离单词。

简单地说，应该在文件名中使用连字符。谷歌搜索引擎把连字符当作一个词的分隔符，但不会以这种方式处理下划线。

二、文件路径的通用规则

图片名为 test.png

要引用一个位于调用的HTML文件同级目录的目标文件，只需直接使用文件名，如 test.png
要引用一个子目录的文件，在图片名前写下文件名并加一个斜杠，如 images/test.png
要引用一个位于调用的HTML文件的父级目录的目标文件，在图片名前写下两个点并加斜杠，如 ../test.png
以上三条可以组合使用

三、HTML

HTML不是一门编程语言，而是一种用于定义内容结构的标记语言。由一系列的元素elements组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或工作。

<p> 内容 </p> 这是一个元素的示例，元素的主要部分有：

开始标签（Opening tag）：包含元素的名称，被大于号、小于号所包围。表示元素从这里开始或者起作用
结束标签（Closing tag）：与开始标签类似，只是在元素名称前多了一个斜杠。表示元素的结尾
内容（content）：元素的的内容

元素

<p class="editor-note"> 内容 </p> ，元素（Attribute）也可以有属性。属性包含了关于元素的一些额外信息，这些信息本身不应该出现在内容中。class属性可为元素提供一个标识名称，以便进一步为元素指定样式或进行其他操作时使用。属性应该包括：

1.在属性与元素名称（也可以是上一个属性）之间的空格
2.属性的名称，并接上一个等号
3.由引号所包围的属性值

建议将属性值用引号包围起来，不包含空格、" ' ` < >的简单属性值可以不适用引用。

嵌套元素

嵌套：将一个元素置于其他元素之中。结束过程类似于栈，在栈顶的先结束。

空元素

不包含任何内容的元素称为空元素。<img src="images/firefox-icon.png" alt="测试图片">这个例子中，元素有两个属性，但是没有结束标签，元素里也没有内容。图像元素不需要通过内容来产生效果，它的作用是向其所在的位置嵌入一个图像。

元素协同

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>测试页面</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="测试图片">
  </body>
</html>

<!DOCTYPE html> 文档类型。因为历史原因将它们保留，没有实际用处。
<html>元素。这个元素包含了整个页面的内容，也被称为根元素
<head>元素。这个元素放置的内容不是展现给用户的，而是包含例如面向搜索引擎的搜索关键字，页面描述和CSS样式表和字符编码声明等。
<meta charset="utf-8"> 这个元素制定了当前文档使用UTF-8字符编码
<title>元素。这个元素设置页面的标题，显示在浏览器标签页上，同时作为收藏网页的描述文字。
<body>元素。包含让用户看到的内容

图像

<img src="images/firefox-icon.png" alt="测试图片">

该元素通过包含图像文件路径的地址属性src，可在所在位置嵌入图像

还包括一个替换文字属性alt，是图像的描述内容，用于当图像不能被用户看见时展示。不能看见的原因是：用户有视觉障碍，有些错误使图像无法显示。

标记文本

标题

标题（Heading）元素可用于指定内容的标题和子标题。HTML包含六个级别的标题，<h1>-<h6> ，一般最多用到 3-4 级标题。

ps：不要使用标题元素来加大加粗字体，因为标题对于无障碍访问和搜索引擎优化等问题非常有意义。要保持页面结构清晰，标题整洁，不要发生标题级别跳跃。

段落

<p> 元素是用来指定段落（Paragraph）的，

列表元素

标记列表通常包含至少两个元素。最常用的列表类型为：

无序列表（Unordered List）。项目的顺序并不重要，用一个<ul>元素包围
有序列表（Ordered List）。项目的顺序很重要，用一个<ol>元素包围

列表的每个项目用一个列表项目（List Item）元素<li>包围

<ul> 
  <li>技术人员</li>
  <li>思考者</li>
  <li>建造者</li>
</ul>

链接

它们赋予Web网络属性，元素，a是anchor（锚）的缩写。为元素添加href属性

<a href="">Mozilla 宣言</a>

四、CSS

CSS是一门样式表语言，用它来选择性地为HTML元素添加样式。

CSS规则集

新建style.css，在xml文件head元素中，添加

<link href="styles/style.css" rel="stylesheet" type="text/css">

示例css :

p {
  color: red;
}

以上整个结构成为规则集，简称规则。

选择器（Selector）。HTML元素的名称位于规则集开始。选择一个或多个需要添加样式的元素
声明（Declaration）。一个单独的规则，用来指定添加样式元素的属性。如color: red;
属性（Properties）。改变HTML元素样式的途径。如color
属性的值（Property value）。在属性的右边，冒号后面即属性的值。

使用注意：每个规则集除过选择器都应包括在成对的大括号内；声明里要用冒号:将属性和属性值分隔开；用分号将各个声明分隔开。

多元素的选择

将不同的选择器用逗号分开

不同类型的选择器

选择器有许多不同的类型。

字体和文本

第一个找到font字体地址，在html中<link href="https://fonts.font.im/css?family=Open+Sans" rel="stylesheet" type="text/css">，为当前网页下载字体，从而使css可以对HTML元素应用这个字体。
<html>是整个页面的父元素，它所有的子元素都会继承
```
html {
  /* px 表示 “像素（pixels）”: 基础字号为 10 像素 */
  font-size: 10px; 
  /* Google fonts 输出的 CSS */
  font-family: 'Open Sans', sans-serif; 
}
```
这个规则为所有的页面设定了一个全局字体和字号。
ps:css 不支持//注释，只支持/*，并且不能嵌套。

为文档体内元素设置字号

h1 {
  font-size: 60px;
  text-align: center;
}

p, li {
  font-size: 16px;    
  line-height: 2;
  letter-spacing: 1px;
}

一切皆盒子

CSS布局主要就是基于盒模型。每个占据页面空间的块都有这样的属性：

padding：即内边距，围绕着内容的空间
border：即边框，紧接着内边距的线
margin：即外边距，围绕元素外部的空间
width：元素的宽度
background-color：元素内容和内边距底下的颜色
color：元素内容通常是文本的颜色
text-shadow：为元素内的文本设置阴影
display：设置元素的显示模式

更改页面颜色

html {
  background-color: #00539F;
}

文档体格式样式

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

width: 600px; ，强制页面永远保持600像素宽
margin: 0 auto; ，为margin或者padding设置两个值时，第一个值代表元素的上方和下方，第二个代表左方和右方。auto表示对称，是个特殊的值。
background-color: #FF9500; ，指定元素的背景颜色
padding: 0 20px 20px 20px; ，四个值分别代表上、右、下、左。
border: 5px solid black; ，5像素的黑色实体边框

页面主标题添加样式

h1 {
  margin: 0;
  padding: 20px 0;    
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

text-shadow属性，为元素中的文本提供阴影。四个值的含义如下：

第一个值设置水平偏移值。阴影右移的像素数（负值左移）
第二个值设置垂直偏移值。阴影下移的像素数（负值上移）
第三个值设置引用的模糊半径。值越大产生的引用越模糊。
第四个值设置阴影的基色。

图片居中

img {
  display: block;
  margin: 0 auto;
}

<body> 元素是块级元素，意味着它占据了页面的空间并且能够赋予外边距和其他改变边距的值。而图片是内联元素，不具备块级元素的一些功能。所以为了图像有外边距，必须使用display: block 给予其块级行为。

五、JavaScript

JavaScript是一门编程语言，可为网站添加交互功能。是一门完备的动态编程语言。

在html的head中添加<script src="scripts/main.js" async></script>，将JavaScript引入页面以作用于HTML。

JavaScript语法

行末的分号表示当前语句结束，不过只有在单行内需要分割多条语句时，这个分号才是必须的。对大小写敏感。JavaScript里一切皆对象，一切皆可存在变量里

注释

/**/ 以及// 都是可行的

事件

事件能为网页添加真实的交互能力。它可以捕捉浏览器操作并运行一些代码做为响应。鼠标的点击操作会触发该事件 onclick。

document.querySelector('html').onclick = function() {
    alert('别戳我，我怕疼。');
}

let myImage = document.querySelector('img');
//图片切换
myImage.onclick = function() {
    let mySrc = myImage.getAttribute('src');
    if(mySrc === 'images/firefox-icon.png') {
      myImage.setAttribute('src', 'images/firefox2.png');
    } else {
      myImage.setAttribute('src', 'images/firefox-icon.png');
    }
}

分享到QQ

分享到微博