您的位置：首页 > 编程语言 > Java开发

JAVA-23-HTML入门、常用标签讲解

2017-06-15 09:05 399 查看

一、HTML入门

1.1 软件结构分类：

　　　　C-S结构（Client - Server 客户端-服务器端）

　　　　　　　　典型应用：飞秋、QQ

　　　　　　　　特点：

　　　　　　　　　　1）必须安装特定的客户端程序

　　　　　　　　　　2）服务器软件升级，客户端的软件同步升级！

　　　　B-S结构（Broswer-Server 浏览器-服务器端）

　　　　　　　　典型应用：163网站，华育官网，游戏官网。。。

　　　　　　　　特点：

　　　　　　　　　　1）不需要特定的客户（只需要浏览器软件）

　　　　　　　　　　2）服务器软件升级，浏览器客户端不需要升级！

我们主要学习的大都是基于BS结构的！

１.2 网站

　　服务器端的软件都是基于bs结构的，这个软件俗称叫“网站”。网站是由网页组成。一个网页就是由html页面组成。html是一门网页制作的语言。

1.3 html语言

　　html是第一门网页制作语言，最简单的一门语言。hyperText Markup Language 超文本标记语言。html语言由标记组成。学习html语言，掌握一些常用的标记即可！

１.4 超级文本

　　文字变色、文字大小变化、显示图片……..这些超级文本通过标记实现效果的。

二：常用标签

2.1 基本标签的讲解

<html>  --html开始标签
<head>  -- 文件头（用户在浏览器的主体是看不到的）

</head>
<body>    --文件体（用户在浏览器的主体看得到）

</body>
</html> --html结束标签

2.2 head文件头　　作用：告诉浏览器如何解释该html页面

<html>
<head>
<!-- html注释  -->
<!-- head文件头作用：告诉浏览器如何解释该html页面 -->

<!-- 标题 ：在窗口的标题栏看到-->
<title>这是标题</title>

<!--
html标签分类：
有标签体标签：有开始，有结束标签、 <title></title>
没有标签体标签 ： 也叫空标签 <meat  />
-->

<!-- 告诉浏览器使用什么码表解释html文件 -->
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>

<!-- 关键词：keywords
搜索引擎： 百度    输入  java培训
网页的排名  推广 SEO
SEO优化
关键词是网页排名的一个因素。

100% 权重  50%  33.3.%  （3-5个合适）
-->
<meta name="keywords" content="java培训,net培训,php培训" />

<!-- 描述：
标题
描述

标题
描述

标题
描述
-->
<meta name="description" content="这是一家专门做IT职业培训的公司"/>
</head>

<body>
</body>
</html>

２.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

bgsound:
src:需要播放的音乐路径
loop=-1(无限循环)
autostart="true"自动播放

2.4列表标签：

有序列表ol li（type属性更改序号类型，案例：投票喜欢的女明星）

无序列表ul li（用于条目的罗列，type属性更改序号类型，案例：学生管理系统）

项目列表标签(dl dt dd)（一般用于有层次结构的列表，一个公司员工的列表）

下拉选项：

<select/><option/>

行内标签(span) (html中用的非常少，css中用的非常多)

块标签

<div>

(html中用的非常少，css中用的非常多)

<!--有序列表-->
<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>

2.5 超链接标签

<!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>

<body>
<!-- a 超链接标签：
常用的属性：
href  表示链接到的地址（文件）
target  打开资源方式     _self: 当前窗口打开， _blank: 新窗口打开

协议执行资源的基本流程（超链接的原理）：
使用协议到本地计算机的注册表中查询是否有对应协议的软件（程序），有就执行，没有就不执行。

发布个人网站的流程：
1.域名
2.服务器
3.服务器ip和域名进行绑定
4.将网站发布到服务器

常见的协议：
file://   本地文件协议（本地或局域网）  在href中不写就是使用这个默认协议 http://    http协议（执行流程）  通常连接到域名或IP地址(画图讲解http协议执行流程)
thunder:// 迅雷下载软件的协议
mailto:发送邮件协议

超链接作用；
1）链接到资源
2）作为锚点使用
打锚点： <a name="锚点名称"></a>
去到锚点： <a href="#锚点名称">内容</a>

-->
<a name="top"></a>
<a href="03.html文本标签.html#list" target="_blank">超链接</a><br/>（在其他页面的位置打上锚点）
<a href="../1.jpg">链接到图片</a><br/>
<a href="http://www.baidu.com">链接到百度</a><br/>
<a href="http://www.moive.com/fuzhouzhe.avi">高清《复仇者联盟2》(普通通道)</a><br/>
<a href="thunder://www.moive.com/fuzhouzhe.avi">高清《复仇者联盟2》(迅雷通道)</a><br/>
<br/><a href="#ch01">去到第一章</a>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="ch01"></a>
第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容<br/>
<a href="#top">返回顶部</a>

</body>
</html>

2.6 图像标签

　　img 图像标签

　　　　常用属性：

　　　　　　src : 表示图片源位置

　　　　　　width: 图片宽度

　　　　　　height: 图片高度

　　　　　　alt: 替代文本。当图片的src属性失效时，alt属性的内容就会生效

　　　　　　title: 提示文本。当鼠标放到图片上面出现。

　　　　地图（热点区域）：map

　　　　热点： area，设置图片上可以被点击的区域（用工具做之后进行简单分析）

2.７转义字符

　　在html语法中，存在一些特殊的字符，这些字符是不能直接原样输出。如果想让这些特殊字符原样输出的话，那么就需要进行转义。

　　常见的转义字符：

　　　　特殊字符转义字符(以&开头，以;结尾)

<          <   letter than
>          >   greater than
&          &
空格        
版权       ©
商标       ®

2.8 表格标签

　　标签：

　　　　table 表格

　　　　tr 行

　　　　td 单元格

　　　　th 表头

　　　　caption 标题

　　常用的属性：

　　　　border 表格的边框

　　　　width 宽度

　　　　heigth 高度

　　　　align 对齐方式。 left: 左对齐 center:居中 right：右对齐

　　　　rowspan 行合并。把多行的单元格合并

　　　　colspan 列合并。把多列的单元格合并

2.9 表单标签：

<form>   就是一个表单
<input type="text">  单行输入域
<input type="password"/>  密码输入域
<input type="radio"/> 单选按钮
<input type="checkbox"/> 多选按钮
<select/>  下拉选项
<input type="hidden"/>   隐藏域。特点：不会显示到html页面上，但可以携带数据。
<input type="file"/>  文件选择器
<textarea></textarea>  多行输入域
<input type="submit"/>  提交按钮
<input type="button"/> 普通按钮
<input type="reset"/> 重置按钮

2.10 框架标签

　　①frameset 框架集

　　　　属性：

　　　　　　cols: 按照列的方向来划分框架

　　　　　　rows: 按照行的方向来划分框架

　　　　　　　　　（注意：以上两个属性的值填每个框架的比例或者长度）

　　　　　　*号表示其他框架分配完之后剩下的比例

　　②frame 表示一个框架，框架中包含一个html页面，有2个或2个以上的frame就会包含在frameset当中。

　　　　注意：

　　　　　　框架标签不能放在body标签中，否则无法显示！！！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html 常用标签服务器软件服务器浏览器

相关文章推荐

新的分享

章节导航