html决定页面显示什么内容 css决定页面的美观程度html语言是解释型语言,解释不出来就不管了,不区分大小写 浏览器是容错的1)html页面由一对标签组成:<html><html/>,分别成为开始标签和结束标签 2)title:表示网页的标题 3)<meta charset="UTF-8"/> 设置字符编码标准 4)<br/> 表示换行 ,单表签:开始标签和结束标签是一个 5)<p> 表示段落标签 6)<img> 表示图片标签title标签:鼠标放上可以出现提示的信息alt标签:加载没成功会显示的信息weight、height表示宽度和高度 7)h1-h6 是标题标签 8)列表标签:ol(order list): 有序列表start 表示从start开始type表示顺序的类型,比如:a,b,c,d ; 1,2,3,4 ;A,B,C,Dul(unorder list):无序列表 9)字体类型(可以查找html字符实体)<b><b/> 字体加粗<i><i/> 字体斜体<u><u/> 字体下划线<sub><sub/> 下标<sup><sup/> 上标< :小于号 &le :小于等于> :大于号 &ge :大于等于10) span 不换行的块标记:将需要处理的内容围起来,之后可以进行处理 11)<a><a/> 超链接href :链接的地址target:打开超链接的方式_blank:打开一个新的窗口_self:在本窗口打开 (默认值)_parent :在父窗口打开_top:在顶层打开12)div 层 13) table:表格标签<th> 表头<tr> 行标签<td> 列标签rowspan:行合并colspan:列合并border :单元格的边框类型width :单元格的宽度cellspacing:单元格之间的距离cellpadding:单元格内部与文字之间的距离 14)form 表单:一个容器,承载我们发送给服务器端的数据action;表示将表单发送的目的地method:表单的发送方式 get和postinputtype:text:表示文本框password:非明文的文本框radio:单选框属性 使用value标签传值通过name属性来单选,必须一致才会有互斥的效果checked:表示默认选中checkbox:复选框属性 使用value标签传值select:下拉列表option:列表中的选项textarea:多行文本框(文本域)rows表示文本框的行数clos表示每行的字数value值:开始标签<textarea>和结束标签<textarea/>之间的值以下三个按钮通过value值来显示内容submit:提交按钮reset:重置按钮 恢复表单的默认状态button:普通按钮name:必须要指定,如果没有name属性,文本框的值不会传递到服务器端value:在单选框radio中必须设置,否则值不会传递到服务器端 15)frameset:框架(页面中不需要body) 相当于布局frame 表示框架中的具体页面引用iframe:在一个页面嵌入一个子页面
<html><style type="text/css">div{width:200px;height:200px;position:absolute}#div1{background-color:#ABC}#div2{background-color:#BCA;left:100px;top:100px;}#div3{background-color:#CAB;left:200px;top:200px;}</style><meta charset="UTF-8"/><head><title>网页的标题</title></head><body><!--Hello World!<br/>你好,html<p>第一个段落</p><p>第二个段落</p><img src="imgs/a.jpg" width="53" height="99" title="这里是我的证件照" alt="显示失败"/><h1>标题一</h1><h2>标题一</h2><h3>标题一</h3><h4>标题一</h4><h5>标题一</h5><h6>标题一</h6>--><!-- 武林高手排行榜<ol type="A"><li>乔峰</li><li>慕容复</li><li>慕容博</li><li>萧远山</li></ol>武林大会人员名单<ul ><li>乔峰</li><li>阿朱</li><li>虚竹</li><li>段誉</li></ul>水分子的化学式:H<sub>2</sub>0 <br/>x的平方:x<sup>2</sup><span>赵又廷</span>,夺妻之仇<a href="http://www.baidu.com" target="_blank">百度一下</a>--><!-- <div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div>--><!-- <table border="4" width="500" cellspacing="0" cellpadding="4"><tr align="center"><th>姓名</th><th>门派</th><th>招数</th><th>武力值</th></tr><tr align="center"><td>萧峰</td><td>丐帮</td><td>降龙十八掌</td><td>5000</td></tr><tr align="center"><td>虚竹</td><td>灵鹫宫</td><td>北冥神功</td><td>10000</td></tr><tr align="center"><td>扫地僧</td><td>少林寺</td><td>七十二绝技</td><td>未知</td></tr></table><table border="1" cellspacing="0" cellpadding="4" width="600"><tr><th>名称</th><th>单价</th><th>数量</th><th>小计</th><th>操作</th></tr><tr align="center"><td>苹果</td><td rowspan="2">5</td><td>20</td><td>100</td><td><img src="imgs/del.jpg" width="24" height="24"/></td></tr><tr align="center"><td>菠萝</td><td>20</td><td>60</td><td><img src="imgs/del.jpg" width="24" height="24"/></td></tr><tr align="center"><td>香蕉</td><td>5</td><td>60</td><td>300</td><td><img src="imgs/del.jpg" width="24" height="24"/></td></tr><tr align="center"><td>总计</td><td colspan="4">181</td></tr></table>--><!--<form action="demo02.html" method="get">昵称:<input type="text" name="nickName"/><br/>密码:<input type="password" name="pwd"/><br/>性别:<input type="radio" name="gender" value="male"/> 男<input type="radio" name="gender" value="female"/> 女<br/>爱好:<input type="checkbox" name="hobby" value="basketball">篮球<input type="checkbox" name="hobby" value="footable">足球<input type="checkbox" name="hobby" value="earth">地球<br>星座:<select name="star"><option value="1">白羊座</option><option value="2">水瓶座</option><option value="3">金牛座</option></select><br>备注:<textarea name="remark" rows="4" cols="50"></textarea><br/><input type="submit" value="注 册"><input type="reset" value="重 置"><input type="button" value="普通按钮"></form>--><frameset rows="20%,*" frameborder=""><frame src="frame/top.html"><frameset cols="15%,*"><frame src="frame/left.html"><frameset rows="80%"><frame src="frame/main.html"><frame src="frame/botton.html"></frameset></frameset></frameset></body>
</html>
一些展示结果
frameset 编写的有问题,但因为淘汰了所以了解以下
CSS:
CSS:层叠式样式表:用于控制网页样式并且将样式信息与网页内容分离的一种标记行语言
一、语法规则
二、CSS与HTML结合的方式
1、内部样式表
<!--内部样式表--><style type="text/css">p{color:red;}.f20{font-size:20px;}</style>
在<style>标签中写CSS样式内容
2、嵌入式样式表
<p><span style="font-size:100px;font-weight:boloder;">HELLO</span></p>
在一个标签里使用
3、外部样式表
通过link标签来使用
<link rel="stylesheet" href="css/demo01.css">
三、分类
1)标签样式表:p{color:red;} 表示p标签的样式都为红色2)类样式:.f20{font-size:20px;} 前面有个.<p class="f20">段落三</p>3)id样式: #p4{} 以#开头 id属性在这个html文档中尽量唯一4)组合样式:div p{color:blue;} div .f32{}
常用:
border:边框width:宽度height:厚度background-color:边框内部背景颜色color:字体颜色font-size:20px 字体大小.......
JS:
连接外部的JS文件:
<script type="text/javascript" src="js.fruit.js"></script>
其中src中的值为js文件的地址