二:html 入门 2.1 引入 软件结构分类: C-S 结构(Client - Server 客户端 - 服务器端) 典型应用: 飞秋、QQ 特点: 1)必须安装特定的客户端程序 2)服务器软件升级,客户端的软件同步升级!
B-S 结构(Broswer-Server 浏览器 - 服务器端) 典型应用: 163 网站,华育官网,游戏官网。。。 特点: 1)不需要特定的客户(只需要浏览器软件) 2)服务器软件升级,浏览器客户端不需要升级!
结论: java 就业班开发的软件,大部分都是基于 BS 结构的! 2.2 网站 服务器端的软件都是基于 bs 结构的,这个软件俗称叫 "网站"。网站是由网页组成。一个网页就是由 html 页面组成。 html 是一门网页制作的语言。
2.3 html 语言 html 是第一门网页制作语言,最简单的一门语言。hyperText Markup Language 超文本标记语言。 html 语言由标记组成。学习 html 语言,掌握一些常用的标记即可! 2.4 超级文本(写一个简单的超文本演示效果) 文字变色 文字大小变化 显示图片 …….. 这些超级文本通过标记实现效果的。
三: 3.1 基本标签 –html 开始标签 – 文件头(用户在浏览器的主体是看不到的)
- --文件体(用户在浏览器的主体看得到)
- –html结束标签
- 3.2 head文件头
- 作用:告诉浏览器如何解释该html页面
- 3.3 文本标签(body里面的标签)
- 标题(h1~h6) align:设置位置
- 水平线(hr) color:线的颜色
- 换行(br)
- 标签规定粗体文本(b)
- 将文本以斜体显示(i)
- 将文本以下划线显示(u)
- 段落(p)(书写两段小说进行演示)
- 段落缩进(blockquote)(主要用于解释或者强调)
- 上下标(sup和sub)(一般用于公式)y=x2 H2O CaCo3
- 原样输出(pre)(希望网页上的东西和代码里面写的样式完全一样的时候(写一首诗,写一段代码))
- 好雨知时节,当春乃发生。
- 随风潜入夜,润物细无声。
- 野径云俱黑,江船火独明。
- 晓看红湿处,花重锦官城。
- marquee:
- behavior属性值(alternata:来回滚动 scroll:重复滚动 slide:不重复滚动
- bgcolor:字幕背景颜色
- direction:设置字幕的滚动方向down right left up
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- 文本标签
- </title>
- </head>
- <body>
- <!--标题标签-->
- <h1 align="center">
- 标题1
- </h1>
- <h2 align="center">
- 标题2
- </h2>
- <h3 align="center">
- 标题3
- </h3>
- <h4 align="center">
- 标题4
- </h4>
- <h5 align="center">
- 标题5
- </h5>
- <h6 align="center">
- 标题6
- </h6>
- <hr color="#669999" />
- <b>
- 我是b标签
- </b>
- <br />
- <i>
- 我是i标签
- </i>
- <br />
- <u>
- 我是u标签
- </u>
- <br />
- <p>
- 这是小说的第一个段这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落落
- </p>
- <p>
- 这是小说的第二个段落这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段
- </p>
- <blockquote>
- 解释说明上述文解释说明上述文字解释说明上述文字解释说明上述文字解释说明上述文字解释说明上述文字解释说明上述文字解释说明上述文字解释说明上述文字解释说明上述文字解释说明上述文字字
- </blockquote>
- <hr />
- y=x
- <sup>
- 2
- </sup>
- <br />
- H
- <sub>
- 2
- </sub>
- O
- <br />
- CaCO
- <sub>
- 3
- </sub>
- <br />
- <hr />
- <pre>
- 好雨知时节,当春乃发生。 随风潜入夜,润物细无声。 野径云俱黑,江船火独明。 晓看红湿处,花重锦官城。
- </pre>
- <marquee behavior="slide" bgcolor="#FF0000" direction="down">
- 刘备
- </marquee>
- <bgsound src="" loop="-1" />
- <!--有序列表-->
- <ol type="A">
- <li>
- 章子怡
- </li>
- <li>
- 刘亦菲
- </li>
- <li>
- 贾玲
- </li>
- </ol>
- <hr />
- <ul type="circle">
- <li>
- 章子怡
- </li>
- <li>
- 刘亦菲
- </li>
- <li>
- 贾玲
- </li>
- </ul>
- <hr />
- <dl>
- <dt>
- 财务总监
- </dt>
- <dd>
- 财务专员1
- </dd>
- <dd>
- 财务专员2
- </dd>
- <dd>
- 财务专员3
- </dd>
- <dt>
- 技术总监
- </dt>
- <dd>
- 程序员1
- </dd>
- <dd>
- 程序员2
- </dd>
- <dd>
- 程序员3
- </dd>
- </dl>
- <hr />
- <select>
- <option>
- 陕西
- </option>
- <option>
- 四川
- </option>
- <option>
- 广东
- </option>
- </select>
- <hr />
- <span>
- 我是sapn标签
- </span>
- <div>
- 我是div标签
- </div>
- </body>
- 2.4 超链接标签
超链接标签
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- 无标题文档
- </title>
- </head>
- <body>
- <!-- 超链接标签:<a></a>
- 两个属性:href:设置这个超链接需要连接到的资源
- target:设置打开资源的方式
- 超链接 :默认的协议为file://
- 协议:
- file:// 本地文件协议
- http:// 网络上我们一般请求都使用的是http://,这个协议是基于请求和相应的
- thunder:// 迅雷下载协议
- mailto: 发送邮件的协议
- 协议的执行流程:
- thunder://www.movie.com/shujiaoba.avi:会将这个超链接分为两个部分,
- 一个是资源地址,一个协议名称,因为我们在安装每一个软件的时候,每一个软件都会在
- 我们的注册表中注册相应的协议,找你的注册表中有哪些软件注册了该协议,那个软件注册了
- ,就会打开那个软件
- http://协议的执行流程:
- 看图
- 超链接的两个作用:
- 1:链接到你想要连接的资源
- 2:打锚点<a name="锚点名称"></a>,你想去哪里就给哪里打锚点
- 如何去到锚点处:<a href="#锚点名称">去到锚点处</a>
- -->
- <a name="top">
- </a>
- <a href="http://www.baidu.com" target="_blank">
- 超链接
- </a>
- <br />
- <a href="thunder://www.movie.com/shujiaoba.avi">
- 摔跤吧爸爸_迅雷专用通道
- </a>
- <a href="mailto:12345@qq.com">
- 发送邮件
- </a>
- <a href="#content1">
- 第一章节
- </a>
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <a name="content1">
- </a>
- 小说第一个章节的内容小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的小说第一个章节的
- <a href="#top">
- 回到顶部
- </a>
- </body>
2.5 图像标签
img 图像标签
常用属性:
src : 表示图片源位置
width: 图片宽度
height: 图片高度
alt: 替代文本。当图片的 src 属性失效时,alt 属性的内容就会生效
title: 提示文本。当鼠标放到图片上面出现。
地图 (热点区域):map
热点: area,设置图片上可以被点击的区域 (用工具做之后进行简单分析)
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- 图片标签
- </title>
- </head>
- <!-- 图片标签:img 图片标签的属性: src:连接的图片的位置 width:图片的宽度 height:图片的高度 alt:提示文本,当src属性是小的时候,alt属性才生效
- title:当鼠标放到这张图片上的时候,会给与一个文字提示 -->
- <body>
- <img src="b.jpg" alt="我是宝强" width="100" height="100" border="0" usemap="#Map"
- title="我是宝强" />
- <map name="Map" id="Map">
- <area shape="rect" coords="27,17,64,71" href="2.文本标签.html" target="_blank"
- />
- <area shape="circle" coords="84,22,11" href="3.超链接标签.html" target="_blank"
- />
- </map>
- </body>
- </html>
2.6 转义字符
在 html 语法中,存在一些特殊的字符,这些字符是不能直接原样输出。如果想让这些特殊字符原样输出的话,
那么就需要进行转义。
常见的转义字符:
特殊字符 转义字符 (以 & 开头,以; 结尾)
需求: 在浏览器中显示:标题
<<letter> > greater than
& &
需求:在浏览器中输入 华育 国际
空格
- 王老吉加上商标和版权:
- 版权 ©
- 商标 ®
- <body>
- <h1>
- 标题1
- </h1>
- <!-- 使用转义字符将上述的内容展示在页面上 < <> >
- & &
- 空格 需求:西部 开源
- 商标 ®
- 版权 © 需求:给王老吉分别加上版权和商标
- -->
- <h1>标题1</h1>
- <br/>
- &
- <br />
- <hr />
- 西部 开源
- <hr />
- 王老吉
- <sup>
- ®
- </sup>
- <hr />
- 王老吉
- <sup>
- ©
- </sup>
- </body>
2.6 表格标签 (画图讲解表格标签中的各个位置代表的标签)
来源: http://www.2cto.com/kf/201706/647676.html