HTML学习日志范文合集

第一篇：HTML学习日志

HTML学习日志

01.HTML简介

HTML(Hyper Text Mark-up Language超文本标记语言)，标记就是用来描述网页内容的一些特定符号，HTML不是编程语言，而是一种描述性的标记语言，用于描述网页中内容的显示方式，比如文字以什么颜色、大小来显示，这些都是利用HTML标记来实现的.HTML文档的创建方式: 用HTML语言创建的文档 ·手工直接编写(例如记事本)·通过图形化的HTML开发软件Dreamweaver ·由Web服务器上的动态网页程序生成标记也称为标签或元素.02.HTML语法

HTML最基本的语法是: <标记符>内容标记符通常都是成对出现的，有一个开头标记和结束标记，结束标记只是在开头标记的前面加一个斜杠“/”，当浏览器打开html文件后，就会理解里面的标记符，然后把标记符对应的功能表达出来。例如:

文字内容制作一个html网页文件: ·新建一个记事本的文件，命名为 *.html ·在文件里面输入内容

HTML标记的类型: 单标记与双标记 ·单标记: <标记名称> ·单一型，无属性值: 如:
·单一型，有属性值: 如:

·双标记

·无属性值: <标记名称>...如: ... ·有属性值: <标记名称属性=“属性值”>...如: ... 说明: ·标记与属性、属性之间以空格分隔

·属性不区分先后顺序，且属性不是必需的.·虽然在HTML中标记不区分大小写，但在XHTML中所有标记都必须小写，所以建议所有标记都采用小写.03.HTML文档结构

所有的网页文件，通常由四对标记来构成文档的骨架: 标题 <title> </head> <body> 正文<h2><a name="2" >第二篇：html学习笔记小结2</a></h2>4.3<tr><th><td>标签下的常用属性属性名称属性值说明widthheightalign(水平方向)rightleftcentervalign(垂直方向)top数据靠上middle数据居中buttombgcolor4.4拆分与合并单元格 <td>里面的属性属性名称属性值colspan数字rowspan数字先删掉不要的空格再合并需要的空格 4.5表格的标题<table><caption>....</caption></table>属性有：属性名称属性值aligntopbuttom 5.1背景图片设置<body background=“url”>5.2将图片插入网页中格式:<img src=“url”>功能：将图片插入网页中单一标签属性名称属性值srcurlwidth像素/百分比height像素/百分比alt字符串border数字5.3文字图像的排列属性名称属性值alignleftrighttopmiddlebuttom间隙设置数据靠下说明向两边扩展向上下扩展说明图片的路径图片的宽度(绝对和相对)图片的高度(绝对和相对)给图片做注解图片边框说明图像靠左文字靠右图像靠右文字靠左文字靠上文字居中文字靠下vspace像素垂直上下两端与物件的距离hspace像素水平左右两端与物件的距离5.4 图片超链接<a href=“url”><img src=“url”></a>注意边框问题5.5地图索引格式：<img src=“url” usemap=“#图像名称”><map name=“图片名称” id=“图片名称”><area shape=“选取区块的形状” coords=“坐标” href=“url” alt=“文字说明”></map>说明：<map>声明整张图使用地图连接方式进行连接<area>表示需要连接的某个区块<shape>表示我们所选择的形状如：rect矩形 circle圆形poly 多边形coords 表示地图的坐标位置举例：<img src=“bg.jpg” border=“0” usemap=“#Map”><map name=“Map”><area shape=“rect” coords=“136,36,202,102” href=“">网易</a>2.file连接本地的文件声明<a href=file:///e/images/pic.jpg>图片</a>3.ftp声明<a href=”ftp://192.168.4.21/“>进入</a>4.mailto<a href=mailto:bnbbs@163.com>E-MAIL</a>6.3 相对链接和绝对链接1.若是6.html和index.html文件在同一目录下使用 index.html(index.html为连接文件)<a href=”index.html“>index.html</a>2.若index.html文件在6.html文件目录下的文件夹page里面则使用 page/index.html<a href=”page/index.html“>index.html</a>3.如果index.html在 page文件下page2中page/page2/index.html2、3为往后查找文件路径4.若6.html文件在page文件夹中则查找index.html需要向上翻一层查找../index.html<a href=”../index.html“>index.html</a>5.若是6.html文件在page文件夹里面的page2文件夹里面则查找连接index.html 使用../../index.html4、5为往前查找5.若6.html在page文件夹中而index.html在images文件夹中则6.html要查找连接index.html文件需要先出page文件夹再进images文件夹../images/index.html<a href=”../images/index.html“>index.html</a>6.4 书签链接先在需要跳转的文本地方创建书签点再进行连接<a>下的属性属性名称属性值name字符串格式：锚点:<a name=”音乐“>..</a>连接点<a href=”#音乐“>..</a>连接到别的网页的书签项目基本格式：锚点：<a name=”音乐“>...</a>连接点：<a href=”index.html#音乐“>...</a>先连接到需要连接的网页再连接到书签6.5基准参考点基本格式:<head><base href=”http://.cn/“></head>作用:所有的html都会在前面加上这个域名http://.cn/ 防止跳到别的网站注意：最后“/”必须要打错误：http://.cn6.6超链接事件link 颜色的设置基本格式: <body link=”颜色“ alink=”颜色“ vlink=”颜色“>link超链接尚未选中的文字alink 超链接选中但是为放开的颜色vlink 超链接已被选中过的颜色7.1表单是提供给用户输入，选取，勾选数据，以便提交给服务器数据库的工具表单的功能结构：主标记结构：<from>...</from>属性值值说明name字符串给这个表单起的名字methodget/post表单的传输方式 post有利于信息的保护不会显示在域名传输地址栏中 get会在域名传输地址中显示所有的信息不利于信息安全所以一般设置为postactionurl传输的目标意为将表单中所有的信息传输到某一个地址去，若是没有指定传输地址则会传给自己7.2 文本栏、密码栏、input是一个单标签属于插入一个东西而双标签相当于一个容器包含一些东西表单一般是要起名字因为以后要使用javascript进行激活使它做一些事件文本栏：<input type=”text“ name=”栏位名称“ value=”栏位设置默认值“ size=”栏位显示的宽度“ maxlength=”栏位输入数据的最大长度“ >姓名:<input type=”text“ name=”usename“ value=”小张“ size=”30“ maxlength=”10“>密码栏： <input type=”password“ name=”栏位名称“ value=”栏位设置默认值“ size=”栏位显示的宽度“ maxlength=”栏位输入数据的最大长度“ >密码:<input type=”password“ name=”usepassword“ size=”30“>7.3复选框单选框复选框：<input type=”checkbox“ name=”栏位名称“ checked disable>checked 表示已经选定不容修改disable 表示已经选定不容修改爱好:<input type=”checkbox“ name=”love“>体育<input type=”checkbox“name=”love“>音乐单选框:<input type=”radio“ name=”栏位名称“ checked disable>性别:<input type=”radio“ name=”sex“>男<input type=”radio“ name=”sex“>女7.4窗体栏和区块窗体栏就是下拉菜单<select name=”栏位名称“><option value=”栏位设置值“>栏位设置值<option value=”栏位设置值“>栏位设置值<option value=”栏位设置值“>栏位设置值</select>举例：地址：<select name=”address“><option value=”上海“>上海<option value=”南京“>南京<option value=”盐城“>盐城</select>//分组<optgroup label=”分组名称“><option>...<option></optgroup>举例：address:<select name=”address“><optgroup lable=”上海“><option value=”普陀区“>普陀区<option value=”宝山区“>宝山区</optgroup><optgroup lable=”南京“><option value=”下关“>下关<option value=”浦口“>浦口</optgroup><optgroup lable=”盐城“><option value=”亭湖“>亭湖<option value=”盐都“>盐都</optgroup></select>7.5文字区块的设置<textarea cols=”设置长度“ rows=”设置宽度“>.....</textarea>请留下您的建议和意见：<textarea name=”content“ cols=”200“ rows=”50“></textarea>7.6按钮和图像按钮提交:<input type=”submit“ value=”提交“>重置<input type=”reset“ value=”重置“>按钮图像<button type=”submit“ name=”提交“><img src=”url“></button>7.7 上传文件<input type=”file“ name=”file“>7.8外边框和标题外边框：<fielset>...</fielset>标题:<legend>...</legend><from name=”reg“ method=”post“ action=”http://baidu.com“><fielset><legend>注册表</legend>.....</fielset></from>总结实例：<from><head><title>注册表

注册表

姓名:

密码:

QQ:

联系电话:

爱好:体育

计算机音乐读书

性别:男

女

地址:

请留下你的意见：

第三篇：HTML学习心得

HTML学习心得

一、HTML简介

全写： HyperText Mark-up Language，译名：超文件注标式语言（译名之一），简释：一种为普通文件中某些字句加上标示的语言，其目的在于运用标记（tag）使文件达到预期的显示效果。

HTML 是在 SGML 定义下的一个描述性语言，SGML(Standard Generalized Markup Language,标准通用标记语言)，是一种定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起源，早在Web发明之前SGML就已存在。HTML 不是程式语言，如 C++ 和 Java 之类，它只是标示语言，基本上你只要明白了各种标记的用法便算学懂了 HTML，它的格式非常简单，只是由文字及标记组合而成，在编辑方面，任何文字编辑器都可以，只要能将文件另存成 ASCII 纯文字格式即可，当然以专业的网页编辑软件为佳。

1.优点

HTML文档制作不是很复杂，且功能强大，支持不同数据格式的文件镶入，这也是WWW盛行的原因之一，其主要特点如下：1 简易性，HTML版本升级采用超集方式，从而更加灵活方便。2 可扩展性，HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统扩展带来保证。3平台无关性。虽然PC机大行其道，但使用MAC等其他机器的大有人在，HTML可以使用在广泛的平台上，这也是WWW盛行的另一个原因。

二、HTML标记

任何标记皆由“<”与“>”围住，如

标记名与小于号之间不能留有空白字符。某些标记要加上参数，某些则不必。如 Hello 参数只可加于起始标记中。在起始标记名前加上符号“/”便是其终结标记，如，标记字母大小写皆可。

1.标记种类

标记种类分为两种：围堵标记和空标记。围堵标记是以起始标记及终结标记将文字围住，令其达到预期显示效果。也就是说，标记是成对出现的，例如 Creation of Webpage，其中便称为围堵标记。它以起始标记及终结标记标示文字 Creation of webpage，令其显示成粗体，两者失其一都会发生错误显示。空标记是指标记单独出现，只有起始标记没有终结标记。例如
，它的作用便是将标记后所有东西显示于下一行，可见终结标记于它是没意义的，但有些人会为空标记加上终结标记，这是为方便记认而己，对 HTML 没有影响。

2.标记类型

标记类型按用途可以分为：文件标记(如：、)、排版标记(如：

、
、

)、字体标记(如：、)、清单标记(如：
、
)表格标记(如：、
)、表单标记(如：
)、图形标记(如：)、连结标记(如：、)、框架标记(如：、)、影像地图标记(如：、)、多媒体标记(如：、)、样式标记(如：