HTML基础知识

《网页设计技术》第二讲HTML基础知识《网页设计技术》•什么是HTML2.1•HTML基本语法2.2•HTML高级元素2.4•其他元素2.5•HTML基本元素2.3•本章小结2.6本章内容简介《网页设计技术》2.1什么是HTML2.1.1HTML简介2.1.2Web浏览器2.1.3HTML开发工具2.1.4制作一个简单的HTML文件《网页设计技术》2.1.1HTML简介HTML(hypertextmakeuplanguage)超文本标记语言。描述文件格式的语言，格式由浏览器解释和执行。元素对象/元素元素属性=参数对象/元素元素标记的一般格式为：《网页设计技术》2.1.2Web浏览器用户浏览网页实际上是通过Web浏览器实现的。目前主流的浏览器有微软公司的IE（InternertExplorer）和开源的Firefox以及谷歌、360等浏览器。我们以IE6.0为例。《网页设计技术》2.1.2Web浏览器HTML代码HTMLHEADTITLE学习HTML/TITLE/HEADBODYBGCOLOR=“LAVENDER”H1欢迎来到HTML世界/H1/BODY/HTML浏览器处理代码并进行显示《网页设计技术》2.1.3HTML开发工具HTML文件和ASP文件一样，实际上也是文本文件，因此可以使用记事本、FrontPage、Dreamweaver等任何文本编辑器编辑，编写完毕后保存成扩展名为.htm或.html的文件就可以了。《网页设计技术》2.1.4制作一个简单的HTML文件新建、保存和浏览HTML文件的方法和ASP文件的方法是完全类似的。输入如下图中的代码，然后保存到文件夹《网页设计技术》2.2HTML基本语法2.2.1HTML标记2.2.2标记属性2.2.3文档头部2.2.4文档主体2.2.5注释语句《网页设计技术》2.2.1HTML标记在HTML文档中，标记（tag）实际上就是规定了各种内容的显示方式，例如有标记html、/html、head、/head、body.标记在使用时必须用尖括号“”括起来，而且大部分都是成对出现的，起始标记无斜杠，终止标记有斜杠,当然也有少数标记是单独出现的。起始标记和终止标记之间的部分，连同标记在内，称为HTML的元素。《网页设计技术》2.2.1HTML标记HTMLHEAD文件头/HEADBODY文件体/BODY/HTMLTITLE文件标题/TITLE……《网页设计技术》2.2.1HTML标记文件头标题文件体《网页设计技术》2.2.2标记属性所谓标记属性，是指为了明确元素功能，在标记中描述元素的某种特性的参数及其语法。标记的语法格式为：标记名属性名＝“属性值”属性名＝“属性值”…………／标记名。《网页设计技术》2.2.3文档头部文档类型声明!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN=《网页设计技术》2.2.3文档头部文档头部就是包含在head和/head之间的所有内容，它不显示在页面中，但它会告诉浏览器要如何处理文档主体内的内容。主要标记：title与/title标记bgsound标记meta标记其他标记（比如link和style标记）《网页设计技术》2.2.3文档头部•meta标记使用meta（1）描述文档类型和字符编码http-equiv（2）描述搜索关键字和描述name《网页设计技术》2.2.3文档头部metaname=keywordscontent=描述网站的内容用来标记搜索引擎在搜索你的页面时所取出的关键词metaname=authorcontent=王靖用来标记文档的作者《网页设计技术》2.2.3文档头部metahttp-equiv=“Content-Type”content=“text/html;charset=gb2312”用来标记你的页面的解码方式。metahttp-equiv=refreshcontent=5;URL=用来自动刷新网页《网页设计技术》2.2.4文档主体文档主体是指包含在body和/body之间的所有内容，它们将显示在浏览器窗口内。文档主体可以包含文字、图片、表格等各种标记。在文档主体中还可以添加许多属性（如background、text、leftmargin等），用来设置网页背景、文字、页边距等。《网页设计技术》2.2.5注释语句注释语句又称为注释标记，这些标记在浏览网页时不会显示，只是在编辑文件时可以看到。适当使用注释语句，可以让网页的维护和更新变得十分方便。注释语句的格式：!--这中间是注释的内容--!--下面是表格--《网页设计技术》2.3HTML基本元素2.3.1文字2.3.2列表2.3.3图像2.3.4表格2.3.5超链接2.3.6字符实体《网页设计技术》2.3.1文字文字设置：一般包括文字格式和文字样式的处理，文件格式即文字的位置、段落等属性，文字的样式指文字的颜色、字体大小等。常用的文字处理标记：p和/p标记br标记pre和/pre标记hn和/hn标记font和/font标记文字样式标记(如b/b)《网页设计技术》2.3.1文字标题BODYH1从大自然获得灵感/H1H2从大自然获得灵感/H2H3从大自然获得灵感/H3H4从大自然获得灵感/H4H5从大自然获得灵感/H5H6从大自然获得灵感/H6/BODYH1到H6标签用于指定不同级别的标题《网页设计技术》2.3.1文字段落标签BODYP我是第一段/PP我是第二段/PPalign=left左对齐显示PPalign=center居中显示PPalign=right右对齐显示P/BODY《网页设计技术》2.3.1文字PRE标签用于显示具有预先定义格式的文本（如HTML文档中所示）HTMLHEADTITLE诗词学习/TITLE/HEADBODYH1静夜思/H1PRE床前明月光疑是地上霜举头望明月低头思故乡/PRE/BODYHTML《网页设计技术》2.3.2列表符号列表：符号列表又称为无序列表，每一个列表项目的前面可以是空心原点、实心方块或实心圆点等符号。用法格式：ultype=Squareli列表项/ulh3必读书目/h3ulli狂人日记/lili阿Q正传/lili藤野先生/li/ulDisc，circle《网页设计技术》2.3.2列表排序列表：每个列表项目前面都是一个编号字符，可以是数字也可以是字母。具体用法如下：oltype=1start=1li列表项/olbodyh3注册步骤：/h3olli填写信息/lili收电子邮件/lili注册成功/li/ol/body有序列表的属性LITYPE=I大罗马LITYPE=i小罗马LITYPE=A大写字母LITYPE=a小写字母OLSTART=n起始点《网页设计技术》2.3.3图像在HTML中，用img标记插入图片。用法如下：imgsrc=flower.jpgwidth=270height=167border=1alt=鲜花align=lefttitle=鲜花SRC属性用于指定要插入的图像位置。用于指定图像的对齐方式。《网页设计技术》2.3.4表格表格有两个主要功能：一是用来展示文字或图像等内容；二是用来实现版面布局，使网页更规范更美观。表格是可以嵌套使用的。《网页设计技术》2.3.4表格行列列标题单元格表格标题《网页设计技术》表格的标记(1)table与/table标记table标记用来声明表格，table和/table标记之间就是整个表格的内容。该标记有许多属性用来设置表格背景、表格边框宽度等bgcolorbackgroundwidth、heightborderalign《网页设计技术》表格的标记(2)caption与/caption标记该标记用来设置表格的标题，它有align和valign两个属性，其中align属性表示水平对齐方式，与table标记相似。《网页设计技术》表格的标记(3)tr和/tr标记表格是由行和列组成的，一个tr标记就表示一行tr标记事实上也有bgcolor、background、width、height和align属性，其属性及属性值和table标记类似，只不过是针对该行进行设置的。align和valign属性：align属性表示单元格内容在单元格中的水平对齐方式；valign属性则表示垂直对齐方式。《网页设计技术》表格的标记(4)td与/td标记一个td标记表示一列，准确地说，是一行中的一列，也就是一个单元格。该标记也有bgcolor、background、width、height、align、valign属性，其属性及属性值也与table标记和tr标记类似（参见表2-10），只不过是针对该单元格进行设置的。td标记还有两个非常重要的属性：rowspan和colspan，rowspan指定当前单元格跨越行的数量；colspan指定当前单元格跨越列的数量《网页设计技术》表格的标记(5)th与/th标记该标记用来设置一个单元格为标题栏，用法和td标记相似，只是自动将单元格内容以粗体显示。《网页设计技术》表格的标记(5)BODYTABLEBORDER=2TRTD姓名/TDTD性别/TDTD分数/TD/TRTRTDRobert/TDTDM/TDTD80/TD/TR......./TABLETABLE代表表格的开始，border=2表示边框尺寸为2《网页设计技术》TABLEBORDER=2CAPTIONalign=top学员档案信息/CAPTIONTRTH姓名/THTH性别/THTH分数/TH/TRTRTDRobert/TDTDM/TDTD80/TD/TR......./TABLE/TABLE《网页设计技术》TABLEBORDER=2ALIGN=CENTERCAPTION创建表格/CAPTIONTHCOLSPAN=3第一学期/THTHCOLSPAN=3第二学期/THTRTD数学/TDTD科学/TDTD英语/TDTD数学/TDTD科学/TDTD英语/TD/TR....COLSPAN=“n”属性表示跨多少列ROWSPAN=“n”属性表示跨多少行《网页设计技术》表格的标记(5)《网页设计技术》表格的标记(5)《网页设计技术》表格的标记(5)《网页设计技术》表格的标记(5)学习《网页设计技术》表格的标记(5)cellspadding填充border边框《网页设计技术》表格的标记(5)Cellspacing间距《网页设计技术》课堂练习:请编写HTML代码《网页设计技术》2.3.6字符实体有些字符是无法在HTML中直接显示的，那么就要用到字符