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/> 上标&lt :小于号  &le :小于等于&gt :大于号  &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文件的地址

HTML页面、CSS样式的以及js学习与介绍相关推荐

移动端登录页样式错乱_Web前端导致页面css样式混乱的原因问题，我和小伙伴们惊呆了...
## **css常用技巧** 本文都时再工作中用得比较多的Css,还有遇到的一些不长记性的问题,一起来看看这些技巧吧. 1. **实现组件的自动换行排布:** flex-wrap: wrap; 使列表 ...
css常用样式，导致页面css样式混乱的原因，css遇到的问题，我和小伙伴们惊呆了
css常用技巧本文都时再工作中用得比较多的Css,还有遇到的一些不长记性的问题,一起来看看这些技巧吧. 实现组件的自动换行排布: flex-wrap: wrap;使列表排成一行方法一:div{di ...
asp.net 控制页面css样式
asp.net 控制页面css样式 fontDiv.Style["display"] = "none"; fontDiv.Style["dis ...
Freemarker模板框架页面css样式等不起效
使用Freemarker模板框架页面css样式等不起效这里看到正常引入,并且可以通过快捷方式点击进入链接css文件等进行查看但是页面并没有正常加载到css样式: 结合之前关于配置文件proport ...
css样式引入形式php,引入css样式表的四种方式介绍
一.使用STYLE属性: 将STYLE属性直接加在个别的元件标签里. 这种用法的优点是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』. 二.使用STYLE标签: 将样式规则写在标签之 ...
如何通过js改变css样式,如何通过JS 动态改变CSS样式
如何通过JS 动态改变CSS样式0 豆豆dou...2013.09.15浏览640次分享举报 .TLIWREGION3CSS { position:absolute; left:32px; top:4 ...
html可以用多个css样式吗,关于多个页面css样式表问题
CSS文件的分类和引用顺序通常,一个项目我们只引用一个CSS,但是对于较大的项目,我们需要把CSS文件进行分类. 我们按照CSS的性质和用途,将CSS文件分成"公共型样式".&q ...
CSS 样式表大全（学习笔记）
简述: 此笔记是学习Qt开发时产生的,主要是对Qt组件样式设计学习的一个简单记录,仅供参考使用. css样式被称为为"层叠样式表",是一种网页制作做不可或缺的技术,是用于装饰网页, ...
linux系统css样式加载不出,Linux系统虚拟主机网站访问页面css样式文件加载失败或图片无法显示的分析解决...
问题场景:客户使用Linux系统虚拟主机,网站程序上传之后访问发现页面排版有问题,css样式文件加载失败,部分图片显示不出来,以织梦CMS程序为例,如下图所所示: 问题原因: 1.Linux系统虚拟主 ...

HTML页面、CSS样式的以及js学习与介绍

CSS：

一、语法规则

二、CSS与HTML结合的方式

1、内部样式表

2、嵌入式样式表

3、外部样式表

三、分类

常用：

JS：

HTML页面、CSS样式的以及js学习与介绍相关推荐

最新文章

热门文章