WEB标准
web准备介绍： 1.w3c：万维网联盟组织，用来制定web标准的机构 2.web标准：制作网页遵循的规范 3.web准备规范的分类：结构标准，表现标准，行为标准 4.结构:html,表示：css，行为：javascript web准备总结： 1.结构标准：相当于人的身体。html就是来制作网页的 2.表现标准：相当于人的衣服。css就是来对网页进行美化的。 3.行为标准：相当于人的动作。js就是让网页动起来，具有生命力的
HTML简介
#HTML简介 什么是HTML？ HypeText Mackeup Language，翻译为超文本标记语言，本质是用来描述文本内容的显示 方式。比如字体，颜色，大小等 什么是超文本和标记？ a。超文本：音频，视频，图片称为超文本。 b。标记：<>这种标记构成了html页面。 学习的重点：每个标签的作用 HTML的网络术语。 a.网页：由各种标记组成的一个页面就叫做网页 b.主页：一个网站的其实页面或者导航页面 c。标记：<p>开始标记</p>结束标记，也叫标签。 d。元素：<p>内容</p>称为元素。 e。属性：给每个标签所作的辅助信息。
HTML规范
#HTML的规范： 1.HTML是一个弱势语言 2.html不区分大小写 3.html的后缀名是html #4.结构： 声明部分：<DOC TYPE HTML>使用来告诉浏览器这个页面使用的是哪个标准。 HEAD部分：将页面的也写额外信息告诉服务器。不会显示在页面上 BODY部分：页面显示的内容 #编写HTML的规范： 1.标记元素 所有标记元素必须正确嵌套，不能交叉嵌套 2.标记 所有标记必须小写 所有标记必须关闭 3.属性 属性值必须加引号 属性必须有值 #HTML基本语法特征： 1.html对换行不敏感，TAB不敏感 2.空白折叠现象 HTML所有文字之间，若果有空格，换行，tab都将被折叠为一个空格显示 3.标签要严格封闭
例子
<!--文档声明头，作用：告知浏览器使用那种标准--> <!DOCTYPE html> <html lang="en"> <head> <!--提供页面的基本信息--> <meta charset="UTF-8"> <!--浏览器的标题--> <title>淘宝网</title> </head> <body> </body> </html>
BODY下的一些相关标签
1.字体标签
2.排版标签
3.超链接标签
4.图片标签
5.列表标签
6.表格标签
7.表单标签
BODY标签下一些相关标签 字体标签 字体标签包含：h1-h6,<strong>,sup>,<sub> 1.标题标签:h1-h6 alien属性：靠左，靠右，居中 2.<strong></strong>:加粗标签 排版标签 段落标签<p> HTML标签分为： 1.文本级标签：p，span，a,b,i,u,em.文本标签里只能放文字，图片，表单元素。 2.容器级标签：div，h系列，li，dt，dd。容器级标签里可以放任何懂东西。 块级标签<div>和<span> div和span的区别是：div支持换行，span不支持换行（空白折叠） div是容器级标签（里面什么都可以放，div都可以放） span是文本级标签（span是可以插在div中使用的） 换行标签<br> 水平线标签<hr> 内容居中标签<center> <center>和p标签中alien设置成center效果一样 预定义(预格式化)标签<pre> 在标签中的格式是什么，网页显示的就是原格式 超链接标签 1.外部链接 a标签，href必须加http协议，target设置是否跳转新页面 2.锚链接 创建锚节点 <a name='名字'></a> t 设置锚链接 <a href='#名字'>回到顶部</a>#注意#千万不能丢 那么点击锚链接就会去找对应的名字 3.邮件链接（不常用） 超链接的属性： href:目标url name：锚点的节点名称 target:target:_blank:是否在新窗口打开 图片标签img HTML页面不是直接插入图片，而是插入图片的引用地址，需要把图片上传到服务器上 src属性：图片的路径 1.相对路径 当前目录 src='t.jpg' src='. .jpg' 父路径 src='.. .jpg' 2.绝对路径 1.磁盘的绝对路径 2.网络路径 img标签的属性： width height 宽高 title：提示性文本，属性悬浮时出现的文本 列表标签 1.无序列表<ul> 先创建<ul> 在在里面加上<li> <ul>中的属性 type：默认实心圆点 square--实心方块 circle--空心圆圈 嵌套列表 <ul> <ul></ul> </ul> 2.有序列表<ol> type="属性值"。 属性值可以是：1(阿拉伯数字，默认)、a、A、i、I。 结合start属性表示从几开始。 3.定义列表<dl> <dt><dd> 表格标签table <table>的属性： border：边框。像素为单位。 style="border-collapse:collapse;"：单元格的线和表格的边框线合并 width：宽度。像素为单位。 height：高度。像素为单位。 bordercolor：表格的边框颜色。 align：表格的水平对齐方式。属性值可以填：left right center。 注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签<td>进行设置） cellpadding：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。 注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir="rtl"，那就指的是内容到右边那条线的距离。 cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0 bgcolor="#99cc66"：表格的背景颜色。 background="路径src/..."：背景图片。 背景图片的优先级大于背景颜色。 <tr>行 <td>单元格 单元格合并： 横向合并：colspan：横向合并，把不合并的列向后推 纵向合并：rowspan： 表格的标题: <caption>表格名字</caption> 表单标签<form> type类型： text（默认） password：密码类型 radio：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。 ）。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。 checkbox：多选按钮，名字相同的按钮作为一组进行选择。 checked：将单选按钮或多选按钮默认处于选中状态。当<input>标签的type="radio"时，可以用这个属性。属性值也是checked，可以省略。 value="内容"：文本框里的默认内容（已经被填好了的） size="50"：表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。 注意size属性值的单位不是像素哦。 readonly：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。 用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。 disabled：文本框只读，不能编辑，光标点不进去。属性值可以不写。 四种按钮举例： 下拉框 <select>：下拉列表标签 <select>标签里面的每一项用<option>表示。select就是“选择”，option“选项”。 select标签和ul、ol、dl一样，都是组标签。 <select>标签的属性： a.multiple：可以对下拉列表中的选项进行多选。没有属性值。 b.size="3"：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。 <option>标签的属性： a.selected：预选中。没有属性值。 多行文本输入框： lable标签：点击前面的字符也能勾选框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字体标签</title> </head> <body> <h1 align="right">路飞学成1</h1> <h2 align="left">路飞学成2</h2> <h3 align="center">路飞学成3</h3> <h4>路飞学成4</h4> <h5>路飞学成5</h5> <h6>路飞学成6</h6> <h7>路飞学成7</h7> <strong>路飞学成</strong> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>排版标签</title> </head> <body> <!--<h1>--> <!--这是一个一级标题--> <!--<p>这是一级标题里面的内容</p>--> <!--</h1>--> <hr> <h1>p标签练习</h1> <!--p标签练习--> <p>这是一个段落 <h1>尼玛</h1> </p> <p align="center">这是另一个段落</p> <hr> <h1>div标签和span标签练习</h1> <!--div标签和span标签--> <div>div1</div> <div>div2 <span>spa2n</span> <span>spa3n</span> </div> <span>div3</span> <span>div3</span> <p> 商品简介 <span> <!--a href 超链接标签--> <a href="">详细信息</a> <a href="">生产日期</a> </span> </p> <hr> <h1>center标签练习</h1> <p align="center">这是p的center老虎</p> <center> <p>这是center标签中的段落</p> </center> <hr> <h1>pre标签</h1> <pre>你好啊 年号 厉害 </pre> <hr> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>超链接标签</title> </head> <body> <a name="top">到顶了</a> <a href="#dibu">回到底部</a> <hr> <h1>外部链接a</h1> <div> 不跳转新页面<a href="http://www.baidu.com">点击链接</a> </div> <div> 跳转新页面<a href="http://www.baidu.com" target="_blank">点击链接</a> </div> <hr> <h1>锚链接</h1> <h1>锚链接</h1> <h1>锚链接</h1> <h1>锚链接</h1> <h1>锚链接</h1> <h1>锚链接</h1> <h1>锚链接</h1> <h1>锚链接</h1> <h1>锚链接</h1> <h1>锚链接</h1> <h1>锚链接</h1> <hr> <a href="#top">回到顶部</a> <a name="dibu">到底部了</a> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片链接</title> </head> <body> 你好 <img src="t.jpg" title="照片" alt="这是一个照片" align="right" width="96px" height="128"px> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表标签</title> </head> <body> <h1>无序列表ul</h1> <ul> <li>张三</li> <li>张4</li> <li>张5</li> </ul> <ul type="square"> <li>实心方块</li> </ul> <ul type="circle"> <li>空心圆</li> </ul> <h2>嵌套列表</h2> <ul> <li>北京市</li> <ul> <li>朝阳</li> <li>昌平</li> </ul> </ul> <hr> <h1>有序列表</h1> <ol> <li>1</li> <li>2</li> <li>3</li> </ol> <ol type="A" start=" B"> <li>昌平</li> <li>朝阳</li> </ol> <hr> <h1>自定义列表</h1> <dl> <dt>第一条准则</dt> <dd>不准睡觉</dd> <dd>不准洗澡</dd> <dt>第二条准则</dt> <dd>听话</dd> <dd>听化不</dd> </dl> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格标签</title> </head> <body> <table border="" style="border-collapse: collapse" width="60" align="center" bgcolor="#7fffd4"> <caption>表格</caption> <tr > <td height="60">1</td> <td>2</td> <td>3</td> <td>3</td> </tr> <tr> <td bgcolor="#f5f5dc">4</td> <td rowspan="2" height="60">5</td> <td >6</td> <td>7</td> </tr> </table> <hr> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单标签</title> </head> <body> <form action=""> <div>用户名:<input type="text" value="123" disabled=""></div> <div>密码:<input type="password"></div> <div> 性别: <input type="radio" name="gender" value="male"> <input type="radio" name="gender" value="female"> </div> <div> 爱好： <input type="checkbox" name="love" value="eat">吃饭 <input type="checkbox" name="love" value="sleep">睡觉 <input type="checkbox" name="love" value="bat">打豆豆 </div> </form> <hr> <h1>四种按钮举例</h1> <form action=""> <input type="button" value="普通按钮"> <br> <input type="submit" value="提交按钮"> <br> <input type="reset" value="重置按钮"> <br> <input type="image" src="t.jpg" width="400" value="图片按钮2"> <br> <input type="file" value="文件提交狂"> </form> <hr> <h1>下拉标签</h1> <form action=""> <select name="" id=""> <option value="">小学</option> <option value="">中学</option> <option value="">大学</option> <option value="" selected="">研究生</option> </select> <select name="" id="" size="3"> <option value="">小学</option> <option value="">中学</option> <option value="">大学</option> <option value="" >研究生</option> </select> <select multiple="" name="" id="" size="3"> <option value="">小学</option> <option value="">中学</option> <option value="" selected="">大学</option> <option value="" selected="">研究生</option> </select> </form> <hr> <h1>多行文本输入框</h1> <form action=""> <textarea name="" id="" cols="30" rows="10">路飞</textarea> </form> <hr> <h1>lable标签</h1> <div> <input type="radio" name="sex" /> 男 <input type="radio" name="sex" /> 女 </div>> <div> <input type="radio" name="sex" id="nan" /> <label for="nan">男</label> <input type="radio" name="sex" id="nv" /> <label for="nv">女</label> </div> </body> </html>