html学习
软件体系
-
C/S client server
.Net VB,C#,ASP -
B/S browser server
JAVASE swing
JAVAEE web应用 jsp
HTML (Hyper Text MarkUp Language)超文本标记语言
由该语言编写的代码能够在浏览器上解析并且运行
常用标签：不足20
标记：标签，<标签名>内容</标签名> ,每一个标签都具备修饰内容的
功能。分为单标签和组合标签,单标签语法<标签名/>
html组成由两个部分组成，最外层html标签作用仅仅是标准语法的定义
标签除了可以写内容还可以嵌套其他的标签
网页的注释
注释：不会做为内容显示在网页中，用来编写解释的常用标签
h 标题标签 ：组合标签，从h1-h6 ,h1最大，逐一减小
hr 水平线标签 :单标签，
可以设置color和size属性,设置属性的语法
1 <!DOCTYPE html>
2 <html lang="zh">
3 <head>
4 <meta charset="UTF-8">
5 <title>设置hr变成竖线</title>
6 </head>
7 <body>
8 <hr size="1000" width="1">
9
10 </body>
11 </html>
在开头标签内 属性名=“属性值” 属性2=“属性值”
img 图片标签:用来在网页中放一张图片，通过src属性引入图片的源路径
图片的位置可以通过绝对位置和相对位置来寻找
<img src="images/1.png" alt="这是一张图片未加载时的提示哦" title="悬停时我显示哦">
绝对路径：完整的磁盘路径
G:\beilluo\study\html\day01\work.jpg
相对路径：以当前网页所在的位置去寻找，通过回到上一层和前往下一层
寻找资源
img标签的属性:
src:指定图片的路径
alt:图片未加载时提示问题
title:图片悬停时显示的文字
p 段落标签:组合标签，自带与其他内容的间距
br 换行标签：单标签，用作用来换行
列表标签
有序列表 ol(orderlist)
无序列表 ul(underlist)
列表 li(list)
ul、ol通常和li标签一起使用，ulol只是用于定义一个列表，但是列表中
的选项必须写在li标签内。更改ul和ol的type属性可以更改列表的样式
标签还可以分为行级标签和块级标签
行级标签：指在一个容器中（当前是body）多个行级标签可以在同一行显示,达到容器最大宽度时剩余的宽度不足以显示就默认换行
块级标签：无论任何宽度都独占一行
表格标签
table:组合标签，用于定义一个表格，结核tr和td标签一起使用属性。
width:宽度，以像素为单位，可以设置在table或具体的某个td上
height:高度，同上
border:表格的边框的大小，默认0，以像素为单位
bordercolor:表格的边框的颜色，可以设置16进制或者英文
bgcolor:设置表格的背景颜色，可以加在table,tr,td上
cellspcing:单元格与单元格之间多的间距，有默认值，可以设置像素单位
cellpadding:单元格与内容的距离，会拉伸单元格的大小
align:用于设置水平对齐方式，加在table上时表示table在网页中的位置默认left,居中设置center,靠右设置right
如果加在td上表示单元格内容的水平对齐方式
单元格的合并分为跨行和跨列
跨行rowspan：把多个tr的单元格合并在一起，从当前行往后进行跨行，需要指定rowspan要跨的行数，并且把后面多行的对应的单元格删除
跨行colspan：同一行的多个单元格合并，通过colspan属性设置要合并多少个单元格，删除后面的单元格
练习1：实现下图
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 </head>
7 <table border="1" width="360" height="360"cellspacing="0" cellpadding="0">
8 <tr>
9 <td></td>
10 <td rowspan="2" bgcolor="skyblue"></td>
11 <td colspan="3"bgcolor="red"></td>
12 </tr>
13 <tr>
14 <td></td>
15 <td rowspan="2" colspan="2" bgcolor="brown"></td>
16 <td rowspan="3" bgcolor="pink"></td>
17 </tr>
18 <tr>
19 <td rowspan="2" colspan="2" bgcolor="yellow"></td>
20
21 </tr>
22 <tr>
23 <td></td>
24 <td ></td>
25 </tr>
26 <tr>
27 <td></td>
28 <td ></td>
29 <td colspan="2" bgcolor="maroon"></td>
30 <td></td>
31 </tr>
32 </table>
33 <body>
34 </body>
35 </html>
