首页 > > 网页制作 > css >

我的ASP.NET学习笔记01HTML基础

2018-08-06 09:09:12来源：博客园阅读 ()

HTML基础

一、 <font></font>字体

通常在网页中我们尽量使用宋体，黑体，微软雅黑（win7以上）这些字体。因为这些字体通常是操作系统自带的。如果我们使用了计算机上不存在的字体，那么计算机将使用默认字体，一般是宋体。

二、 color属性（十六进制数值表示123456789abcdef）

设置字体颜色

计算机中通常使用RGB三种(红色，绿色，蓝色）颜色，是由三种颜色的数值来调颜色深浅。每一种颜色数值都是由0到255（最大值255表示为ff）之间的数值来表示，0是最暗颜色（黑），255是颜色最浓（红）。（十六进制）当着三个数值转化为十六进制的数时，它就是00到ff之间的十六进制数，然后按照RGB红绿蓝的顺序，依次排列这六个数字，就形成了类似#ff0000的样子。

比如：红色（r=255，g=0，b=0）转换为十六进制：#红色255表示：ff，绿色为0：00，蓝色为0：00.结果就显示为#ff0000.

快速取色可以去PS中调色板点击颜色，就可显示该颜色的十六进制代码。

三、文字的变体

<b>代表其中的内容用粗体显示

<i>代表其中的内容用斜体显示

<U>代表其中的内容下方添加下划线

<sup>代表其中的内容作为上标来显示（比如平方）

<sub>代表其中的内容作为下标来显示（比如化学元素）

<em>强调，显示效果与<i>相同

<strong>加强，显示效果与<b>相同

四、特殊符号

空格(三种输入空格的方式：一。；二。<pre>按文本格式显示三。使用全角空格，调试格式方便，但是不正规。)

< <

> >

& &

"; “

<img>图像

img图像标签可以帮助我们在网页中插入图片

src属性：文件所在的地址文件名。

width属性：图片的宽度

height属性：图片的高度

title属性：图片的标题与说明。当鼠标移动到图片上时显示说明。

alt属性：当图片由于路径或网速问题显示错误（无法显示）时，会出现的替换文字。

align属性：让图片居左或居右，但是不能居中。（align在dreamweaver中是没有代码提示的。）

五、图文混排：

html中的图文混排，是通过图片的<img>的align属性实现的。否则图片不可能与多行文字处于同一行中。

备注：图片的宽度与高度的单位是像素（即屏幕上最小的一个发光点），像素用PX表示。

六、相对路径与绝对路径

相对路径是指相对自身文件所在的另一个文件或文件夹的位置，所要到达的路径。

一．当路径中只有一个文件名时，说明我要找的这个文件与当前的网页文件存在同一个文件夹中。

二．当另一个文件所处于当前网页文件所在目录的子文件夹中时，在书写路径时要指明所在的位置。格式为：“子目录名/文件名”。当文件处于当前网页文件所在的目录的子文件夹的子文件夹中时，其书写格式为：“一级子目录名/二级子目录名/文件名”。以此类推。

三．当一个文件处于当前网页文件的父文件夹时，其书写格式为“../”，当一个文件处于当前网页文件的父文件夹的父文件夹时，其书写格式为”../../”。

”/”用作划分目录。

七、绝对路径

代表一个文件在计算机上存储的位置。

八、常见图片文件格式：

jpg，jpeg（二者没什么区别，都是压缩图片格式，有一定失真，变模糊）

png（fireworks的图片格式，可以包含图层，它可以在尽量不损失图片清晰度的情况下压缩图片的容量）

gif（可以用于显示一些色彩较为简单的图案，以及动画）

png和gif是支持透明背景的，jpg和jpeg都不支持透明。

bmp（通常不用到网页中，文件较大且不压缩）

HTML基础

HTML概述

九、静态网页与动态网页

所谓静态网页，就是有HTML+javascript组成的网页，静态网页之中不包括任何服务器的动态语言。静态网页的修改与制作完全由开发者手动完成。

html、css、javascript都是由浏览器来执行的。

（浏览器：IE，firefox，chrom，oprea是真正拥有自主研发内核的浏览器。）

注意：每个浏览器打开的同一个网页可能会出现差异，网页制作注意校准各种浏览器的差异

网页扩展名：html、htm、shtml、shtm、asp……（html与htm没区别，只是名字不同。早起操作系统文件扩展名只能有三个字母，所以为htm。而在windows操作系统中，扩展名可以是多个字母，因此才有了html。其实二者没什么区别。）

扩展名：区分各个文件的种类

十、 Html标签

有时也称为html标记、元素，所有html标签都是写在<与>之中。
Html的标签必须成对出现（有开始有结束）第一个<html>表示开始了然后是内容，最后是</html>。
通常结束标签与开始的单词相同，但是单词前面有一条“/ ”

网页就是由html标签与文本内容构成的。

HTML基础语法

一、 <html>

一个网页文件中，所有的网页代码都必须放在html的开始标签和闭合标签中间，闭合区间要在单词前加/。

二、 <head>

就是一个网页的头部，其中放置的是这个网页的参数及配置信息，比如：<title>我是网页的标题</title>

三、 <body>

用来放置网页的正文，网页中所有需要显示的正文内容都是包含中<body>标签中的。

注意：<HTML>标记的下一级，只能包含<head>和<body>。

四、 Html注释

仅仅是一个说明或标注，并不会作为正文显示出来。

语法：

大小余符号加感叹号加左右两个减号。

五、标题：

语法：

<h1>标题一</h1>

<h2>标题二</h2>

<h3>标题三</h3>

<h4>标题四</h4>

<h5>标题五</h5>

<h6>标题六</h6>

六、 Html排版

在html源代码中，我们输入的回车并不会在页面上起到换行的作用。如果需要换行，必须通过<p></p>段落<br />换行。等其他html标签实现。

<p>表示段落标记，功能就是包含一段文本，并让其以段落的格式显示，有行间距，要成对出现。
<br/>表示换行符，是break的缩写。没有两行的间距，相当于输入一个回车。实际意义上被中断的文本任然是同一行，只是显示不同。单个存在，后面加/.

<pre>按原格式显示

让其中包含的文本按照html源代码中书写的格式显示，包括回车、空格，TAB制表符都将会被显示出来。

HTML基础

十一、 <font></font>字体

face

十二、 color属性（十六进制数值表示123456789abcdef）

设置字体颜色

比如：红色（r=255，g=0，b=0）转换为十六进制：#红色255表示：ff，绿色为0：00，蓝色为0：00.结果就显示为#ff0000.

快速取色可以去PS中调色板点击颜色，就可显示该颜色的十六进制代码。

十三、文字的变体

<b>代表其中的内容用粗体显示

<i>代表其中的内容用斜体显示

<U>代表其中的内容下方添加下划线

<sup>代表其中的内容作为上标来显示（比如平方）

<sub>代表其中的内容作为下标来显示（比如化学元素）

<em>强调，显示效果与<i>相同

<strong>加强，显示效果与<b>相同

十四、特殊符号

空格(三种输入空格的方式：一。；二。<pre>按文本格式显示三。使用全角空格，调试格式方便，但是不正规。)

< <

> >

& &

"; “

<img>图像

img图像标签可以帮助我们在网页中插入图片

src属性：文件所在的地址文件名。

width属性：图片的宽度

height属性：图片的高度

title属性：图片的标题与说明。当鼠标移动到图片上时显示说明。

alt属性：当图片由于路径或网速问题显示错误（无法显示）时，会出现的替换文字。

align属性：让图片居左或居右，但是不能居中。（align在dreamweaver中是没有代码提示的。）

十五、图文混排：

html中的图文混排，是通过图片的<img>的align属性实现的。否则图片不可能与多行文字处于同一行中。

备注：图片的宽度与高度的单位是像素（即屏幕上最小的一个发光点），像素用PX表示。

十六、相对路径与绝对路径

相对路径是指相对自身文件所在的另一个文件或文件夹的位置，所要到达的路径。

四．当路径中只有一个文件名时，说明我要找的这个文件与当前的网页文件存在同一个文件夹中。

五．当另一个文件所处于当前网页文件所在目录的子文件夹中时，在书写路径时要指明所在的位置。格式为：“子目录名/文件名”。当文件处于当前网页文件所在的目录的子文件夹的子文件夹中时，其书写格式为：“一级子目录名/二级子目录名/文件名”。以此类推。

六．当一个文件处于当前网页文件的父文件夹时，其书写格式为“../”，当一个文件处于当前网页文件的父文件夹的父文件夹时，其书写格式为”../../”。

”/”用作划分目录。

十七、绝对路径

代表一个文件在计算机上存储的位置。

十八、常见图片文件格式：

jpg，jpeg（二者没什么区别，都是压缩图片格式，有一定失真，变模糊）

png（fireworks的图片格式，可以包含图层，它可以在尽量不损失图片清晰度的情况下压缩图片的容量）

gif（可以用于显示一些色彩较为简单的图案，以及动画）

png和gif是支持透明背景的，jpg和jpeg都不支持透明。

bmp（通常不用到网页中，文件较大且不压缩）

网页背景

添加背景色：在<body>中写入bgcolor属性（<body bgcolor=”颜色代码”>）
添加背景图：在<body>中写入background属性+图片位置。（<body background=”图片位置”>）

网页的背景图片通常是会按照网页的内容自动重复出现，它始终会填满整个页面。

超链接<a></a>

十九、文字链接

语法：<a href=”网址”>链接的文字</a>（href是一个属性，属性内容就是链接内容。）（超链接文字会显示出来，点击超链接文字，浏览器会跳转到该网址）

二十、图片链接

<a href="index.html"><img src="../image/logo.jpg" class="logo" />

</a>邮箱链接

<a href=”mailto+邮箱地址”>显示的邮箱地址</a>

注：mailto是邮箱协议，http是网页协议。

二十一、下载链接

迅雷下载：<a href=”thunder(协议)://QUFodHRwOi8veHh”>文件下载</a>

普通下载：<a href=”file(文件)://asgfsadf.rar”>普通文件下载</a>

二十二、锚点（书签）

就是在当前网页中进行定位，点击锚点之后，浏览器屏幕会自动跳转到锚点所制定的内容所在处。

在制定位置插入锚点，是通过标签的ID属性实现的：

页面首位编辑：<p id=”a1”>第一章</a>

通过点击锚点跳转到本页面制定的位置：

<a href=”#a1”>第一章</a>

表格与列表

在html中表格的内容必须放在<table></table>之中。

二十三、表格的行：<tr></tr>（table row的简写）

在表格之中<tr></tr>里的内容也就是代表是一行中的内容。

<td></td>里的内容也就代表一个单元格中的内容。

二十四、表格中元素的嵌套顺序

一个表格中的所有内容都必须放在<table></table>中
<table>标签所包含的下一级，不能是<td>，只能是<tr>或<thead><tbody><tfoot>,
<td>必须被包含在<tr>中，<tr>必须被包含在<table>中。（层级必须遵循,不然会出错）。

二十五、表格的高度和宽度

表格的整体高度和宽度分别由<table>标签的height和width属性实现，默认单位是像素。

语法：<table border="1"height="200px"width="400">

表格的部分高度与宽度分别由<td>标签的height与width属性实现，但是部分表格改变会影响整个表格的样子，改变的高度与宽度会改变所在单元格的其他表格。

因此，如果我们想要改变行与列的高度宽度，只需要改变第一个单元格的高度与宽度即可。（不要去修改<tr>标签的高宽度，此法无效）

二十六、表格边框

通过在<table标签的border属性实现，比如：

<table border=”1”border-color=”#cc0000”>

其中border-color属性是指边框颜色，border是指边框线宽度。

二十七、表格背景色

表格的整体背景色：<table>的bgcolor属性。

表格中一行的背景色：<tr>de bgcolor属性。

表格中一个单元格的背景色：<td>的bgcolor属性。

二十八、表格的间距

Call是单元格的意思

外边距

单元格与单元格之间的距离，cellspacing

内边距（内填充）

单元格的边框与内容之间的距离。

Cellpadding

二十九、合并单元格

横向合并

通过<td>的colspan来实现，属性值是正整数，代表跨越多个列，也就是占几列的位置。

纵向合并

通过<td>的rowspan现，属性值是正整数，代表跨越多个行，也就是占几行的位置。

注意

当实现单元格合并之后，要删除多余的<td>，因为colspan与rowspan会占用多个单元格的位置。

单元格拆分

实际上仍然是通过合并来实现的，比如：当我们要将一个单元格拆分成两列时，指定的单元格会由一个<td>变为两个<td>，而在这个单元格原本所在列上的其他单元格都会添加一个clospan=”2”，由此实现了单元格的拆分。其本质上仍然是合并操作。

三十、表格内容对齐

用<td>的align属性实现，其属性值有三个：left居左，right居右，center（居中）

垂直方向对齐

用<td>的valign属性实现，其属性值有三个：top(顶部)，middle（中间），bottom（底部）

三十一、序列

有序序列（有数值）

序列中所有内容都必须放在<ol></ol>中，序列中每一项都必须放在<li></li>中：

比如：

<ol>

<li>苹果</li>

<li>李子</li>

<li>香蕉</li>

<li>西瓜</li>

<li>桃子</li>

</ol>

无序序列（有图标）

序列中所有内容都必须放在<ul></ul>中，序列中每一项都必须放在<li></li>中：

比如：

<ul>

<li>苹果</li>

<li>李子</li>

<li>香蕉</li>

<li>西瓜</li>

<li>桃子</li>

</ul>

三十二、表单<form>

<input>输入

表单用于存放和提交一个网页中用户用于填写的数据的html标签。也就是说，用户填写数据的功能标签与数据都必须处于表单之中，也就是<form></form>标签的开始与结束标记之间。

<form>的属性：

Action（开始）：意义就是将表单中的数据提交到某个位置（通常是服务器的一个程序文件的地址）形象的说，就是发信的收件人地址。

Method（提交方式）:它的属性只有两个（二选一）“post”“get”

以Get方式提交表单数据时，数据会被存放在网址后面，与网址一起显示出来，安全性不足。

以post方式提交数据时，数据是不可见的，安全性好，但是网址数据信息不会被存储，不便于保存信息，下一次要重新输入数据，不方便。

单行文本框

语法：<input type=”text”/>单行文本框

属性：

Name :用于区分不同的表单元素

Value :用于当用户还没有输入时，文本框内出现的值。

Maxlength :最多输入的字符数

Size :输入信息的文本框宽度。

Readonly :只读，当其属性值为readonly时，文本框的内容不可改变。

Disabled :当其属性是disabled时，文本框呈灰色状态，不可使用。

密码框password（属性基本与单行文本框类似）

语法：<input type=”password”/>单行文本框

属性：

Name :用于区分不同的表单元素

Value :用于当用户还没有输入时，密码框内出现的值。

Maxlength :最多输入的字符数

Size :输入信息的文本框宽度。

Readonly :只读，当其属性值为readonly时，密码框的内容不可改变。

Disabled :当其属性是disabled时，密码框呈灰色状态，不可使用。

单选框

在一组多个选项中只能有一个被选中。

语法：

<input name=”sex” type=”radio” value=””/>

注意: 多个单选框，只有当他们的name名称一致是才会被识别成一组。一组中只能有一项被选中。

属性：

Name：名称（组名）

Value：被选中时的数值（如：男，女；对，错）

Checked：当其属性值为“checked”的时候，会默认选中该单选框。

复选框

就是可以同时选中多个选项。选中后方框中出现一个“对钩”

语法：

下棋<input type=”checkbox” value=”” name=”fav”/>

按钮

可点击后会激活一段脚本程序。

写法：

<input type=”button”value=”按钮”

属性：

Value：就是在按钮上显示的文字。

提交按钮

当点击提交按钮时，实际上就是将<form>表单中整个数据提交传送到action属性指定的地址去，并且浏览器打开这个地址。

写法：

<input type=”submit” value=”用户注册”

属性：

Value：就是按钮上显示的文字。

重置按钮

就是清空整个表单中用户所填写的数据。

写法：

<input type=”reset” value=”重新填写”/>

多行文本框

就是一个可输入大量文本的输入区域。

写法：

<textarea cols=”100” rows=”10”>请输入您的心情日记</textarea>

Cols：文本框宽度

Rows：文本框高度

默认内容：在textarea开始标签与结束标签之间的内容，会作为多行文本框的默认内容显示出来。

下拉菜单/列表

提供多个选项让用户选择。

写法：

<select name=”address” size=”5” multiple=”multiple”>

<option value=”重庆”>重庆</option>

<option value=“四川”>四川</option>

</select>

其中，列表中选项，必须包含在<select>开始与结束标签之中，以<option>标签的形式出现，<option>的value属性代表选项的值，<option>开始与结束标签之间的文本，就是在列表中会显示出来的选项文本。

属性

Size：列表中的这个很关键，因为它可以决定列表显示形式是“下拉菜单“还是”列表选项“，当没有size属性时，显示为下拉菜单，当存在size属性时，显示为列表选项，并且其值为列表高度。

Multiple:其属性值也好似“multiple”时，列表的选项可以多选。（多选时可以按住shift或ctrl键依次点选）

文件域

让用户选择一个文件作为表单数据，然后和表单一起被提交到服务器。

写法：

<input name=”” type=”file”/>

图片按钮

实际上其功能与按钮<input type=”button”/>相同，唯一不同之处仅仅是它的显示是一张图片。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：css的三个特性背景透明设置

下一篇：我的ASP.NET学习笔记03CSS基础知识

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签

我的ASP.NET学习笔记01HTML基础

HTML基础

一、 <font></font>字体

二、 color属性（十六进制数值表示123456789abcdef）

三、 文字的变体

四、 特殊符号

<img>图像

五、 图文混排：

六、 相对路径与绝对路径

七、 绝对路径

八、 常见图片文件格式：

HTML概述

九、 静态网页与动态网页

十、 Html标签

HTML基础语法

一、 <html>

二、 <head>

三、 <body>

四、 Html注释

五、 标题：

六、 Html排版

HTML基础

十一、 <font></font>字体

十二、 color属性（十六进制数值表示123456789abcdef）

十三、 文字的变体

十四、 特殊符号

<img>图像

十五、 图文混排：

十六、 相对路径与绝对路径

十七、 绝对路径

十八、 常见图片文件格式：

网页背景

超链接<a></a>

十九、 文字链接

二十、 图片链接

</a>邮箱链接

二十一、 下载链接

二十二、 锚点（书签）

表格与列表

二十三、 表格的行：<tr></tr>（table row的简写）

二十四、 表格中元素的嵌套顺序

二十五、 表格的高度和宽度

二十六、 表格边框

二十七、 表格背景色

二十八、 表格的间距

外边距

内边距（内填充）

二十九、 合并单元格

横向合并

纵向合并

三十、 表格内容对齐

三十一、 序列

有序序列（有数值）

无序序列（有图标）

三十二、 表单<form>

<form>的属性：

单行文本框

密码框password（属性基本与单行文本框类似）

单选框

复选框

按钮

提交按钮

重置按钮

多行文本框

下拉菜单/列表

文件域

图片按钮

三、文字的变体

四、特殊符号

五、图文混排：

六、相对路径与绝对路径

七、绝对路径

八、常见图片文件格式：

九、静态网页与动态网页

五、标题：

十三、文字的变体

十四、特殊符号

十五、图文混排：

十六、相对路径与绝对路径

十七、绝对路径

十八、常见图片文件格式：

十九、文字链接

二十、图片链接

二十一、下载链接

二十二、锚点（书签）

二十三、表格的行：<tr></tr>（table row的简写）

二十四、表格中元素的嵌套顺序

二十五、表格的高度和宽度

二十六、表格边框

二十七、表格背景色

二十八、表格的间距

二十九、合并单元格

三十、表格内容对齐

三十一、序列

三十二、表单<form>