HTMLCSS基础介绍CompanynameWEB编程基础主要内容了解HTML文档的基本结构了解标记属性的使用
方法
快递客服问题件处理详细方法山木方法pdf计算方法pdf华与华方法下载八字理论方法下载
和规则HTMLCSSJavaScript概述了解CSS的使用方法和规则HTMLCSSJavaScript概述网站开发的主要原则是：– 用标签元素HTML描述网页的内容结构；– 用CSS描述网页的排版布局；– 用JavaScript描述网页的事件处理，即鼠标或键盘在网页元素上的动作后的程序2.1HTML文档结构一个完整的HTML文件包含头部和主体两个部分的内容，在头部内容里，可定义标题、样式等，文档的主体内容就是要显示的信息。2.1.1基本结构<!--程序2-1--><html><head><title>一个简单的HTML示例</title></head><body><h1>欢迎光临我的主页</h1></body></html>2.1.2头部内容<head>…</head>是HTML文档的头部标记,在浏览器窗口中，头部信息是不被显示在正文中的，在此标记中可以插入其它用以说明文件的标题和一些公共属性的标记。如要指定HTML文档的网页标题（它将显示在浏览器窗口顶部标题栏），就要在头部内容中提供有关信息。用title元素来指定网页标题，即在<title></title>之间写上网页标题，如程序2-2。2.1.2头部内容<!--程序2-2--><html><head><title>我的第一个网站</title></head><body></body></html>2.1.2头部内容2.1.2头部内容在头部文件中使用<META>标记用于描述不包含在
标准
excel标准偏差excel标准偏差函数exl标准差函数国标检验抽样标准表免费下载红头文件格式标准下载
HTML里的一些文档信息，例如开发工具，作者，网页关键字，网页描述等。这些定义的内容并不在网页页面中显示，但是一些搜索引擎可以检索这些信息，浏览者可以根据这些关键字或描述查找到该网页。2.1.2头部内容<!--程序2-3--><html><head><title>我的第一个网页</title><METANAME="Generator"CONTENT="editplus"><METANAME="Author"CONTENT="zhaoming"><METANAME="Keywords"CONTENT="title"><METANAME="Description"CONTENT="sampleweb"></head><body></body></html>2.1.3主体内容在标记<body>和</body>中放置的是页面中所有的内容，如图片、文字、表格、表单、超链接等元素。例如，程序2-4在body部分添加了几个关于文本和段落的标记。2.1.3主体内容<!--程序2-4--><html><head><title>我的第一个页面</title></head><body><h1>这里是文章的标题。</h1><p>这里是文章的段落。</p></body></html>2.1.4编写网页的开头可以通过浏览器直接查看一个页面的HTML源代码，例如在IE浏览器菜单栏上选择“查看源文件”即可。大多页面的开头，通常使用DOCTYPE标记来声明要使用什么风格的HTML或XHTML。DOCTYPE使浏览器知道应该如何处理文档，并且让验证器知道按照什么样的标准检查代码的语法。然后，用html标记标出实际代码的起始位置。2.1.4编写网页的开头常用的声明HTML5<!DOCTYPEhtml>HTML4.01<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""">XHTML1.0<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""transitional.dtd">2.2HTML基本语法HTML用于描述功能的符号称为“标记”。<html>、<head>、<body>等都是标记。标记通常分为单标记和双标记两种类型。2.2.1标记语法单标记单标记仅单独使用就可以表达完整的意思。基本语法：<标记名称>语法说明：最常用的单标记是<br>,它表示换行。2.2.1标记语法双标记双标记由首标记和尾标记两部分构成，它必须成对使用。首标记告诉Web浏览器从此处开始执行该标记所表示的功能。尾标记告诉Web浏览器在这里结束该标记。基本语法：<标记名称>内容</标记名称>语法说明：其中“内容”部分就是要被这对标记施加作用的部分。例如，“b“标记的作用是，告诉浏览器介于标记<b>和</b>之间的文本应以粗体显示。（这里的“b”是“粗体（bold）”的意思。标记可以包含标记，即标记可以成对嵌套，但是不能交叉地嵌套。下面的代码就是错误的：<B><I>这是错误的交叉嵌套代码</B></I>。2.2.2属性语法HTML通过标记告诉浏览器如何展示网页，如<br>告诉浏览器显示一个换行。另外还可以为某些元素附加一些信息，这些附加信息被称为属性（attribute）。例如，标记<hr>的作用是在网页中插入一条水平线,那么这条水平线的粗细、对齐方式等就是该标记的属性，如：<hrsize="5px"align="center">2.2.2属性语法基本语法：<标记名称属性名1="属性值"属性名2="属性值">语法说明：属性应写在首标记内，并且和标记名之间有一个空格分隔。例如，上例中hr标记中，align为属性，center为属性值，属性值可以直接书写，也可以使用""括起来。以下写法也是正确的：<hrsize=5pxalign=center>2.3常用属性2.3.1图像图像标签（<img>）和源属性（Src）在HTML中，图像由<img>标签定义。<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src指"source"。源属性的值是图像的URL地址。定义图像的语法是：<imgsrc="url"/>URL指存储图像的位置。如果名为"boat.gif"的图像位于的images目录中，那么其URL为http:///images/boat.gif。浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。2.3.2表格table基本语法：<tableborder=”边框宽度”cellspacing=”空隙大小”Cellpadding=”填充大小”></table>表格的元素名称是table<tr></tr>表示行<td></td>表示列Cellspacing表格空隙大小：指两个列，行间的距离Cellpadding表示填充大小：各行各列中的内容被填充，这样就会在一定程度，撑大格子Eg:<tableborder=5align=”center”bgcolor=”yellow”width=500px><tralign=”center”><td>1</td><td>2</td><td>3</td><td>4</td></tr><tralign=”center”><td>1</td><td>2</td><td>3</td><td>4</td></tr><tralign=”center”><td>1</td><td>2</td><td>3</td><td>4</td></tr></table>2.3.3列表无序列表无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。<ul><li>Coffee</li><li>Milk</li></ul>浏览器显示如下：CoffeeMilk有序列表有序列表始于<ol>标签。每个列表项始于<li>标签。<!DOCTYPEhtml><html><body><ol><li>咖啡</li><li>牛奶</li><li>茶</li></ol><olstart="50"><li>咖啡</li><li>牛奶</li><li>茶</li></ol></body></html>注：列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。2.3.3列表定义列表自定义列表不仅仅是一列项目，而是项目及其注释的组。自定义列表以<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始。<dl><dt>Coffee</dt><dd>Blackhotdrink</dd><dt>Milk</dt><dd>Whitecolddrink</dd></dl>浏览器显示如下：CoffeeBlackhotdrinkMilkWhitecolddrink2.3.4div和span元素HTML<div>元素HTML<div>元素是块级元素，它是可用于组合其他HTML元素的容器。<div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与CSS一同使用，<div>元素可用于对大的内容块设置样式属性。<div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用<table>元素进行文档布局不是表格的正确用法。<table>元素的作用是显示表格化的数据。HTML<span>元素HTML<span>元素是内联元素，可用作文本的容器。<span>元素也没有特定的含义。当与CSS一同使用时，<span>元素可用于为部分文本设置样式属性。2.3.5表单表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。表单使用表单标签（<form>）定义。<form>...input元素...</form>2.3.5表单文本域（TextFields）当用户要在表单中键入字母、数字等内容时，就会用到文本域。<form>Firstname:<inputtype="text"name="firstname"/><br/>Lastname:<inputtype="text"name="lastname"/></form>浏览器显示如下：注意，表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。2.3.5表单单选按钮（RadioButtons）<form><inputtype="radio"name="sex"value="male"/>Male<br/><inputtype="radio"name="sex"value="female"/>Female</form>复选框（Checkboxes）当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。区别：type=“checkbox“下拉列表<form><selectname="cars"><optionvalue="volvo">Volvo</option><optionvalue="saab">Saab</option><optionvalue="fiat">Fiat</option><optionvalue="audi">Audi</option></select></form>2.3.5表单<html><body><form>用户：<inputtype="text"name="user"><br/>密码：<inputtype="password"name="password"></form><p>请注意，当您在密码域中键入字符时，浏览器将使用项目符号来代替这些字符。</p></body></html>2.3.6框架通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。框架结构标签（<frameset>）定义如何将窗口分割为框架,每个frameset定义了一系列行或列,rows/columns的值规定了每行或每列占据屏幕的面积<html><framesetcols=“25%,50%,25%”>//水平框架<framesrc="/example/html/frame_a.html"><framesrc="/example/html/frame_b.html"><framesrc="/example/html/frame_c.html"></frameset></html>注：<framesetrows=“25%,50%,25%”>垂直框架2.3.7注释注释标签用于在HTML源码中插入注释。注释会被浏览器忽略。可以使用注释对程序代码进行解释，适当的注释对以后代码的阅读和维护产生很大的帮助。基本语法：<!--注释内容-->语法说明：左括号后需要写一个惊叹号，右括号前就不需要了。<hrsize=5pxalign=center>2.4编写HTML文件的注意事项“<”和“>”是任何标记的开始和结束。元素的标记要用这对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠“/”；标记可以嵌套使用，但不能嵌套标记。任何回车符和空格在HTML代码中都不起作用。为了代码清晰，建议不同的标记都单独占一行；标记中可以放置各种属性，属性值都用“"”括起来；编写代码，一般应该使用缩进风格，以便更好的理解页面的结构，便于阅读和维护。2.4编写HTML文件的注意事项为了使浏览器能正常浏览网页，在用记事本或别的HTML开发工具编写好HTML文档后，在保存HTML时，对HTML文件的命名要注意以下几点：文件的扩展名为.htm或.html结束，建议统一使用html作为文件名的后缀；文件名中只可由英文字母、数字或下划线组成；文件名中不要包含特殊符号，比如空格、$等；文件名区分大小写；网站首页文件名一般是index.html或default.html。2.5小实例编写一个HTML文件，在编写的时候要注意编写的注意事项，养成良好的编码习惯。<!--程序2-5--><html><head><title>页面的标题</title></head><body><p>这是我的第一个页面。<b>这是粗体文本。</b></p><imgsrc=”./img/welcome.jpg”></body></html>小结本章主要介绍了HTML文件的基本结构和基本语法。HTML文件基本结构包含三大部分，其中：<html>、</html>分别表示一个HTML文件的开始和结束；<head>、</head>分别表示文件头部的开始和结束；<body>、</body>分别表示文件主体的开始和结束。<body></body>是HTML文档的核心部分，在浏览器中看到的任何信息都定义在这个标记之内。3CSS基本语法采用CSS有哪些好处？CSS是Web设计界的一次革命。CSS的具体优点包括：•通过单个样式表控制多个文档的布局；•更精确的布局控制；•为不同的媒体类型（屏幕、打印等）采取不同的布局；•无数高级、先进的技巧。3.1css基础语法及3种应用3.1css基础语法及3种应用为HTML文档应用CSS，有三种方法可供选择。下面对这三种方法进行了概括。建议对第三种方法（即外部样式表）予以关注。方法1：行内样式表（style属性）为HTML应用CSS的一种方法是使用HTML属性style。我们在上例的基础之上，通过行内样式表将页面背景设为红色：<html><head><title>例子</title></head><bodystyle="background-color:#FF0000;"><p>这个页面是红色的</p></body></html>方法2：内部样式表（style元素）为HTML应用CSS的另一种方法是采用HTML元素style。比如像这样：<html><head><title>例子</title><styletype="text/css">body{background-color:#FF0000;}</style></head><body><p>这个页面是红色的</p></body></html>3.1css基础语法及3种应用方法3：外部样式表我们推荐采用这种引用外部样式表的方法。在本教程之后的例子中，我们将全部采用该方法。外部样式表就是一个扩展名为css的文本文件。跟其他文件一样，你可以把样式表文件放在Web服务器上或者本地硬盘上。例如，比方说你的样式表文件名为style.css，它通常被存放于名为style的目录中。就像下面这样：现在的问题是：如何在一个HTML文档里引用一个外部样式表文件（style.css）呢？答案是：在HTML文档里创建一个指向外部样式表文件的链接（link）即可，就像下面这样：<linkrel="stylesheet"type="text/css"href="style/style.css"/>注意要在href属性里给出样式表文件的地址。3.2颜色与背景3.3链接CSS允许你根据链接是未访问的、已访问的、活动的、是否有鼠标悬停等分别定义不同的属性。这样，我们便可为网站增添奇特而有用的效果。你需要通过伪类（pseudoclass）来控制这些效果。a:link{color:blue;}a:visited{color:red;}a:active{background-color:#FFFF00;}a:hover{color:orange;font-style:italic;}3.3浮动的元素CSS中的盒状模型（boxmodel）用于描述一个为HTML元素形成的矩形盒子。盒状模型还涉及为各个元素调整外边距（margin）、边框（border）、内边距（padding）和内容的具体操作。下图显示了盒状模型的结：3.3浮动的元素设置外边距body{margin-top:100px;margin-right:40px;margin-bottom:10px;margin-left:70px;}或者你也可以采用一种较优雅的缩写形式：Body{margin:100px40px10px70px;}设置内边距h1{background:yellow;padding:20px20px20px80px;}h2{background:orange;padding-left:120px;}3.3浮动的元素我们可以通过CSS属性float令元素向左或向右浮动。也就是说，令盒子及其中的内容浮动到文档（或者是上层盒子）的右边或者左边。下图阐明了其原理3.3浮动的元素CSS如下：#picture{float:left;width:160px;}clear3.3浮动的元素#column1{float:left;width:33%;}#column2{float:left;width:33%;}#column3{float:left;width:33%;}可实现分栏，3列。3.4元素的定位一个采用绝对定位的元素不获得任何空间。这意味着：该元素在被定位后不会留下空位。要对元素进行绝对定位，应将position属性的值设为absolute。接着，你可以通过属性left、right、top和bottom来设定将盒子放置在哪里。Eg:举个绝对定位的例子，假如我们要在文档的四个角落各放置一个盒子：3.5用z-index进行层次堆叠我们正在打扑克，并且拿了一手同花大顺。我们可以通过为各张牌设定一个z-index的方式来表示这手牌：www.hnufe.edu.cnThankYou!CompanynameWEB编程基础
浙公网安备 33021202002483