HTML基础知识分析

第2章HTML基础知识学什么？HTML基本结构HTML页面文本常用标记css样式表什么是HTML？HTML(HypertextMarkedLanguage)—超文本标记语言。用来创建Web文档的语言。在HTML文档中，字符和数据的语法结构是通过标记来表示的。网页是用HTML编制的文档文件，由浏览器解释并显示在用户浏览器的窗口中。HTML基本结构—总体框架基本的HTML页面从html标记开始，以/html标记结束，其他所有HTML代码都位于这两个标记之间。整个文档被分为头部（head部分）和体部（body部分）两部分。HTML基本结构—HTML标签HTML的语法非常简单，组成HTML的元素只有HTML标记和HTML属性。在HTML中标签被分为两种：1.双标记标记名属性名1=“属性值”属性名2=“属性值”内容/标记名2.单标记标记名属性名1=“属性值”属性名2=“属性值”/如：换行标记br/HTML基本结构—文档头文档头部分处于head与/head标记之间,这个标记之间的内容是不会显示到页面上的。文档头内常用以下标记：title和/title。这两个标记指定网页的标题。meta/。描述标记，用于描述网页文档的属性参数。描述标记的格式为meta属性=“值”…/，常用的属性有name、content和http-equiv。http-equiv为content属性的类别，http-equiv取不同值时，content表示的内容也不一样。HTML基本结构—文档头①http-equiv=“Content-type”时，content表示页面内容的类型，例如：metahttp-equiv=Content-typecontent=text/html;②http-equiv=refresh时，content表示刷新页面的时间，例如：metahttp-equiv=“refresh”content=10;URL=秒后进入百度页面，如果不加URL则表示10秒刷新一次本页面。其他标记，style/style,script/script,……HTML基本结构—文档正文body和/body是文档正文标记，文档的主体部分就处于这两个标记之间。格式如下：body属性=值…事件=执行的程序…body标记常用的属性如下：●background。文档背景图片的URL地址。例如：bodybackground=C:/image/back-ground.gif说明：在指定文件位置时，为防止与转义符“\”混淆，一般使用“/”来代替“\”。HTML基本结构—文档正文●bgcolor。文档的背景颜色；text,文档中文本的颜色。例如：bodybgcolor＝“red”text=“blue”表示文档的背景颜色为红色,文档中文字的颜色为蓝色。系统的许多标记都会使用到颜色值，颜色值一般用颜色名称或十六进制数值来表示，见表2.1正文常用标记—文本格式化标记HTML页面中显示的内容是在body和/body标记之间定义的内容—文档正文。这些内容包括文本、图像、表格、表单、超链接等。文本格式化标记—将文本放在标记之间来设置文本的格式。正文常用标记—文本格式化标记1.分段标记格式如右：p属性=值……/p单独用p标记时会空一行，使后续内容隔行显示。同时使用p和/p标记则将段落包围起来，表示一个分段的块。分段标记常用属性如下：align__段落的水平对齐方式。其取值可以是left、center、right和justify（两端对齐）。其中left是默认值。例如：palign=center分段标记演示/p正文常用标记—文本格式化标记2.换行标记换行标记为br/，该标记将强行中断当前行，使后续内容在下一行显示。3.标题标记格式如下：hn属性=值“…/hn其中hn取值为h1、h2、h3、h4、h5和h6，都表示黑体，h1表示字体最大，h6表示字体最小。标题标记的常用属性也是align，与分段标记类似。正文常用标记—文本格式化标记4.对中标记格式如下：center…/center对中标记的作用是将标记中间的内容全部居中。5.块标记格式如下：div属性=值……/div块标记的作用是定义文档块，常用的属性也是align。正文常用标记—文本格式化标记6.水平线标记水平线标记用于在文档中添加一条水平线，可以分隔文档。格式如下：hr属性=值…/该标记常用的属性有align、color、noshade、size和width。color表示线的颜色；noshade没有值，显示一条无阴影的实线；size是线的宽度（以像素为单位）；width是线的长度（像素或百分比）。例如：hrsize=2width=300color=red”/正文常用标记—文本格式化标记7.字体标记格式如右：font属性=值……/font字体标记用于设置文本的字符格式，主要包括字体、字号和颜色等。常用属性如下：•face。其值为一个或多个字体名，中间用逗号隔开。浏览器首先使用第1种字体显示标记内的文本。如果浏览器所在计算机中没有安装第1种字体，则尝试使用第2种字体，类推。。例如：fontface=黑体,楷体-GB2312,仿宋-GB2312置字体/font正文常用标记—文本格式化标记•size。指定字体的大小，值为1～7，默认值为3。size值越大则字号就越大。例如：fontsize=6这是6号字/font•color。字体的颜色，颜色值在表2.1中已经列出。8.特殊标记在网页中一些特殊如多个空格和版权符号“©”等，是不能直接输入的，这时可以使用字符实体名称或数字表示方式。表2.2正文常用标记—文本格式化标记9.固定字体标记格式如下：b粗体/bi斜体/ibig大字体/bigsmall小字体/smalltt固定宽度字体/tt10.样式标记格式如下：sup上标/supsub下标/subu下划线/ustrike删除线/strikes删除线/s正文常用标记—文本格式化标记11.列表标记列表标记可以分为有序列表标记、无序列表标记和描述性列表标记。有序列表标记有序列表是在各列表项前面显示数字或字母的缩排列表，可以使用有序列表标记ol和列表项标记li来创建。有序列表标记的格式如下：ol属性=值…li列表项1li列表项2…li列表项n/ol属性：type—序列的样式；start—序列的起始值正文常用标记—文本格式化标记无序列表标记无序列表是一种在各列表项前面显示特殊项目符号的缩排列表，可以使用标记ul和li来创建，格式如下：ul属性=值…li列表项1li列表项2…li列表项n/ul属性：type(项目符号类型）值：disc（实心圆）、circle（空心圆）、squar（方块）正文常用标记—文本格式化标记描述性列表标记格式如下：dldt列表描dd列表项dd列表项…dt列表描述项dd列表项…/dl正文常用标记—多媒体标记1.图像标记利用图像标记可以向网页中插入图像或在网页中播放视频文件。格式如下：img属性=值…图像标记的属性如下：src，图像文件的URL地址，图像可以是jpeg、gif或png文件。另外，alt，height，width，hspace，vspace，align。。。例如：imagesrc=“image/dongruan.jpg”正文常用标记—多媒体标记2.字幕标记在HTML语言中，可以在页面中插入字幕，水平或垂直滚动显示文本信息。字幕标记格式如下：marquee属性=值…滚动的文本信息/marquee属性如下：bgcolor，指定字幕的背景颜色。direction，指定文本的移动方向，取值是down、left、right、up。另外，align,behavior,height，hspace，vspace。。。例如：marqueebgcolor=“red”direction=“left”成都东软学院/marquee正文常用标记—多媒体标记3.背景音乐标记背景音乐标记可以为网页设计背景音乐，格式如下：embed属性=值…/embed主要属性如下：src，指定播放的声音文件的URL。autostart，打开页面时音乐是否自动播放。loop，是否循环播放。hidden，设置是否隐藏媒体播放器。例如：embedsrc=“hhwq.mp3autostart=trueloop=truehidden=true/embed正文常用标记—表格标记一个表格由表头、行和单元格组成。一个表格通常由table标记开始，到/table标记结束。表格的内容由tr、th和td标记定义。tr说明表的一个行，th说明表的列数和相应栏目的名称，td用来填充表格。正文常用标记—表格标记表格格式如下：table属性=值…caption表格标题文字/captiontr属性=值….th第1个列表头/thth第2个列表头/th…th第n个列表头/th/trtrtd属性=“值”…第1行第1列数据/tdtd第1行第2列数据/td…td第1行第n列数据/td/tr…/table正文常用标记—表格标记正文常用标记—表单标记表单用来从用户（站点访问者）处收集信息，然后提交给服务器（PHP）处理。表单定义格式如下：form定义表单标记input定义表单输入控件标记textarea定义滚动文本框标记select定义下拉菜单标记button定义按钮标记/form正文常用标记—表单标记1.表单标记formform标记的格式如下：form属性=值…事件=代码…/form常用属性如下：name，指定表单的名称。命名表单后可以使用脚本语言来引用或控制该表单。id，指定表示该标记的唯一标志码。method，指定表单数据传输到服务器的方法，取值是post或get。action，指定接收表单数据的服务器端程序或动态网页的URL地址。当提交表单之后，即运行该URL地址所指向的页面。。。。。。。正文常用标记—表单标记2.表单输入控件标记input表单输入控件的格式如下：input属性=值…事件=代码通过input标记的type属性设置成不同的输入控件：单行文本框type=“text”密码框type=“password”复选框type=“checkbox”单选按钮type=“radio”文件域type=“file”按钮type=“submit”or”reset”or”button”正文常用标记—表单标记单行文本框：复选框：单选按钮：文件域：正文常用标记—表单标记3.滚动文本框在表单中添加滚动文本框是为了使访问者可以输入多行文本，格式如下：textarea属性=“值”…事件=“代码”…初始值/textarea例如：textareaname=tarows=8cols=20这是本文本框的初始内容/textarea结果：正文常用标记—表单标记4.下拉菜单格式如下：selectname=值size=值[multiple]option[selected]value=值选项1/optionoption[selected]value=值选项2/option…/select其中：name，指定选项选单控件的名称。size，指定在列表中一次可看到的选项数目。multiple,指定允许做多项选择。selected,指定该选项的初始状态为选中。正文常用标记—表单标记例如：学历