HTML思维导图+学习笔记+实际案例
HTML思维导图
一、前导
*JavaWeb javaSE–>>javaEE
使用java语言开发互联网项目
*软件架构
1、C/S(Client/Server)客户端/服务器端
*用户在本地有一个客户端程序，在远程有一个服务器端程序
例如：QQ\迅雷
优点：用户体验比较好
缺点:开发、安装、部署、维护 麻烦
2、B/S(Brower/Server)浏览器/服务器
*只需要一个浏览器，用户通过不同URL访问不同网址，服务器端响应也不同
例如：百度
优点：开发、安装、部署、维护 便捷
缺点：如果应用过大，用户体验可能会受到影响，对硬件要求比较高
*B/S架构详解
*资源分类：
1、静态资源
*使用静态网页开发技术发布的资源
*特点:所有用户访问，得到的都是同样结果
如：文本、图片、视频、音频…
静态网页开发技术：html、css、javaScript
如果用户请求的是静态资源，那么服务器直接将静态资源发送给浏览器，
浏览器内置了静态资源解析引擎
2、动态资源
*使用动态网页开发技术发布的资源
*特点:所有用户访问，得到的都是不同结果
动态网页开发技术：jsp、Servlet、php
如果用户请求的是动态资源，那么服务器会将动态资源转化为静态资源，
发送给浏览器，浏览器内置了静态资源解析引擎
静态网页开发技术：html、css、javaScript
html:用于搭建基础网页、展示页面内容
css:用于美化页面，布局页面
javaScript:控制页面元素
二、html简介
1、html是什么
Html是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)xml可扩展性标记语言
xml:
<student><name></name><age></age></student>- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
超文本 标记 语言 - 超文本：普通文本不能实现的内容，超文本可以 包含超链接的文本
- 标记：就是标签，不同的标签能实现不同功能
- 语言：人与计算机交互的工具
2、html能做什么
html就是通过标签的形式将信息展示给用户
3、html书写规范
需求：大家不要出门，出门要戴上口罩。
<html><head></head><body>大家<font color="read" size="5">不要出门</font><br/>出门要<font color="read" size="5">戴上口罩</font>。</body></html>（1）html标签是以尖括号关键字成对出现，有开始标签和结束标签，支持正确嵌套
（2）大部分标签是有属性的 属性格式：属性=“属性值” 多个属性之间用空格隔开
（3）空标签：功能比较单一 例如：换行标签<br/>===<br></br>
（4）不区分大小写，一般采用小写
（5）html文档申明：
a、framset框架文档类型
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">b、严格的文档类型
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">c、过渡的文档类型（宽松的文档类型）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">d、html5的文档类型
<!DOCTYPE html>三、html基本标签
1、文件标签（结构标签）
<html><head><meta charset="UTF-8"><title>Insert title here</title></head><body></body></html><html></html>：根标签
<head></head>：
a、整个页面的属性
- title：html标题
- meta：提供了html的元数据、关键字、作者页面的描述
b、知道浏览器解析标签
c、引入外部文件标签
<body></body>属性：
text：文本颜色
bgcolor：背景色
background：背景图片
颜色的三种表示方式：
（1）单词：（RGB）三原色 red green blue
（2）rgb(0,0,0)–>rgb(255,255,255)
（3）#000000–>#ffffff #234567
2、排版标签
（1）注释标签
（2）换行标签：<br/>
（3）段落标签：<p>文本文字</p>
- 特点：段与段之间有空行，并且会自动换行
- 属性：align：对齐方式
（4）水平线标签：<hr/>
属性： width：长度
（1）像素：10px
（2）百分比：占据副标签的百分比，会随着副标签的大小进行改变
size：粗度
color：颜色
align：对齐方式
3、块标签
<div></div>：行级块标签
作用：div+css布局
<span></span>：行内块标签
作用：进行友好提示
4、文字标签
基本文字标签：<front></front>
属性：
color:颜色
size：大小 最大值7，最小值1，默认值是3
face：字体类型
标题标签：<h1></h1>---><h6></h6>
随着数字增大，字体逐渐变小，内置字号、字体是加粗的，默认占据一行
<u>下划线修饰</u><i>斜体修饰</i><b>加粗</b><em>强调</em><strong>加粗</strong><s>删除线</s><sup>上标</sup><sub>下标</sub>5、清单标签（列表标签）
无序列表：
<ul></ul><li></li>：列表项
属性：type：disc（默认） square circle有序列表：
<ol></ol>
<li></li>：列表项
属性：type：1（默认） A、a、l、i（数字、字母、罗马数字）
属性：start（只能是阿拉伯数字），代表首项开始位置
列表标签的作用：实现菜单项（不管横向还是纵向）
6、图形标签
<img/>（自关闭）
属性：src：图形地址
width：宽度
height：高度
align：对齐方式 代表了图片与相邻的文本之间的相对位置（top…）
border：图像边框
alt：图片的文字说明
7、链接标签
<a></a>属性：
- href：跳转页面的地址
- name：锚点，名称
- target：_self（自己）本页面 _blank（新页面）
作用：
（1）页面跳转 注意：要跳转到外网必须加协议
（2）访问锚点 回到锚点 #name值
8、表格标签
<table></table>：
属性：
border：表格边框
width：表格宽度
height：表格高度
align：表格对齐方式
bgcolor：表格背景颜色
<tr></tr>：代表行
属性：
align：单元格内容居中
colspan：列合并
rowspan：行合并
<td></td>：代表单元格
<th></th>：相当于<td>，只是内置样式加粗并居中
<caption></caption>：表格标题
表格作用：
（1）简单实现一个表格样式
（2）进行页面布局
了解：
<thead>
<tbody>
<tfoot>分块加载
四、表单标签【重要】
1、form标签
属性：
- action：提交数据的路径地址
- name：表单的名称
- method：提交方式
get与post的区别：
（1）get方式提交将数据加载到地址栏后面，post提交将数据封装在请求 体中
（2）get提交相对不安全，post相对安全
（3）get提交有大小限制，根据浏览器不同而不同，post提交无大小限制
<form><table></table>
</form>2、input标签
- type属性：根据type属性不同实现不同功能的表单项
- text：普通的文本输入框
- value=“张三” 张三就是属于默认值
- name=“username”
- password：密码输入框 特点是显示的是掩码
- radio：单选按钮
- name：组的概念
- value：必须要加value属性值
- checked="checked"默认被选中的项
- checkbox：复选项
- name：组的概念
- value：必须要加value属性值
- checked="checked"默认被选中的项
- button：普通按钮，没有任何内置功能
- submit：提交按钮 点击后会按照action地址提交
- reset：重置按钮 点击后清空之前填写的内容
- image：图片按钮 功能与submit类似
- src：加载图片
- alt：图片文字说明
- file：上传文件的控件
- hidden：隐藏表单，作用是提交数据的时候，服务器需要这个数据，但是不需要用户看到
3、select标签 <select></select>：下拉菜单
属性：
name：表单项名称
<option></option>：可选项
属性：
value：表单项的值
selected：默认被选中
4、textarea文本域标签
属性：
name：文本名称
rows：按照行划分
cols：按照列划分
注意：默认的文本值在标签体当中<textarea>xxx</textarea>
五、框架标签及其他
1、框架标签
frameset
属性：
rows：按照行划分
cols：按照列划分
它们定义了文档窗口中或者嵌套框架的行或列的大小及数目
例如：
<frameset rows="150,300,150">：
每行都贯穿文档窗口，第一行和最后一个都设为150像素，第二行设置为300像素，
实际上，除非浏览器正好是600像素，
<frameset rows="25%,50%,25%">：
用百分比来表示整个窗口的尺寸，和上面案例一致
<frameset rows="120,*">：
告诉浏览器，按照相应尺寸划分，*表示按照剩余的空间进行自行分配
frame：
属性：
name：名称，方便target依据name值进行定位
src：加载页面地址
2、其他标签
<link rel="stylesheet" type="text.css" href="link.css">属性：
rel：定义当前文档与链接文档之间的关系
type：文档类型
href：定义引入文件类型
属性:
type：文档类型
src：js文件地址
<base href="url">：基准链接地址
如果设定了基准链接地址，当前页面所有的相对路径都基于该地址
3、特殊字符
 ：空格
©：版权符号
>：大于
<：小于
®：注册符号
【案例】
- 显示所有商品信息
<html><head><title>bookStore商城-商品信息展示</title></head><body><!--head是由一行两列table完成展示 --><div id="head"><table><tr><td align="left"><img src="data:images/logo.png"></td><td> <img src="data:images/cart.gif" width="95" height="30"> <a>购物车</a>|<a>帮助中心</a>|<a>我的帐户</a>|<a>新用户注册</a></td></tr></table></div><!--menu其中就是很多超连接--><div id="menu"> <table width="100%"><tr><td align="center" bgcolor="#1c3f09"><a><font size="4" color="white">文学</font></a> <a><font size="4" color="white">生活</font></a> <a><font size="4" color="white">计算机</font></a> <a><font size="4" color="white">外语</font></a> <a><font size="4" color="white">经管</font></a> <a><font size="4" color="white">励志</font></a> <a><font size="4" color="white">社科</font></a> <a><font size="4" color="white">学术</font></a> <a><font size="4" color="white">少儿</font></a> <a><font size="4" color="white">艺术</font></a> <a><font size="4" color="white">原版</font></a> <a><font size="4" color="white">科技</font></a> <a><font size="4" color="white">考试</font></a> <a><font size="4" color="white">生活百科</font></a> <a><font size="4" color="yellow">全部商品目录</font></a> </td></tr> </table> </div><!--search是由一行一列table完成--><div id="search"><table bgcolor="#b6b684" width="100%"><tr><td align="right">Search<input type="text"><input type="button" value="搜索"> </td></tr></table></div> <!----><div id="content"><table width="100%"><tr><td><div align="right">首页 > 旅游 > 图书列表 </div><table width="100%" align="center"><tr><td><h1>商品目录</h1><hr><h1>计算机类</h1>共xxx种商品<hr><div><img src="data:images/productlist.gif" width="100%"><div><table width="100%" align="center"><tr><td><div><img src="bookcover/101.jpg" width="130" height="197"></div><div>书名:xxx<br>售价:xxx</div></td><td> <div><img src="bookcover/102.jpg" width="130" height="197"></div><div>书名:xxx<br>售价:xxx</div></td><td> <div><img src="bookcover/103.jpg" width="130" height="197"></div><div>书名:xxx<br>售价:xxx</div></td><td> <div><img src="bookcover/104.jpg" width="130" height="197"></div><div>书名:xxx<br>售价:xxx</div></td> </tr></table><!--<table width="100%" align="center"><tr><td><div><img src="bookcover/105.jpg" width="130" height="197"></div><div>书名:xxx<br>售价:xxx</div></td><td> <div><img src="bookcover/106.jpg" width="130" height="197"></div><div>书名:xxx<br>售价:xxx</div></td><td> <div><img src="bookcover/107.jpg" width="130" height="197"></div><div>书名:xxx<br>售价:xxx</div></td><td> <div><img src="bookcover/code.jpg" width="130" height="197"></div><div>书名:xxx<br>售价:xxx</div></td> </tr></table>--></td></tr></table></td></tr></table></div><!--foot是由两行两列的table完成。但是第一个td合并了2行--><div id="foot"><table bgcolor="#efeedc" width="100%" align="center"><tr><td rowspan="2" valign="top"> <img src="data:images/logo.png"></td><td><font>CONTACT US</font></td></tr><tr><td align="left">copyright 2008©BookStore All Rights RESERVED</td></tr></table></div> </body>
</html>
- 注册页面
<html><head><title>bookStore商城-注册</title></head><body><!--head是由一行两列table完成展示 --><div id="head"><table><tr><td align="left"><img src="data:images_homework/logo.png" width="95" height="30"></td><td> <img src="data:images_homework/cart.gif"> <a>购物车</a>|<a>帮助中心</a>|<a>我的帐户</a>|<a>新用户注册</a>|</td></tr></table></div><!--menu其中就是很多超连接--><div id="menu"> <table width="100%"><tr><td align="center" bgcolor="#1c3f09"><a><font size="4" color="white">文学</font></a> <a><font size="4" color="white">生活</font></a> <a><font size="4" color="white">计算机</font></a> <a><font size="4" color="white">外语</font></a> <a><font size="4" color="white">经管</font></a> <a><font size="4" color="white">励志</font></a> <a><font size="4" color="white">社科</font></a> <a><font size="4" color="white">学术</font></a> <a><font size="4" color="white">少儿</font></a> <a><font size="4" color="white">艺术</font></a> <a><font size="4" color="white">原版</font></a> <a><font size="4" color="white">科技</font></a> <a><font size="4" color="white">考试</font></a> <a><font size="4" color="white">生活百科</font></a> <a><font size="4" color="yellow">全部商品目录</font></a> </td></tr> </table> </div><!--search是由一行一列table完成--><div id="search"><table bgcolor="#b6b684" width="100%"><tr><td align="right">Search<input type="text"><input type="button" value="搜索"> </td></tr></table></div> <!----><!----><div id="content"> <form action="#" method="post"><table width="850px" border="0" cellspacing="0" bgcolor="#fcfdef" align="center"><tr><td><h1>新会员注册</h1><table width="70%" border="0" cellspacing="2" align="center"><tr><td >会员邮箱:</td> <td ><input type="text" name="email" ></td> <td ><font color="#999999">请输入有效的邮箱地址</font></td></tr><tr><td>会员名</td> <td><input type="text" name="username" ></td> <td><font color="#999999">用户名至少六位</font></td></tr><tr><td>密码</td> <td><input type="password" name="password"></td> <td><font color="#999999">密码至少六位</font></td></tr><tr><td>重复密码</td> <td><input type="password" name="repassword"></td> <td> </td></tr><tr><td>性别</td> <td><input type="radio" name="sex" value="男" checked>男 <input type="radio" name="sex" value="女">女</td><td> </td></tr><tr><td>联系电话</td> <td><input type="text" name="telephone"></td> <td> </td></tr><tr><td>个人介绍</td> <td><textarea name="introduce"></textarea></td> <td> </td></tr></table><h1>注册校验</h1><table width="70%" border="0" cellspacing="2" align="center"><tr><td width="98">输入校验码</td><td><input type="text" name="checkcode"></td><td> </td></tr><tr><td></td><td colspan="2"><img src="" width="155" height="30"><a href="#">看不清换一张</a></td></tr></table><table width="70%" border="0" cellspacing="2"><tr><td align="center"><input type="image" src="data:images_homework/signup.gif"></td> </tr></table></td></tr></table></form></div><!--foot是由两行两列的table完成。但是第一个td合并了2行--><div id="foot"><table bgcolor="#efeedc" width="100%" align="center"><tr><td rowspan="2" valign="top"> <img src="data:images_homework/logo.png"></td><td><font>CONTACT US</font></td></tr><tr><td align="left">copyright 2008©BookStore All Rights RESERVED</td></tr></table></div> </body>
</html>
HTML思维导图+学习笔记+实际案例相关推荐
- 2021字节面经最新整理： 面试真经/思维导图/学习笔记！火遍全网
前言 为什么要面试字节跳动? 近两年是中国互联网企业组织架构升级的大年,阿里.腾讯.小米.快手等知名互联网企业都进行了相应调整.2020年3月12日,字节跳动成立八周年之际,宣布组织全面升级,而这一消 ...
- JAVA思维导图学习笔记_8张思维导图，55天学习笔记，帮你入门JavaSE
学完了Java中的基础语法,也就是JavaSE. 对其做了一个详细的梳理,也便于以后回顾. 其中有些知识点被自己遗漏了,比如正则表达式这些,只能以后找机会补上了. 01前言 对于计算机基础知识的了解. ...
- Xmind思维导图学习笔记
目录
- 思维导图学习（辣鸡浪费时间的一次学习）
散了吧,后悔浪费了4h津津有味地看了这个东西,并没有得到我想要的东西. <你的第一本思维到图书> 总结一下:多联想.多思考(打破僵硬的思维).化关键词.运用分类 .用思维导图的方式来指导生 ...
- iMindMap12免费下载安装激活教程及如何免费用思维导图学习
iMindMap思维导图相信你也有过这样的经历,在学习知识的时候,总是在本子上密密麻麻地记录着各种各样的笔记,然而到了考试复习的时候,就拼命地翻书,到了考试,还是有些知识点记不起来.这就说明,这种记笔 ...
- 21天学通c语言思维导图,21天思维导图学习 ----开发脑洞、助力成长
kk 第一次知道"思维导图"这个词,是在参加Grace创办的第一期"成长集训营".她建议我们用思维导图的方式去完成每天的思考作业,了解和认知也仅在于它 ...
- 你还在为怎么学习烦恼嘛？思维导图学习法
Preface 在上篇文章学Java该学什么?中描述Java知识体系时,我用到了一种工具-思维导图来建立起整个Java学习中的知识点.而这种方法被称之为思维导图学习法: 思维导图学习法是我近来开始最常 ...
- XMind课堂之思维导图学习法
思维导图,作为一种有效的图形思维工具越来越受大众欢迎,无论是学生.老师还是上班族,思维导图可以说是必备技能.但是,很多人在接触思维导图时会显得有些焦急,不知道怎么开始去学习它,小编为了带你们走出这类的 ...
- 《NoSQL精粹》思维导图读书笔记
<NoSQL精粹>思维导图读书笔记 各主题笔记 这本书短小精悍,虽不能解答所有NoSQL疑问,但在读书过程中会抛给你不少未曾想过的问题,给人以更深入的思考: 这里对每一个主题分别做了笔记: ...
- 思维导图学习 | 第四篇：java学习特别篇，java正确的学习姿势
配套Ximnd学习导图下载地址 java思维导图:https://gitee.com/1341541819.com/java_xmind/tree/master 写在最后 欢迎关注.喜欢.和点赞后续将 ...
最新文章
- 印度裔Kaggle大神自述：我是如何获得所有4个类别的Grandmaster
- C# 获取MAC地址
- logic多分类的两种类别
- semget创建文件_linux信号灯操作
- linux服务器无密码登录不了,设置ssh无密码登录linux服务器的方法
- 数据分析模型和工具_数据分析师工具包：模型
- 【原】winform高效导出Excel带格式设置
- 转载 ：配置ssh密钥认证自动登录
- 用python爬取东方财富网网页信息_爬取东方财富网数据的网页分析
- CentOS7 系统升级，删除centos7开机界面多余选，升级至最新的内核
- 镜像的使用（6-13）
- harmonyos2.0三大技术特点,科普干货｜漫谈鸿蒙LiteOS-M与HUAWEI LiteOS内核的几大不同...
- 深入了解-微信开发者工具
- 两分钟搞懂，五花八门的门禁卡（ID卡、IC卡、CPU卡），免费复制
- oracle数据库可视化工具
- 认知系列1：认知是什么
- SYSLINUX中文介绍
- 计算机网络知识点总结（超全，配有常见习题）
- 解决配置静态IP还是会出现动态IP地址的问题
- 三星Android Pie软件,三星开始向欧洲Galaxy S9用户推送Android Pie稳定版更新包