HTML
Java软件架构
-
C/S:使用之前需要安装。大部分游戏。client server
-
B/S：Brower浏览器 Server 服务端编程
(我们主要浏览器/服务器的开发)(web前端：客户端编程)
前后端分离
使前端与后端独立。后端：数据接口，后台url地址，http请求访问url接口，实现数据交互
前端必备;HTML,CSS,JS
HTML：用来描述网页的一种语言；超文本标记语言。用来做动画，音频，视频，特效，超链 用标签来定义网页 成对儿标签 <abc> </abc> 或<abc/>单独
HTML网页元素
head中引入的标签含义 html:文档的根部 head:头，标签处、里面有：title成对:适配搜索 meta单独charset=''UTF-8''代表可以使用所有语言 link链接单独，引入cee样式
style:定义css样式。
script:定义js,也可以引入js
body中引入的基本标签
h:h1~h6：标题标签，字体变大变粗变黑，依次变小变细，上下空一行 P:段落：可以来换行，即上下空一行，两行直接想空行 br:换行，居中就可以，相当于回车
文本格式化标签(知道就行，不推荐使用)
<body bgcolor="green">
<b>加粗</b><br>
<code>计算机代码</code><br>
<em>强调文本</em><br>
<i>斜体</i><br>
<kbd>键盘输入</kbd><br>
<pre>预格式 //原文原封不动放入
哈哈
</pre><br>
<small>更小的字体</small><br>
<strong>加粗</strong><br>
<abbr>缩写</abbr><br>
<address>地址</address><br>
<bdo>文字方向</bdo>
<blockquote>从另一个源引入</blockquote>
<cite>工作</cite>
log<sub>10</sub>
m<sup>2</sup>
<ins>插入文本</ins>
<del>删除文本</del>
<font size="7" color="red">我是font</font>
</body>
超级链接(重要)
锚记链接：<a href="#tips">锚记链接</a>
普通的链接：<a href="html03.html" target="_blank" title="点我">走你</a><br><br>
图片链接：<a href="http://www.baidu.com">
<img src="img/lijian.jpeg"></a>
<br>
邮箱：<a href="mailto:123456789@qq.com">站长信箱</a>
<br>
<a id="tips">目标位置</a>
../ :放回上一级目录 ；./ :当前目录
其属性：target:“_blank”在新窗口打开
“_self”在当前窗口打开
_parent/_top：在父容器（顶级父容器）打开
title:链接的提示文字
锚记链接：回到顶部，回到底部
图片
src：图片的路径；alt:图片加载不出来的时候，给的图片提示文字 height:高；width:宽（尽量指定一个属性） align:对齐方式（不单只图片） marquee:弹幕；loop:循环;
<img src="img/lijian.jpeg" height="200" alt="李健在唱歌" title="李健很帅" align="center">李健北京演唱会
<marquee loop="1">弹幕</marquee>
区块/空白
div/span:空白【css】,div是一个块，立方体可以有宽和高；
span:不显宽高，尺寸根据字体大小确定
<head>
<style>
div {
height: 200px;
width: 200px;
background: red;
}
span {
height: 100px;
width: 1000px;
background: yellow;
}
</style>
</head>
<body>
<div>div</div>
<span>span8787787987987987</span>
</body>
组标签
（1）无序列表：自带换行 ul:嵌套着li, （前面一般有标识符小黑点，用type改变黑点样式） （2）有序列表：自动换行，除了文本格式化 ol嵌套这li （3）自定义列表 dl嵌套dt和dd
<body>
无序列表：
<ul type="disc">
<li>我是无序列表</li>
<li>我是无序列表</li>
</ul>
有序列表：
<ol>
<li>我是有序列表</li>
<li>我是有序列表</li>
</ol>
自定义列表：
<dl>
<dt>项目1</dt>
<dd>描述项目</dd>
<dt>项目2</dt>
<dd>描述项目</dd>
</dl>
</body>
表格
排版布局，一组标签,生成一个*5的表格 table-tr-td， border:线，cellspacing:单元格间距 cellpedding: 单元格内间距，字体到线距离； height,align,background:背景图片， 背景图片背景颜色同时出现先显示背景图片 tr-th表头 thead:语义化,表示将表头部份包起来；thaed;tbody;tfoot colspan:跨列，合并单元格，高对应跨行，宽对应跨列 rowspan:跨行，合并单元格 缩进shif+alt+f
<body>
表格：生成一个5*5的表格
<table border="1" cellspacing="0" cellpadding="10">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>手机号</th>
<th>专业</th>
<th>家庭住址</th>
</tr>
</thead>
<tbody>
<tr>
<td>1001</td>
<td>张三</td>
<td>男</td>
<td>13312345678</td>
<td>计算机科学与技术</td>
<td rowspan="2">吉林省长春市朝阳区</td>
</tr>
<tr>
<td>1002</td>
<td>李四</td>
<td>女</td>
<td>13545678912</td>
<td>软件工程</td>
</tr>
</tbody>
<tfoot>
<tr align="center">
<td colspan="6">备注：上述学生为党员积极分子</td>
</tr>
</tfoot>
</table>
</body>
iframe框架，内嵌其他网页 iframe src=;height;width src:目标页面的路径，指向要播放的音频文件
<body>
<iframe src="html08.html" height="600" width="600"></iframe>
<br>
锄禾日当午，汗滴禾下土。
</body>
转义字符（实体）：<小于号，>大于号，&nbst空格 ©版权号 hr:水平分割线
<body>
<p>
<hr size="1" color="red">
转义字符&lt;和gt， 还有别的
©版权号
</body>
表单元素
form：提交数据 ；属性：action:数据的提交地址
radio:单选框，可以用name来区分，name="gender">男；
文本框：text;password:密码；checkbox:复选框 select -option嵌套；email邮箱；data日期；file文件域（头像）；submit提交——属性, value= ,改变提交名称，可以改成注册之类的 reset重置；button:自定义*（自定义）[成对]
注释：ctrl+/ 提交和重置按钮，只能控制和他在同一个form标签里的元素 textarea文本区 文本框的内容就是value值 readonly只读；disabled失效;placeholder水印；required必须的 (前后端交互的事情，浏览器开发者工具F12) id:每个HTML元素的唯一标识 表单提交的数据格式：usename=admin等号左边是表示表单元素的name属性，右边是表单元素的value属性 method:get:提交的数据都会显示在地址栏，提交数据有限制；post请求:在地址的payload，提交数据没限制， 封装一个请求体
HTML5新推出
audio,video 语义化 footer网页的脚；header 网页的头；nav导航栏；aside侧边栏；time定义日期或时间 HTML5兼容性不是很好
表单包含表格，表单是为了将前端数据弄过去
总结：今天学的内容可以分为两大类 1.行级元素：不能自己换行 2.块级元素：能自己换行 重点：超级链接，表格，表单，浏览器开发工具
浙公网安备 33010602011771号