html 学习笔记 

表示一条线 一条横线 
如
 <hr size="10" width="400" color="#ff0000">

 

注意的是这个命令比较特殊，就是后面不用/<hr>结束


<input type="text" name="student.id"  required="required">    //required

显示效果:

 

<p>段落</p>        //段前段后自动换行且空一行, 如果'段'和'落'之间的空格是中文全角下输入的,则有空格
<div>层</div>      //层前后自动换行
<b>加粗</b>
<i>倾斜</i>
<u>下划线</u>
上标<sup>2</sup>
下标<sub>2</sub>
<big>大一号</big>
<small>小一号</small>
<i><b>加粗&倾斜</b></i>    //标签嵌套
<hr>                      //横线
<font size="+1" color="#FF0000" face="Courier New, Courier, monospace">字体</font>        //face字体(宋体,黑体....)
<pre>                 //保留其中的格式
   s
   111111   dfd
   fds
</pre>
<img src="images/1.jpg" alt="car11111" title="car2222" />    //alt是图片失效时显示的文字, title是鼠标移到图片上时显示的文字信息
<td colspan="2" rowspan="2"></td>      //列合并 ,行合并      注意:须要把被合并的行或列的<td>删除

<table>
<caption>表格标题</caption>         //效果是文字出现在table的正中上方
<tr>...</tr>
</table>
<a href="http://www.baidu.com/">百度</a>      //url后面加'/' 性能会好一些

url指向本地一般用相对路径,项目文件拷贝之后还有效 ,   绝对路径不建议用,   ../是上一级路径

<a href="page2/2.html">跳转页面2</a>     //index.html-->2.html

<a href="../../page2/2.html">跳转到页面2</a>    //1.html-->2.html

<a href="#value">在本页跳转</a>         //跳转到本页的<a name="value"/>的地方
<a href="index.html#value">在本页跳转</a>         //跳转到index.html页面的<a name="value"/>的地方
 

 

<ol start="100">      //序号从100开始
  <li></li>
</ol>
<dl>                  //菜单列表    dt和dd是一对, 如下图:
 <dt>服装</dt>
 <dd>外套</dd>
 <dt>鞋子</dt>
 <dd>皮鞋</dd>
</dl>

 

特殊字符:

&nbsp;     //空格   
注:在dreamweaver中输入&会自动弹出各种特殊字符的样式和代码

 

dreamweaver设置编码

编辑------>首选参数------>(下图)

 

框架  (替换掉body标签)

<frameset rows="15%,*%">    //剩下的空间用*表示
<frame name="top" src="4.html"/>
<frame name="bottom" frameborder="no" src=""/>    //frameborder框架边框0/no无,1/yes有
</frameset>
<noframes></noframes>

<ul style="list-style-type:none">
  <li style="float:left"><a href="http://www.baidu.com/" target="bottom">百度</a></li>     //target值为frame的name属性值,这样就打                                                                                                开的网页在指定name的框架中打开
  <li style="float:left"><a href="http://www.hao123.com/" target="bottom">好123</a></li>
  <li style="float:left"><a href="http://www.taobao.com/" target="bottom">淘宝</a></li>
</ul>

 单位表示:

px: 多少个像素的大小,国内常用
em: 相对于当前字体大小,国外常用,如1.5em就是相对当前字体的1.5倍
pt:绝对大小单位,目前基本不用

首行缩进:

text-indent:2em;     首行缩进两个汉字

横向对齐:

<!-- method1 -->
<div style="float:left;">left</div>
<div style="float:left;">right</div>

<!-- method2 -->
<span display:inline-block;>11</span>
<span display:inline-block;>22</span>

css: display    //最常用的4个属性

none    //此元素不会被显示。
block    //此元素将显示为块级元素，此元素前后会带有换行符。
inline   // 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block    //作为块元素, 以文本行显示

css:伪类选择符

E:link{...}    //超链接a未被访问前的样式
E:visited{...}   //超链接a被点击后的样式
E:hover{...}   //鼠标悬浮在元素上的样式
E:active{...}   //鼠标在点击和释放之间的样式

 target属性

_blank    //在新窗口/选项卡中打开。
_self          //在同一框架中打开。（默认）
_parent    //在父框架中打开。
_top         //在整个窗口中打开。
framename    //在指定的框架中打开。

 outline:

outline:50px solid yellow   //与border的区别是,它是一个不占空间的浮动的外层边框(忽略外边距和内边距)

 

0可以不带单位px/em, 其他数字必须带单位

 

<del>删除线</del>

<s>删除线</s>    //两者一样
<ins>插入</ins>

<u>下划线</u>   //两者视觉效果一样
<strong>加重</strong>

<b>加粗</b>   //两者效果一样

不常用的标签:

<samp>样本</samp>
<tt>打印机打印</tt>
<kbd>键盘录入</kbd>
<code>源码</code>
<var>变量</var>
<xmp><b>加粗</b></xmp>      //显示<b>加粗</b>
<pre>         //文本书写格式也会显示出来
 第一行
 第二行 
</pre> 
<cite>http://www.baidu.com/引用一段网址,相当于i斜线</cite>

 <blockquote>引用一个段落,没有引号,相当于p</blockquote>
 <q>加引号的一句话</q> 
<abbr>这里要缩进</abbr>    //其实不缩进
<dfn>项目</dfn> 
<acronym>首字母缩写</acronym>   //其实不缩写
 <address>地址</address>
<font color="#999999" size="7" face="方正兰亭超细黑简体, 黑体, 楷体">字体</font>   //多个字体之间用逗号隔开,如果左边没有找左二,左三...
<a href="mailto:84819242@qq.com?subject=主题&body=内容">邮件</a>   //默认会使用微软自带的邮箱
<embed src="../movie/57c5557d0fc31_wpd.mp4"”  console=”Clip1〃 controls=”ControlPanel,StatusBar” height=”330〃 width=”450〃 autostart=”true”>  //添加视频

 

cellpadding    //table单元格内边距

cellspacing    //table单元格之间的距离

colspan     //table单元格列合并

rowspan     //table单元格行合并
rules="all"     //表格的内边框显示样式(行/列/无/..)

frame="hsides"    //表格的外边框显示样式

 

<ol type="1[a|A|i|I]" start="101">    //有序列表的名称   从101开始
   <li>...</li>
</ol>
<input type="file"/>    //上传文件
<input type="hidden" value=""/>   //提交时会将value的值传给action
<input type="number" value="123123"/>   //只能提交数字


<input type="datetime" value="2016-7-7 2:2:2"/> 


<input type="date" value="2016-4-4"/>   


<input type="time" value="6:6:6"/>   




<input type="image" src=""/>   //图片形式的submit按钮,如果有onclick="" 点击会提交2次,容易导致异常,尽量少用这个




<input type="password" value=""/>   




<input type="reset" value="重置"/>   //点击该按钮,表单中文本内容会清空






<select name="" disabled="disabled">
  <optgroup>                            //分组显示
     <option value="">小学</option>
     <option value="">中学</option>
  </optgroup>
  <optgroup>
     <option value="">本科</option>
     <option value="">硕士</option>
  </optgroup
</select>






<textarea rows="5" cols="5">多行文本内容</textarea>






<input type="radio" value="1" id="aaa" name="sex"/><label for="aaa">1</label>    //多个radio类型,只要name相同,就在其中切换选择  ; label的for值与id值相同,                                                                                    点击文本相当于点击了radio




 IE开发者工具快捷键: F12


IETest工具: 用户网站开发在不同版本的IE浏览器的测试工具


原型图软件(Axure RP目前最流行的) :产品经理用来做出网站的大体UI与开发人员的沟通工具,可以保存为html文件,方便在基础上继续开发


PS: 切片工具对多个图片进行裁切,保存为web格式图片


    (gif:颜色单一优选格式;  jpg: 颜色丰富优选格式;  png:  不支持动态图片)


 


marquee动态滚动(这个是html自带的有缺陷,后续在js中补充)




<marquee style="width:400px; height:20px; border:1px solid silver;" loop="-1" direction="right">
<span>热烈欢迎XXX同学!</span>
</marquee>

<marquee style="width:600px; height:200px; border:1px solid silver;" loop="-1" direction="right" onmouseover="this.stop()" onmouseout="this.start()" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" behavior="scroll" contenteditable="true">
<img src="../images/1.jpg" height="200px"/>
<img src="../images/2.jpg" height="200px"/>
<img src="../images/3.jpg" height="200px" />
</marquee>                         //焦点轮换图目前流行用<div><img><img>...</div>框架




 




网页优化: html/css/js 在线压缩(便于机器解析)




 


 HTML5绘图


矩形:




<body>
<canvas width="300" height="300" id="hb"></canvas>  <!--创建画布-->
</body>
<script type="text/javascript">
  
  var c = document.getElementById("hb");
  var ctext = c.getContext("2d");


//绘制矩形


ctext.fillStyle = "red"; //填充颜色  ctext.fillRect(0,0,200,400); //(起始x,起始y,宽,高)
  //画线


    ctext.moveTo(10,10);
    ctext.lineTo(30,40);
    ctext.lineTo(50,60);
    ctext.stroke();


  //圆


    ctext.fillStyle="green";
    ctext.beginPath();
    ctext.arc(100,100,50,0,Math.PI*2,true);   //弧度0,math.pi*2
    ctext.closePath();
    ctext.fill();





</script>




 




<input list="dd" />
<datalist id="dd">
  <option value="1">
  <option value="2">
  <option value="3">
</datalist>






 




<article>xxx</article>    //相当与div   




 




<details>
  <summary>摘要1</summary>
  内容1
</details>
<details>
  <summary>摘要2</summary>
  内容2
</details>






 


加密标签:




<form action="1.php" method="post" target="_blank">
  user<input type="text" name="user" />
  加密方式<keygen name="key" />
  <input type="submit" value="提交" />
</form>






进度条:




<progress max="100" value="75" ></progress>




 







            

            
posted @ 
2016-07-07 18:12 
乱世_独自美 
阅读(113) 
评论(0) 
 
收藏 
举报