html简单标签

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>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值