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

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文件的地址

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/418059.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

lwip连续发数据卡死_Mysteel:12月全球铁矿石发运量稳中微增 进口矿咋走?

十一月份铁矿石供需差收紧价格上行。展望十二月份&#xff0c; 全球铁矿石发运稳中微增&#xff0c;到港小幅下降&#xff0c;澳洲方面&#xff0c;力拓财年末冲量将带来部分增量&#xff0c;但BHP仍受检修影响环比或将有所减量&#xff0c;整体来看&#xff0c;预计澳洲发运量…

CS模式与BS模式以及Tomcat的了解

一、CS与BS的差异 二、Tomcat Tomcat :web container 可执行文件目录 配置文件 部署项目的一个文件夹&#xff08;现在不怎么用这种方法&#xff09; 在webapp中&#xff0c;可以创建自己的web项目&#xff1a; 里面需要包含一个文件夹&#xff1a;WEB-INF以及自己的网页 之后…

贴花纸怎么贴_电子便签贴怎么使用?怎么在电脑上贴便签

电脑上的电子便签贴怎么使用&#xff1f;怎么在电脑上贴便签&#xff1f;Windows电脑上的便签贴小工具有很多&#xff0c;以敬业签桌面便签贴为例&#xff0c;将这个便签贴小工具在电脑桌面上安装好之后&#xff0c;注册一个会员账号和密码&#xff0c;可参考如下教程演示的步骤…

Servlet学习

一、以添加数据为例 在add.html页面的表单中&#xff0c;我们输入数据&#xff0c;通过点击添加操作&#xff0c;根据action发给我们服务器端的add组件&#xff0c;这个add组件会用JDBC中添加的方法向数据库中添加数据。 1、add组件 AddServlet servlet&#xff08;服务器端…

b 树查找时间复杂度_心里没点 B 树。。。

B 树和红黑树的动画小吴还在制作当中&#xff0c;比想象中的复杂好多好多好多&#xff0c;今天先来一个图解版的 B 树。。。1 引言数据库的增删改查等操作是开发过程中最为常见也是尤为重要的&#xff0c;尤其是现在大数据的兴起&#xff0c;导致数据存储量急剧增加&#xff0c…

HTTP与会话的学习

一、HTTP协议 请求 1请求行 2、请求消息头 3、请求主体 响应 1、响应行 2、响应头 3、响应体 二、会话 HTTP无状态&#xff1a;服务器无法判断两次请求是否为同一个客户端发过来的。 因此通过会话跟踪来解决这个问题 Overrideprotected void service(HttpServletRequest req,…

3650m5服务器内存选择 ibm_各大品牌服务器租用价格表明细(附详细表单)

企业在进行IT建设的花费肯定不少&#xff0c;其中就包括了服务器租用。那如何租到性价比高的服务器&#xff1f;可以先了解一下各大品牌的报价情况&#xff0c;对比服务器租用价格表&#xff0c;找到价格合适的。不过也不可一味的遵从低价格&#xff0c;毕竟一分钱一分货也是一…

服务器内部转发以及客户端重定向概念的学习

一、服务器内部转发 一次请求响应的过程&#xff0c;对于客户端而言&#xff0c;内部经过了多少次转发是不知道的。 既地址栏不会变化 二、客户端重定向 客户端向上面的组件发送请求&#xff0c;组件里由response.sendRedirect方法指向demo07&#xff0c;于是服务器端里上面的…

cad幕墙下料lisp_石材幕墙屋面不锈钢角钢接闪带施工方法

石材幕墙屋面不锈钢角钢接闪带施工方法 摘要&#xff1a;石材幕墙屋面接闪带传统安装方法采用镀锌圆钢、不锈钢管明敷或加接闪小针等防雷方式&#xff0c;安装后易产生变形、幕墙漏水等问题&#xff0c;锈蚀会污染石材表面&#xff0c;影响建筑立面效果&#xff0c;清洗幕墙困…

JavaWeb中水果库存系统的学习

一、编辑和修改特定的信息 我们想达到的效果为&#xff1a;在页面点击一个水果&#xff0c;然后对这个水果进行编辑&#xff0c;之后更新页面。 第一步&#xff1a; 在水果名称这里增加一个超链接&#xff0c;点击可以跳转到编辑的页面中&#xff0c; th:href"{...}&qu…

删不干净_“我劝你别删前任微信”

大家好&#xff0c;我是Lady Bird.几天前&#xff0c;我收到了前任测试单删的群发信息。看到他头像边亮起的红色数字一的瞬间&#xff0c;我才意识到分手之后我们再也没联系过。可能在很多人看来&#xff0c;留着对方微信就是危险信号。说实话&#xff0c;这事儿要放几年前&…

对于事务的认识

例子&#xff1a;当转账操作的时候&#xff0c;A用户转账给B用户&#xff0c;希望的结果是&#xff1a;A扣了钱&#xff0c;B加了钱&#xff1b;或者是A转账失败&#xff0c;B的钱数也没增加。 事务的处理原则&#xff1a;要么都执行&#xff0c;要么都不执行 理解&#xff1a;…

Spring中IOC与DI的学习

1、IOC 1.1步骤 2、DI 依赖注入 2.1步骤&#xff1a; 其中的set方法是IOC容器来调用的 <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"http://www.springframework.org/schema/beans"xmlns:xsi"http://www.w3.org/2001/…

Mybatis初始化配置

框架&#xff1a;jar包配置文件 一、添加依赖 在项目的pom.xml文件中添加mybatis依赖 <dependencies><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.13.1</version><scope>test</s…

用table展示树形结构数据_复习一下数据结构(二)——2.2 树形索引(23树)

普通树一个结点可以有多个孩子&#xff0c;但它本身只能存储一个元素&#xff0c;而二叉树结点最多只能有两个&#xff0c;这对于元素非常多的时候&#xff0c;会使得树的度或者是高度会非常大。这就使得内存存取外存的次数会增多&#xff0c;一旦涉及到外部存储设备&#xff0…

Spring中整合mybatis包

一、把对应的依赖都添加上&#xff1a; mysql、mybatis、spring的依赖&#xff08;都是基础的&#xff09; <dependencies><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.17<…