java学习：html和css总结

最新推荐文章于 2023-04-21 23:27:47 发布

春诗梅韵

最新推荐文章于 2023-04-21 23:27:47 发布

阅读量238

点赞数

本文链接：https://blog.csdn.net/qq_41421480/article/details/85754512

版权

##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
评论
java学习：html和css总结

##html和css知识点总结本小节以HTML的结构为框架，进行知识点的总结，参考如下：&lt;html&gt; &lt;head&gt; &lt;title&gt;网页的标题&lt;/title&gt; &lt;meta charset="编码方式"&gt; &lt;style&gt; .类名称 {要定义的样式}
复制链接

扫一扫