HTML基础知识

来源：互联网发布：ubuntu的串口调试工具编辑：程序博客网时间：2024/05/16 15:37

一、HTML基本概念

1、标记

标记是由一对尖括号<>和标记名组成，标记有单标记和双标记之分。

单标记：只需单独使用就能完整地表达意思的标记。语法为：<标记名>

双标记：指由“始标记”和“尾标记”两部分构成，必须使用成对的标记

2、标记属性

<标记名属性1 属性2 属性3 属性 4……>

3、注释语句

注释语句的格式：

二、HTML文档的基本格式

基本格式：
<html>

<head>

</head>

</body>

</html>

body文件主体标记

<body background="网页背景图像路径" bgcolor="color"（背景颜色） text="color"（设置非可链接文字的色彩，默认颜色为黑色）

link="color"(设置未被访问过的超文本链接的色彩) alink="color"(设置被访问瞬间的超文本链接的色彩) vlink="color"(设置被访问后的超文本链接所显示的颜色)

leftmargin="设置页面左边距" topmargin="设置页面上边距" value 可以是数值也可以是百分比

>……</body>

例如：

<html><head><title>奥恩</title></head><body background="ae.jpg"></body></html>

三、HTML的基本语法

（1） HTML文件以纯文本形式存放，扩展名为HTM或HTML。若系统为UNIX系统，扩展名必须是HTML

（2）标记名尽量是小写字母

（3）多数HTML标记可以嵌套，但是不可以交叉

（4）HTML文件一行可以写多个标记，但是标记的单词不能分行写

（5）HTML文件中的换行、回车符和空格在显示效果中是无效的，如果要换行用<br/> ,换段用<p>; 空格用 代替，<用&lt； >用> &用&amp； "用&quot；

四、HTML的文本格式及功能实现

1、功能：标题是一段文字内容的核心，可以通过设置不同大小的标题，增加文章的条理性

格式：

属性:n表示标题字号的级别,可以是1~6之间的任意整数，数字越小，字号越大；align用来设置标题在页面中的对齐方式，取值包括：left（左对齐），right（右对齐），center（居中），默认为left。

2、功能：改变网页中的文字的字体，大小，颜色。

3、文本修饰标记

功能给文本增添一些特殊效果，如黑体、斜体、下划线，这是一组标记，可单独使用，也可以组合使用。

<b></b>:加粗

<i></i>:斜体

<u></u>：下划线

<strike></strike>:delete线

<sup></sup>:使文字成为前一个字符的上标

<sub></sub>:是文字成为前一个字符的下标

<em></em>:强调文字，通常为斜体加黑体

<strong></strong>:特别强调的文字，斜体加黑体

4、段落标记

功能：设置文章段落的开始和结束。 <p align=“文本位置”></p>

功能：强行另起一行显示该标记后面的网页元素 <br/>

5、插入水平线标记

功能:在网页插入一条水平线，用于页面上的内容

6、预排格式标记

功能：保留文字在纯文字编辑器中的格式，原样显示，不受前面文字的格式和段落式的影响

格式:<pre>要按预排格式显示的文本</pre>

7、定位标记

功能:设定文字、图像、表格等的摆放位置

8、列表标记

无序列表：
格式：

</ul>

属性：无序列表的开始和结束处，分别是<ul> </ul>。在每条列表条目之前必须加上<li>标记。

type 有三种:dics,实心圆； circle 空心圆；square 实心方块

有序列表:

格式：

</ol>

序号类型有五种：大写英文字母小写英文字母数字大写罗马字母（I）小写罗马字母（i）

9、定义列表

功能：用于需要对列表条目进行简短说明的场合

格式：

<dl>

</dl>

属性：<dl></dl>定义列表的结束和开始的标记

<dt></dt>每条列表前必须加上此标记名

<dd></dd>说明文字自动向右缩进

10、文字滚动标记

功能：在页面中制作文字（也可以是图像）滚动·效果

<marquee behavior="滚动的种类" （设置滚动方式）三种：alternate（来回变动） scroll（循环滚动） slide（只滚动一次）

bgcolor="背景颜色"

direction="滚动的方向" 四种：up（向上） down（向下） left（向左） right（向右）

width="宽度"

height="高度"

loop="循环次数" 缺省值为-1，无限滚动

scrollamount="滚动速度"

scrolldelay="每次滚动的间隔时间"

hspace="左右留白的距离"

vspace="上下留白的距离"

11、HTML的图像与多媒体标记

功能：在当前位置插入图像

格式：
<img src="图片路径"

alt="当图片无法显示时，所能代替的文字的描述"

title="鼠标放在图片时的文字说明"

width="图片宽度"

height="图片高度"

border="边款长度" 图片外围边框宽度，其值为整数

hspace="左右留白的距离"

vspace="上下留白的距离"

align="对齐方式"

12、背景声音标记

功能：在网页中加入声音，声音文件格式为*.wav或*.mid

格式：

13、多媒体标记

功能:在页面中放置如SWF动画（即FLash动画），MP3音乐、电影等多种多媒体内容

格式:
<embed src="多媒体路径"

height="设置多媒体播放的区域"

width="设置多媒体的播放区域"

hidden="用于控制播放版面的显示和隐藏" 其值为false true

autostart="是否自动播放"

loop="循环几次" 其值为 true false

14、HTML的超链接标记

功能：创建超链接

格式：

<a href="http://www.baidu.com"

target="链接打开方式" 三种：_self 原窗口打开(缺省属性) _blank 在新的一个框架中打开 _parent将链接的文件载入父框架打开

>图像或其他多媒体文件或文字</a>

15、HTML表格制作

功能：建立基本表格

格式：

<table bgcolor="表格颜色"

background="表格的背景"

border="设置表格线的宽度"

bordercolor="表格线的颜色"

width="表格的宽度"

height="表格的高度"

align="对齐的方式"

cellspacing="设置相邻单元格之间、单元格和边框之间的间距"

cellpadding="单元格中的内容到边框的距离"

<tr>

</tr>

<tr>

<tr>

在<tr><th><td>可以添加两类属性：1、align ： left right center

2、valign：top （靠单元格顶） bottom（……底） middle（……中） baseline（相对基线对齐）

在<tr><td><th>中可以加rowspan和colspan属性来实现单元格的合并。

rowspan 用于设置一个表格单元占的行数（缺省值为1）

colspan用于设置一个表格单元占的列数（缺省值为1）

16、HTML的表单标记

功能：创建一个表单域，即定义表单的开始和结束位置有两个的作用

1、限定表单的范围。其他的表单对象，都要插入到<form>表单</form>中

2、携带表单的相关信息

格式：

<form name="设置表单的名称"

action="用来定义表单处理程序的URL地址" （解释URL：统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示）当用户提交表单时，服务器将执行此地址中的目录中的某某程序

method="定义浏览器将表单数据传递到服务器处理程序的方式" 有两种：1、get 表示处理程序从当前HTML文档中获得数据 2、post HTML把数据传送给处理程序

>表单</form>

在表单标记<form>中包括的表单标记主要有input， select textarea

<input>标记输入标记

功能：用来收集用户的输入信息，其含义由type属性决定。

格式：
<input name="设置区域的名称" type="设置输入区域的类型"/>

type的类型

1、文本域text：text用来设定单行的输入文本区域

格式：

2、密码域 password

格式：

3、文件域file：file用于浏览器通过form表单向WEB服务器上传文件

格式：

4、单选按钮radio： radio用于在表单上添加一个单选按钮

格式：

5、复选框checkbox:在表单中添加一个复选框

格式：

6、普通按钮 button：主要配合程序的需要来进行表单处理的

格式：

7、提交按钮 submit：单击"提交"按钮后，可以实现表单内容的提交。

格式：
<input type="submit" value="和上一条一样"/>

8、重置按钮reset：清除所有表单信息

9、图像按钮image：以一张图片为提交按钮

格式：

10隐藏域hidden：用于在表单上添加一个隐藏的表单字段元素，浏览器不会显示这个表单字段元素，使用隐藏域，可以预设某些要传递的信息

格式：

下拉列表框<select>

功能：当浏览器的项目较多时，可使用下拉列表框，只有单击打开单击按钮打开列表后才能看到全部内容

格式：
<select name="设置下拉列表框或列表框的名称"

size="若设置size的属性，那么表示为下拉列表框；反之则表示为列表框，size代表行数"

multiple (多选符号，若不写multiple，否则只允许单选)

<option value="和上面的value效果一样" selected（默认选项）>选项一</option><

option value="和上面的一样">选项二</option>

多行文本域标记<textarea></textarea>

功能:

用于创建一个可以输入多行的文本框，此标记对放在<form></form>

格式：
<textarea name="设置多行文本域的名称" rows="行数" cols="列数/"></textarea>

17、HTMl的框架标记

功能:将浏览器窗口划分为几个子窗口，每个子窗口可以调入各自的HTMl文档形成的不同的页面，也可以按照一定方式组合在一起完成特殊的效果。框架通常使用的方法是在一个框架中放置目录并设置链接

(1)框架集标记<framset>

功能：定义如何分隔窗口，用来定义主文档中有几个框架是如何排列的。

格式：

<framset rows="将窗口分成上下部分"，用“，”分割，value为定义各窗口的宽度值，其值可以是百分号像素值或者*，（*）表示剩余部分

cols="将窗口分为左右部分"，用“，”分割，value为定义各窗口的宽度值，其值可以是百分号像素值或者*，（*）表示剩余部分

border=“边框的宽度值”

bordercolor=“边框的颜色”

farmeborder+“有无边框”

farmespaceing=“设定各子框架的空白，单位为象素”

框架标记<frame>

功能：

定义某一个具体的框架。

格式：
<frame src="设置框架要显示的源文件的路径"

name="定义框架的名字。框架的名字必须以字母开头"

scrolling="设定滚动条是否显示，值显示为yes，不显示no"，auto（若需要显示则会自动显示，不需要则自动不显示）

noresize=“禁止改变框架的尺寸大小“”

<html><head><link rel="shortcut  icon" type="x-icon" href="1.ico" media="screen"  > <title>奥恩</title></head>         <!--网页标题--><body background="ae.jpg" link="#000000" alink="#FFFF00" vlink="#0000FF">         <!--设置背景--> <embed src="1.mp3"  hidden="true" autostart="true" loop="true"><font face="楷体" size="3" color="#FF0000">你是谁？？？？   <br/>          <!--换行标记，给整个网页设置为3号字体红色的楷体的字--><strike><font face="楷体" size="3" color="#00FF00">笔试</font></strike>    <!--删除线--><hr  align="left" color="red" width="100%"  size="2" />                    <!--插入水平线标记--><marquee behavior="alternate" scrollamount=10><div align="center">         <!--定位标记，功能s与<p>类似，在为许多段落标记比较方便--><ul type="circle">            <!--无序列表-->       <li type="circle">武器</li><li type="circle">问</li><li type="circle">问</li></ul><ol type="I" start="III">    <!--有序列表type为罗马数字--><li>谁的sa四大</li><li>萨德</li><li>爱迪生</li><li>萨德</li></ol></div><dl>                         <!--定义列表目录，适用于为列表简短说明的场合--><dt>c语言</dt><dd>结构化的语言</dd><dt>c++language</dt><dd>面向对象的语言</dd></dl></marquee><marquee bgcolor="#00FFFF"          direction="left"          srcollamount="9"          loop="-1"          srcolldelay="3"           width="100%" height="20"           hspace="1" vspace="1"           behavior="alternate">我的第一个循环滚动字幕</marquee><marquee behavior="alternate"   scrollamount=16><a href="http://www.baidu.com" target=_blank> baidu</a>            <!--超链接--></marquee><p></p><marquee behavior="alternate" ><table width="800" align="center" border="1" bordercolor="#000000"><tr height="80"><td width="150" >网站标志</td><td colspan="2">广告条</td></tr><tr><td>导航1</td><td rowspan="5" align="center" bgcolor="#FF0000">内容一</td><td rowspan="5" align="center" bgcolor="#FF0000">内容二</td></tr><tr><td>导航2</td></tr><tr><td>导航3</td></tr><tr><td>导航4</td></tr><tr><td>导航5</td></tr><tr><td colspan="3" align="center">版权信息</td></tr></table></marquee><form name="1hao" method="post"><h1><font align="center" color="#FF00FF"><marquee behavior="alternate" scrollamount=20>用户注册表</marquee></font></h1><table width="65%" align="center" border="1" bordercolor="#FF00FF"><tr><td align="right"><font color="gold">用户名</font></td><td><input type="text" name="username"/></td></tr><tr><td align="right"><font color="gold">密码</font></td><td><input type="password" name="key"/></td></tr><tr><td align="right"><font color="gold">性别</font></td><td><input type="radio" name="sex" value="男" checked/><font color="blue">男</font><input type="radio" name="sex" value="女" /><font color="red">女</font></td></tr><tr><td align="right"><font color="gold">爱好</font></td><td><input type="checkbox" checked name="like" value="音乐"/><font color="gold">音乐</font><input type="checkbox"  name="like" value="上网"/><font color="blue">上网</font><input type="checkbox"  name="like" value="旅游"/><font color="green">旅游</font><input type="checkbox"  name="like" value="体育"/><font color="purple">体育</font></tr><tr><td align="right"><font color="gold">职业<font></td><td><select name="work" size="3"><option value="政府职员"><font color="olive">政府职员</font></option><option value="工程师"><font color="orange">工程师</font></option><option value="学生"selected><font color="#C0C0C0">学生</font></option><option value="商人"><font color="black">商人</font></option></select></td></tr><tr><td align="right"><font color="gold">个人收入<font></td><td><select name="shouru"><option value="1000以下"><font color="olive">1000以下</font></option><option value="3000以下"><font color="orange">3000以下</font></option><option value="6000以下"selected><font color="#C0C0C0">6000以下</font></option><option value="6000以上"><font color="black">6000以上</font></option></select></td></tr><tr><td align="right"><font color="gold">个性照片<font></td><td ><input type="file"/></td></tr><tr><td align="right"><font color="gold">特色签名<font></td><td><textarea name="qianming" rows=4 cols=50></textarea></td></tr><tr><td align="center" colspan=2><input type="button" name="button" value="忘记密码"/> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重置"/></td></tr></table></form></font></embed></body></html>

阅读全文

0 0