HTML思维导图+学习笔记+实际案例

最新推荐文章于 2024-07-25 02:11:29 发布

海闊天空Chan

最新推荐文章于 2024-07-25 02:11:29 发布

阅读量1.9k

点赞数 9

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/qq_45647642/article/details/105958635

版权

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、框架

最低0.47元/天解锁文章

海闊天空Chan

关注

9
点赞
踩
34

收藏

觉得还不错? 一键收藏
2
评论
HTML思维导图+学习笔记+实际案例

一、前导*JavaWeb javaSE–>>javaEE使用java语言开发互联网项目*软件架构1、C/S(Client/Server)客户端/服务器端*用户在本地有一个客户端程序，在远程有一个服务器端程序例如：QQ\迅雷优点：用户体验比较好缺点:开发、安装、部署、维护麻烦2、B/S(Brower/Server)浏览器/服务器*只需要一个浏览器，用户通过不同URL...
复制链接

扫一扫

专栏目录