java学习:html和css总结

##html和css知识点总结
本小节以HTML的结构为框架,进行知识点的总结,参考如下:

<html>
 <head>
   <title>网页的标题</title>
   <meta charset="编码方式">
   <style>
		.类名称 {要定义的样式}                               <!--类选择器-->
		#编号名称 {要定义的样式}                               <!--id选择器-->
		标签名 {要定义的样式}                              <!--元素选择器-->
		父选择器>子选择器 {要定义的样式}                   <!--父子选择器-->
		祖先标签 后代标签 {要定义的样式}                   <!--祖先后代选择器-->
		前面几种标签名:hover/focus/last {要定义的样式}    <!--伪选择器与其他选择器搭配使用-->
		<!--(1)类选择器的引用
		 class="类名称"
		 id="编号名称"
		 <标签>
		 (2)优先级:!important>style样式>id选择器>类选择器>元素选择器--
		 (3)同级选择器,后定义的优先级高
		-->
   </style>
   <script>
		各种方法的定义
   </script>
 </head>
 <body>
  <!--标题标签-->
  <h1>一号标题</h1>......<h6>六号标题</h6>
  
  <!--正文标签-->
  <p>正文内容</p>                   <!--段落标签:每个段落会自动换行-->
  <span>正文内容</span>             <!--段落标签:每个段落不会自动换行-->
  <hr>                              <!--分割线-->
  <br>                              <!--换行-->
  
  <!--超链接标签-->
  <a href="链接地址"> 链接文字</a>     <!--跳到链接网页(绝对路径)-->
  <a href="../文件名">内容</a>         <!--跳到不在同一个子目录下的页面(相对路径)“..指回退到上一个目录”-->
  <a href="文件路径/文件名">内容</a>   <!--跳到别的页面,两个页面在同一目录,不需要路径名,否则需要(相对路径)-->
  
  <!--图片标签-->
  <img src="图片地址" width="宽度限制,为像素" height="高度限制">  <!--宽高不建议同时改-->
  
  <!--图片有超链接-->
  <a href="链接地址"> 
    <img src="图片地址" width="宽度限制,为像素" height="高度限制">
  </a>
  
  <!--页面内链接-->
  <跳到的标签名 id="id名">内容 </> <!--id编号不用以数字开头-->
  <a href="唯一的id号">内容</a>
  
  <!--列表标签-->
   <!--有序标签-->
  <ol>
     <li>列表名</li>
  </ol>
  <!--无序标签-->
  <ul>
     <li>列表名</li>
  </ul>
  
  </表格标签>
  <table border="边框的宽度" width="表格的占整个屏幕的宽度,百分比表示" >
	<thead>
		<tr>
			<th>粗体剧中的列</th>
			<td>普通的列</td>
		</tr>
	</thead>
	<tbody>
	<!--表格的行,有几行就有几个tr-->
		<tr>
		<!--表格的列,有几列就有几个td-->
			<td>列的值</td>
		</tr>
	</tbody>
  </table>
  
  <!--表单标签-->
  <form action="提交的服务器的地址">  <!--有name的会发送给服务器-->
	<input type="表单类型" name="名称的设置" value="值的设定">
	<!--表单类型
	文本框:text
	密码框:password
	按钮框:button 
	提交按钮:submit
	重置按钮:reset
	单选框:radio         checked对单选和多洗框进行默认选中
	多选框:checkbox
	文件选择框:file
	日期框:date
	-->
  </form>
  
  <!--一个页面嵌入另一个页面-->
  <iframe src="另一个页面的地址" 宽高的设置></iframe>
  <vido src="视频名" controls></vido>              <!--页面插入视频并进行播放-->
  
  <!--样式表(css)-->
  <在以上标签中,利用style="样式的定义"可以实现各种要求>
  <!--颜色样式-->
  
  <!--前景色-->
  (1)color:单词                                            eg:color:blue
  (2)color:rgb(红色,绿色,蓝色) /*范围:0~255*/           eg:color:rgb(0,255,0)
  (3)color:#十六进制红绿蓝(0~FF)                         eg:color:#FF0000
  (4)color:rgba(红,绿,蓝,0.0~1.0)                        eg:color:rgba(255,0,,0,0.5)
  
  <!--背景色-->
  background-color:颜色  /*颜色使用与上同*/
  
  <!--背景图-->
  background-image:url(图片地址)
  background-repeat:no-repeat/repeat-x/repeat-y   <!--限制图片是否重复,纵向还是横向重复-->
  
  <!--盒子模型-->
  margin:像素值                         <!--div标签与其他标签之间的间距-->
  border:边框宽度 边框线类型 边框颜色  <!--div的标签-->
  padding:像素值                       <!--文字和div标签的间距-->
  position:absolute;                    <!--绝对定位-->
  left:像素值
  top:像素值                            <!--以左上角为坐标中心,进行坐标的设置-->
  z-index:数字                          <!--取值越大,越靠上-->
 </body>
</html>

以上内容,对于每一个标签的位置和用途进行很好的阐释,注意事项以注释的形式标注出来,css是和HTML结合使用,给HTML的标签添加样式,使得网页更加美观。
##总结
此节知识,容易理解,更多的还是要多练习,知识点用的多了记忆的会更加熟练,理解的更加透彻 。总的来说,多练习没坏处。
这一周过得真快,事情很多,但是每一个都兼顾了,结果也还不错,自己的心态好,遇到任何事情都会解决,继续加油!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值