前端初识
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.标签要严格封闭
例子
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!--文档声明头,作用:告知浏览器使用那种标准--> <!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='.\t.jpg' 父路径 src='..\t.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>