HTML标签
1.不太熟悉的标签
<hr> 单标签,标签在 HTML 页面中创建水平线
<br>单标签,强制换行,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。
<a > 链接标签,target属性另外一个标签打开<a href="http://www.baidu.com" target="_blank">baidu</a>
<head> 标签中可以添加scripts,css样式文件
<link> 标签定义了文档与外部资源之间的关系
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<img>是空标签,只有属性没有闭合标签。
<img src="" alt=""> src 图片原路径,alt可替换的文本,浏览器不能加载图片时浏览器将显示这个替代性的文本而不是图像
<table></table>标签
<table border="1" cellpadding="10" cellspacing=“0”>
<caption>表格标题</caption>
<tr>
<th>Name</th>
<th colspan="2">colspan合拼单元格</th>
</tr>
</table>
cellpadding:单元格边距,内容渝单元格的距离
cellspacing:单元格间距 ,单元格之间的距离
colspan:合并单元格
<dl><dt><dd> 自定义列表
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
2.html5新特性
元素,图像绘制,是一张画布
canvas本身不能画图,画图需要在javascipt里面完成
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”); getContext(“2d”)是html5的内置对象
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75); 定义了矩形当前的填充方式
canvas划线
ctx.moveTo(0,0); 定义开始坐标
ctx.lineTo(200,100); 定义结束坐标
ctx.stroke(); storke方法划
canvans划圆
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
- css选择器
多个选择器选择同一元素,每个选择器的样式都会用到该元素上。ID选择器覆盖类选择器,类选择器覆盖类型选择器。
框模型
- display属性
改变元素渲染方式。
display:none 隐藏当前元素。
display:inline 将元素渲染为行内元素
display:block 将元素渲染为块。
display:inline-block 将行内元素渲染为嵌套在行内元素之中的块级元素
display:list-item 渲染为列表项。注意必须将它的父元素渲染为块级元素,必须设置项目符号的左内(外)边距。list-style-type:none 删除项目符号。
注意:例:
<div class="ul"><dfn>dfn <code>display:list-item</code></dfn><dfn>dfn</dfn></div>
dfn{display: list-item;list-style-type: square} 显示为无序列表了
.ul{padding-left: 15px} 设置左边距
-
框模型
overflow: visible; 显示溢出(溢出方式)
visibility:visible; 显示元素(显示或隐藏)
width: 160px;元素内框的宽度
height: 150px;元素内框的高度
padding: 30px;内框外围的内边距
border-top: 30px solid gray; 内边距外围边框的大学,模式和颜色
border-bottom: 30px solid black;
border-left: 20px solid gray;
border-right: 30px solid black;
margin-left:230px; margin-top: 80px; 边框外围的外边距
background-color: gold;
overflow:visible 溢出的内容会显示在元素可视范围外,即不做任何处理。
overflow:hidden 溢出的内容会被剪裁掉,或者说隐藏。
overflow:scroll 元素会出现滚动条,通过滚动条用户可看到溢出的内容。
visibility则是可见性(或者说能见度),即用来决定元素是可见的还是隐藏的。
visibility:visible 元素可见
visibility:hidden 元素隐藏(但元素所占的位置还在)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190220155925885.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4aDExNTI4MDg2NzM=,size_16,color_FFFFFF,t_70
position : static absolute relative
static:没有特殊定位
absolute : 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。此时对象不具有边距,但仍有补白和边框,绝对定位
relative : 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置
{ position:absolute; width:auto; margin:0 auto; top:50px; left:20px; }
<div id="before"></div>