Web 前端
1.综述
1.1 html
超文本标记语言是一种用于创建网页的标准标记语言。HTML是一种基础技术，常用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。是一种标记语言。
1.2 css
层叠样式表（css, 又称串样式列表、级联样式表、串接样式表、阶层式样式表）是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的标记语言
1.3 javascript
JavaScript是一种高级的、解释型的编程语言。JavaScript是一门基于原型、函数先行的语言，是一门多范式的语言，它支持面向对象编程，命令式编程，以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等，不支持I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持
javascript是一种客户端脚本语言
JavaScript由三个部分组成：
- 核心
- DOM
- BOM
1.4 DOM 文档对象模型
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(目前,HTML和XML文档是通过说明部分定义的)。
1.5 BOM
BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
1.5 AJax
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。(局部刷新)
1.6 综合实例
<!doctype html>
<html lang="en">
<head>
<meta charset="TUF-8">
<title>111</title>
<style type="text/css">
p {
font-size:20px;
color:red;
text-indent:2em;
}
h3 {
font-size:24px;
font-weight:bolder;
color:#ff0000;
}
</style>
</head>
<body>
<h3>
222
</h3>
<p>
HTML
</p>
<p>
css
</p>
<p>
javascript
</p>
<h3>
333
</h3>
<a href="https://www.baidu.com">baidu</a>
<script type="text/javascript">
alert("444");
</script>
</body>
</html>
2.HTML基础
2.1HTML文档结构
2.1.1基本结构
HTML文档由头部head和主体body组成：
- 在head中定义标题样式
- 在主体中定义段落等网页要显示的内容
<html>
<head>
</head>
<body>
</body>
</html>
2.2头部 head
2.2.1 title
title标签里的内容会显示在浏览器的页面标题栏上
<html>
<!-- <title>title标签也可以放到head外面</title> -->
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
页面标题显示在浏览器的标题栏上
</body>
</html>
2.2.2 元信息 meta
meta标记用来描述HTML网页文档的属性，这些信息不会显示在浏览器的页面中
<!-- 基本语法 -->
<meta name="" content="">
<meta http-equiv="" content="">
meta常用的属性分为两组：
-
name+content
- 描述网页
<meta name="keywords" content="HTML,ASP,PHP,SQL" /> <meta name="description" content="信息参数" /> <meta name="author" content="信息参数" /> <meta name="generator" content="信息参数" /> <meta name="copyright" content="信息参数" /> <meta name="robots" content="信息参数" /> -
http-equiv+content
- 提供http request响应头
<meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="refresh" content="30"> <meta http-equiv="content-type" content="text/html"> <meta http-equiv="expires" content=""> <meta http-equiv="charset" content="utf-8">
2.3 主体 body
2.3.1 基本语法
<body>
</body>
2.3.2 标记属性
Text, gbcolor background link alink vlink topmargin leftmargin等属性
<body leftmargin="50px" topmargin="50px"
text="#000000" bgcolor="#339999"
link="blue" alink="white" vlink="red"
background="body_image.jpg">
</body>
颜色表示方法：
- RGB(R,G,B)
- #000000
- red
2.4 HTML基本语法
单个标记有br, hr, link
<!-- html属性描述 -->
<body text="rgb(00,00,00)" bgcolor="#f0f0f0"
background="" link="rgb(0%,100%,0%)"
alink="white" vlink="red" topmargin="50px" leftmargin="60px">
<div id="" class="">
<h2 align="center">
123
</h2>
<hr size="2" color="#011111" width="100%"/>
<p align="left">
123
</p>
<img src="1.jpg" width="300" height="100">
<p align="right">
123
</p>
</div>
</body>
2.5 注释
<!-- -->
<comment>不建议使用comment，有的浏览器会显示comment内容</comment>
第一周作业：复习一二章，预习第三章
2.6 HTML文档编写规范
2.6.1 HTML页面编码基本规范
- 所有标记以<开始，以>结束
- 单个标记在右括号前加/
- 标签可以嵌套，但不能交叉
- 不区分大小写
- 标记中可以设置属性，属性值用双引号标注
- 左括号和标记名之间不能有多余空格，否则浏览器不能识别
- 采用缩进风格
2.6.2 HTML文档命名规则
- 扩展名可以是html或者htm，统一使用html
- 只能有数字、字母、下划线组成
- 区分大小写
- 服务器主页一般是index.html或者default.html
2.7 HTML文档类型
2.7.1 <!DOCTYPE>标记
- 基本语法
<!DOCTYPE element-name DTD-type DTD-name DTD-url>
- Element-name指定这个DTD(Document Type Definition)的根元素名称
- DTD-type指定该DTD是公用还是私人定制
- PUBLIC为标准公用
- SYSTEM为私人定制
- DTD-name指定DTD的文件名称
- DTD-url指定DTD文件的url地址
- HTML5的DTD定义:
<!doctype html>
3. 格式化文字与段落
3.1.1 向页面添加文字
-
基本语法:
<body>在这里添加内容</body>
3.1.2 标题字标记
-
标题通过
…
定义的
-
基本语法
<h1 align="left|center|right|justify"> 标题 </h1>
3.1.3 添加空格和特殊符号
HTML中通过代码控制添加空格和特殊符号
-
基本语法
<body> <®× </body>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xVNpegsP-1600267928572)(/Users/gaibb/Library/Application Support/typora-user-images/截屏2020-09-16 下午10.29.25.png)]
3.2 格式化文本标记
3.2.1 字体font标记
-
font标记用来改变默认的字体、颜色、大小等属性
-
基本语法
<font face="" size="" color=""></font>
- Size：字号
- color：文本的颜色，可以用rgb函数、十六进制数、颜色英文名称表示
- face：字体
3.3 段落与排版标记
3.3.1 段落标记 p
-
基本语法
<p align="left|center|right" color="red"> hello </p>
3.3.2 换行标记 br
-
基本语法
<br/>
3.3.3 水平分割线标记 hr
-
在浏览器上显示一条细线分割两个区域 -
基本语法
<hr size="" color="" width="" align="">- width：px或者百分比，设置水平线宽度
- size：px，水平线厚度
- color：rgb、十六进制、英文名称，水平线颜色
- Align：left, center,right，水平线对齐方式
3.3.4 拼音/音标注释 ruby rt rp
-
基本语法
<ruby> 中<rt><rp>(</rp>zhong<rp>)</rp></rt> 国<rt><rp>(</rp>guo<rp>)</rp></rt> </ruby>
3.3.5 段落缩进标记 blockquote
块级标记，浏览器在
前后添加换行和外边距
-
基本语法
<body> <blockquote> 需要缩进的内容 </blockquote> </body>
3.3.6 预格式化标记 pre
完整保留原文件中的格式定义，包括空格、缩进等
-
基本语法
<pre> a s c </pre>
扫一扫
1268
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
