Web基本知识

突然觉得除了python，掌握简单的web相关知识挺有用的，有些需要图像化界面的任务就可以写一个web来完成，简单快捷而且只要有浏览器就能运行，通用性非常好。

1 基本元素

元素 含义 元素 含义
<p> 段落 <table> 表格
<a> 链接 <tr> 表格的一行
<img> 图片 <td> 表格数据
<h1> 标题 <th> 表头
<hr> 水平线 <caption> 表格标题
<span> 一般行内元素 <div> 一般块级元素
<br> 断行

大部分元素共有的属性：

属性 描述
class 规定元素的类名
id 规定元素的唯一 id
style 规定元素的行内样式

2 CSS样式

2.1 插入样式

主要有三种方法为元素插入样式：

  • 外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
  • 内部样式表
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
  • 行内样式
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明，每条声明由一个属性和一个值组成。

selector {property: value; property: value; ...; property: value;}

2.2 选择器

  • 元素选择器
p { font-size:2em; }
  • 类选择器
info { background:#ff0; }
  • id选择器
#info { background:#ff0; }
  • 组合选择器
    - 多元素选择器。同时匹配所有E元素或F元素。
    div,p { color:#f00; }
    - 后代元素选择器。匹配所有后代元素。
    #nav li { display:inline; }
    - 子元素选择器。匹配所有子元素。子元素和后代元素的区别，你细品。
    div > strong { color:#f00; }
    - 毗邻元素选择器

2.3 定位

CSS 有两个最重要的基本属性，前端开发必须掌握：display 和 position。
display属性指定网页的布局。
position属性用于网页定位，指定网页元素的位置。

  • 绝对定位
  • 相对定位
  • 浮动定位

2.4 布局

弹性布局flex

略。

网格布局grid

首先层次上划分：
容器元素 => 网格 => 项目元素（同时也可以成为容器元素）=> 网格 => 项目元素 => ...

  • 容器(container)属性
属性 描述
display 指定一个容器采用网格布局。display: grid;
grid-template-columns 定义每一列的列宽
grid-template-rows 定义每一行的行高
grid-row-gap 设置行与行的间隔（行间距）
grid-column-gap 设置列与列的间隔（列间距）
grid-gap 上面两项的合并简写
grid-template-areas 用于定义区域。
grid-auto-flow 划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行.
justify-content 容器内整个网格的水平位置（左中右）
align-content 容器内整个网格的垂直位置（上中下）
place-content 上面两项的合并简写
justify-items 网格内项目的水平位置（左中右）
align-items 网格内项目的垂直位置（上中下）
place-items 上面两项的合并简写
grid-auto-columns 设置浏览器自动创建的多余网格的列宽。写法与grid-template-columns完全相同。如果不指定这个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽。
grid-auto-rows 设置浏览器自动创建的多余网格的行高。写法与grid-template-rows完全相同。如果不指定这个属性，浏览器完全根据单元格内容的大小，决定新增网格的行高。
  • 项目(item)属性. 项目只能是容器的顶层子元素，不包含项目的子元素.
属性 描述
grid-column-start 指定项目的位置，具体方法就是指定项目的四个边框，分别定位在哪根网格线。
grid-column-end 同上。
grid-row-start 同上。
grid-row-end 同上。
grid-column 是grid-column-start和grid-column-end的合并简写形式
grid-row grid-row-start属性和grid-row-end的合并简写形式。
grid-area 指定项目放在哪一个区域
justify-self 设置单元格内元素的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。
align-self 设置单元格内元素的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。
place-self 是align-self属性和justify-self属性的合并简写形式。

2.4 常用属性

  • CSS单位
    一些属性如width, height, font-size等需要指定尺寸单位。可用的单位有%, px, cm, pt, em, rem等。之前我一直使用%，但是后来发现在浏览器中放大时，页面中的图片无法跟随一起放大，所以我现在推荐使用em或rem作为单位。
  • em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
    浏览器的缺省字体大小是16px，你可以先将基准字体大小设为10px：
body {font-size:62.5%;}

后面统一采用em作为字体单位，2.4em就表示24px。

h1 {font-size: 2.4 em}

注意：

  1. em的值并不是固定的；
  2. 逻辑是先计算当前元素的font-size，再换算em值。如果当前元素的font-size受到父级元素的影响，那么当前元素的其他em值才会受父级元素的影响。

  • rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

  • 内边距（padding）、外边距（margin）和边框（border）

3 布局

  • 用表格布局（淘汰）
  • 用<div>和<span>布局
  • 语义元素（HTML5）
    下面主要介绍后两种。

3.1 分块布局

<div>是块级元素（block level element, 在浏览器显示时，通常会以新行来开始和结束），可用于组合其他 HTML 元素的容器。
<span>是行内元素（inline element, 在显示时通常不会以新行开始），可用作文本的容器。

<!DOCTYPE html>
<html>

<head>
<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    100px;
    float:left;
    padding:5px;	      
}
#section {
    350px;
    float:left;
    padding:10px;	 	 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
   padding:5px;	 	 
}
</style>
</head>

<body>

<div id="header">
<h1>City Gallery</h1>
</div>

<div id="nav">
London<br>
Paris<br>
</div>

<div id="section">
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>

<div id="footer">
Copyright W3Schools.com
</div>

</body>
</html>

3.2 语义元素（HTML5）

HTML5 提供的新语义元素定义了网页的不同部分：

名称 内容
header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容（比如侧栏）
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题 
<!DOCTYPE html>
<html>

<head>
<style>
header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;	 
}
nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    100px;
    float:left;
    padding:5px;	      
}
section {
    350px;
    float:left;
    padding:10px;	 	 
}
footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;	 	 
}
</style>
</head>

<body>

<header>
<h1>City Gallery</h1>
</header>

<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>

<section>
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</section>

<footer>
Copyright W3Schools.com
</footer>

</body>
</html>

3 JavaScript脚本

JavaScript是世界上最傻x的语言，没有之一。

3.1 JavaScript基本语法

3.2 HTML DOM

我们使用JS脚本主要是为了对HTML页面进行动态编辑，而两者之间的桥梁就是DOM。

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

由于HTML文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就需要通过JavaScript来操作DOM。

HTML中的JS代码：

  • 函数之外的代码在页面加载时运行
  • 函数内的代码在函数被调用时运行

通过给元素绑定事件监听器，可以在事件发生时自动调用相关的函数。有两种绑定事件监听器的方法：

  • 通过元素的onclick, onchange等事件属性绑定监听器。可以将函数定义部分的<script>放在HTML文件的<head>中。
<input type="text" id="fname" onchange="upperCase(event)">

可以通过event参数向处理函数传递事件对象。

  • 借助HTML DOM访问元素增加事件监听器。注意，采取这种方法时，绑定操作要在元素标签后面进行，否则JS无法通过id找到元素对象。
<button id="myBtn">试一试</button>
<script>
document.getElementById("myBtn").onclick=function(event){displayDate(event)};
</script>

或者

<button id="myBtn">试一试</button>
<script>
document.getElementById("myBtn").addEventListener('onclick',displayDate);
</script>

后一种实现无需显式传递event参数。

3.3 使用jQuery

jQuery是JavaScript世界中使用最广泛的一个库。
有两种方式可以导入jQuery:

  • 在线导入。可以通过 CDN（内容分发网络） 引用它。谷歌和微软的服务器都存有 jQuery 。
  • 离线导入。从jQuery官网可以下载最新版本。jQuery只是一个jquery-xxx.js文件，但你会看到有compressed（已压缩）和uncompressed（未压缩）两种版本，使用时完全一样，但如果你想深入研究jQuery源码，那就用uncompressed版本。

$是著名的jQuery符号。实际上，jQuery把所有功能全部封装在一个全局变量jQuery中，而$也是一个合法的变量名，它是变量jQuery的别名。

有了jQuery强大的选择器，就可以操作对应的DOM节点了。

  • 修改Text和HTML。无参数调用text()是获取文本，传入参数就变成设置文本，HTML也是类似操作
  • 修改CSS。调用jQuery对象的css('name', 'value')方法
  • 显示和隐藏DOM。jQuery直接提供show()和hide()方法。
  • 获取DOM信息。利用jQuery对象的若干方法，我们直接可以获取DOM的高宽等信息。
  • 操作表单。对于表单元素，jQuery对象统一提供val()方法获取和设置对应的value属性。
  • 添加DOM节点。append()把DOM添加到最后，prepend()则把DOM添加到最前。
  • 删除DOM节点。拿到jQuery对象后直接调用remove()方法就可以。
    JavaScript在浏览器中以单线程模式运行，页面加载后，一旦页面上所有的JavaScript代码被执行完后，就只能依赖触发事件来执行JavaScript代码。

on方法用来绑定一个事件，我们需要传入事件名称和对应的处理函数。jQuery能够绑定的事件主要包括：

  • 鼠标事件
    • click: 鼠标单击时触发；
    • dblclick：鼠标双击时触发；
    • mouseenter：鼠标进入时触发；
    • mouseleave：鼠标移出时触发；
    • mousemove：鼠标在DOM内部移动时触发；
    • hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。
  • 键盘事件。键盘事件仅作用在当前焦点的DOM上，通常是<input>和<textarea>。
    • keydown：键盘按下时触发；
    • keyup：键盘松开时触发；
    • keypress：按一次键后触发。
  • 其他事件
    • focus：当DOM获得焦点时触发；
    • blur：当DOM失去焦点时触发；
    • change：当<input>、<select>或<textarea>的内容改变时触发；
    • submit：当<form>提交时触发；
    • ready：当页面被载入并且DOM树完成初始化后触发。

所有事件都会传入Event对象作为参数，可以从Event对象上获取到更多的信息。

事件的触发总是由用户操作引发的，但有些时候，我们希望用代码触发change事件，可以直接调用无参数的change()方法来触发该事件。

参考

CSS Grid 网格布局教程

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/tofengz/p/12499171.html