大连理工大学软件学院实训基地html

HTMLWEB第一语言课程内容及学习周期•HTML介绍•HTML细节–文件结构–文字–图片–链接–表格–表单–多窗口–特殊字符–……•在不是很熟悉HTML的情况下，学习加练习的时间应该在4—8个小时•对于已经熟悉HTML的读者可以略过本章•本章内容针对程序员进行设置，不是培养设计师HTML简介•HyperTextMarkupLanguage–超文本(文字+图片+音视+链接…)–标记语言(浏览器根据标记显示内容)–来自于SGML(标准通用标记语言)–专注于在Web上传递信息–是写给浏览器的语言•历史–HTML1.0–HTML2.0(IETF制定)–HTML4.0(最终版)W3C•IETF–InternetEngineeringTaskForce–HTTP协议RFC等»RFC2616Http1.1RFC1521MIME•W3C–WorldWideWebConsortium()–HTMLXML等–XHTML•符合XML标准的HTML–DHTMLDy’namicHTML•（X）HTML/CSS/JavaScript的综合运用大连理工大学软件学院实训基地4HTML语法标记•标记(标签或元素)的形式–元素名内容/元素名•Eg.font文字/font–元素名/•Eg.imgsrc=“…”/–元素名•Eg.br•位于尖括号内，可以具有属性值–属性值必须“”或‘’，不写也可以解析，但是不推荐（不符合XHTML）•有开始必须有结束(XHTML)•标签不能嵌套•不区分大小写–但应该养成良好的编程习惯，推荐都用小写Html文档结构•htmlheadtitle典型HTML/title/headbody我会努力的！/body/html•!--中间的内容为注释--01.htmlhead中的常用标签•title文字/title–“文字”将显示在浏览器标题栏上•meta：用于设置一些头信息–metahttp-equiv=“content-type”content=“text/html;charset=gb2312”–metahttp-equiv=“refresh”content=“3;url=”–metaname=keywordscontent=yourkeywords–metaname=descriptioncontent=yourdescription–metahttp-equiv=“expires”content=“0”（不缓存，expires过时）metahttp-equiv=“pragma”content=“no-cache”(不要再代理服务器上缓存)–metaname=“generator|author|copyright”content=“…..”(generator有什么工具生存的代码)•style…/style定义CSS格式•Scriptlanguage=“”…/Script–用于定义脚本，Eg.Javascripthttp-equiv指明下面要设置的项目content指明该项目设置的内容02.htmllinkbase标签bodybodybgcolor=“#”--背景色background=img_url--背景图片/body•色彩值“#rrggbb”–Eg.bodybgcolor=“#ffffff”红绿蓝数字值•bodybackground=“img_url”--图片地址•body其他属性textlinkalinkvlinkbgcolorleftmargintopmargin…03.html04.html锚点标签--a•aname=AnchorName–在该位置定义名字为AnchorName的锚，就是给这个位置起了个名字，别人可以用这个名字直接链接到该文件的这个位置链接标签--a•超级链接，跳转到另一文件ahref=“url”target=“TargetWindow”文字/a•当鼠标点击“文字”时，TargetWindow的内容将会跳转到“url”，不指定target时在本窗口跳转。•连接到文件的特定部分–Href=“url#point”–链接到url的point部分–在url文档中用aname=“point”/a标识•Target见“框架“部分05.html06.html路径问题•本地路径–c:\dir1\dir2\…•绝对路径–•相对路径–images/01.jpg–../../images/01.jpg–/images/01.jpg=•Eg.ahref=“”/a•Eg.imgsrc=“”/07.html相对于URL地址URLURIURN•URL–UniformResourceLocator（统一资源定位符）•网络协议＋主机名＋端口号＋资源名（定位标记）••带有参数的url及url编码问题见Servlet/JSP部分•URN–UniformResourceName–持久可用的资源标准名称•例如邮箱名[e-mail]•URI–UniformResourceIdentifier–包含URL和URNURI_URL_URN.html分隔线--hr•语法–hrsize=“pixels”align=“align”width=“pixels”color=“#”noshade–Size高度–Align对齐方式，可以取left或right–Noshade无阴影效果–颜色•Eg.hrnoshadecolor=“#ff00ff”width=“600”size=“8”align=“left”08.html标题字体大小--h#•h#…/h##=1、2、3、4、5、6•按标题级别用黑体字显示标题内容•自动插入空行•h1最大•h6最小09.html字体设置•fontface=“”size=“”color=“”…/font–face定义字体–size1234567•实际8101214182436（pixels）–fontsize=“+1”–fontsize=“-1”–Color可以使用预定义的名字,也可以使用数字•red、blue、black…•tt/tt通常是打字机风格字体•cite/cite通常是引用方式（斜体）•em/em强调（通常是斜体加粗体）10.html设置文字显示名称HTML代码黑体b/b斜体i/i下划线u/u中划线s/s闪烁blink/blink上标sup/sup下标sub/sub11.html特殊字符<>®注册商标&& 空格©copyright™商标™"“12.html可以使用&#xx来显示字符，xx为字符的unicode码dreamweaver&华文字的布局•p…/p–分段落现实•div…/div(一层)span…/span（行内块）–分块显示•ul…/ul(列表)–litype=“disccirclesquare”…–符号列表•ol…/ol–li…–数字列表•br换行•nobr…/nobr不换行•pre/pre保留原有格式•marquee/marquee跑马灯效果•blockquote/blockquote•dldtdd13.html对齐—align•h1align=“”•divalign=“”•tablealign=“”•hralign=“”•……•取值:leftrightcentertopmiddlebottom•center……/center–对齐到中间14.html图片•imgsrc=“”align=“”alt=“”border=“”–Src图片路径，一般使用相对路径–Alt图片无法显示时显示的文字–Border边框的厚度–Align=leftrighttopmiddlebottom图文混排时用于和图片的对齐15.html图片与链接－见DreamWeaver演示表格—重点掌握•tablewidth=“”align=“”border=“”trthwidth=“”align=“”…/thth…/th…/trtrtdwidth=“”align=“”valign=“”…/tdtdrowspan=“”colspan=“”bgcolor=“”…/td……/tr/table%或像素值表头（可选）单元格topmiddlebottom跨行跨列16.htmltable的属性：bgcolorborderbordercolorlightbordercolordarkcellspacingcellpaddingwidthheight表单—重点掌握•作用–收集用户信息–数据库查询–收发email–……•用户不仅仅是信息的被动接受者，还可以通过表单成为信息的主动发出者表单基础--form•form……/form•form的属性–Method(getpost)•Get发送较少数据（256byte），显示在url中，url/userinfo?username=张三&password=hehe•Post数据长度无限制，不会显示在url中–Action•Form中数据交给服务器端哪个程序进行处理•Eg.formmethod=“post”action=“user.jsp……/form位于表单中的输入标签•位于form之中，接收用户输入•格式：inputtype=“”name=“”–type:•textradiocheckboxpasswordhiddenselectsubmitresetbuttontextareaimage–name:•提交到服务器端的变量的名字表单中的输入标签•文本框text–inputtype=“text”name=“”value=“”maxlength=“”size=“”•maxlength–最大字符长度•size–文本框宽度（字符）•密码区域—特殊的单行文本输入框password–inputtype=“password”name=“”value=“”size=“”maxlength=“”•单选按钮–inputtype=“radio”name=“”value=checked•典型用法:同一名字，不同的值•错误的用法:不同的名字•复选框–inputtype=“checkbox”name=“”value=“”checked•典型的用法:同一name，不同的value•隐藏域–inputtype=“hidden”name=“”value=“”•不显示在网页中•通常用作向下一个页面传输已知信息或表单的附加信息select•列表框–selectname=“”size=“”multipleoptionvalue=“”selected…/optionoptionvalue=“”…/option……/select•Multiple表示多重列表框，可以多选•Selected被选中•多行多列文本框–textarearows=“”cols=“”wrap=“”…/textarea•Rows:行数•Cols:列数•Wrap:–Off:不换行–Soft:自动换行，并且如果行末有英文单词，会将整个单词移到下一行–Hard:自动换行，但会截断