Web前端学习（1）_html-CSDN博客

本文链接：https://blog.csdn.net/Ag_nevergiveup/article/details/73135990

Web前端学习（1）_html

HTML入门

1.引入

1.1 软件结构分类：

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

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

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

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

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

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

1.2 网站

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

1.3 html语言

html是第一门网页制作语言，最简单的一门语言。

hyperText Markup Language 超文本标记语言。

html语言由标记组成。学习html语言，掌握一些常用的标记即可！

2.标签

2.1 基本标签的讲解

<html> --html开始标签

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

</head>

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

</body>

</html> --html结束标签

示例：
<html >
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>标题</title>
	</head>

	<body>
	</body>
</html>
2.2 head文件头

作用：告诉浏览器如何解释该html页面

2.3 文本标签(body里面的标签)

（1）标题标签

分析：从1到6，总共6个，字体越来越小
<body>
	<h1>标题1</h1>
	<h2>标题2</h2>
	<h3>标题3</h3>
	<h4>标题4</h4>
	<h5>标题5</h5>
	<h6>标题6</h6>
</body>
（2）水平线：画一条水平线
<hr />
（3）换行：浏览器是不会识别代码中的换行，要用到换行标签才行
<br />
（4）标签规定粗体文本：给字体加粗
<b>hello</b>
（5）将文本以斜体显示
<i>hello</i>
（6）将文本以下划线显示
<u>hello</u>
（7）段落(p)
<p>
	abc
</p>

<p>
	def
</p>
（8）段落缩进(blockquote)(主要用于解释或者强调)
<blockquote>
	123456
</blockquote>
（9）上下标(sup和sub)
y=x<sup>2</sup>
（10）原样输出(pre)：不变，原样显示

（11）滚动

marquee:

behavior属性值(alternata:来回滚动 scroll:重复滚动 slide:不重复滚动

bgcolor:字幕背景颜色

direction:设置字幕的滚动方向down right left up
<marquee width="200" height="100" behavior="alternate" bgcolor="#33FF00"
direction="left">
	Ag_nevergiveup
</marquee>
（12）音乐播放

bgsound:

src:需要播放的音乐路径

loop=-1(无限循环)

autostart="true"自动播放

（13）列表标签：

有序列表ol li（type属性更改序号类型）

无序列表ul li（用于条目的罗列，type属性更改序号类型）
<ol>
	<li>hello</li>
    <li>world</li>
</ol>

<ul type="circle">
	<li>hello</li>
    <li>world</li>
</ul>
（14）项目列表标签(dl dt dd)（一般用于有层次结构的列表）
<dl>
	<dt>学生</dt>
    <dl>小学生</dl>
    <dl>中学生</dl>
    <dl>大学生</dl>   
</dl>
（15）下拉选项：<select/><option/>（后面案例中会有使用）

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

（17）块标签<div> (html中用的非常少，css中用的非常多)

2.4 超链接标签（后面案例中会有使用）

常用的属性：

href 表示链接到的地址（文件）
target 打开资源方式 _self: 当前窗口打开， _blank: 新窗口打开

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

2.6 转义字符
在html语法中，存在一些特殊的字符，这些字符是不能直接原样输出。如果想让这些特殊字符原样输出的话，那么就需要进行转义。
常见的转义字符：
特殊字符转义字符(以&开头，以;结尾)
< < letter than
> > greater than
& &
空格  
<h1>123</h1>
<h1>123</h1>

2.7 表格标签（后面案例中会有使用）
标签：
table 表格
tr 行
td 单元格
th 表头
caption 标题

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

2.8 表单提交（后面案例中会有使用）
作用：用于采集用户输入的数据，提交给后台程序处理
表单标签：
<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.9 框架标签（后面案例中会有使用）
frameset 框架集
属性：
cols: 按照列的方向来划分框架
rows: 按照行的方向来划分框架
以上两个属性的值填每个框架的比例或者长度
*号表示其他框架分配完之后剩下的比例

frame 表示一个框架，框架中包含一个html页面
有2个或2个以上的frame就会包含在frameset当中。
注意：框架标签不能放在body标签中，否则无法显示！！！

3.标签整合案例

案例：利用框架标签做一个登录注册案例（点击左边的登录，或者注册直接跳转到指定的页面），使用框架，超链接，表格，表单等等：

框架_表单_test.html:

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

<frameset rows="20%,*" border="1" bordercolor="#66CC33" >
<frame src="top.html"  />

<frameset cols="15%,*" bordercolor="#66CC33">
<frame src="left.html" />
<frame name="body" src="背景.html"/>
</frameset>
</frameset><noframes></noframes>
</html>

top.html:

<!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 bgcolor="#0099FF"">
<h1 align="center">登录注册页面</h1>
</body>
</html>

left.html:

<!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 bgcolor="#0099FF">
<h2 align="center">登录注册</h2>
<a href="注册.html" target="body"><h3 align="center">1.注册</h3></a>
<a href="登录.html" target="body"><h3 align="center">2.登录</h3></a>
</body>
</html>

背景.html

<!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>
<h1 align="center">首页</h1>
<p align="center">
<img  align="middle" src="a.jpg" width="800" height="300" />
</p>
</body>
</html>

<!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 bgcolor="#FFFF66">
<h1 align="center">欢迎来到注册页面</h1>
<table align="center" width="500" height="300" border="2">
<form action="" method="post">
	<tr align="center">
    	<td >用户名：</td>
    	<td ><input type="text" name="username" value="请输入用户名" /></td>
    </tr>
    
	<tr align="center">
    	<td>密码：</td>
    	<td><input type="text" name="password" /></td>
    </tr>
    
	<tr align="center">
    	<td>性别：</td>
        <td>
        <input type="radio" name="gender" value="男" />男
        <input type="radio" name="gender" value="女" />女
        </td>
    </tr>
    
	<tr align="center">
    	<td>兴趣：</td>
    	<td>
        <input type="checkbox" name="hobby" value="羽毛球" />羽毛球
        <input type="checkbox" name="hobby" value="篮球" />篮球
        <input type="checkbox" name="hobby" value="兵乓球" />兵乓球
        <input type="checkbox" name="hobby" value="足球" />足球
        </td>
    </tr>
    
	<tr align="center">
    	<td align="center">学历：</td>
         <td >
         <select name="education">
         <option>本科</option>
         <option>硕士</option>
         <option>博士</option>
         <option>博士后</option>
         </select>
        </td>
        
    </tr>
	
    <tr align="center">
    <td>个人简介：</td>
    <td>
    <textarea rows="5" cols="40">
    </textarea>
    </td>
    </tr>
    
    <tr align="center">
    	<td colspan="2">
        <input type="submit" value="注册" />
        <input type="reset" value="重置" />
    	</td>
    </tr>
    </form>
	</table>
</body>
</html>

<!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 bgcolor="#00FF33">
<h1 align="center">欢迎来到登录页面</h1>
<table border="2" width="500" height="300" align="center">
<form action="" method="post">
	<tr align="center">
    <td>用户名：</td>
    <td>
    <input type="text" name="username" value="请输入用户名" />
    </td>
	</tr>
    
    <tr align="center">
    <td>密码：</td>
    <td>
    <input type="password" name="password"  />
    </td>
    </tr>
    
    <tr>
    <td colspan="2" align="center">
    <input type="submit" value="登陆"  />
    <input type="reset" value="重置"  />
    <a href="注册.html">还没有账号？注册...</a>
    </td>
    </tr>
</form>
</table>
</body>
</html>

效果图展示：

由于主要于实现，对于颜色搭配略差...主要是实现，实现，实现！！！

首页：