HTML 和 CSS基本使用
HTML:超文本标记语言---定义页面结构
CSS:层叠样式表--页面显示的样式(BootStrap)
JS:JavaScript--界面交互(动态交互) JQuery Ajax Json
LayUI、EasyUI
Vue、React、Angular
HTML
基本标签
br: (line) break:换行
hr: horizontal rule
<body> <!-- 标题headline --> <h1>一级标题</h1> <h2>二级标题</h2> <h3 id="h3">三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> <!-- p=paragraph 段落--> <p>王老师是Java讲师,朱老师是Java讲师,高老师是Java讲师</p> <p>鞠老师是H5讲师,李老师是H5讲师</p> <!--img 图片 alt:替代文字,图片没有加载出来显示的文字 width:宽 height:高 --> <img src="../images/bd_logo11.png" alt="加载失败"></img> <img src="../images/bd_logo1.png"/> <img src="../images/bd_logo1.png"/> <img src="../images/bd_logo1.png" width="100px" height="100px"/> <!-- br 换行 --> <br /> <!-- a 超链接 target="_blank" 在新窗口打开 title="悬停文字" --> <a href="http://www.baidu.com" title="悬停文字" target="_blank">超链接文字</a> <!-- 页面内的锚点使用id,使用a标签可以跳转到指定锚点 --> <a href="#h3">跳转到h3标题</a> <a href="#">跳转到网页的开始</a> <!-- hr --> <hr /> <!--有序列表 ol=ordered list --> <ol> <li>北京</li> <li>上海</li> <li>深圳</li> <li>广州</li> </ol> <!--无序列表 ul=unordered list --> <ul> <li>北京</li> <li>上海</li> <li>深圳</li> <li>广州</li> </ul> <!-- 无序列表和有序列表可以嵌套 --> <ul> <li>北京</li> <li>上海</li> <li>深圳</li> <li>广州</li> <li> 山东 <ol> <li>青岛</li> <li>济南</li> <li>烟台</li> </ol> </li> </ul> </body>
列表:
li=list item
分类:
- 有序列表:ol=ordered list
- 无序列表:ul=unordered list
用来表示一个列表语义,每个li之间是不分先后。
注意:无序列表的作用 不是为了给文字增加小圆点,而是要表达“无序列表”的语义。
有序列表 ol
ol=ordered list
- 北京
- 上海
- 深圳
- 广州
<ol> <li>北京</li> <li>上海</li> <li>深圳</li> <li>广州</li> </ol>
无序列表 ul
ul=unordered list
- 北京
- 上海
- 深圳
- 广州
<ul> <li>北京</li> <li>上海</li> <li>深圳</li> <li>广州</li> </ul>
嵌套
无序列表和有序列表可以嵌套
<ul> <li>北京</li> <li>上海</li> <li>深圳</li> <li>广州</li> <li> 山东 <ol> <li>青岛</li> <li>济南</li> <li>烟台</li> </ol> </li> </ul>
封装元素
块级元素:单独成为一行。h、ul、ol、div
行内元素:不能独占一行。img、a、span、input
div
div division div里面所有的元素在div这个区域里面。
就是编程里面封装的思想。
<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div align="center"> <div id="top" align="center"> <img src="../images/jd.jpg" /> </div> <div id="center" style="color:red;width: 700px;"> 京东(股票代码:JD),中国自营式电商企业,创始人刘强东担任京东集团董事局主席兼首席执行官 [1] 。旗下设有京东商城、京东金融、拍拍网、京东智能、O2O及海外事业部等。2013年正式获得虚拟运营商牌照。 2014年5月在美国纳斯达克证券交易所正式挂牌上市。 2016年6月与沃尔玛达成深度战略合作,1号店并入京东。 2014年5月,京东集团在美国纳斯达克证券交易所正式挂牌上市 [2] 。2015年7月,京东凭借高成长性入选纳斯达克100指数 [3] 和纳斯达克100平均加权指数 [4] 。 2017年1月4日,中国银联宣布京东金融旗下支付公司正式成为银联收单成员机构。2017年4月25日,京东集团宣布正式组建京东物流子集团。2017年8月3日,2017年“中国互联网企业100强”榜单发布,京东排名第四位。 [5] 2018年3月15日,京东内部公告成立了“客户卓越体验部”,该部门将整体负责京东集团层面客户体验项目的推进。京东集团副总裁余睿出任该部门负责人。 [6] 2018年《财富》世界500强排行榜第181名。2018年7月24日,京东增资安联财险中国的方案获得了银保监会的批准。 [7-8] <br /> <img src="../images/jd.jpg"/> </div> <div id="bottom" style="color:blue;width: 700px;"> Copyright © 2004 - 2018 京东JD.com 版权所有|消费者维权热线:4006067733经营证照|(京)网械平台备字(2018)第00003号 </div> </div> </body> </html>
span
span功能类似于div,但是不能独占一行。
u(underline):下划线
i( italic) : 斜体
b (bold) : 粗体
<div> <span><u>山东省</u><i>青岛市</i><span style="color: red;"><b>城阳区</b>春阳路大润发</span></span> </div>
效果: 山东省青岛市城阳区春阳路大润发
空格折叠现象
普通的空格在html里如果连续出现多个会被当成一个空格,
如果想显示多个连续的空格就要使用特殊的字符
 
Non-breaking Space
锄禾日当 午
汗滴禾下 土
谁知盘中 餐
粒粒皆辛 苦
<div> 锄禾日当 午<br/> 汗滴禾下 土<br/> 谁知盘中 餐<br/> 粒粒皆辛 苦<br/> </div>
table
结构:
tr = table row
td = table data 单元格
th = table head
<!--border:边框 cellspacing:单元格间隙 --> <table border="1" cellspacing="0" width="400"> <tr> <th>讲师名称</th> <th>所教班级</th> </tr> <tr> <td>王老师</td> <td>Java180701</td> </tr> <tr> <td>朱老师</td> <td>Java180702</td> </tr> <tr> <td>高老师</td> <td>Java180703</td> </tr> </table> <table border="1" cellspacing="0" width="400"> <thead> <tr> <th>讲师名称</th> <th>所教班级</th> </tr> </thead> <tbody> <tr> <td>王老师</td> <td>Java180701</td> </tr> <tr> <td>朱老师</td> <td>Java180702</td> </tr> <tr> <td>高老师</td> <td>Java180703</td> </tr> </tbody> </table>
行跨越:
<!-- rowspan 行跨越 --> <table border="1" cellspacing="0" width="400"> <tr> <th>讲师名称</th> <th>所教班级</th> </tr> <tr> <td rowspan="2">王老师</td> <td>Java180701</td> </tr> <tr> <!--<td>朱老师</td>--> <td>Java180702</td> </tr> <tr> <td>高老师</td> <td>Java180703</td> </tr> </table>
列跨越:
<!-- colspan 列跨越 --> <table border="1" cellspacing="0" width="400"> <tr> <th>讲师名称</th> <th>所教班级</th> </tr> <tr> <td colspan="2">王老师</td> <!--<td>Java180701</td>--> </tr> <tr> <td>朱老师</td> <td>Java180702</td> </tr> <tr> <td>高老师</td> <td>Java180703</td> </tr> </table>
form表单相关标签
前后端联动原理:
代码效果图:
<body> <div align="center"> <b>欢迎注册!</b> <form action="http://www.baidu.com"> <table border="1" cellspacing="0"> <tr> <td>账号:</td> <!-- type="text"文本框 value:设置默认值 maxlength:设置最大长度 readonly="true" --> <td><input type="text" value="zhangsan" maxlength="10"/></td> </tr> <tr> <td>密码:</td> <td><input type="password"/></td> </tr> <tr> <td>性别:</td> <td> <!-- 单选按钮 name:组名,同一组的radio互相排斥 checked:设置默认选中 --> <input type="radio" name="gender" />男 <input type="radio" name="gender" checked="true"/>女 </td> </tr> <tr> <td>性却:</td> <td> <input type="checkbox" name="likes"/>音乐<br/> <input type="checkbox" name="likes"/>看书<br/> <input type="checkbox" name="likes"/>爬山<br/> </td> </tr> <tr> <td>城市:</td> <td> <!-- selected:设置默认选中 --> <select> <option>青岛</option> <option>济南</option> <option selected="true">烟台</option> <option>潍坊</option> </select> </td> </tr> <tr> <td>自我介绍</td> <td> <!-- textarea --> <textarea rows="5" cols="20">京东(股票代码:JD),中国自营式电商企业,创始人刘强东担任京东集团董事局主席兼首席执行官 [1] 。旗下设有京东商城、京东金融、拍拍网、京东智能、O2O及海外事业部等。2013年正式获得虚拟运营商牌照。 2014年5月在美国纳斯达克证券交易所正式挂牌上市。 2016年6月与沃尔玛达成深度战略合作,1号店并入京东。 </textarea> </td> </tr> <tr> <td colspan="2"> <input type="checkbox" id="cb"/> <label for="cb">同意该协议</label> </td> <td></td> </tr> <tr> <td colspan="2"> <!-- submit:提交表单数据到服务器 reset:将表单数据重置为初始值 button:没有任何功能,需要后面通过jd定义功能 --> <input type="submit" value="注册"/> <input type="reset" value="重置"/> <!--<input type="button" value="Input 按钮"/>--> <button>按钮</button> </td> <td></td> </tr> </table> </form> </div> </body>
CSS
CSS定义:cascading style sheet 层叠样式表。
语法:
选择器 {
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
属性名4:属性值4;
}
CSS使用:
1、通过选择器选择上标签
2、选择上标签上之后设置样式
选择器分为:
标签选择器: p{}
类选择器: .className{}
id选择器: #id{}
一些常见的属性:
color:red; font-size:40px; background-color:blue; text-decoration:underline; text-decoration:none; //没有下划线
一共有三种样式:50px字体、红色、下划线
<html> <head> <meta charset="UTF-8"> <title></title> <style> .red{ color: red; } .underline{ text-decoration: underline; } .big_font{ font-size: 50px; } </style> </head> <body> <p class="red big_font">段落1</p> <p class="underline red">段落2</p> <p class="big_font underline">段落3</p> <p class="red big_font underline">段落4</p> </body> </html>
正确的思路,就是用所谓“公共类”的思路,就是我们类就是提供“公共服务”,比如有红、大、线,一旦携带这个类名,就有相应的样式变化:
所以要总结两条:
1) class可以重复,也就是说,同一个页面上可能有多个标签同时属于某一个类;
2) 同一个标签可以同时携带多个类,每个标签,就去选取自己想要的类:
类的使用,能够决定一个人的css水平。
总结:
1) 不要去试图用一个类名,把某个标签的所有样式写完。这个标签要多携带几个类,共同造成这个标签的样式。
2) 每一个类要尽可能小,有“公共”的概念,能够让更多的标签使用。
到底用id还是class?
答案:尽可能的用class,除非极特殊的情况下用id。
一般情况下:id表示唯一的概念,是给js用的,class是给css用的。
CSS高级选择器:
直接看代码 s1 s2 后代选择器 s1,s2 并集选择器(选择器组) s1s2 交集选择器 s1>s2 直接儿子选择器,和后代选择器不一样 s1+s2 下一个兄弟选择器,后面紧挨着的第一个兄弟 selector.rar div .style1
层次选择器:
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> input[type='text']{ background-color: red; } input[type='password']{ background-color: blue; } </style> </head> <body> 用户名:<input type="text" name="userName" /><br/> 密码:<input type="password" name="password" /><br/> </body> </html>
优先级:
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; background-color: blue; ``` } #div2{ ```html background-color: green; } .margin_top_bottom_2{ margin-top: 2px; margin-bottom: 2px; background-color: red; } </style> </head> <body> <div></div> <div class="margin_top_bottom_2" id="div2"></div> <div></div> </body> </html>
id选择器>class选择器>标签选择器z
练习:
第一行文本为 <p> 元素,使用内联样式定义其样式为 25px 的红色文本; 第二行文本为 <h1> 元素,使用内部样式表定义其样式为 20px的蓝色文本; 第三行文本为 <h2> 元素,使用外部样式表定义其样式为 15px的绿色文本,且背景色为银灰色(silver)。
<html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="h2.css" /> <style> .h1{ font-size: 20px; color: blue; } </style> </head> <body> <p style="color: red;font-size: 25px;">段落文本p:使用内联样式</p> <h1 class="h1">一级标题(h1):使用内部样式表</h1> <h2 class="h2">二级标题(h2):使用外部样式表</h2> </body> </html>
本文作者:kingwzun
本文链接:https://www.cnblogs.com/kingwz/p/16982004.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步