HTML学习笔记（一）
来源：互联网 发布：证券交易网络 编辑：程序博客网 时间：2024/06/07 15:39
HTML入门
1.1 引入
软件结构分类：
C-S结构（Client - Server 客户端-服务器端） 典型应用： 飞秋、QQ 特点： 1）必须安装特定的客户端程序 2）服务器软件升级，客户端的软件同步升级！ B-S结构（Broswer-Server 浏览器-服务器端） 典型应用： 163网站，华育官网，游戏官网。。。 特点： 1）不需要特定的客户（只需要浏览器软件） 2）服务器软件升级，浏览器客户端不需要升级！1.2 网站
服务器端的软件都是基于bs结构的，这个软件俗称叫“网站”。网站是由网页组成。一个网页就是由html页面组成。
html是一门网页制作的语言。
1.3 html语言
html是第一门网页制作语言，最简单的一门语言。hyperText Markup Language 超文本标记语言。html语言由标记组成。学习html语言，掌握一些常用的标记即可！
1.4 超级文本
文字变色
文字大小变化
显示图片
……..
这些超级文本通过标记实现效果的。
2基本标签的讲解
<html> --html开始标签 <head> -- 文件头（用户在浏览器的主体是看不到的） </head> <body> --文件体（用户在浏览器的主体看得到） </body></html> --html结束标签2.1 head文件头
作用：告诉浏览器如何解释该html页面
<html><head> <!-- html注释 --> <!-- 作用：告诉浏览器如何解释该html页面 --> <!-- 标题 ：在窗口的标题栏看到--> <title>这是标题</title> <!-- 告诉浏览器使用什么码表解释html文件 --> <!-- html标签分类： 有标签体标签：有开始，有结束标签、 <title></title> 没有标签体标签 ： 也叫空标签 <meat /> --> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <!-- 关键词：keywords 搜索引擎： 百度 输入 --> <meta name="keywords" content="标签,头部" /> <!-- 描述： 标题 描述 --> <meta name="description" content="这是一个头部的html"/></head><body></body></html>2.2 文本标签(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 upbgsound:音乐播放
src:需要播放的音乐路径 loop=-1(无限循环) autostart="true"自动播放列表标签：
有序列表ol li（type属性更改序号类型，案例：投票喜欢的女明星） 无序列表ul li（用于条目的罗列，type属性更改序号类型，案例：学生管理系统） 项目列表标签(dl dt dd)（一般用于有层次结构的列表，一个公司员工的列表）下拉选项：
行内标签(span) (html中用的非常少，css中用的非常多)
块标签
(html中用的非常少，css中用的非常多)
<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="#669999" /><b>我是b标签</b><br /><i>我是i标签</i><br /><u>我是u标签</u><br /><p>这是小说的第一个段这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落这是小说的第一个段落落</p><p>这是小说的第二个段落这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段这是小说的第二个段</p><blockquote>解释说明上述文解释说明上述文字解释说明上述文字解释说明上述文字解释说明上述文字解释说明上述文字解释说明上述文字解释说明上述文字解释说明上述文字解释说明上述文字解释说明上述文字字</blockquote><hr />y=x<sup>2</sup><br />H<sub>2</sub>O<br />CaCO<sub>3</sub><br /><hr /><pre> 好雨知时节，当春乃发生。 随风潜入夜，润物细无声。 野径云俱黑，江船火独明。 晓看红湿处，花重锦官城。</pre><marquee behavior="slide" bgcolor="#FF0000" direction="down">刘备</marquee><bgsound src="" loop="-1" /><!--有序列表--><ol type="A"> <li>章子怡</li> <li>刘亦菲</li> <li>贾玲</li></ol><hr /><ul type="circle"> <li>章子怡</li> <li>刘亦菲</li> <li>贾玲</li></ul><hr /><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 /><select><option>陕西</option><option>四川</option><option>广东</option></select><hr /><span>我是sapn标签</span><div>我是div标签</div></body></html>2.3 超链接标签
<!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 表示链接到的地址（文件） target 打开资源方式 _self: 当前窗口打开， _blank: 新窗口打开 协议执行资源的基本流程（超链接的原理）： 使用协议到本地计算机的注册表中查询是否有对应协议的软件（程序），有就执行，没有就不执行。 常见的协议： file:// 本地文件协议（本地或局域网） 在href中不写就是使用这个默认协议 http:// http协议（执行流程） 通常连接到域名或IP地址 thunder:// 迅雷下载软件的协议 mailto:发送邮件协议 超链接作用； 1）链接到资源 2）作为锚点使用 打锚点： <a name="锚点名称"></a> 去到锚点： <a href="#锚点名称">内容</a> --><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/><a href="http://www.moive.com/fuzhouzhe.avi">高清《复仇者联盟2》(普通通道)</a><br/><a href="thunder://www.moive.com/fuzhouzhe.avi">高清《复仇者联盟2》(迅雷通道)</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></html>2.4 图像标签
img 图像标签
常用属性：
src : 表示图片源位置 width: 图片宽度 height: 图片高度 alt: 替代文本。当图片的src属性失效时，alt属性的内容就会生效 title: 提示文本。当鼠标放到图片上面出现。 地图（热点区域）：map 热点： area，设置图片上可以被点击的区域2.5 转义字符
在html语法中，存在一些特殊的字符，这些字符是不能直接原样输出。如果想让这些特殊字符原样输出的话，
那么就需要进行转义。
常见的转义字符： 特殊字符 转义字符(以&开头，以;结尾) 需求:在浏览器中显示：<h1>标题</h1> < < letter than > > greater than & & 空格 版权 © 商标 ®<!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>标题1</h1><!--使用转义字符将上述的内容展示在页面上< <> >& &空格 需求：西部 开源商标 ®版权 © 需求：给王老吉分别加上版权和商标--><h1>标题1</h1><br/>&<br /><hr />西部 开源<hr />王老吉<sup>®</sup><hr />王老吉<sup>©</sup></body></html>2.6 表格标签（画图讲解表格标签中的各个位置代表的标签）
标签：
table 表格
tr 行
td 单元格
th 表头
caption 标题
常用的属性： border 表格的边框 width 宽度 heigth 高度 align 对齐方式。 left: 左对齐 center:居中 right：右对齐 rowspan 行合并。把多行的单元格合并 colspan 列合并。把多列的单元格合并<!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="2" align="center" width="400" height="300"><caption><h1>学科成绩统计表<h1></caption><tr align="center"><th>姓名</th><th>学科</th><th>成绩</th></tr><tr align="center"><td rowspan="2">狗娃</td><td>音乐</td><td>90</td></tr><tr align="center"><td>java</td><td>60</td></tr><tr align="center"><td>狗剩</td><td>java</td><td>70</td></tr><tr align="center"><td>狗蛋</td><td>java</td><td>80</td></tr><tr align="center"><td colspan="2">平均分</td><td>70</td></tr></table></body></html>
2.7 表单提交（画图展示整体需求和使用场景）
表单标签（重点）
作用：用于采集用户输入的数据，提交给后台程序处理
场景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"/> 重置按钮 <!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><!-- <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="表单需要提交到哪个路径"method=get/post如果是get方式提交file:///C:/Users/Administrator/Desktop/8.form表单.html?username=jack&password=jack之前的url路径?username=jack&password=jack,如果是get方式提交的话，我们的提交参数会被绑定在url路径中如果post方式提交：我们的所有的提交参数会被封装在请求体中--><body><form action="5.转义字符.html" method="post">用户名:<input type="text" value="请输入用户名" name="username"/><br />密码:<input type="password" name="password"/><br />性别:<input type="radio" name="gender" value="男"/>男<input type="radio" name="gender" value="女"/>女<br />兴趣爱好:<input type="checkbox" name="hobby" value="篮球"/>篮球<input type="checkbox" name="hobby" value="足球"/>足球<input type="checkbox" name="hobby" value="乒乓球"/>乒乓球<br />学历:<select name="xueli"><option value="benke">本科</option><option value="shuoshi">硕士</option><option value="boshi">博士</option></select><br /><input type="hidden" /><br />上传一张你的靓照:<input type="file" name="file"/><br />请简单做一个自我介绍：<textarea rows="5" cols="10"></textarea><br /><input type="submit" value="注册"/><input type="reset" value="重置"/></form></body></html>
3.1 框架标签
frameset 框架集 属性： cols: 按照列的方向来划分框架 rows: 按照行的方向来划分框架 以上两个属性的值填每个框架的比例或者长度 *号表示其他框架分配完之后剩下的比例 frame 表示一个框架，框架中包含一个html页面 有2个或2个以上的frame就会包含在frameset当中。 注意： 框架标签不能放在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><frameset rows="20%,80%"><frame src="top.html"/><frameset cols="20%,*"><frame src="left.html"/><frame src="../6.表格标签.html" name="body"/></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><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><a href="选课.html" target="body">1.大一选课</a><br /><a href="选课.html" target="body">2.大二选课</a><br /><a href="选课.html" target="body">3.大三选课</a><br /><a href="选课.html" target="body">4.大四选课</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学习笔记（一）
- Nginx搭建hls流媒体服务器
- 将DataTable的数据保存到XML中
- NUMA体系结构简述
- 设计新人到设计新人=菜鸟到菜鸟？NO！
- 【Android】第二章 四大应用组件之Activity
- HTML学习笔记（一）
- ESP8266学习笔记8：ESP8266接入机智云
- 职业经验 历历在目的 2年 测试生活
- 实战 | 封装解决WebView的那些坑
- 【T.I.J】Map通过关联数组的简单实现
- 【iOS开发】UIViewController的生命周期
- ubuntu下安装oracle11的详细过程
- 占位2
- 拉勾专业算法能力测评-汇总
