HTML
Web ： Html、Css、JavaScript、JQuery、BootStrap、Vue
JavaWeb ： 使用Java语言开发基于互联网的项目
软件架构
1，C/S Client/Server 客户端 / 服务器端
CS架构需要开发 一个客户端 和一个服务器端
优缺点：
优点：用户体验好
缺点 ：开发多个端，安装、部署、维护都比较麻烦
2，B/S Browser /Server 浏览器 / 服务器端
BS架构只需要开发服务器端软件，用户将来在浏览器中直接通过网址去访问
优点 ： 开发、安装、部署、维护 比较简单
缺点 ：对于服务器的要求高，用户量大的时候，用户体验可能不太好
B/S架构
资源分类 ：
静态资源：使用web（静态网页技术）开发的内容
比如： 文本、图片、音频、视频...
静态资源用户请求的时候，所有用户得到的内容都一样
动态资源：使用动态网页技术(servlet) 开发的内容
比如 ：用户的个人数据
用户在请求动态资源的时候，服务器会将动态资源读取到，转换成静态资源，返回给浏览器，所以，需要先学习静态资源
静态资源
Html ： 搭建网页基础结构，展示页面数据内容
Css： 用来美化页面，完成页面布局的
JavaScript：控制页面元素的，让用户和页面完成交互
Html
概念 ： Hyper Text Markup Language 超文本标记语言
超文本 ：用超链接的方式，将不同的空间的文字组织在一起的网状文本
标记语言 ： 由标签构成的语言
格式： <标签名称>
Html入门：
新建文本文档 -> 输入下面的代码 -> 将文档改名为.html格式文件 -> 双击打开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>标题</title>
</head>
<body>
<p>这是网页的段落标签</p>
<h1>这是网页中的标题标签</h1>
<h2>这是h2标签</h2>
</body>
</html><!DOCTYPE html > 声明本文档是html文档，后面可以加lang=en/zh-CN
<html> 是html页面的根标签
<head> 包含了文档的一些元数据 ，比如<meta charset="utf-8" />
<title> 文档标题标签
<body> 包含将来文档编写的内容
<p><h1> 其他标签，不同的标签，表示不同的含义
标签的组成
双标签 ：有开始标签和结束标签，<body></body>
单标签 ： 开始标签和结束标签写在一起 <meta />
标签的嵌套 ：
正确写法：<a> <b></b></a>
错误写法：<a> <b> </a> </b>
标签的属性
所有的标签都可以添加属性，比如 图片有宽高、链接标签有属性指向链接地址....
属性定义在 标签 的开始标签中，属性有键值构成，一个属性对应一个值，值需要使用双引号
属性的写法 ：
单标签的属性 ：
<标签名 属性名 = "值">
<img src = "xxx.jpg">
双标签的属性：
<标签名 属性名 = "值"> 内容 </标签名>
<font size = "5"></font>
常用的标签
1，文件相关
<html> <head> <title> <body>
2，文本标签
<!-- 文本标签 -->
<!-- 标题标签 h1-h6 字体加大加粗-->
<h1>这是h1标签</h1>
<h2>这是h2标签</h2>
<h3>这是h3标签</h3>
<h4>这是h4标签</h4>
<h5>这是h5标签</h5>
<h6>这是h6标签</h6>
<!-- 段落标签 p -->
<p>段落标签1</p>
<p>段落标签2</p>
<p>段落标签3</p>
<!-- 换行标签 br -->
<p >段落标签段落标签段落标签 <br />
段落标签段落标签段落标签</p>
<!-- 水平线标签 hr
属性 ：color颜色 值： 颜色名、
width 宽度 值： 数字+px、
size 粗细 值：1-9数值 、
align 对齐方式 值： left、right、center
-->
<hr />
<hr color="red" width="50%" size="5" align="left">
<!-- font 字体标签
属性 ：
color ： 颜色
size ： 1-9可以调节大小 ,输入px默认将字体设置为一个较大的字体
face ： 字体样式
-->
<font color="##0000ff" size="10px" face="楷体"> 文本内容</font>
<!-- color 颜色属性 ：取值方式
1，颜色名
2，rgb(0,0,0) rgb(255,255,255) rgb(0,0,255)
3,十六进制表示法： #00ff00 ##0000ff #000 #85fdff
-->
<!-- width 宽度属性
值： 数字+单位 => 100px
百分比 找到父标签的宽度
-->
<!-- 有样式的标签 -->
<b>文本内容，默认加粗的标签</b>
<i>斜体字体</i>
<center>
居中标签
<h1>标题</h1>
</center>
<center>居中标签</center>
<!-- 图片标签 img 单标签
src属性：指定值表示图片的引用
align属性 ：left、right 图片位置
alt属性 ： 图片丢失的情况下，展示的文本-->
<center>
<img src="img/1.jpg" width="100px" alt="">
</center>
<img src="img/2.jpg" height="100px" align="center" alt="">
<img src="./img/3.jpg" height="100px" alt="图片丢失">
<!-- src属性值 ：可以用相对路径和绝对路径来表示
相对路径 ： ./ 或者 ../开头的路径
绝对路径 ： /开头
-->
<!-- 特殊字符 -->
<!-- -->
<p>文本内容文本 内容文本内容文本内容</p>
小于号 < :< 大于号 > : >
列表标签
<!-- 列表 -->
<!-- 无序列表 ul-li -->
<ul type="square">
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
</ul>
<!-- 有序列表 ol-li -->
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
</ol>
<!-- 自定义列表 dl-dt-dd -->
<dl>
<dt>水果类</dt>
<dd>苹果</dd>
<dd>香蕉</dd>
<dd>葡萄</dd>
<dt>城市类</dt>
<dd>南京</dd>
<dd>扬州</dd>
<dd>苏州</dd>
</dl>
链接标签 : <a>标签
<a href="http://www.baidu.com">链接到百度</a>
<a href="./js/new_file.html">链接到页面</a>
<a href="#top">跳转到顶部</a>
<a href="mailto:123123@qq.com">联系我们</a>
<a href="http://www.baidu.com" target="_blank">链接到百度新窗口</a>
<a href="http://www.baidu.com" target="_self">链接到百度老窗口</a>
锚点跳转 ：
设置锚点 ：用a标签设置一个name属性，并指定值
<a name="address">定位</a>
跳转到锚点，将href的值指定为对应的值即可
<a href="#address">跳转到定位</a>
<a href="./js/new_file.html#addr">跳转到其他页面定位</a>
表格标签
table 表格的根标签，所有的表格标签都写在table标签内部
<tr> table标签的子标签 表示行
<td> tr标签的子标签 表示列
<th> tr标签的子标签，表示表头，默认加粗居中
<thead> 表示表格第一行
<tfoot> 表示表格最后一行
<tbody> 表示表格内容
<caption> 表格标题
table标签的常见属性
border 设置边框宽度
cellspacing 设置边框和边框的距离
cellpadding 设置文字到边框的边距
width 设置表格宽度
align 设置表格位置 ，值是 left、right、center
bgcolor 设置背景颜色
tr标签常见属性
bgcolor 设置背景颜色
height 设置行的高度
td标签常见属性
align 设置文字位置，值是 left、right、center
bgcolor 设置背景颜色
width 设置列的宽
colspan 表示合并列，横向合并
rowspan 表示合并行，竖向合并
<!-- 表格标签 table -->
<table border="1px" cellspacing="0" cellpadding="5px"
width="500px" align="center" bgcolor = "#cacaca">
<!-- <tfoot> -->
<tr>
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
<th>第四列</th>
</tr>
<!-- </tfoot> -->
<tbody>
<tr bgcolor = "#8bd6e1" height="50px">
<td align="center" bgcolor = "#db7de1">第1行1列</td>
<td>第1行2列</td>
<td colspan="2">第1行3列</td>
<!-- <td>第1行4列</td> -->
</tr>
<tr>
<td align="center" >第2行1列</td>
<td>第2行2列</td>
<td>第2行3列</td>
<td rowspan="3">第2行4列</td>
</tr>
<tr>
<td align="center" >第3行1列</td>
<td>第3行2列</td>
<td>第3行3列</td>
<!-- <td>第3行4列</td> -->
</tr>
<tr>
<td align="center" >第4行1列</td>
<td>第4行2列</td>
<td>第4行3列</td>
<!-- <td>第4行4列</td> -->
</tr>
</tbody>
<!-- <thead> -->
<!-- thead 定义头一行 -->
<tr>
<td align="center" >第5行1列</td>
<td>第5行2列</td>
<td>第5行3列</td>
<td>第5行4列</td>
</tr>
<!-- </thead> -->
</table>示例代码
<table border="1px" width="800px"
cellspacing="0" cellpadding="5px" align="center" >
<caption>个人简历</caption>
<tr height = "50px" bgcolor="#edfaff">
<td colspan="5">个人资料</td>
</tr>
<tr>
<td width="160px">姓名:</td>
<td width="160px"></td>
<td width="160px">性别:</td>
<td width="160px"></td>
<td width="160px" align="center" rowspan="5">照片</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr height="40px" bgcolor="#edfaff">
<td colspan="5">1</td>
</tr>
<tr height="100px" >
<td colspan="5">1</td>
</tr>
<tr height="40px" bgcolor="#edfaff">
<td colspan="5">1</td>
</tr>
<tr height="100px" >
<td colspan="5">1</td>
</tr>
<tr height="40px" bgcolor="#edfaff">
<td colspan="5">1</td>
</tr>
<tr height="100px" >
<td colspan="5">1</td>
</tr>
<tr height="40px" bgcolor="#edfaff">
<td colspan="5">1</td>
</tr>
<tr height="100px" >
<td colspan="5">1</td>
</tr>
<tr height="40px" bgcolor="#edfaff">
<td colspan="5">1</td>
</tr>
<tr height="100px" >
<td colspan="5">1</td>
</tr>
</table>
</body>表单标签
form标签 ：表单的根标签，将来所有表单相关标签都要放在form标签里面
form属性 ：
action ：表示将来表单的请求访问的地址路径(就是要将数据提交到的某个方法中)
method ：表示提交请求的方法
值：get 请求参数会展示在地址栏中，不太安全，url地址长度有限制
post 请求数据会放在请求体中(后台中) ，比较安全，大小没有限制
form标签中可以使用 表单标签
<input> 标签
disabled 属性 可以禁用input标签
input常用属性1： type
值 ： text 表示文本
password 表示密码
radio 表示单选按钮，要设置相同的name属性值
checkbox 表示多选按钮
file 表示选择文件
color 表示选取颜色
date 表示设置日期
email 表示设置邮箱
hidden 表示隐藏域
button 表示按钮
input常用属性2： name
name ，用来提交数据的时候携带对应表单内容到后台，值一般由自己定义
input常用属性3：placeholder
用来在输入框中提示作用
<textarea> 文本域标签
<select> 下拉菜单标签
selected属性可以默认选择
<form action="##" method="get">
<!-- input标签 -->
用户名: <input type="text" name="username" placeholder="请输入用户名">
<br>
密码 : <input type="password" name="password" placeholder="请输入密码">
<br>
性别 : <label for="man">男</label> <input type="radio" id="man" name="gender" value="man">
<label for="women">女</label> <input type="radio" id="women" name="gender" value="women">
<br>
爱好 : 学习 <input type="checkbox" name="hobby" value="study">
游戏 <input type="checkbox" name="hobby" value="game">
打球 <input type="checkbox" name="hobby" value="ball">
<br>
文件: <input type="file">
<br>
按钮: <input type="button" value="登录">
<br>
颜色: <input type="color">
<br>
生日: <input type="date">
<br>
邮箱 : <input type="email">
<br>
隐藏: <input type="hidden" value="1234" name="test">
<br>
<!-- 文本域标签 textarea -->
个人介绍:<textarea name="" id="" cols="10" rows="5"></textarea>
<br>
<!-- 下拉菜单 select-->
选择城市:<select name="city">
<option value="nj">南京</option>
<option value="yz">扬州</option>
<option value="sz">苏州</option>
</select>
<br>
<input type="submit" value="提交">
</form>其他常用标签
div 普通的块标签
span 普通行内标签
style 用来写样式的
script 用来写js的
link 用来引入css文件的
video 视频标签
audio 音频标签
143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
