HTML入门
来源：互联网 发布：淘宝助理创建宝贝教程 编辑：程序博客网 时间：2024/05/20 23:07
1 HTML入门
1.1 软件结构分类：
C-S结构（Client - Server 客户端-服务器端）
典型应用：
飞秋、QQ
特点：
1）必须安装特定的客户端程序
2）服务器软件升级，客户端的软件同步级！
B-S结构（Broswer-Server 浏览器-服务器端）
典型应用：
163网站，华育官网，游戏官网。。。
特点：
1）不需要特定的客户（只需要浏览器软件）
2）服务器软件升级，浏览器客户端不需级！
结论： java就业班开发的软件，大部分都是基于BS结构的！
1.2 网站
服务器端的软件都是基于bs结构的，这个软件俗称叫“网站”。网站是由网页组成。一个网页就是由html页面组成。
html是一门网页制作的语言。
1.3 html语言
html是第一门网页制作语言，最简单的一门语言。hyperText Markup Language 超文本标记语言。
html语言由标记组成。学习html语言，掌握一些常用的标记即可！
1.4 超级文本（写一个简单的超文本演示效果）
文字变色
文字大小变化
显示图片
……..
这些超级文本通过标记实现效果的。
2
2.1 基本标签的讲解(在这里我用的是Adobe Dreamweaver CS5 中文版进行编辑html文件)
<html> --html开始标签 <head> -- 文件头（用户在浏览器的主体是看不到的） </head> <body> --文件体（用户在浏览器的主体看得到） </body></html> --html结束标签2.2 head文件头
作用：告诉浏览器如何解释该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><!--给浏览器设置编码--><meta http-equiv="content-type" content="text/html;charset=utf-8"><!-- 关键字：作用就是告诉搜索引擎我这个网页里面主要是什么内容。便于搜索引擎的检索--><meta name="keywords" content="编程技术，java"><meta name="description" content="要好好学习java,才可有机会和马云面对面"></head><body><!--在浏览器的展示区是可以看到的-->hello world!</body></html>2.3 文本标签(body里面的标签)相关练习
<!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">标题1</h1><h2 align="center">标题2</h2><h3 align="center">标题3</h3><h4 align="center">标题4</h4><h5 align="center">标题5</h5><h6 align="center">标题6</h6><!--水平线(hr) color：线的颜色--><hr color="#CC33CC"><!--标签规定粗体文本(b)--><b>我是b标签，粗体</b></br><!--将文本以斜体显示(i)--><i>我是i标签，斜体</i></br><!--将文本以下划线显示(u)--><u>我是u标签，我还有下划线</u></br><hr color="#00FFCC" ><p>这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段是第一段这是第一段</p><p>这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段</p><!--段落缩进(blockquote)(主要用于解释或者强调)--><blockquote>你好你你好你好你好你好你好你好你好</blockquote><hr/><!--上下标(sup和sub)(一般用于公式)y=x2 H2O CaCo3-->y=x<sup>2</sup></br>h<sub>2</sub>o</br>caco<sub>3</sub></br><hr color="#99FF66"><!--原样输出(pre)(希望网页上的东西和代码里面写的样式完全一样的时候(写一首诗，写一段代码))--><pre> 好雨知时节，当春乃发生。 随风潜入夜，润物细无声。 野径云俱黑，江船火独明。 晓看红湿处，花重锦官城。</pre><hr color="#33FFFF"><!--marquee: behavior属性值(alternata:来回滚动 scroll:重复滚动 slide:不重复滚动 bgcolor:字幕背景颜色 direction:设置字幕的滚动方向down right left up--><marquee behavior="slide" bgcolor="#339900" direction="left">加油</marquee></br><!--bgsound: src:需要播放的音乐路径 loop=-1(无限循环) autostart="true"自动播放--><bgsound src="" loop="-1" ></bgsound></br><!--列表标签： 有序列表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 ><ul type="disc"><li>刘亦菲</li><li>谢娜</li><li>章子怡</li></ul><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 color=""/><select><option>选择高</option><option>选择帅</option><option>选择富</option></select><hr/><span>我是行内标签</span><div>我是块标签</div></body></html>
2.4 超链接标签相关练习
<!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><!--常见的协议： file:// 本地文件协议（本地或局域网） 在href中不写就是使用这个默认协议 http:// http协议（执行流程） 通常连接到域名或IP地址(画图讲解http协议执行流程) thunder:// 迅雷下载软件的协议 mailto:发送邮件协议 超链接作用； 1）链接到资源 2）作为锚点使用 打锚点： <a name="锚点名称"></a> 去到锚点： <a href="#锚点名称">内容</a>--><a href="#返回底部">返回底部</a><a name="返回顶部"></a><a href="23-第二十三天/1.结构讲解.html"></a>超链接本地</br><a href="http://www.baidu.com">超链接http协议</a><br/> <a href="thunder://www.baidu.com">超链接thunder协议</a><br/> <a href="mailto:717275884@qq.com">超链接发送邮件协议</a><br/> <a href="#你好">你好</a> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <<br/>br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><a name="你好"></a>你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好<a href="#返回顶部">返回顶部</a><a name="返回底部"></a></body></html>
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><!--src : 表示图片源位置 width: 图片宽度 height: 图片高度 alt: 替代文本。当图片的src属性失效时，alt属性的内容就会生效 title: 提示文本。当鼠标放到图片上面出现。 地图（热点区域）：map 热点： area，设置图片上可以被点击的区域（用工具做之后进行简单分析）--><img src="23-第二十三天/b.jpg" alt="我是王宝强" width="280" height="210" border="1" usemap="#map" title="宝强" /><map name="map" id="map"> <area shape="rect" coords="221,45,243,61" href="23-第二十三天/2.文本标签.html" /> <area shape="circle" coords="72,137,22" href="23-第二十三天/1.结构讲解.html" /></map></body></html>2.6 转义字符的相关问题
<!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>标题</h1> < < letter than > > greater than & & 需求：在浏览器中输入 华育 国际 空格 王老吉加上商标和版权： 版权 © 商标 ®--><h1>标题</h1><hr/>&<br/>华都 科技<br/><hr/>王老吉<sup> ®</sup><hr/>王老吉<sup> ©</sup></body></html>
2.6 表格标签（画图讲解表格标签中的各个位置代表的标签）
<!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><!--标签： table 表格 tr 行 td 单元格 th 表头 caption 标题 常用的属性： border 表格的边框 width 宽度 heigth 高度 align 对齐方式。 left: 左对齐 center:居中 right：右对齐 rowspan 行合并。把多行的单元格合并 colspan 列合并。把多列的单元格合并--><table align="center" border="2" height="120" width="240"><h1 align="center"> 学科成绩统计表</h1> <tr><td>姓名</td><td>学科</td><td>成绩</td></tr><tr ><td rowspan="2">狗娃</td><td>音乐</td><td>90</td></tr><tr><td>java</td><td>60</td></tr><tr><td>狗剩</td><td>java</td><td>70</td></tr><tr><td>狗蛋</td><td>java</td><td>80</td></tr><tr><td colspan="2">平均分</td><td>70</td></tr></table></body></html>
2.7表单提交（画图展示整体需求和使用场景）
<!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><!--表单标签（重点） 作用：用于采集用户输入的数据，提交给后台程序处理 场景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"/> 重置按钮 --><form action="23-第二十三天/1.结构讲解.html" method="get">用户名:<input type="text" value="请输入用户名" name="username" /></br>密码：<input type="password" value="请输入密码" name="password" /></br>性别：<input type="radio" name="sex" value="男" />男<input type="radio" name="sex" value="女" />女</br>兴趣爱好：<input type="checkbox" name="habby" value="篮球" />篮球<input type="checkbox" name="habby" value="足球" />足球<input type="checkbox" name="habby" value="乒乓球" /></br>学历：<select name="xueli"><option value="本科">本科</option><option value="博士">博士</option><option value="硕士">硕士</option></select><br/>上传一张照片：<input type="file" name="file" /></br>写一段自我介绍：<textarea cols="2" rows="3" ></textarea></br><input type="submit" value="提交" /><input type="reset" value="重置" /></form></body></html> 
2.8 案例：form标签和table标签的整合
<!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><!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><table border="1" width="400" height="300" bgcolor="#CCFF00" align="center"><form action="8.form表单.html" method="get"><tr><td>用户名</td><td><input type="text" name="username" value="请输入用户名" /></td></tr><tr><td>密码</td><td><input type="password" name="password"/></td></tr><tr><td>性别</td><td><input type="radio" value="男" name="gender" />男<input type="radio" name="gender" value="女" />女</td></tr><tr><td>爱好</td><td><input type="checkbox" name="hobby" value="篮球"/>篮球<input type="checkbox" name="hobby" value="足球"/>足球<input type="checkbox" name="hobby" value="乒乓"/>乒乓</td></tr><tr align="center"><td colspan="2"><input type="submit" value="注册" /><input type="reset" value="重置" /></td></tr></form></table></body></html></body></html>
2.9框架标签 
框架标签练习.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 框架集 属性： cols: 按照列的方向来划分框架 rows: 按照行的方向来划分框架 以上两个属性的值填每个框架的比例或者长度 *号表示其他框架分配完之后剩下的比例 frame 表示一个框架，框架中包含一个html页面 有2个或2个以上的frame就会包含在frameset当中。 注意： 框架标签不能放在body标签中，否则无法显示！！！--><frameset rows="20%,80%"><frame src="top.html" /><frameset cols="20%,*"><frame src="left.html" /><frame src="选课.html" /></frameset></frameset></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><!-- frameset 框架集 属性： cols: 按照列的方向来划分框架 rows: 按照行的方向来划分框架 以上两个属性的值填每个框架的比例或者长度 *号表示其他框架分配完之后剩下的比例 frame 表示一个框架，框架中包含一个html页面 有2个或2个以上的frame就会包含在frameset当中。 注意： 框架标签不能放在body标签中，否则无法显示！！！--><frameset rows="20%,80%"><frame src="top.html" /><frameset cols="20%,*"><frame src="left.html" /><frame src="选课.html" /></frameset></frameset></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><a href="选课.html" target="body">大一选课</a></br><a href="选课.html" target="body">大二选课</a></br><a href="选课.html" target="body">大三选课</a></br><a href="选课.html" target="body">大四选课</a></br></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>欢迎来到选课系统</body></html>
阅读全文
0 0
- html 入门
- HTML 入门
- html入门
- HTML入门
- html入门
- HTML入门
- 入门Html
- HTML入门
- html入门
- html入门
- html入门
- html入门
- HTML入门
- html入门
- HTML入门
- HTML入门
- HTML 入门
- HTML入门
- 关于7z的命令行操作
- PAT乙级真题及训练集--1001. 害死人不偿命的(3n+1)猜想 (15)
- script.sh
- 大二总结
- Python 装饰器
- HTML入门
- TCP、UDP数据包大小的限制
- WebSocket和kafka实现数据实时推送到前端
- Kubernetes基金会托管容器网络CNI
- 享元模式-Flyweight
- PM&PL&SE&PG
- 吊炸天-js如何实现继承
- verilog中的一些常用操作符
- Bash脚本基础
