HTML基础HTML基础授课:李明勇HT_H5之家 - 中国HTML5教程资源分享第一站

HTML基础HTML基础授课:李明勇HTML基本结构HTML基本结构<html><head><title>个人主页<title><Meta>定义页面描述如内容格式编码<head><body>网页主体部分<body><html>*headhead包括标题、字符集、站点信息、网站作者信息、站点描述、站点关键字、样式表链接等。<HEAD><TITLE>重庆师范大学研究生处欢迎你！<TITLE><METAcontent="texthtmlcharset="httpequiv=ContentType><METAname=keywordscontent="重庆师范大学研究生处"><METAname=descriptioncontent="这是研究生处的网站"><METAname=authorcontent="李明勇"><METAname=descriptioncontent="这是研究生处的网站"><METAname=GENERATORcontent="MSHTML"><HEAD>*HTML由标签和属性构成HTML由标签和属性构成<palign="center">sometextsometextsometext<p>*分隔标签分隔标签这是一个断行的范例<br>看出来了吗？<br>这是一个分段的范例<p>基本上他会比断行还多空出一行*分隔线标签分隔线标签<br>普通分隔线<hr>橘色分隔线<hrcolor="#ff">宽度为px的分隔线<hrwidth="">厚度为的分隔线<hrsize="">靠右的分隔线<hralign="right">实心分隔线（无阴影）<hrnoshade>综合：<hrcolor="#ff"width=""size=""align="center">*排版标签排版标签文字置左、置中、置右<palign="left">文字靠左<p><palign="center">文字置中<p><palign="right">文字靠右<p>置中标签<center>这是最中间<center><center><imgsrc="imagesjpg"><center>*向右缩排标签<blockquote>缩排单位<blockquote><blockquote><blockquote>缩排单位<blockquote><blockquote>*字体标签字体标签标题标签<h>标题一<h><h>标题二<h><h>标题三<h><h>标题四<h><h>标题五<h><h>标题六<h>*设定字体大小标签设定字体大小标签<fontsize=>文字内容<font>标题的大小一共有七种也就是<fontsize=>（最小）到<fontsize=>（最大）*字型变化标签字型变化标签<b>粗体<b><i>斜体<i><u>底线<u>*文字颜色设定文字颜色设定<fontcolor="#fefecb">文字颜色<font><fontcolor="#ff">红<font><fontcolor="#ff">蓝<font><fontcolor="#ff">紫<font>使用取色工具*文字字型设定文字字型设定<fontface=“字型名称">文字<font><fontface="楷体GB">楷体GB<font>*图像标签图像标签<imgsrc="imagesjpg“><imgsrc="imagesjpg"width=“"height=“"><imgsrc="imagesjpg"width=""height=""align=middleborder="">注意图像文件的路径、名称、扩展名路径不对或者混乱图像会显示不正确要规范操作一般图像放在images目录下。相对路径*网页背景颜色网页背景颜色<bodybgcolor="#CCFFFF">设置背景图片<bodybackground="imageswebBgpng">设置文字颜色<bodybackground=“imageswebBgpng”text=“#FF”>*body内所有文字颜色全局设置**设置链接文字属性<bodybackground="imageswebBgpng"text="#FF"link="#FF"alink="#FF"vlink="#">用法：<bodyalink="颜色码">设定“按下连结”的颜色也就是当您滑鼠按下那连结的瞬间所呈现的颜色。用法：<bodyvlink="颜色码">设定“按下链结后”的颜色也就是如果该连结已经有被按过了那么就会呈现的颜色。如此的做法是要让使用者容易识别到底哪些连结有去过了哪些没去过。*<html><head><title>我的个人主页！<title><head><bodylink="#ff“alink="#ff“vlink="red"><ahref="indexhtm">连结文字<a><body><html>*连结标签连结标签<ahref=“c:wwwtexthtm">这就是‘绝对路径’<a><ahref="texthtm">这就是‘相对路径’<a>*网站连结好站<ahref="http:sunspotdesigncom">好站<a>电子邮件连结写情书给我<ahref="mailto:tadmsurlcomtw">写情书给我<a>ftp连结下载档案<ahref="ftp:ftpntuedutw">下载档案<a>*背景标签背景标签<bodybgcolor="#fea“background="bgjpg">*表格标签表格标签最简单表格行列<tableborder=><tr><td><td><tr><table>行列<tr>是表中的行<td>是表中的单元格<tableborder=><tr><td><td><td><td><tr><tr><td><td><td><td><tr><tr><td><td><td><td><tr><table>*合并表格合并表格左右合并<TABLEBORDER=><TR><TDCOLSPAN=><TD><TR><TR><TD><TD><TD><TD><TD><TD><TR><TABLE>上下合并<TABLEBORDER=><TR><TDROWSPAN=><TD><TD><TD><TD><TD><TR><TR><TD><TD><TD><TD><TR><TABLE>*表格的居中大小表格的居中大小<TABLEWIDTH=""BORDER=""HEIGHT=""><TR><TDALIGN=CENTER><TD><TR><TABLE>*表格背景、底色设定表格背景、底色设定设置整个表格底色<TABLEBORDER=""BGCOLOR=#FFCC><TR><TD><TD><TD><TD><TR><TR><TD><TD><TD><TD><TR><TABLE>设置一行颜色<TABLEBORDER=""><TRBGCOLOR=#FFCC><TD><TD><TD><TD><TR><TR><TD><TD><TD><TD><TR><TABLE>*设置一个单元格底色<TABLEBORDER=""><TR><TDBGCOLOR=#FFCC><TD><TD><TD><TR><TR><TD><TD><TD><TD><TR><TABLE>*背景图片背景图片<TABLEBORDER=""BACKGROUND=“imagesjpg"><TR><TD><TD><TD><TD><TR><TR><TD><TD><TD><TD><TR><TABLE>*表格框线设定表格框线设定<TABLEBORDER=“”BORDERCOLOR=“#FF”BORDERCOLORLIGHT=“#BFFBORDERCOLORDARK="#B"><TR><TD><TD><TR><TABLE>BORDERCOLORLIGHT”(阴影亮面)DERCOLORDARK(阴影暗面)*滚动<marquee><marquee><tableborder=""bgcolor="#FF"align="right"><tr><td><marqueescrolldelay=""direction="up"width=""height="">最新公告！<marquee><td><tr><table>超链接：<a><a><ahref="divcsshtml">请点击进入<a>*表单：<form><form>表单：<form><form><FORM>性别：男<INPUTTYPE="RADIO"NAME="SEX"VALUE="BOY">女<INPUTTYPE="RADIO"NAME="SEX"VALUE="GIRL"><FORM>TYPE=“RADIO”单选框*<FORM>喜好：<INPUTTYPE="CHECKBOX"NAME="SEX"VALUE="MOVIE">电影<INPUTTYPE="CHECKBOX"NAME="SEX"VALUE="BOOK">看书<FORM>TYPE=“CHECKBOX”复选框*<FORM>请输入密码：<INPUTTYPE="PASSWORD"NAME="INPUT"><FORM>TYPE=“PASSWORD“密码*<FORM><INPUTTYPE="SUBMIT"VALUE="送出资料"><INPUTTYPE="RESET"VALUE="重新填写"><FORM>*插入视频音乐背景音乐插入视频音乐背景音乐<embedsrc="即使知道要见面mp"align="middle"autostart="false"><embedsrc="奥运会开幕式现场仪式wmv"width=""height=""autostart="true"><bgsoundsrc="即使知道要见面mp">*无序标签无序标签<UL><!unorderedlabel><LI>姓名：杰克升<LI>生日：<LI>星座：天蝎座<UL>*有序标签有序标签<OL><!orderedlabel><LI>姓名：杰克升<LI>生日：<LI>星座：天蝎座<OL>*定义列表标签定义列表标签<DL><!definedlabel><DT>小标题<DD>标题的内容说明<DL>*CSS（CascadingStyleSheet层叠样式表）CSS（CascadingStyleSheet层叠样式表）CSS是使用HTML标记语言编写的HTML是学习CSS的基础基本语法：选择符{样式属性:取值样式属性:取值样式属性:取值}news{fontfamily:"方正粗倩简体"fontsize:pxcolor:#FFfontstyle:normalfontweight:bold}*CSS优点：CSS优点：、大大减少页面代码提高网页浏览速度、方便网页的修改维护可以实现批量修改。、更强大的格式功能让网页更美丽。、内容和表现（样式）分离样式可以独立在一个样式文件中。、可以批量修改风格。见divcsshtml范例*CSS（CascadingStyleSheet层叠样式表）CSS（CascadingStyleSheet层叠样式表）CSS是使用HTML标记语言编写的HTML是学习CSS的基础基本语法：选择符{样式属性:取值样式属性:取值样式属性:取值}news{fontfamily:"方正粗倩简体"fontsize:pxcolor:#FFfontstyle:normalfontweight:bold}*CSS选择器CSS选择器所有的标签都是通过调用CSS选择器来进行界面控制。标签选择器：直接将HTML标签作为选择器。重新定义HTML标签。<p>、<h>、<head>、<body>、<font>、<title>、<br>换行、<marquee>、<img>、<a>、<form>、<table>、<tr>表格行、<td>单元格(标签选择器一旦声明所有的该标签都产生相应的变化)p{fontsize:pxcolor:#}引用：无需引用直接生效。*类别（class）选择器(以开头)（可应用于任何HTML元素使用最广泛使用灵活）red{color:redfontsize:px}引用：<pclass=“red”><p>*ID选择器：只能在HTML页面中使用一次针对性更强。（一个ID最多只能赋予一个HTML标记）(以#开头)#one{fontsize:pxcolor:#}引用<pid=“one”><p>范例:yjschtml<Hclass=actid=tit(在页面中只出现一次)onmouseover=ShowTabs(,,)><Ahref="showpageaspid=">最新动态<A><H>*链接外部CSS链接外部CSS<linkhref="csscss"rel="stylesheet"type="textcss"><linkhref="csscss"rel="stylesheet"type="textcss"><linkhref="csscss"rel="stylesheet"type="textcss">位置：放在<head>标签中。同时链接多个CSS靠后的优先于靠前的CSS外部CSS可以用于多个页面当此CSS改变时所有应用此CSS的页面都随着改变。制作大量样式相同页面减少重复工作高效。*创建CSS创建CSSCSS属性大类：类型、背景、区块、方框、边框、列表、定位、扩展*超链接CSS超链接CSS新建CSS规则“符合内容（基于选择的内容）”*CSSDIV布局定位CSSDIV布局定位设计网页第一步是布局：对整个页面进行大的区块划分。把大块的内容放进不同区域中。方式：、table,、框架、CSSDIV<div><div>:一个容器放置各种内容。*盒子模型盒子模型*页面可以看做是由一个一个盒子组成的填充（padding）:盒子里面的内容和边框之间的距离、空白盒子的边框(border)：可以有不同样式边界(margin)：盒子边框外和其他盒子之间。*DIVCSSDIVCSS<div>标签：分块标签用于网页分区布局、定位。<div>一般与CSS（CascadingStyleSheet层叠样式表）一起使用。用id或class来标记<div>。*网页布局网页布局*网页布局网页布局*网页布局网页布局*网页布局网页布局DIV结构如下：　　body{}　　　#Container{}　*页面层容器*　　　　　#Header{}　*页面头部*　　　　　#PageBody{}　*页面主体*　　　　　　#Sidebar{}　*侧边栏*　　　　　　#MainBody{}　*主体内容*　　　　　#Footer{}　*页面底部**Divcss范例Divcss范例<body><h>NEWSWEBSITE<h><p>sometextsometextsometext<p><divclass="news"><h>Newsheadline<h><p>sometextsometextsometext<p><div><divclass="news"><h>Newsheadline<h><p>sometextsometextsometext<p><div><body>*