首页 > 代码库 > HTML(一)
HTML(一)
1.软件结构分类
C-S结构（client - server 客户端-服务器端）
典型软件：qq
特点：①必须安装客户端服务器
②服务器端升级，客户端也得同步升级
B-S结构（broswer - server 浏览器-服务器端）
典型软件：百度，淘宝等网站
特点：①不需要特定的客户端，只需要浏览器
②服务器端升级，浏览器不用升级
网站：服务器端的软件都是基于bs结构的，这个软件俗称叫“网站”。网站是由网页组成。一个网 页就是由html页面组成。html是一门网页制作的语言。
2.HTML标签
①<html> -- HTML开始标签
<head> -- 文件头(在浏览器主体中看不到，为了告诉浏览器怎么解释这个页面)
</head>
<body> -- 文件体（在浏览器主体中可以看到内容）
</body>
</html> -- html结束标签
<html>
<head>
<!-- html注释 -->
<!-- 标题 ：在窗口的标题栏看到-->
<title>在这里添加标题</title>
<!--
html标签分类：
有标签体标签：有开始，有结束标签、 <title></title>
没有标签体标签 ： 也叫空标签 <meat />
-->
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<!-- 关键词：keywords
搜索引擎： 百度 输入 java
关键词是网页排名的一个因素。
-->
<meta name="keywords" content="java,jdbc,php" />
<!-- 描述：
标题
描述
标题
描述
-->
<meta name="description" content="java是一种面向对象语言"/>
</head>
<body>
</body>
</html>
②文本标签(body里面的标签)
标题(h1~h6) align：设置位置
水平线(hr) color：线的颜色
换行(br)
标签规定粗体文本(b)
将文本以斜体显示(i)
将文本以下划线显示(u)
段落(p)
段落缩进(blockquote)(主要用于解释或者强调)
上下标(sup和sub)(一般用于公式)
原样输出(pre)(希望网页上的东西和代码里面写的样式完全一样的时候
marquee:
behavior属性值(alternata:来回滚动 scroll:重复滚动 slide:不重复滚动
bgcolor:字幕背景颜色
direction:设置字幕的滚动方向down right left up
bgsound:
rc:需要播放的音乐路径
loop=-1(无限循环)
autostart="true"自动播放
③列表标签：
有序列表ol li（type属性更改序号类型）
无序列表ul li（用于条目的罗列，type属性更改序号类型）
项目列表标签(dl dt dd)（一般用于有层次结构的列表，一个公司员工的列表）
下拉选项：<select/><option/>
行内标签(span) (html中用的非常少，css中用的非常多)
块标签<div> (html中用的非常少，css中用的非常多)
④超链接标签
<!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>
常用的属性：
href 表示链接到的地址（文件）
target 打开资源方式 _self: 当前窗口打开， _blank: 新窗口打开
协议执行资源的基本流程（超链接的原理）：
使用协议到本地计算机的注册表中查询是否有对应协议的软件（程序），有就执行，没有就不执 行。
发布个人网站的流程：
1.域名
2.服务器
3.服务器ip和域名进行绑定
4.将网站发布到服务器
常见的协议：
file:// 本地文件协议（本地或局域网） 在href中不写就是使用这个默认协议
http:// http协议（执行流程） 通常连接到域名或IP地址
thunder:// 迅雷下载软件的协议
mailto:发送邮件协议
超链接作用；
1）链接到资源
2）作为锚点使用
打锚点： <a name="锚点名称"></a>
去掉锚点： <a href="http://www.mamicode.com/#锚点名称">内容</a>
图像标签
img 图像标签
常用属性：
src=http://www.mamicode.com/‘#/‘" /p>
width: 图片宽度
height: 图片高度
alt: 替代文本。当图片的src属性失效时，alt属性的内容就会生效
title: 提示文本。当鼠标放到图片上面出现。
地图（热点区域）：map
热点： area，设置图片上可以被点击的区域（用工具做之后进行简单分析）
3.转义字符
在html语法中，存在一些特殊的字符，这些字符是不能直接原样输出。如果想让这些特殊字符原样 输出的话，那么就需要进行转义。
常见的转义字符：
特殊字符 转义字符(以&开头，以;结尾)
空格
版权 ©
商标 ®
表格标签（画图讲解表格标签中的各个位置代表的标签）
标签：
table 表格
tr 行
td 单元格
th 表头
caption 标题
常用的属性：
border 表格的边框
width 宽度
heigth 高度
align 对齐方式。 left: 左对齐 center:居中 right：右对齐
rowspan 行合并。把多行的单元格合并
colspan 列合并。把多列的单元格合并
表单标签：
<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"/> 重置按钮
框架标签
frameset 框架集
属性：
cols: 按照列的方向来划分框架
rows: 按照行的方向来划分框架
以上两个属性的值填每个框架的比例或者长度
*号表示其他框架分配完之后剩下的比例
frame 表示一个框架，框架中包含一个html页面有2个或2个以上的frame就会包含在frameset当中。
注意：框架标签不能放在body标签中，否则无法显示。
HTML(一)