600字范文 > (18)C#传智:HTML 属性标签元素 body Font A 列表表格表单 Div Span 框架

(18)C#传智:HTML 属性标签元素 body Font A 列表表格表单 Div Span 框架

时间：2023-12-16 14:29:05

比较简单，无事的跳过，直接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）写框架标签，对双出现，大写写随意。

<html><head><title></title></head><body></body></html>

2、基本标签

HTML基本结构：<html></html>

段落标签：<p></p>

空格标签：  不换行空格(Not-Break Space)

标题标签：<h#>:#=1-6 1最大，6最小

图片标签：<img src="..." />

scr：图片路径。注意：如果htm与图片是同一目录，可以用相对路径。

border: 图片边框，粗细以像素计算

height:图片高度

width:图片宽度

title:鼠标指向图片时的提示(无论是否正常显示)

alt:图片显示失败时的提示

注释标签:

<html><head><title>This is my first Html</title></head><body><p>今朝有酒今朝醉</p><p>莫使金     榜空对月</p><h1>我是标题1 </h1><h2>我是标题2 </h2><h3>我是标题3 </h3><h4>我是标题4 </h4><h5>我是标题5 </h5><h6>我是标题6 </h6><img src="E:\11.png" width="200",heighth="200" border="1px" title="还行吧" alt="这是图片"/></body></html>

练习：

<html><head><title>银河</title></head><body><h1>快来看啊！银河哦!!!</h1><img src="E:\1.png" width="200",height="200" tilte="银河" alt="银河图片"/><h2>科技名词定义</h2><p>中文名称：银河</p><p>英文名称:Milky Way</p><p>观测者所年垤的银河系主体在天球上的投影：在晴朗夜空中呈现为一条边界不规则的乳白色亮带</p><p>应用学科：天文学(一级学科),恒星和银河系（二级学科)</p></body></html>

三、HTML元素

HTML基本块，Html元素

html元素有始有终，可以嵌套，使用小写.

加粗嵌套：<p>英文名称:<b>Milky Way</b></p>

html文档格式标签

标题标签：<h#></h#>

标题的重要性（搜索的问题）

浏览器会在标题前后添加空行

Html水平线：<hr /> horizantal

Html换行: <br /> break

Html中的特殊符号：

>(>),<(<),&(&),空格( )

练习：

<p>在晴朗夜空中呈现为一条边界不规则的乳白色亮带</p>5>3<br/>3<5<br/>这是一个&号<p>应用学科：天文学(一级学科),恒星和银河系（二级学科)</p>

四、Html属性

表现各标签的特征。<img>中的src即为属性

属性以"属性名=值“的形式出现。

属性的值建议用引号括起来；

属性建议以键值对的形式括起来；

一个标签可以有多个属性，用空格分开

<font></font>设置字体

size 字体大小1-7,7最大

color 字体颜色。

练习：

<html><head><title>img标签属性</title></head><body><h1>促销信息</h1><img src="E:\1.png" width="200",height="200" tilte="银河" border="1px"/><br/>拍卖ACER上网本<br/>奔腾双核，1G内存，200G硬盘<p><font size="1" color="green">跳楼疯抢价</font><font size="7" color="red">1</font>元素起</p> </body></html>

五、Html字体

<b> 加粗 Bold

<i> 斜体 Italic

<tt> 等宽(打印机文本) Typewrite Text

<u> 下划线 Underline

<sup>,<sub> 上下标

<s> 删除线 strikeout

练习：

<html><head><title>字体标签</title></head><body><b>要显示的文本内容</b><br/><i>要显示的文本内容</i><br/><tt>要显示的文本内容</tt><br/><u>要显示的文本内容</u><br/><p>要显示<sup>的</sup>文本<sub>内</sub>容</p><s>要显示的文本内容</s><br/></body></html>

六、A标签

1、超链接.

href属性指示链接的地址,注意不写明http会链接失败。不写href只是文本不是链接

<a>百度</a><a href="">百度</a>

跳转：由一个网页地址转向另一个网页地址.

a一般是当前网页时行跳转。

target 指示跳转目标。 target="_blank"新开一个网页来打开链接.

_self则表示是自己，即当前网页。

<a href="" target="_blank">百度</a><a href="" target="_self">百度</a>

2、页面跳转

1)同页面跳转

name 给锚点位置命名,以便其它使用定位到此处。可用ID替代name

href中用"#name"链接到所去之处。

<body><a name="顶端" href="#底端">直到底端</a><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><a name="底端" href="#顶端">回到顶端</a></body>

2）不同页面跳转定位

也可以不同网页中进行锚点。

修改href为"网页#name" ，就可以直接到另一个网页中的锚点位置name中去。

<a name="底端" href="test.html#积累量">回到顶端</a>

3)发送邮件

用href属性 mailto:邮件来发送邮件。点击后会启动默认的邮件软件(outlook)进行发送。

subject=主题名&body=邮件内容

<a href="mailto:252696214@">发送邮件</a><a href="mailto:252696214@？subject=问题收集?body=兼容性不好">发送邮件</a>

一个图片标签，跳到另一个地方显示图片(连接指向另一个图片地址)

文字显示链接，但又不允许连接上。

<a href="#">网易</a>

七、body中的属性

后面用样式表，比body的更强大。

text 设置文字颜色

<body text="red">清风扶山岗,明月照大江<br/></body>

与下面的区别

<font color="red">清风扶山岗,明月照大江</font>

超链接，默认是蓝色，点击后变紫色

link 连接的颜色(默认蓝色），若改为白色则无法看到

alink active点击时,连接的颜色（默认紫色）

vlink visited点击后的颜色(以便识别已经点击过)

bgcolor 背景颜色

background 背景图片，平辅

<body text="green" link="pink" alink="red" vlink="black" bgcolor="gray" background="111.png"><a href="#">清风扶山岗</a><br/><a href="#">清风扶山岗</a><br/></body>

八、html列表

1、无序列表unorder（圆点）

<ul>

...

</ul>

默认没有顺序，前面用小黑点表示。但可用type来指示前面符号

circle小空心圆， square小方块， disk小圆点(默认)

<ul type="square"><li>星期一</li><li>星期二</li><li>星期三</li><li>星期四</li><li>星期五</li></ul>

2、有序列表order（数字）

<ol>

</ol>

默认从数字1开始。可用type指明序列开始。

a则是abc...开始,A则是ABC...开始,I则是罗马字符...开始

<ol type="A"><li>星期一</li><li>星期二</li><li>星期三</li><li>星期四</li><li>星期五</li></ol>

3、自定义列表dl:define list; dt:define table, dd:define data

<dl>

...

</dl>

<dl><dt>面向对象</dt><dd>封闭</dd><dd>继承</dd><dt>C#类型</dt><dd>int</dd><dd>string</dd></dl>

九、Html表格

由于网页不容易控制排列格式，所以表格就显得很重要，它可以让数据排列整齐。

1、语法：

<tr>

<td>单元格内容</td>

</tr>

....

</table>

tr:table row 表中一行数据。

td:table data 表中单元格数据

th:table head 表头（项目）数据，操作同td，只是文本加粗

width,height可以设置表格table的长宽大小

bgcolor 背景颜色

border 边框

align 水平对齐位置 left,center,right

valign 垂直对齐位置 top,middle,bottom

例子：

<table border="1" width="300" height="200"><tr><td>1行1列</td><td>1行2列</td><td>1行3列</td></tr><tr><td>2行1列</td><td>2行2列</td><td>2行3列</td></tr></table>

注意：

1）表格中文字也可添加超链接；

2）表格中文字也可更改颜色，设置字号

3）去掉border后，没有边框，但仍然整齐排列

创建一行两列表格，左边放图片，右边放多行文本。

<table border="1px" ><tr><td ><img src="E:\1.png" width="30" height="30"/></td><td>1行2列<br/>1行2列<br/>1行2列<br/></td></tr></table>

2、间距

cellsspacing 单元格间边框距离（0则无间距，是一条黑线)

cellpadding 单元格内距边框的最小空白。

上面两者是有区别的

<td>还有属性：align,valign,bgcolor,width,height,colspan,rowspan.

<table border="2" cellspacing="7" cellpadding="9"><tr><td ><img src="E:\1.png" width="30" height="30"/></td><td>1行2列<br/>1行2列<br/>1行2列<br/></td></tr></table>

3、合并行与列

1)跨列合并的表格：colspan=数字表示跨列合并的个数(column span)

已经跨列的后面单元，不再进行单元格填写

<table border="1" cellspacing="1" cellpadding="3"><tr><td colspan="2">学生成绩        </td></tr><tr><td>语文</td><td>98 </td></tr><tr><td>数学</td><td>95 </td></tr></table>

2）跨行合并的表格:rowspan=数字，表示跨行的个数(row span)

已经跨行的后面单元格，不再进行填写.

<table border="1"><tr><td rowspan="2">张三</td><td>语文</td><td>98 </td></tr><tr><td>数学</td><td>95 </td></tr><tr><td rowspan="2">李四</td><td>语文</td><td>88 </td></tr><tr><td>数学</td><td>91 </td></tr></table>

3）同时跨行与跨列的表格

从左向右，从上向下，逐个描述。已经跨的单元格不再进行描述。

<table border="1"><tr><td>手机</td><td colspan="3">办公</td></tr><tr><td rowspan="3">总汇</td><td>铅笔</td><td>彩笔</td><td>粉笔</td></tr><tr><td>打印</td><td>刻录</td><td>墨盒</td></tr><tr><td>笔记</td><td>钢笔</td><td>墨水</td></tr></table>

4、综合练习：

1）用<ol><ul>显示歌曲列表。<ol>用abc，<ul>用实点

<ol type="a"><li>爱 </li><li>青苹果乐园</li><li>红蜻蜓 </li><li>芙蓉姐夫 </li><li>水煮鱼 </li></ol>

<hr/>

<ul type="disk"><li>爱 </li><li>青苹果乐园</li><li>红蜻蜓 </li><li>芙蓉姐夫 </li><li>水煮鱼 </li></ul>

2)用<table>作一表，显示姓名，性别，工资，表头加粗，居中显示.显示4个员工

<table width="200" height="100" border="1"><tr><th align="center"><b>姓名</b></tH><th align="center"><b>性别</b></tH><th align="center"><b>工资</b></tH></tr><tr><td align="left">张三 </td><td align="left">男 </td><td align="left">10000</td></tr><tr><td align="right">李四 </td><td align="right">男 </td><td align="right">10000</td></tr><tr><td>王五 </td><td>男 </td><td>10001</td></tr><tr><td>王八蛋</td><td>男 </td><td>10002 </td></tr></table>

3)合并

<table border="1" cellpadding="1" width="300"><tr><th colspan="3">学生基本情况</th></tr><tr><td align="center"><b>姓名</b></td><td align="center"><b>性别</b></td><td align="center"><b>专业</b></td></tr><tr><td>刘备 </td><td align="bottom">男 </td><td rowspan="3" width="50" height="50" bgcolor="green">计算机</td></tr><tr><td>孙尚香</td><td>女 </td></tr><tr><td>诸葛亮</td><td>男 </td></tr></table>

十、表单

html表单是用于搜集用户输入的数据，一般都扩在一对form标签中.

向服务器传输数据（比如用户密码等）

<form>的常用属性

action 表示提交的目标服务器

method 提交的方法get,poster

get 默认，以url提交，就是以地址栏带数据的方式提交

post 通用报文提交

1、表单元素：input,复选框，单选框，提交按钮，textarea等

input 有type属性：text,radio,submit,reset等。

submit默认为提交，reset默认为重置，用属性value可以更改名称。

name 指示控件名称，类似C#中的button1

<html><head><title>表单</title></head><body><form action="" method="get">用户名:<input type="text" name="txtName"/><br/>密码:<input type="password" name="txtPwd"/><br/><input type="submit" value="提交到百度"><input type="reset" value="清空"></form></body></html>

填入用户与密码提交，会转到下面：

/?txtName=abc&txtPwd=123

可以看到get方式是以地址栏，加上数据(键值对)的形式提交：

？key1=value1&key2=value2....

2、单选框的分组radio

默认单选框不分组，多个都可全部选中。用name来分组。用fielset划框，

用legend来说明图例

3、下拉框select

不是写input,而是直接select.每个选项都是option

size 指示选项显示几项

optgroup进行选择分组，name指明分组的名称。

4、照片文件类input file

还需要上照片，证件，材料等文件:

5、多行文本textarea

可容纳无限数量文本，是等宽字体。用cols与rows来设置宽高尺寸.

<textarea cols="50" rows="3">textarea标签是用来定义一个多行的文本输入控件，在文本输入域中可以输入任意长度的文本。还可以使用PHP等程序将此处输入的值发送到服务器，本篇文章我们就来详细介绍关于HTML中textarea标签的用法。</textarea>

6、练习

十一、Div+Span

能够熟练掌握css+div对网页布局

div是一个层级标签，独占多行，可通过style="backgroud:red;width:20;height:40"等

进行设置范围。注意：里面用分号隔开各项，键与值间用冒号。

span主要将修饰文本的放入其中，比如字体。

<html><head><title>Div</title></head><body><div>我是一个Div</Div><p>我是一个p标签</p><div style="background:gray;height:30">Div是一个层级标签</div><b>又是一个吃货</b><div style="background:green;height:30;width:200">Div是一个层级标签</div><hr/><span>Span标签上台表演---</span><b>可以看到span并不独占一行</b></body></html>

十二、框架标签

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个

框架，并且每个框架都独立于其他的框架。

使用框架的坏处：

开发人员必须同时跟踪更多的HTML文档

很难打印整张页面

网页被分成多个框架部分，作为承载这些部分的框架（承载框架），是不允许有body部分。

它专属拥有frameset标签来说明各部分的关系。

先写右边网页:

<html><head><title>right web</title></head><body bgcolor="green">I'm right</body></html>

再来左边网页

<html><head><title>left web</title></head><body bgcolor="pink">I'm left</body></html>

再来一个承载网页：

<html><head><title>index web</title></head><frameset><frame src="left.htm"><frame src="right.htm"></frameset></html>

保存后，打开index.htm发现只显示了第一个（也即left.htm）网页，因为并没有进行

分配它们的位置。

<html><head><title>index web</title></head><frameset rows="30%,*"><frame src="left.htm"><frame src="right.htm"></frameset></html>

修改rows，表示从行的角度进行分配，即上下分配。30%则表示上面3成下面7成。

注意：30%与30不同，30是像素。

上面显示网页后，可以拖动中间的分隔线进行改变大小，这时可以设置其中一个：

<frame src="left.htm" noresize="noresize">

网页不不允许再进行更改大小。

也可以进行左右分配:

<frameset cols="50%,*">

但是，一个网页一次只能进行两部分的分隔.用frameset进行嵌套分隔就可以逐个分隔.

同一目录再建一个top.htm

<html><head><title>top web</title></head><body bgcolor="gray">I'm top.</body></html>

右边的网页加几个链接：right.htm

<html><head><title>right web</title></head><body bgcolor="Teal"><a href="" target="left">猫扑</a><br/><a href="" target="left">打喷嚏</a><br/><a href="" target="left">cnbeta</a><br/><a href="" target="left">51aspx</a><br/></body></html>

把承载网页index.htm修改：

<html><head><title>index web</title></head><frameset rows="15%,*"><frame src="top.htm" noresize="noresize"><frameset cols="50%,*"><frame src="left.htm" noresize="noresize" name="left"><frame src="right.htm"></frameset></frameset></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。