HTML语言
1、软件架构
1.1C/S架构
1.1.1优点
1、用户体验好
2、界面比较优美
1.1.2缺点
维护和安装比较麻烦
1.2B/S架构 ★
1、优点:
升级维护很方便
2、缺点:
用户体验稍差
2、资源分类
2.1静态资源
2.1.1特点:
页面不会发生改变
2.1.2静态开发技术
1. HTML语言:显示页面内容
-
CSS语言:对页面进行渲染
-
javaScript语言:给页面添加动画效果
2.2动态资源
2.2.1特点:
数据由程序动态生成的
2.2.2动态开发技术
- Servlet
- JSP
3、HTML语言
1.概念: 超文本标记语言
2.作用: 显示页面内容3.1语法
3.1.1HTML文件夹的扩展名 *.html 或 *.htm
3.1.2HTML由标签构成
1.HTML标签都是预先定义好的,我们只能去使用
2.HTML标签不区分大小写
3.HTML标签围堵标签 <开始标签></结束标签>
4.HTML自闭合标签 <标签/>
3.1.3HTML文件的标准结构
根标签 头标签 1.标题标签 2. 引入CSS样式文件 3. 引入javaScript文件 体标签 页面的主体部分 <h2><a id="4_86"></a>4、常见标签</h2> <h4><a id="41_88"></a>4.1文本标签</h4> <h6><a id="411_hn_90"></a>4.1.1标题标签 </h6> <p> 特点: 数字越大,字体越小</p> <h6><a id="412_hr_94"></a>4.1.2水平线标签 <hr/>属性</h6> <p> 1、color 颜色<br/> 1. 英文单词<br/> 2. #红绿蓝 三原色<br/> 2、size 线的高度<br/> 3、width 宽度<br/> 1. 像素(px)<br/> 2. 百分比 50%<br/> 5、align 水平对齐方式<br/> left 左对齐<br/> center 居中<br/> right 右对齐</p> <h6><a id="413font_108"></a>4.1.3字体标签<font>属性</font></h6> <p> color 颜色<br/> face 字体(楷体/宋体)<br/> size 字体大小<br/> 默认为3<br/> 粗体<b><br/> 斜体<i><br/> 段落</i></b></p><p><br/> 换行<br/><br/> 居中标签<center></center></p> <h4><a id="42img_120"></a>4.2图片标签<img/></h4> <h6><a id="421_122"></a>4.2.1重要的属性</h6> <p> 1、src 展示图片的路径<br/> 2、路径的写法<br/> 1. )相对路径 (了解)<br/> ./ 当前目录(可以省略不写)<br/> …/ 上一级目录<br/> 2.) 绝对路径<br/> 1. 带盘符的路径(了解)<br/> 2. 带HTTP网络协议的路径 ★</p> <h6><a id="422_133"></a>4.2.2了解属性</h6> <p> width 宽度<br/> height 高度<br/> alt 图片无法加载时替代文本<br/> title 图片提示信息</p> <h4><a id="43_140"></a>4.3超链接标签</h4> <p>超链接标签<a><br/> 作用: 提供了一种从一个页面访问页面的方式<br/> 属性:<br/> * href 需要访问页面的路径<br/> * target 页面打开方式<br/> 1. _self 当前窗口打开<br/> 2. _blank 新窗口打开.</a></p> <h4><a id="44_150"></a>4.4表格标签</h4>
作用:
1. 显示数据 --★
2. 页面布局 --了解 div+css布局
格式:
|---- 行
|-----<th|td>
注意事项: 数据一定要写到th或td中
合并单元格 th|td
colspan: 合并列
rowspan: 合并行