##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的标签添加样式,使得网页更加美观。
##总结
此节知识,容易理解,更多的还是要多练习,知识点用的多了记忆的会更加熟练,理解的更加透彻 。总的来说,多练习没坏处。
这一周过得真快,事情很多,但是每一个都兼顾了,结果也还不错,自己的心态好,遇到任何事情都会解决,继续加油!