HTML

最新推荐文章于 2024-08-12 09:01:38 发布

王如霜

最新推荐文章于 2024-08-12 09:01:38 发布

阅读量821

点赞数

分类专栏：基础 C#

本文链接：https://blog.csdn.net/wrs120/article/details/53688916

版权

基础同时被 2 个专栏收录

48 篇文章 4 订阅

订阅专栏

11 篇文章 0 订阅

订阅专栏

【概念】

HTML:Hyper Text Markup Language的缩写，称为超文本标记语言。

【查看】

在要打开的网页上右击—查看源代码，就会打开该网页的源代码（一堆字母），如图所示

【基础知识】

一：HTML标签不区分大小写，但有些大写是自动生成的

二：HTML标签多数是成对出现的

三：HTML标签可以嵌套

四：网页的文件格式为：.html或.htm

【元素】

一：包括“头部”（Head）、和“主体”（body），其中

“头部”提供关于网页的信息，上图中“上网导航 - 轻快上网从这里开始”就是头部，即在网页的标签栏里显示的内容；

“主体”提供网页的具体内容，即网页中显示的内容

二：HTML基本标签

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

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

空格标签：&nbsp，如果在文本中直接打空格，无论打多少个空格，也只显示一个空格

标题标签：<h#>:#的值为1—6,数字不同，标题文字的大小不同

注释标签：，运行的网页上不会显示该注释内容

图片标签：<img src="图片的路径"/>，分为两种路径，A.全路径 B.决定路径（相对于所见文本的位置，此时只写照片的名称）

水平线标签：<hr/>

拆行：<br/>

特殊符合：&gt：>，&lt：<

三：属性

1.img图像

<imgsrc="学习.gif"alt="清晨去上学的照片"title="清晨去上学"border="2"bordercolor="red"width="500"height="400"/>

A:alt：图片的内容，当图片加载不出来是，会在图片的位置显示该内容

B:title：图片的信息，当鼠标移动到图片上时，会自动显示该内容

C:boder：图片外侧相框的宽度，默认像素

D:width：图片的宽度

E:height：图片的高度，两者就是图片的大小

F:bordercolor：边框的颜色

G:如果要想让如片在网页中动态显示，需要如下语句：<marquee direction="right" behavior="altermate" scrolldelay="50">

direction：设置图片移动的方向，属性值有right，left，up，down

behavior：设置图片的显示效果，属性值：scroll（当图片滚出屏幕时，重新滚动）；slide（图片画到屏幕的头就不动了）；alternate（图片滚动屏幕头上时从该边再滚动回去）

scrollamount：图片移动的速度，默认以像素为单位

在网页上就会出现如下图片：

2.<ht/>标尺线

<hr size="50" width="500" noshade="noshade" color="pink" align="center"/>

A:size：:线的高度

B:width：线的宽度，即长度

C:align（left，right，center）：线的位置，靠左，靠右，中间

D:noshade：水平线为非立体的平面水平线，如果不写，默认为立体的

E:color：水平线的颜色，pink，yellow，red，black。。。

此时网页显示为如下图：

3.<a href="链接地址"></a>链接

A:链接到本文档的某位置（可以是文本标签，也可是图片标签）<a name="调到下面" href="调到上面">跳到下面</a>

B:链接到指定网页：<a href="http:www.baidu.com">

4:<table>表格

<table border="1" cellspacing="2 cellpadding="10" width="200" bordercolor="red" bgcolor="gold" >

<tr width="100">

<td rowspan="2" align="center">搜索</td>

<td align="center"><a href="http:www.baidu.com">百度</a></td>

</tr>

<tr>

<td align="center"><a href="http:www.coogle.com">Coogle</a></td>

</tr>

<tr>

<td align="center" rowspan="2">学习</td>

<td align="center"><a href="http:www.haozhi.com">好知</a></td>

</tr>

<tr>

<td align="center"><a href="http:www.hao123.com">hao123</a></td>

</tr>

</table>

A:border：外边框的宽度

B:cellspace：单元格之间的距离

C:cellpadding:单元格中的字与单元格边框的距离

D:<tr></tr>：添加一行：colspan（跨列）

E:<td>单元格内容</td>：添加一列，align：单元格中的内容在单元格中的位置；rowspan（跨行）：

设计出的效果如下图：

5：<ol></ol>列表分为：

<ol type="A">

<font color="purple" type="幼圆" size="5"><li>会应用</li></font>

<font color="purple" type="幼圆" size="5"><li>会写代码</li></font>

</ol>

无序列表unorder：默认为unorder

有序列表order：默认为数字，可利用type属性设置显示类型

自定义列表

6：<form></form>表单

A:text标签：type=“text”，可设置长度：maxlength，大小：size，必须有name属性

B:密码框：type=“password”

C:文本域标签：<textarea></textarea>,readonly:设置里面的内容不能修改，为只读

D:提交按钮标签：type=“submit”

E:重置按钮：type=“reset”、

F:按钮：type=“button”

G:多选框：type=“checkbox”

H:单选框：type=”radio“

I:文件按钮：type=”file“

G:列表标签<select></select> ，要设置value值