HTML基础笔记

最新推荐文章于 2024-11-01 10:26:53 发布

dianrujiu1116

最新推荐文章于 2024-11-01 10:26:53 发布

阅读量132

点赞数

文章标签： php 运维 javascript ViewUI

原文链接：http://www.cnblogs.com/wepng/p/4848735.html

版权

HTML基础笔记

创建一个最简便的浏览器

首先打开VS2010，然后在空间里拖出一个Form控件当主页面，其次拖出一个Textbox控件作为地址栏，然后加一个Button控件作为按钮，最后拖出一个WebBrowser作为显示界面。

然后点击Button按钮，然后书写代码

WebBrowser1.Navigate(textBox1.Text);

调整启动项：在资源管理其中右键属性，设置当前选定内容，然后选中要测试的选项，即可进行启动测试。

一些电脑中不显示后缀名怎么办？可以打开一个文件，按alt键，就会出现菜单栏，在工具选项中选择文件夹选项，点击查看，然后选择隐藏后缀名，将勾去掉即可。如何更改Notepad++新建文档的后缀名呢？需要把文档另存为，然后选择所有文件，并写后缀名为所需的，例如html。

符合规范的：<body bgcolor=”red” text=”blue”>啦啦啦啦</body>，在背景颜色和文字颜色属性中间是空格。

不符合规范的：<body bgcolor=”red”,text=”blue”>啦啦啦啦</body>，在背景颜色和文字颜色属性中间是逗号。

不符合规范的：<body bgcolor=red text=blue>啦啦啦啦</body>，属性值无双引号。

一般符合规范的是中间空格，而不是逗号，而且必须带双引号。而不符合规范的也可以写，也可以显示，但是不符合规范。在学习的时候要符合规范，在实际应用的时候为了能够减小文件大小，可以使用简化方式。

静态页面是什么？网页代码都在页面当中，不用执行asp、php、jsp、net等程序生成客户端代码。可以从网址后缀名判断。静态页面的效果是通过js和css来效果实现的。静态页面不能自主管理发布更新页面，如果想要更新内容，需要通过ftp软件把文件down下来用网页制作软件修改，通过fso等技术例外。一般静态页面后缀名html、htm等。

动态页面可以执行asp、php、jsp、net等程序生成客户端网页代码，同时可以通过后台管理对内容进行更新，动态页面的常见扩展名为asp、php、jsp、cqi等。动态是网站与客户端用户互动的意思，并不是网页上有动画显示。

色彩体系

www.w3school.com.cn→html基础教程→html颜色

每种颜色可有256种数值供选择。

红色0-255=>0~ff

绿色0-255

蓝色0-255

当指都为0的时候，是黑色，当值都为最大的时候，是白色。

一般用十六进制数来描述颜色，不用十进制数。

描述色彩使用：#00（红色）00（绿色）00（蓝色）六位十六进制数来描述一个颜色。

全红：#ff0000，全绿#00ff00，全蓝#0000ff

下载“截图软件”，右键有个取色，可以用来取自己想要的颜色的十六进制数。

HTML与XML区别

HTML与XML都可以通过DOM及CSS来控制页面，但是XML语法更严格。

Xml主要用来储存数据，而html则注重展示。

如可以使用 或者 在html里都可以完成换行命令，但是xml就不可以，会报错。

DOM就是document object model文档对象模型

html标签种类

文本标签：描述文本与字体

格式标签：控制文本排版、分隔等

链接与图表：跳转与锚定，显示图片

列表与表格：展示数据

表单标签：提交数据与服务器交互等

帧标签与分区标签：框架结构内嵌多个页面、分区使用样式

文本标签，标题标签<h1></h1>,数值只能取1-6,1是顶级标签，2次一级3再次一级等等。

如果单单改变文本里字体的大小，那么使用我这是单单改变字体的大小。而标签里的字体大是由于是一级标签，分结构，具有优先级。

物理字体物理标签

加粗

斜体

下划线

上标

下标

逻辑字体逻辑标签

斜体

强调加粗

<code>计算机代码文本</code>

<samp>计算机代码样本</samp>

<var>文本的变量部分</var>

小号文本

为什么推荐使用逻辑字体而不是物理字体呢？因为物理字体主要用于显示，而逻辑字体为了表示包在这对标签里面它所应该表示的特定含义，对于搜索引擎优化有意义。

客户端字体font，如果需要修饰文字的颜色大小以及字体样式，就可以使用font客户端字体。Font的size属性值是1-7.

颜色,大小,客户端字体

单标签

是回车换行,还可 或

<hr/>创建一条水平线

格式标签

段落

换行

<hr>分割线

Size（高度粗细）、width（宽度）、align（对齐方式）、noshade（是否有阴影）、color（颜色）

 空格(一般文章里要空两个要4个 )

align是控制对齐，align:left/center/right等等。

例如右对齐

插入图片（路径、修改图片像素、CSS图文混排图片右围绕文字）

<pre>预格式化，也就是在标签内的格式都得以保存，而不是像平常HTML代码中当前格式被忽略</pre>，少用tab空格键，因为不同浏览器对tab解析不同，多与逻辑字体一起使用。<code>表示逻辑字体里的代码，也就是这里面显示的是代码</code>

相对路径和绝对路径

<img src=”./02.jpg”/>或者<img src=”02.jpg”/>当前目录

<img src=”../02.jpg”/>代表父目录

<img src=”/02.jpg”/>代表根目录，根目录表示的是服务器的根目录与本地磁盘根目录有区别。

url超链接

<a href=”http://www.baidu.com” title:”当鼠标移到文字上时显示的字”>表示该链接被点击的时候执行什么东西，基本格式是协议：内容</a>

效果为点击后弹出邮件框，收件人为邮箱地址，主题为520，内容为我今天。。。此处省略一万字。

<a href=”javascript:alert(‘哈哈’);”你点啊</a>使用的是js脚本代码，href执行js协议，也可以执行http协议。出现的效果是点击后弹出对话框哈哈。

Target属性

_blank在新窗口中打开

_self在当前窗口打开

_parent在父窗口打开

_top在顶级窗口打开

什么都不写，默认是本页跳转

本页跳转

在新窗口中打开

a标签常见属性

href协议、title鼠标放上去显示的内容、target跳转方式、name锚定，也就是网页回到顶部的功能。

回到顶部功能实现代码：

<body>

很多行

</body>

锚定的另一种用法，跳转到其他页面：

网页1

<body>

巴拉巴拉巴拉

<a href=”格式标签.html#d”>跳转到格式标签.html里面的d处</a>很多行

</body>

网页2，路径当前目录格式标签.html

<body>

&nbsp&nbsp&nbsp&nbsp巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉

&nbsp &nbsp &nbsp &nbsp <a name=”d”>我去</a>

</body>

实现的结果就是点击网页1的“跳转到格式标签.html里面的d处”，会跳转到网页2的“我去”处。

List列表

Type属性：A、a、I、i、1

有序列表order list(这里type的值是有序的，如果是1那么就按阿拉伯数字排列，如果是a，那么就按小写字母排列，如果是A按大写排列，如果是i按罗马数字排列)

<li>无序列表（unorder list）</li>

<li>有序列表（order list）</li>

</ol>

无序列表unorder list

Type属性：circle空心小圆圈，disk实心小圆圈，square实心小方块

<li>无序列表（unorder list）</li>