HTML
第 1 章 HTML 基础
1. 概念：b/s 与 c/s
1.1 架构了解
现在的软件开发的整体架构主要分为 B/S 架构与 C/S 架构：
b/s：浏览器/服务器
c/s：客户端/服务器
客户端：需要安装在系统里，才可使用
浏览器：浏览网页，读取 HTML 并显示
服务器：处理浏览器的请求
1.2 b/s 与 c/s 优劣
- b/s 只要能上网就能使用，因为基本每台电脑都会有浏览器，维护方便。
- c/s 必须安装在系统中，安装成功才可使用。在新的系统中没有安装不能使用， 便携性差，维护成本高。
1.3 网页
- 浏览器中显示的内容，浏览器是网页的展示器。编写好的网页，放在浏览器中即可 运行。编写网页我们使用的就是 HTML 语言
2. HTML 简介
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)，我们也将 html 称为标签 语言。他不是编译性语言，不是编程语言。只是一种标记标签，html 用定义好的标记标签 来描述网页。
- Html 网页文件的后缀名一般为.html。
3. HTML 基本语法
- 标签：由一组<>包围的关键字，表示标签的开始如:
。由</>包围的关键字表示标签 的结束
，标签中间可以有内容体，如：
<div>我是div标签</div>。
- 标签之间不能交叉，标签如果不是自结束标签（
）必须成对出现。标签可以嵌套 - HTML 不区分大小写，但是推荐使用小写。
- 标签中的属性必须有值，值必须使用单引号或双引号引起，如：
<font color=”red”></font>
4. 第一个 HTML 页面
HTML实例：helloworld.html
<!-- 第一行声明 html 文档类型 -->
<!DOCTYPE html>
<!-- html 标签之间的文本描述网页 -->
<html>
<!-- head 之间的内容表示这个网页的头信息，如网页的标题，编码等 -->
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<!-- body 这个里面的内容是网页要显示出来的内容 -->
<body>
Hello World
</body>
</html>
5. HTML 的常用标签
5.1 标题标签 h1~h6
<h1>你好</h1>
5.2 段落标签 p
<p>锄禾日当午</p>
5.3 换行标签 br
<br />这是个自结束标签
5.4 无序列表 ul li
- ul 和 li 是组合标签，需要一起使用
<ul>
<li>天王盖地虎</li>
<li>雪碧两块五</li>
</ul>
运行结果：
5.5 图片标签
- img
<img src=”美女.jpg”/> src 表示图片的位置
- 相对路径：
（1）图片和页面在同一级目录：图片名可以直接引用图片。
（2）图片在页面的下一级目录：目录/图片名可以引用图片。
（3）图片在页面的上一级目录：…/图片名可以引用图片。
…/ 返回上级目录
5.6 超链接标签 a
<a href=”1.html”>去 1.html</a>
href 表示点击后跳转去的位置
6. HTML 中的表格
HTML 中的表格使用 table 标签创建，表格由行（tr）组成，行由单元格（td）组成
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
</table>
运行结果：
7. HTML 中的表单
表单类似生活中的单据，票据，申请表之类的东西，生活中我们经常会填写很多表单，比如 入职申请表，入学登记表，员工信息表等。
<!—from 标签用来创建表单 -->
<form action="">
<!--input 标签用来创建表单项，type 值就是收集的数据的类型 -->
文本框:<input type="text" name=""/>
密码框:<input type="password" name=""/>
单选框:<input type="radio" name="" value=""/>
多选框:<input type="checkbox" name="" value=""/>
下拉列表：
<select name="">
<option value=""></option>
</select>
<!--type 值为 submit 的按钮为提交按钮，点击时 form 表单会收集有 name 属性的表单项数 据提交给 action 中的地址 --> 提交按钮:<input type="submit"
value="按钮上的文字"/>
</form>
运行结果：
8. HTML 中最重要的元素 DIV 和 SPAN
- Div 是 html 中最灵活最重要的元素，div 就像一个小箱子，里面可以装很多内容。他是块 级元素，他会占用网页的一行。Div 可以通过调整自己的样式来完成网页的复杂布局
- span 是内联元素，只会占用自身的大小，主要用来为选中文字设置样式。并没有什么实 际意义
eg:
9.HTML 中的转义字符
- 空格
 
- “<”
<
- “<”
>
1639
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
