HTML基础知识

来源：互联网发布：龙泉驾校网络预约系统编辑：程序博客网时间：2024/06/02 04:50

一入门基础知识

1 软件结构分类：

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

特点：1）必须安装特定的客户端程序2）服务器软件升级，客户端的软件同步升级！

B-S结构（Broswer-Server 浏览器-服务器端）
特点：1）不需要特定的客户（只需要浏览器软件）2）服务器软件升级，浏览器客户端不需要升级！

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

3 html语言
html是第一门网页制作语言，最简单的一门语言。hyperText Markup Language 超文本标记语言。
html语言由标记组成。学习html语言，掌握一些常用的标记即可！
4 超级文本（写一个简单的超文本演示效果）
文字变色
文字大小变化
显示图片
........
这些超级文本通过标记实现效果的。

二：html基本标签的讲解

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

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

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

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

<html>
<head>

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

<meta http-equiv="content-type" content="text/html;charset=utf-8"/>

<meta name="keywords" content="步步惊心,刘诗诗" />

<meta name="description" content="这是一部好看的电视剧"/>
</head>

<body>
</body>
</html>

2.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"自动播放

列表标签：
有序列表ol li（type属性更改序号类型，案例：投票喜欢的女明星）
无序列表ul li（用于条目的罗列，type属性更改序号类型，案例：学生管理系统）
项目列表标签(dl dt dd)（一般用于有层次结构的列表，一个公司员工的列表）
下拉选项：<select/><option/>
行内标签(span) (html中用的非常少，css中用的非常多)
块标签<div> (html中用的非常少，css中用的非常多)

2.4 超链接标签
<body>

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

2.5 图像标签

img 图像标签
常用属性
src : 表示图片源位置
width: 图片宽度
height: 图片高度
alt: 替代文本。当图片的src属性失效时，alt属性的内容就会生效
title: 提示文本。当鼠标放到图片上面出现。
地图（热点区域）：map
热点： area，设置图片上可以被点击的区域（用工具做之后进行简单分析）

2.6 转义字符

在html语法中，存在一些特殊的字符，这些字符是不能直接原样输出。如果想让这些特殊字符原样输出的话，
那么就需要进行转义。
常见的转义字符：
特殊字符转义字符(以&开头，以;结尾)
需求:在浏览器中显示：<h1>标题</h1>
<< letter than
> > greater than
& &
空格  
版权 ©
商标 ®

2.7 表格标签（画图讲解表格标签中的各个位置代表的标签）

标签：
table 表格
tr 行
td 单元格
th 表头
caption 标题

常用的属性：
border 表格的边框
width 宽度
heigth 高度
align 对齐方式。 left: 左对齐 center:居中 right：右对齐
rowspan 行合并。把多行的单元格合并
colspan 列合并。把多列的单元格合并

2.8 表单提交（画图展示整体需求和使用场景）
表单标签（重点）
作用：用于采集用户输入的数据，提交给后台程序处理

场景1：
注册用户：
-> 注册页面（输入用户名、密码、邮箱...）（通过表单标签携带用户数据）-> 系统后台程序 -> 把用户数据保存到数据库

场景2
登录：
-> 登录页面（输入用户名和密码）（通过表单标签携带用户数据） -> 系统后台，搜索数据库，判断是否存在次用户和密码

表单标签：
<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"/> 重置按钮

3 框架标签

frameset 框架集

属性：
cols: 按照列的方向来划分框架
rows: 按照行的方向来划分框架
以上两个属性的值填每个框架的比例或者长度
*号表示其他框架分配完之后剩下的比例

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

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

阅读全文

0 0