@hotjp
2017-11-04T11:47:51.000000Z
字数 1269
阅读 1317
培训
开篇之前先给大家推荐一个网站w3school,在这个网站里大家可以学习包括但不限于HTML的很多知识。
通俗的说,html是由标签组成的,使用标记标签来描述整个页面。
但是单纯的罗列标签一点都不美观,于是有了css来控制样式,让简单的标签变得千变万化~
先附上一个标签列表
<html></html>
定义 HTML 文档
<head></head>
关于文档的信息
<body></body>
文档的主体
<link></link>
引入外部资源,如css
<script></script>
引入js
<div></div>
划分区块最常用标签
<h1></h1>
标题,h1~h6
<a ></a>
链接
<img>
图片
<ul></ul>
<li></li>
无序列表
<dl></dl>
<dt></dt>
<dd></dd>
定义列表
<table></table>
<tr></tr>
<td></td>
表格
<input >
各种输入框,根据type控制
<button></button>
按钮
<p></p>
段落
<span></span>
组合文档中的行内元素
<select></select>
<option></option>
下拉列表
附上一个例子。。。
从上面的列子可以看出来,HTML的布局很简单,从上到下,从左到右,
块级元素独占一行,从上到下排列
行级元素从左到右排列
行级元素和块级元素之间有一些差别,也可以相互转换,具体可以看这里
在应用了样式后,页面的布局可以被打乱,按照需求来排布
更为详细的css基础教程可以点这里
css的组成很简单:
selector {property: value}
选择器 {属性:属性值}
常用的选择有ID选择器 类选择器,标签选择器。
优先级 ID>class>tag
意思就是相同的层级,用到ID选择器上的样式优先级是最高的,会覆盖类选择器,以此类推。
定义css的位置也会影响优先级,顺序如下:
内联样式(在 HTML 元素内部)> 内部样式表(位于 <head>
标签内部)> 外部样式表 > 浏览器缺省设置
举几个例子:
p{
color:#f00;
background-color:#ff0;
}
#id1{
color:black;
}
#id1 p{
color:#00f;
}
.class1,.class2{
color:#0ff;
}
其他的选择器以及样式属性可以查看上面的文档,补充一下~
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
默认的就是普通流。
css的position属性可以元素的绝对定位属性,position有4个值。
float属性可以设置元素的浮动,元素浮动起来后会向左或右移动,直到元素的边缘碰到框的边缘或其他浮动元素
元素定位与浮动后,就从原来的文档流中脱离了出来,因此元素之间就有了层级关系,用火狐的调试工具可以看出来元素的层级关系,z-index属性可以设置层级的高低。
HTML和CSS比较简单,容易上手,但要记忆的东西比较多,多切几个图熟练下会有很大的提升。
标签 常用标签,简单布局
布局 css相关