Web前端基础

一. HTML基础

1 .HTML官方的说法是“超文本标记语言”，它使用一系列的标签将一些文档总合成一个整体，最常见的就是我们的网页，通过将文字、音频、视频、图片、表格还有链接通过HTML命令写的。

HTML它是一种描述性语言，用来描述页面内容的显示方式，如：我们要写一个标题，通过对标题内容加属性来实现，就如同给游戏任务加装备加各种装饰来实现我们想要达到的各种效果；

HTML文件是纯文本文件，以".html"或".htm"为后缀，HTML它的基本组成单位是元素，语法结构如下：

<标签>
	    内容
<标签>

2. HTML文档的结构是由<html>、<head>和<body>这三大元素组成

以<html>元素来界定文档的开始和结束，所有的内容都要放在这两个标签之间
<head>元素，顾名思义，页面头部信息，用于向浏览器提供整个页面的基本信息，一般包括：页面的标题，css样式，JavaScript脚本元素等等；除了标题会显示在浏览器窗口上，其他的不会显示在界面上；
<body>元素：网页的正文，是我们在浏览器主窗口中看到的信息，包括但不限于文字、音频、视频、图片、表格等等；但不是所有的<body>内部标签都是可见的。

<head>中可以包含以下子元素：<title>、<meta>、<base>、<link>、<script>以及<style>等
页面标题位于<title>中，可以包含任何字符

meta元素用于向客户的浏览器传递信息和命令，而不是用来显示内容的。
一个<head>标签中可以包含一个或多个<meta>标签。
meta的常用属性名有 name,http-equiv,content

<meta>标签主要分为两大类：

对页面的设置，通过http-equiv属性进行指定
对搜索引擎的设置，通过name属性进行指定

<head> 
   <title>漫步时尚广场 E&amp;S</title> 
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
   <meta http-equiv="Refresh" content="5;url=http://www.itshixun.com" /> 
   <meta name="keywords" content="漫步时尚广场,时尚,购物,影视,餐饮"/> 
   <meta name="description" content="游客漫步在时尚广场,可漫步湖畔步行街,可在国际名品店、时尚精品店徜徉,在电影区感受视听震撼,在咖啡、酒吧一条街放松身心,在世界特色餐厅享受美味。 "/> 
   <meta name="author" content="QST青软实训"/> 
   <meta name="robots" content="all"/> 
</head>

HTML文档中的文本元素包括：内容标题（设置标题0、文本修饰（对文本样式进行修饰)以及特殊字符（用引用的方式实现无法直接使用的特殊字符）。（这个主要靠多用）
列表元素分为：有序列表

<ol>
   <li>列表项<li>
   <li>列表项<li>
<ol>

无序列表

<ul>
   <li>列表项<li>
   <li>列表项<li>
<ol>

定义列表

<dl>
<dt>购物区<dt>
<dd>购物区介绍<dd>
<!--第一项--!>
<dl>

H1/H2/H3 表现大纲级别
div/span/p 表现布局
使用带语义的标签可以让搜索引擎快速的进行收录
虽然不同的标签也许能够达到相同的显示效果，但是强烈建议使用语义化标签+CSS样式去控制

<style>
.hstyle {
display: block;
font-size: 2em;
font-weight: bold;
}
</style>
<h1>标题1</h1>
<span class="hstyle">标题1</spa

二页面布局

HTML中常见的布局有三种：表格布局，框架布局，以及css来布局

1.表格布局

表格将数据组织在一起用网格的方式进行显示，也常用于页面的排版与布局
表格使用行与列的方式组织信息，它主要由行、列、表头单元格、正文单元格、标题、表头行、正文行、表尾行等构成。

在HTML中，用<table>标签来创建表格元素,常见标签有:

<td> 单元格,表格的基本元素
<th> 表头单元格，定义表格头部信息 ,内容通常粗体并水平居中
<tr> 行标签,表格的水平元素
<thead> 界定表头，
<tfoot> 定义表尾，创建脚注
<tbody> 表格主体
<caption> 表格标题，显示在表格上方

表格可以包含多个<tbody>标签，用于对表格主体部分的数据进行横向分组；而<thead>和<tfoot>标签在表格中只能出现一次。

<table border="1">
    <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>内容1</td>
            <td>内容2</td>
        </tr>
    </tbody>
</table>

在嵌套表格时，内部表格应该位于外层表格的标签之间。表格虽然允许多重嵌套，但在页面设计时，当嵌套层次太多时不利于搜索引擎对页面内容的检索；因此，表格嵌套的层次不能过深，一般不要超过3~4层。

框架布局

在HTML中，使用框架集标签来划分页面的框架，使用属性rows（或cols）说明框架的行数（或列数）以及所占窗口的比例; 框架集主要负责整个页面的布局，属性包括行、列、边框、边框颜色、空白距离等属性标签用于指示框架集中每个框架的内容。

	<frameset rows="60,*,70" frameborder="yes" framespacing="8" 
	                 bordercolor="#0033FF"> 
	        <frame src="topFrame.html" /> 
	        <frame src="mainFrame.html" /> 
	        <frame src="bottomFrame.html" /> 
	    </frameset>

单个框架集只能实现具有行和列（类似网格）的固定结构的布局，当希望更加复杂的结构时，就需要通过嵌套框架集来实现，同table一样，框架布局也不要嵌套的太多

 <frameset rows="50,*,50" > 
        <frameset cols="1*,1*"> 
            <frame name="topFrame1" src="topFrame.html"  /> 
            <frame name="topFrame2" src="topFrame.html"  /> 
        </frameset>
        <frameset cols="100,*,120">
            <frame name="leftFrame" src="leftFrame.html" /> 
            <frame name="mainFrame" src="mainFrame.html" / > 
            <frame name="rightFrame" src="rightFrame.html" /> 
        </frameset>
        <frame name="bottomFrame" src="bottomFrame.html" /> 
</frameset>

内联框架是嵌入到页面中的一个区域，通过<iframe>标签引入另外一个页面资源，无需<frameset >标签协助。

css页面布局

CSS（层叠样式表）将页面内容与样式彻底分离，极大改善了HTML在页面显示方面的缺陷。
它可以控制HTML标签的显示样式，如页面的布局、字体、颜色、背景和图文混排等效果
本身HTML 元素是不具备样式的，但是在不定义样式的情况下，不同的标签也能表现不同的显示样式，原因是浏览器对不同的标签是有个默认样式的。

样式是CSS的基本单元，每个样式包含两部分内容：

选择器（Selector）：用于指明网页中哪些元素应用此样式规则。浏览器解析该元素时，根据选择器指定的样式来渲染元素的显示效果；
声明（Declaration）：每个声明由属性和属性值两部分构成，并以英文分号（;）结束css基本格式

CSS基本格式

其中，一个选择器可以包含有一个或多个声明。

在CSS样式声明中，书写格式可能有所不同，但应遵循以下规则：

第一项必须是选择器或选择器表达式
选择器之后紧跟一对大括号
每个声明是由属性和属性值组成，且位于大括号之内
声明之间需以英文分号进行间隔
最后一个声明后面的英文分号可以省略

CSS样式有以下三种格式：内嵌样式、内部样式和外部样式

（1）内嵌样式（Inline Style Sheet）又称行内样式，将CSS样式嵌入到HTML标签中可以很简单的对某个标签单独定义样式。

<p style="color:red; background: yellow;">内嵌样式-style属性</p>

<h4 style=“border:dotted thin blue; text-align:center;”>内嵌样式的使用</h4>
<span style=“color:red; font-weight:bold;”>内嵌样式</span>是混合在HTML标记里使用的，用这种方法，可以很简单的对某个元素单独定义样式。

（2）内部样式表（Internal Style Sheet）将CSS样式从HTML标签中分离出来，使得HTML代码更加整洁，而且CSS样式可以被多次使用。

内部样式表是一种写在<style>标签中的样式声明，仅对当前页面有效。
在<style>标签中定义CSS样式，然后在页面中使用CSS样式。
一般情况下，<style>标签位于<head>标签之内；
在页面加载过程中，先加载样式后加载页面元素，浏览器根据元素的顺序加载、渲染并在页面中显示出来。

（3）外部样式表是将CSS样式以独立的文件进行存放，然后在页面中引入该样式文件。

网站统一引用同一外部样式文件，使页面的风格保持一致，有利于页面样式的维护与更新，从而降低网站的维护成本。
用户浏览网页时，CSS样式文件会被暂时缓存；继续浏览其他页面时，会优先使用缓存中的CSS文件，避免重复从服务器中下载，从而提高网页的加载速度

1. 链接外部样式表

在HTML中<link>标签用于将文档与外部资源进行关联，经常用于链接网页的外部样式表.

<link type="text/css" rel="stylesheet" href="url" />

其中：

type属性用于设置链接目标文件的MIME类型，CSS样式表的MIME类型是text/css
rel属性用于设置链接目标文件与当前文档的关系，stylesheet表示外部文件的类型是CSS文件

2. 在页面的<head>标签中使用<link >标签关联style.css样式文件，然后在<body>中通过标签选择器引用样式文件中预定义的样式

3. 多重样式（Multiple Styles）是指外部样式、内部样式和内嵌样式同时应用于页面中的某一个元素。在多重样式情况下，样式表的优先级采用就近原则。一般情况下，多重样式的优先级由高到低的顺序是“内嵌à内部à外部à浏览器缺省默认”

优先级是有一个前提：内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下才可以认为离被设置元素越近优先级别越高

下列是一份优先级逐级增加的选择器列表：

通用选择器（*）
元素(类型)选择器
类选择器
属性选择器
伪类
ID 选择器
内联样式
!important 规则例外

当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里. 尽管如此, !important规则还是与优先级毫无关系.使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。

一些经验法则：

Never 永远不要在全站范围的 css 上使用 !important

Never 永远不要在你的插件中使用 !important

解释：

1. 内联样式表的权值最高 1000；

2. ID 选择器的权值为 100

3. Class 类选择器的权值为 10

4. HTML 标签选择器的权值为 1

在开发过程中，一般都是通过外链的样式表去定义页面的样式，减低代码之间的耦合，让美工专业去做页面。简单的理解就是，可以让不同的人不在同一个页面修改文件，自己关心自己的工作

JavaScript

对于编程语言的认识：

一门成熟的编程语言应该具备：变量、数据类型、运算符、控制语句（顺序结构、分支结构、循环结构）、自成体系的 API。
JavaScript 的作用

业务逻辑处理
. 对 DOM 进行操作（DOM : Document Object Model）:通过事件驱动页面模型发生变化（DOM 树中元素的增删改查，特别是改：改内容，改样式），JavaScript 能操作 DOM 的原因在于 JavaScript 实现了 DOM 相关操作的接口，能满足对 DOM 的操作。

JavaScript 是弱类型语言，而且书写是比较随意的。弱语言体现在变量是没有准确的数据类型定义。通过 var 关键字定义。

弱语言体现在变量是没有准确的数据类型定义。通过 var 关键字定义。

// 动态类型,随值的变化而变化
var flag = 'abc';
flag = 12;
flag = true;
flag = {name : 'Tom'};
flag = function() {
alert("Hello,JavaScript");
}

关于 JavaScript 的判断条件

在条件表达式中，数字0和非0也可以表现为false和true

分支结构的三种表示方式

三目运算符是需要熟练掌握的，其本质就是个表达式

 var age=20;
 var str=age >= 18 ? '成年' : '未成年';
 console.log(str);

一. HTML基础

二页面布局

1.表格布局

框架布局

css页面布局

JavaScript

學習HTML必知的小知識

java如何分辨方法重寫還是重載

Python學習-必知的表達式運算符小知識

Web前端基礎

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

Web前端基础

一. HTML基础

二 页面布局

1.表格布局

框架布局

css页面布局

JavaScript

二页面布局