Web前端学习（1）_html

傷城~ 2022-06-14 06:42 184阅读 0赞

**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>
> 
> ![Center][]  
> 
> 
> （2）水平线：画一条水平线
> 
>     <hr />
> 
> （3）换行：浏览器是不会识别代码中的换行，要用到换行标签才行
> 
>     <br />
> 
> （4）标签规定粗体文本：给字体加粗
> 
>     <b>hello</b>
> 
> ![Center 1][]  
> 
> 
> （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>
> 
> ![Center 2][]  
> 
> 
> （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>
> 
> ![Center 3][]  
> 
> 
> （14）项目列表标签(dl dt dd)（一般用于有层次结构的列表）
> 
>     <dl>
>     	<dt>学生</dt>
>         <dl>小学生</dl>
>         <dl>中学生</dl>
>         <dl>大学生</dl>   
>     </dl>
> 
> ![Center 4][]  
>   
> 
> 
> （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  
> &          &   
> 空格       &nbsp;  
> 
> 
>     <h1>123</h1>
> 
> <h1>123</h1>
> 
> ![Center 5][]  
>   
>   
> 
> 
> 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>
> 
> 注册.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>
> 
> 登录.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>
> 
> 效果图展示：
> 
> 由于主要于实现，对于颜色搭配略差...主要是实现，实现，实现！！！
> 
> 首页：
> 
> ![Center 6][]  
>   
> 
> 
> 点击注册：
> 
> ![Center 7][]  
>   
>   
> 点击登录：
> 
> ![Center 8][]  
>

>   
> 
> 
>   
> 
> 
>   
>

[Center]: /images/20220614/f3c921d4d6ae47a09f1716b8c54dd2b1.png
[Center 1]: /images/20220614/09360057dfc541aa938ef2facb538398.png
[Center 2]: /images/20220614/e0c0f8d9abfd4e5e9b7ebac39fa6767b.png
[Center 3]: /images/20220614/59b3d90de5134352870794cad5a8e2d9.png
[Center 4]: /images/20220614/67ac5e250d314bf38399b3ee2e7bc36b.png
[Center 5]: /images/20220614/baaf53132f7b4242a06e89ae7b2c0c79.png
[Center 6]: /images/20220614/40a188bf111d41feb8be4afad8fecbe6.png
[Center 7]: /images/20220614/18fbb2c4d7d84df2bafaadce6f3942dc.png
[Center 8]: /images/20220614/cd8811fd63404ca5a9c987b3ecc375a2.png