web开发三大件

BlueFatto
358 阅读7分钟

下面来看看测试网站应该使用什么结构。最基本、最常见的结构是：一个主页、一个图片文件夹、一个样式表文件夹和一个脚本文件夹：

  • index.html ：这个文件一般包含主页内容，即用户第一次访问站点时看到的文本和图像。使用文本编辑器在 test-site 文件夹中新建 index.html。
  • images 文件夹 ：这个文件夹包含站点中的所有图像。在 test-site 文件夹中新建 images 文件夹。
  • styles 文件夹 ：这个文件夹包含站点所需样式表（比如，设置文本颜色和背景颜色）。在 test-site 文件夹中新建一个 styles 文件夹。
  • scripts 文件夹 ：这个文件夹包含提供站点交互功能的 JavaScript 代码（比如读取数据的按钮）。在 test-site 文件夹中新建一个 scripts 文件夹。

1.html5初级

image.png html实际上是一种标记语言，他不是什么编程语言，用来定义整个页面的结构 这个元素的主要部分有：

  • 开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
  • 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
  • 内容（Content）：元素的内容，本例中就是所输入的文本本身。
  • 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。 元素之间可以嵌套，而且元素分为块级元素和内联元素
  • 块级元素：元素的内容会另起一行，之后得内容都会往下挤
  • 内联元素：元素的内容通常环绕文档的很小一部分，不会另起一行 html的标签可以添加一些属性，例如disabled，href,target等等，有一些属性是没有值的，那些是布尔属性
<input type="text" disabled>
<a href="https://www.mozilla.org/">收藏页面</a>

现在通过一个简单的html5元素组合看看一个页面的结构

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>我的测试站点</title>
  </head>
  <body>
    <p>这是我的页面</p>
  </body>
</html>



- <!DOCTYPE html>:<!DOCTYPE html> 是最短有效的文档声明。
- <html></html>: <html>元素。这个元素包裹了整个完整的页面，是一个根元素。
- <head></head>: <head>元素. 这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。以后的章节能学到更多关于<head>元素的内容。
- <meta charset="utf-8">: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。
- <title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
- <body></body>: <body>元素。 包含了你访问页面时所有显示在页面上的内容，文本，图片，音频，游戏等等。

例如python语言的字符串内想要转义一样，h5也有实体引用，用来在内容中加入可能出现的特殊符号

原义字符	等价字符引用
<	&lt;
>	&gt;
"	&quot;
'	&apos;
&	&amp;

h5的注释很简答用<！-- -->包裹住注释内容即可
h5所有元素的参考网页！！！

1.1 head标签与元数据？

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>我的测试站点</title>
  </head>
  <body>
    <p>这是我的页面</p>
  </body>
</html>

head标签的作用是用来保存html页面的一些元数据，内容不会显示。 元数据metadata是用来描述数据的数据。 我查看了MDN的head image.png 元素 <title>显示在浏览器上面的选项卡中，也被以其他的方式使用着。 比如说，如果你尝试为某个页面添加书签，（在火狐浏览器中点击地址栏末尾的星标），你会看到<title> 的内容被作为建议的书签名

<meta charset="utf-8">
<!--指定文件的编码格式-->

许多<meta>元素包含了name 和 content 特性：

  • name 指定了meta 元素的类型； 说明该元素包含了什么类型的信息。
  • content 指定了实际的元数据内容。 这种元数据类型，还是还得去查找文档，有些网站有自己的特定name

1.2在HTML中应用CSS和JavaScript

如今，几乎你使用的所有网站都会使用 CSS 让网页更加炫酷，使用JavaScript让网页有交互功能，比如视频播放器，地图，游戏以及更多功能。这些应用在网页中很常见，它们分别使用 <link>元素以及 <script> 元素。

<link> 元素经常位于文档的头部。这个link元素有2个属性，rel="stylesheet"表明这是文档的样式表，而 href包含了样式表文件的路径： <link rel="stylesheet" href="my-css-file.css">

<script> 部分没必要非要放在文档头部；实际上，把它放在文档的尾部（在 标签之前）是一个更好的选择，这样可以确保在加载脚本之前浏览器已经解析了HTML内容（如果脚本加载某个不存在的元素，浏览器会报错）。 <script src="my-js-file.js"></script> 注意： <script>元素看起来像一个空元素，但它并不是，因此需要一个结束标记。您还可以选择将脚本放入<script>元素中，而不是指向外部脚本文件。

<html lang="zh-CN">设定文档主语言
快速查找一些h5的编写方式参考文档 h5 doctor

2. javascript初级

javascrip是解释型语言，运行在客户端上，面向对象，有三种添加方式
内部的javascript

<script>
//your javascript
</script>

外部的javascript

<script src="javascript.js"></script>

内联的javascript,但是在事件后面写这样写非常不好，不易维护

<button onclick="createParagraph()">
click me
</button>

可以使用浏览器的控制台F12，输入脚本，javascript的数字默认都是双精度浮点型 image.png 那么javascript应该写在哪个位置，一个小案例,首先是需要一个index.html和style.css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="view point" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>javascript Crash Course</title>
</head>
<body>
    <div class="header">
        <h1>javascript crash course</h1>
    </div>
    <div class="container"></div>
</body>
<script src="main.js"></script>
</html>

body{
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
}
.header{
    background-color: #fff;
    border-bottom: #ccc 3px solid;
    padding: 20px;
}
.container{
    width: 700px;
    margin: 30px auto;
}

然后加入一个main.js把这三者放在一起，javascript用于写业务逻辑，和java很相近

alert(Math.PI);
alert("hello world".replace("o","aooo"));
//控制台打印
console.log("hello".length);
console.log("leo".charAt(0));
//变量
var name="leo";
let a=1;
//while循环for循环同java
do{
    var age=1
}while(a==1);
//var变量是没有作用域的,let的变量会有作用域
while(a==1){
    age=2
}
//三元运算符同java
var allowed=(age>1)? "yes":"no";
//switch语句同java，if也是
switch(name){
    case "simon":
        console.log("simon");
        break;
}
//javascript的对象有点像python的字典，和java里的对象不一样，不是类的实例
var obj1=new Object();
var obj2={};
var per={
    name: "leo",
    age: 22,
    contact:{
        cellphone: 17877778888,
        email: "leolan@qq.com"
    }
};
//对象索引
console.log(per.contact.email);
//or
console.log(per["contact"]["email"]);
//数组
var arr1=new Array();
var arr2=[];
arr2[0]="tiger";
arr2[1]="cat";
arr2[5]="doe"
//可以跨越赋值，中间的就是undefined
console.log(arr2[2])
//也可以数组也有常用的push,pop,shift,unshift等等方法
//函数定义
function add(){
    let sum=0;
    //arguments表示传入参数的集合
    for(let i=0;i<arguments.length;i++){
        sum+=arguments[i];
    }
    return sum
}
console.log(add(0,1,2,3,4,5,6,7))
//闭包
function sub(a){
    return function(b){
        return a-b;
    }
}
console(sub(2)(1))

3.css初级

参考博客：developer.mozilla.org/zh-CN/docs/…
浏览器先将标记语言和CSS转换成DOM (文档对象模型)结构。 这时DOM 就代表了电脑内存中的相应文档，因为它已经融合了文档内容和相应的样式表。 最后浏览器把 DOM的内容展示出来。

//现在html文档里添加一个p标签
<p>
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
//在style.css里加入一点内容
strong{color:red;}
//生成的dom文件树
P
├─STRONG
│ └─"C"
├─"ascading"
├─STRONG
│ └─"S"
├─"tyle"
├─STRONG
│ └─"S"
└─"heets"

css和javascript一样也有三种写的方式【 定义在外部文件（外链样式）：在外面有一个css文件，然后引用到它。 在页面的头部定义（内联样式）：通过这种形式定义的样式只在本页面内生效。 定义在特定的元素身上（行内样式）：这种形式多用于测试，可维护性较差。】

3.1 css继承

//在上面的文本中添加这一行，可以看到除了它本身定义的颜色，其他都继承自父标签
p {color: blue; text-decoration: underline;}

image.png

3.2 css类选择器以及id选择器

通过设置元素的 id 属性为该元素制定ID。ID名由开发者指定。每个ID在文档中必须是唯一的。 在写样式表时，ID选择器是以#开头的。 例： 下面的p标签同时具有 class 属性和id 属性:

<p class="key" id="principal">

Copy to Clipboard id 属性值 principal必须在文档中是唯一的；但文档中的其他标签可以有和p相同的 class 属性值 key. 在一个CSS样式表中, 下面的规则将使所有class属性等于key的元素文字颜色呈现绿色。（这些元素不一定都是

元素。）

.key {
  color: green;
}

下面的规则将使 id 等于 principal 的那个元素的文字变为粗体:

#principal {
  font-weight: bolder;
}

如果多于一个规则指定了相同的属性值都应用到一个元素上，CSS规定拥有更高确定度的选择器优先级更高。ID选择器比类选择器更具确定度, 而类选择器比标签选择器（tag selector）更具确定度。

3.3 伪类选择器

伪类列表

  • :link
  • :visited
  • :active
  • :hover 上面只是一些常见的，下面我们看一个例子：
<!doctype html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>Sample document</title>
  <link rel="stylesheet" href="style1.css">
  </head>
  <body>
    <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p>
  </body>
</html>

a.homepage:link, a.homepage:visited {
  padding: 1px 10px 1px 10px;
  color: #fff;
  background: #555;
  border-radius: 3px;
  border: 1px outset rgba(50,50,50,.5);
  font-family: georgia, serif;
  font-size: 14px;
  font-style: italic;
  text-decoration: none;
}

a.homepage:hover, a.homepage:focus, a.homepage:active {
  background-color: #666;
}
avatar
文章
阅读
粉丝