黑马程序员技术交流社区

标题: 【成都校区】HTML [打印本页]

作者: 徐壹 时间: 2019-1-10 09:22
标题: 【成都校区】HTML
web 概念JavaWeb：

使用Java语言开发基于互联网的项目

软件架构：C / S

Client / Server 客户端 / 服务器端在用户本地有一个客户端程序，在远程有一个服务器端程序如：QQ，迅雷...

优点

用户体验好

缺点

开发、安装，部署，维护麻烦

B / S

Browser / Server 浏览器 / 服务器端

只需要一个浏览器，用户通过不同的网址（URL），客户访问不同的服务器端程序

优点

开发、安装，部署，维护简单

缺点

如果应用过大，用户的体验可能会受到影响
对硬件要求过高

B / S 架构详解

资源分类：

静态资源

使用静态网页开发技术发布的资源。特点：所有用户访问，得到的结果是一样的。如：文本，图片，音频、视频, html,CSS,JavaScript如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源

动态资源

使用动态网页及时发布的资源。特点：所有用户访问，得到的结果可能不一样。如：jsp/servlet,php,asp...如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器

我们要学习动态资源，必须先学习静态资源！静态资源：HTML：用于搭建基础网页，展示页面的内容CSS：用于美化页面，布局页面JavaScript：控制页面的元素，让页面有一些动态的效果

html

是最基础的网页开发语言

Hyper Text Markup Language 超文本标记语言

超文本

超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。

标记语言

由标签构成的语言。<标签名称> 如 html，xml

标记语言不是编程语言。

快速入门 语法

html 文档后缀名 .html 或者 .htm

标签

围堵标签：有开始标签和结束标签。如 <html> </html>自闭合标签：开始标签和结束标签在一起。如 <br/>

可以嵌套：（需要正确嵌套，不能你中有我，我中有你）

错误：<a><b></a></b>
正确：<a><b></b></a>

在开始标签中可以定义属性。属性是由键值对构成，值需要用引号（单双都可）引起来

html 的标签不区分大小写，但是建议使用小写。

  <html>

   <head>
      <title>title</title>
   </head>

   <body>

      <FONT color='red'>Hello World</font><br/>

      <font color='green'>Hello World</font>

   </body>

  </html>文件标签

构成 html 最基本的标签

html：html文档的根标签

head：头标签。用于指定 html 文档的一些属性。引入外部的资源

title：标题标签。

body：体标签

<!DOCTYPE html> ：html5 中定义该文档是 html 文档

文本标签

和文本有关的标签

：注释

<h1> to <h6>：标题标签（h1 ~ h6：字体大小逐渐递减）

<p>：段落标签

<br>：换行标签

<hr>：展示一条水平线

属性：
- color：颜色
- width：宽度
- size：高度
- align：对齐方式
  - center：居中
  - left：左对齐
  - right：右对齐

<b>：字体加粗

<i>：字体斜体

<font>：字体标签

<center>：文本居中

属性
- color：颜色
- size：大小
- face：字体

属性定义

color
- 英文单词：red, green, blue.
- rgb(值1，值2，值3)：值的范围：0 ~ 255。如 rgb(0, 0, 255)
- #值1值2值3：值的范围：00 ~ FF 之间。如：#FF00FF。
width
- 数值：width='20'，数值的单位，默认是 px（像素）
- 数值 %：占比相对于父元素的比例

图片标签

<img src="image/jingxuan.jpg" align="right" alt="古镇" width="500" height="500"/>

src：图片的位置

./：代表当前目录

./image/1.jpg

../：代表上一级目录

列表标签

<ol>：定义一个有序列表

<ul>：定义一个无序列表

<li>：列表项

<ol type="A">：修改列表项编号样式

<ul type="">：修改无序列表项编号样式

三种方式：
- disc：实心圆
- square：方形
- circle：空心圆

超标签

<a href="地址" target="_blank">点我</a>：新页面打开网址

href：指定访问资源的 URL（统一资源定位符）

<a href="mailto:mail@mail.cn">我的邮箱</a>

target：指定打开资源的方式

_self:默认值，在当前页面打开
_blank：在空白页面打开

div & span 标签

div：每一个 div 占满一整行，块级标签。

span：文本信息在一行展示，行内标签，内联标签。

语义化标签

html5 中，为了提高程序可读性，提供的标签

<header>：页眉

<footer>：页脚

表格标签

table：定义表格
- width：宽度
- border：边框
- cellpadding：定义内容和单元格的距离
- cellspacing：定义单元格之间的距离。如果指定为 0，则单元格的线会合为一条
- bgcolor：背景色
- align：对齐方式
tr：定义行
- bgcolor：背景色
- align：对齐方式
td：定义单元格
- colspan：合并列
- rowspan：合并行
th：定义表头单元格
<caption>：表格标题
<thead>：表示表格的头部分
<tbody>：表示表格的体部分
<tfoot>：表示表格的脚部分

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2