(18)C#传智:HTML,属性,标签,元素,body,Font,A,列表,表格,表单,Div,Span,框架
比较简单，无事的跳过，直接w3c.school
一、HTML简介
一个实例：右键查看源文件（标签，属性，内容...)
HTML文档=网页
HTML超文本标记语言(Hyper Text Markup Language)
HTML标签：不区分大小写，有些大写是自动生成的。
页面包括：格式标签与页面内容。标签把要显示在网页的内容包含起来，就构成网页。
网页的样貌由css来呈现，它控制着内容显示的效果。
网页文件格式：.html 或 .htm
学习HTML是通用语言，需要：浏览器与记事本
使用工具：记事本,NotePad++,EditPlus...
网页三剑客:DreamWeaver,FireWorks,Flash
FrontPage
学习HTML方法：多记，多练
HTML+CSS=静态网页(过时)
JS+Jquery
二、编写HTML页面
1、步骤：
1）建立一个文本文件
2）创建的文件后缀名改为.htm或.html
3）写框架标签，对双出现，大写写随意。
2、基本标签
HTML基本结构：
段落标签：
空格标签： 不换行空格(Not-Break Space)
标题标签：
图片标签：
scr：图片路径。注意：如果htm与图片是同一目录，可以用相对路径。
border: 图片边框，粗细以像素计算
height:图片高度
width:图片宽度
title:鼠标指向图片时的提示(无论是否正常显示)
alt:图片显示失败时的提示
注释标签:
This is my first Html 今朝有酒今朝醉
莫使金 榜空对月
我是标题1
我是标题2
我是标题3
我是标题4
我是标题5
我是标题6
![]()
练习：
银河 快来看啊！银河哦!!!
![]()
科技名词定义
中文名称：银河
英文名称:Milky Way
观测者所年垤的银河系主体在天球上的投影：在晴朗夜空中呈现为一条边界不规则的乳白色亮带
应用学科：天文学(一级学科),恒星和银河系（二级学科)
三、HTML元素
HTML基本块，Html元素
html元素有始有终，可以嵌套，使用小写.
加粗嵌套：
英文名称:Milky Way
html文档格式标签
标题标签：
标题的重要性（搜索的问题）
浏览器会在标题前后添加空行
Html水平线：
horizantal
Html换行:
break
Html中的特殊符号：
>(>),<(<),&(&),空格( )
练习：
在晴朗夜空中呈现为一条边界不规则的乳白色亮带
5>3
3<5
这是一个&号应用学科：天文学(一级学科),恒星和银河系（二级学科)
四、Html属性
表现各标签的特征。中的src即为属性
属性以"属性名=值“的形式出现。
属性的值建议用引号括起来；
属性建议以键值对的形式括起来；
一个标签可以有多个属性，用空格分开
设置字体
size 字体大小1-7,7最大
color 字体颜色。
练习：
img标签属性 促销信息
![]()
拍卖ACER上网本
奔腾双核，1G内存，200G硬盘跳楼疯抢价1元素起
五、Html字体
加粗 Bold
斜体 Italic
等宽(打印机文本) Typewrite Text
下划线 Underline
, 上下标
删除线 strikeout
练习：
字体标签 要显示的文本内容
要显示的文本内容
要显示的文本内容
要显示的文本内容
要显示的文本内容
要显示的文本内容
六、A标签
1、超链接.
href属性指示链接的地址,注意不写明http会链接失败。不写href只是文本不是链接
百度百度
跳转：由一个网页地址转向另一个网页地址.
a一般是当前网页时行 跳转 。
target 指示跳转目标。 target="_blank"新开一个网页来打开链接.
_self则表示是自己，即当前网页。
百度百度
2、页面跳转
1)同页面跳转
name 给锚点位置命名,以便其它使用定位到此处。可用ID替代name
href中用"#name"链接到所去之处。
直到底端
回到顶端
2）不同页面跳转定位
也可以不同网页中进行锚点。
修改href为"网页#name" ，就可以直接到另一个网页中的锚点位置name中去。
回到顶端
3)发送邮件
用href属性 mailto:邮件 来发送邮件。点击后会启动默认的邮件软件(outlook)进行发送。
subject=主题名&body=邮件内容
发送邮件发送邮件
一个图片标签，跳到另一个地方显示图片(连接指向另一个图片地址)
照片
文字显示链接，但又不允许连接上。
网易
七、body中的属性
后面用样式表，比body的更强大。
text 设置文字颜色
清风扶山岗,明月照大江
与下面的区别
清风扶山岗,明月照大江
超链接，默认是蓝色，点击后变紫色
link 连接的颜色(默认蓝色），若改为白色则无法看到
alink active点击时,连接的颜色（默认紫色）
vlink visited点击后的颜色(以便识别已经点击过)
bgcolor 背景颜色
background 背景图片，平辅
清风扶山岗
清风扶山岗
八、html列表
1、无序列表unorder（圆点）
- ...
- ...
...
默认没有顺序，前面用小黑点表示。但可用type来指示前面符号
circle小空心圆， square小方块， disk小圆点(默认)
- 星期一
- 星期二
- 星期三
- 星期四
- 星期五
2、有序列表order（数字）
默认从数字1开始。可用type指明序列开始。
a则是abc...开始,A则是ABC...开始,I则是罗马字符...开始
- 星期一
- 星期二
- 星期三
- 星期四
- 星期五
3、自定义列表dl:define list; dt:define table, dd:define data
- ...
- ...
- ...
- ...
...
- 面向对象
- 封闭
- 继承
- C#类型
- int
- string
九、Html表格
由于网页不容易控制排列格式，所以表格就显得很重要，它可以让数据排列整齐。
1、语法：
| 单元格内容 |
tr:table row 表中一行数据。
td:table data 表中单元格数据
th:table head 表头（项目）数据，操作同td，只是文本加粗
width,height可以设置表格table的长宽大小
bgcolor 背景颜色
border 边框
align 水平对齐位置 left,center,right
valign 垂直对齐位置 top,middle,bottom
例子：
1行1列 1行2列 1行3列 2行1列 2行2列 2行3列
注意：
1）表格中文字也可添加超链接；
2）表格中文字也可更改颜色，设置字号
3）去掉border后，没有边框，但仍然整齐排列
创建一行两列表格，左边放图片，右边放多行文本。
![]()
1行2列
1行2列
1行2列
2、间距
cellsspacing 单元格间边框距离（0则无间距，是一条黑线)
cellpadding 单元格内距边框的最小空白。
上面两者是有区别的
![]()
1行2列
1行2列
1行2列
3、合并行与列
1)跨列合并的表格：colspan=数字 表示跨列合并的个数(column span)
已经跨列的后面单元，不再进行单元格填写
学生成绩 语文 98 数学 95
2）跨行合并的表格:rowspan=数字， 表示跨行的个数(row span)
已经跨行的后面单元格，不再进行填写.
张三 语文 98 数学 95 李四 语文 88 数学 91
3）同时跨行与跨列的表格
从左向右，从上向下，逐个描述。已经跨的单元格不再进行描述。
手机 办公 总汇 铅笔 彩笔 粉笔 打印 刻录 墨盒 笔记 钢笔 墨水
4、综合练习：
1）用
- 爱
- 青苹果乐园
- 红蜻蜓
- 芙蓉姐夫
- 水煮鱼
- 爱
- 青苹果乐园
- 红蜻蜓
- 芙蓉姐夫
- 水煮鱼
- 显示歌曲列表。
- 用abc，
- 用实点
2)用
| 姓名 | 性别 | 工资 |
|---|---|---|
| 张三 | 男 | 10000 |
| 李四 | 男 | 10000 |
| 王五 | 男 | 10001 |
| 王八蛋 | 男 | 10002 |
3)合并
学生基本情况 姓名 性别 专业 刘备 男 计算机 孙尚香 女 诸葛亮 男
十、表单
html表单是用于搜集用户输入的数据，一般都扩在一对form标签中.
向服务器传输数据（比如用户密码等）