HTML
web：Html,Css,JAVAScript,JQuery,BootStrap,Vue
软件架构：
1. C/S Client/Server 客户端/服务器端
CS架构开发需要开发一个客户端，一个服务器端（开发两个）
优缺点:
优点：用户体验好
缺点：开发多个端，安装，部署，维护都比较麻烦
2.B/S Browser/Server 浏览器/服务器端
BS架构开发只需要开发服务器端软件，用户将来直接通过浏览器的网址地址来访问
优缺点:
优点：开发一个端，安装，部署，维护都比较简单
缺点：对于服务器的要求高，用户量大的时候，用户体验可能不太好
B/S架构
资源分类
静态资源：使用web（静态网页技术）开发的内容
比如：文本，图片，音频，视频....
静态资源的特点：用户请求的时候，所有用户得到的内容都一样
动态资源：使用动态网页技术（java里就是servlet）开发的内容
动态资源的特点：动态页面，用户的个人数据
用户在请求的时候，服务器会根据动态资源读取到，转换成静态资源，返回给浏览器，所以需要先学习静态资源
静态资源
Html:搭建网页基础结构，展示页面数据内容
CSS：用来美化页面，完成页面布局的
JavaScripts:用来控制页面元素的，让用户和页面完成交互
Html
概念 Hyper Text Markup Language 超文本标记语言
超文本：用超链接的方式，将不同的空间的文本组合在一起的网状语言
标记语言：由标签构成的语言
格式：<标签名称>
注意：标签语言不属于编程语言。
Html入门：
新建文本文档->输入下面的代码->将文档改名
为.hrml格式文件 ->双击打开
<!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>包含了文档的一些元数据，比如<metacharest="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 音频标签
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
