Lecture 1 Client-side Programming:Hyper Text Markup Language HTML/Cascading Style Sheets CSS
1. Web Development Trends
1.1 Progressive Web App(PWA)
- Web apps with native-like features：具有类似原生应用的功能，如离线使用
- Cross platform capability：可在各种设备和平台上运行
- Responsive and adaptive：可以适应不同的屏幕尺寸和方向
- Installable and discoverable：可以安装到设备上
1.2 Headless Content Management System
- Technology agnostic：前端与后端分离，不绑定前端语言
- Streamlined content management：内容管理更独立，能在后端进行内容更新编辑而不影响前端的实现
- Headless CMS：通过API提供内容
- Decoupled CMS：有Presentation and Logic Layer；将内容的创建和表示分离，允许更灵活的前端实现
2. Architecture
| 对比项 | 2-Tier | 3-Tier |
|---|
| Structure | Client + Server | Client + Application + Server |
| Communication | Client ↔ Server | Client ↔ Application ↔ Server |
| Scalability | 较有限 | 较好，可独立扩展 Application Tier |
| Maintenance | 职责混合，较难维护 | 分层清晰，较易维护 |
| Separation of Concerns | Presentation + Application Logic 混合 | Presentation / Application / Data 分离,更模块化 |
3. Introduction to Client Side Programming
3.1 HTML
- 使用tags and attributes创建网页的内容与结构
- 保证浏览器能正确解析和显示
3.2 CSS
- 控制HTML文件的显示效果和外观布局
- 决定视觉元素，包括颜色字体和空间间距等
3.3 JavaScript
- 增强网页的交互与动态行为功能
- 包括表单验证，可互动内容，无需reloading的实时更新等
4. Markup Language
- programming language用来编写和执行程序并处理数据，基本形式为instructions
- markup language怎用于描述和组织文档结构，基本形式为elements/tags
- HTML就是典型的markup language
- elements reference被包含在tags中间用于表示属性和值；tags(
<>)分为start tag(包含元素名称和属性)以及end tag(不包含上述)
5. DOCTYPE Declaration
- 出现在给定的web文档开头，用于标识该文档应当依据哪个版本的HTML进行验证
<!DOCTYPE html>
6.1 Essential HTML Tag Part 1
<!DOCTYPE html>
<html></html> <!--定义整个html文档，包括<head>,<body>-->
<head></head> <!--存放网页的元信息，如<title>,<meta>等，通常不直接显示在网页上-->
<title></title> <!--定义网页标题-->
<body></body> <!--存放网页主要可见内容-->
<h1></h1> <!--一级标题，二级标题<h2>以此类推-->
6.2 CSS Properties Instruction Part 1
- CSS被用于定义styles and layouts以提升网页的外观表现
- 通过selectors定位HTML元素以应用样式规则
- 插入stylesheet的三种方式：
Inline CSS
- 直接应用在HTML元素中
- 在start tags中使用
style属性
- 优先于external and internal stylesheets
<h1 style="color:red;">example</h1>
Internal CSS
- 在
<style>tag中定义
- 将样式应用于同意文档中的多个元素
- 优先级低于inline CSS
<!DOCTYPE html>
<head>
<style>
h1 { color: red; }
p { font-size: 14px; }
</style>
</head>
<body>
<h1>Title</h1> <!--将color:red应用到此处-->
<p>Paragraph</p> <!--将font-size:14px应用到此处-->
</body>
External CSS
- 存储在单独的，扩展名为
.css的文件中
- 通过在HTML文档中使用
<link>tag链接到外部CSS文件
<head>
<link rel="stylesheet" href="style.css"> <!--style.css生效-->
</head>
<body>
<h1>Title</h1>
<p>Paragraph</p>
</body>
Essential CSS properties for Font
- color: 设置元素中文字的颜色，使用十六进制代码或对应颜色的英文
- font-size: 调整元素内文本的大小，单位为px,em,rem…
- text-align：指定元素的水平对齐方式，如left,right,center,justify
- font-weight：控制元素中文本的粗细，使用normal,bold,lighter,或100-900
6.3 Essential HTML Tag Part 2
<p></p> <!--段落，创建一段block-level文本-->
<div></div> <!--块级容器，用于组织多个元素-->
<span></span> <!--行内容器(显示在同一行)，搭配css对局部内容应用样式-->
6.4 CSS Properties Instruction Part 1
Essential CSS properties for Elements
- back：background-color：定义元素的背景颜色
- border：指定元素周围的边框样式/宽度/颜色
- 边框宽度：单位为px，%，em，rem…
- 边框样式：使用solid,dashed,dotted,double…
- 边框颜色：使用十六进制代码或对应颜色的英文
- display：定义元素的显示方式，如block,inline,inline-block,none,flex,grid…
- block element：会占用所有可用的宽度空间并在元素前后各加一行，如
div,p,h1-6,ul,il,section等，拥有width,height,margin,padding等属性，也可以包含其他的block and inline elements
- inline element：只占用容纳内容所需的空间，不会也不能创建换行符，无法定义width,height,margin,padding等
6.5 Essential HTMLTag Part 3
<img></img> <!--显示图片,需要scr属性指定文件，同时可以调整alt,width,height等-->
<a></a> <!-->创建超链接,需要href属性指定目标超链接-->
<br> <!--插入换行符，强制内容换行(自闭合无需闭合标签)-->
<hr> <!--插入水平线，分割部分(自闭合无需闭合标签)-->
- 通过各种表单元素收集用户输入，并通过HTTP request发送到服务器
- action：指定表单数据提交的位置
- method：定义提交表单使用的HTTP方法，如GET或POST
<form></form>
<!--example-->
<form action="/registration" method="GET">
- GET请求：使用URL参数从服务器中检索数据，并附加在URL中，在浏览器中可见（不能用于传输敏感信息）
- POST请求：向服务器发送数据进行处理或存储，通过HTTP request body发送，更安全的储存敏感信息
<fieldset></fieldset> <!--将相关表单元素分组组织-->
<legend></legend> <!--为fieldset提供标题-->
<input></input> <!--创建供用户输入数据的交互式输入字段-->
<label></label> <!--为input添加文字标签-->
<textarea></textarea> <!--创建多行文本输入字段-->
<select></select> <!--单/多选菜单，使用<option>定义不同选项-->
<button></button> <!--创建交互按钮，有三种类型-->
<!--1.button:触发自定义JavaScript操作-->
<!--2.submit：将表单数据发送到服务器-->
<!--3.reset：重置表单，将所有输入值清除为初始值-->
7.3 Table
<table></table>`
- border：设定边框属性
- width：指定表格或元素的宽度
- background-color：设置表格或元素的背景颜色
- text-align：对其单元格中的文本
- padding：控制内容与单元格边框之间的空间
7.4 List
Unordered List
<ul></ul>
- 表示没有特定顺序的列表
- 使用
<li></li>表示每个item
Ordered List
<ol></ol>
- 表示有特定顺序的列表
- 使用
<li></li>表示每个item
- 相关的CSS
list-style-type：
链接