html标签总结
基础知识
HTML
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
CSS
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
JavaScript
JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
标签注意点
标签不区分大小写，但是一般都是小写。
默认样式如果不喜欢，可以通过CSS来改变它
语义化
代码中所有的变量、类名等英文，义如其名。
html标签总结
<!DOCTYPE HTML> <!-- html 根标签 所有的网页标签都在根标签中 --> <html> <!-- head 文档头标签 所有头部元素的容器 描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头不包含的数据都不会真正作为内容显示给读者 可包含title、meta、link、style、script --> <head> <!-- meta 这个是写在HTML文件的头部中，主要是告诉浏览器这个的内容类型是HTML文档，里面的内容是使用文本和HTML，字符集是UTF-8。因为没有标注字符集的话，有可能在网页中默认选择GB的，这样你在编译时一般都是使用的是UTF-8的国际字符集进行编码，但是到了网页中就会出现乱码。简而言之，在HTML文档中，这句话可以直接照抄的，不会出错。 --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!-- titile 网页的标题信息，显示在浏览器的标题栏 --> <title>HTML标签头文字</title> </head> <!-- body 内容标签 此标签中的内容会在浏览器中显示出来 --> <body> <!-- hx 标题标签 x为1-6 --> <h1>一级标题1</h1> <h1>一级标题2</h1> <h2>二级标题1</h2> <h3>三级标题1</h3> <br><br> <!-- p 段落标签 --> <p> 段落1 <!--em:强调标签:斜体--> <em>em标签</em> <br><br> <!-- span 单独样式标签，可以自定义样式 --> <span> <font color=blue> span标签 </font> </span> <br><br> <!--strong:强烈强调:加粗--> <strong>strong标签</strong> <br><br> <!--q:短文本引用:自动加双引号--> <q>q标签短文本引用</q> <br><br> <!--blockquote:长文本引用--> <blockquote>blodckquote长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本引用</blockquote> <br><br> <!-- br:换行 空标签，只有开始标签，没有结束标签 xhtml 1.0 写法:<br /> html 4.01 写法:<br> --> 第一行，<br> 第二行，<br> 第三行，<br> 第四行。<br> <!-- :一个空格--> 三个空格 三个空格 <br><br> <!-- hr:水平衡线 空标签，只有开始标签，没有结束标签 html 4.01版本:<hr> xhtml 1.0版本:<hr /> --> hr横线 <hr> hr横线 <br><br> <!--address:表示地址:斜体--> <address> address标签 </address> <br><br> <!--code:单行代码--> <code> import os a=1 </code> <br><br> <!-- pre:多行代码 预格式化的文本 pre元素中的文本会保留空格和换行符 --> <pre> import os a=1 </pre> <br><br> <!-- ul-li:信息列表 默认样式为信息前面加圆点 --> <ul> <li>ui li 1</li> <li>ui li 2</li> <li>ui li 3</li> </ul> <!-- ol-li:信息列表 默认样式为信息前面加1,2,3序号 --> <ol> <li>ol li 1</li> <li>ol li 2</li> <li>ol li 3</li> </ol> </p> <br><br> <!-- div:可作为容器，容纳逻辑部分 逻辑部分:页面上相互关联的一组元素 id: div的id，必须唯一 --> <div id="hotList"> <h2>热门课程排行榜</h2> <ol> <li>前端开发面试心法 </li> <li>零基础学习html</li> <li>javascript全攻略</li> </ol> </div> <div id="learningInstructed"> <h2>web前端开发导学课程</h2> <ul> <li>网页专业名词大扫盲 </li> <li>网站职位定位指南</li> <li>为您解密Yahoo网站制作流程</li> </ul> </div> <br><br> <!-- table:表格 tbody:如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody节点中的表格会在全部加载完成后才显示（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。） tr:表格的一行，n对tr表示有n行 td:表格的一个单元格，一行中n对td表示一行有n列 th:表格表头 summary:表格摘要，不显示在浏览器中，作用--语义化 caption:表格标题 border:表格边框 等效于<head>中添加<style type="text/css">table tr td,th{border:1px solid #000;}</style> --> <table border='1' summary="表格摘要"> <caption>表格标题</caption> <tbody> <tr> <th>班级</th> <th>学生数</th> <th>平均成绩</th> </tr> <tr> <td>一班</td> <td>30</td> <td>89</td> </tr> <tr> <td>二班</td> <td>35</td> <td>85</td> </tr> <tr> <td>三班</td> <td>32</td> <td>80</td> </tr> </tbody> </table> <br><br> <!-- a:超链接 href:超链接指向的url mailto:邮件发送人，多个用;隔开，会调起本机的邮件程序，第一个参数用?，之后的用& cc:抄送，多个用;隔开 bcc:密件抄送，多个用;隔开 subject:邮件主题 body:邮件内容 title:鼠标放到链接上的显示文字 target="_blank":在新窗口打开链接 --> <a href="http://www.baidu.com" title="鼠标放到链接上的显示文字" target="_blank">点击进入百度首页</a> <br> <a href="mailto:yy@imooc.com;pp@imooc.com?cc=imoocAdmin@imooc.com&bcc=zz@imooc.com&subject=邮件主题&body=邮件内容">对此影评有何感想，发送邮件给我</a> <br><br> <!-- img:图片链接,gif,png,jpeg src:图片的源url alt:图片不可见（如下载失败）时的显示文本 title:鼠标放在图片上的显示文本 --> <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" alt="图片下载失败" title="鼠标放在图片上的显示文本"> <br><br> <!-- form:HTML表单标签，用于与用户的交互 action:浏览者传入的数据被传送到的地方，比如一个PHP页面 method:数据传送的方式，如post/get label:显示文本，扩展功能：点击label时，使与其绑定的控件获得焦点 for="控件id":点击label时，使控件id对应的控件获得鼠标焦点 input:文本输入框 type: text：文本框 password：密码框 raido：单选按钮 checkbox：复选框 file：文件选择框 submit：提交按钮 name:为文本框命名，为后台程序使用 value:文本输入框默认值 placeholder:文本输入背景文字 textarea:文本输入域，适用于多行文本 rows:行数 cols:列数 radio:单选框 checked="checked":默认选中 checkbox:复选框 checked="checked":默认选中 select:下拉菜单 multiple="multiple":允许多选，但是页面加载完成后会直接显示全部选项，多选方法--按住ctrl或使用shift selected="selected":默认选中 --> <form method="post" action="save.php"> <label for="username">用户名:</label> <input type="text" name="username" id="username" value="" /> <label for="pass">密码:</label> <input type="password" name="pass" id="pass" value="" /> <input type="submit" value="确定" name="submit" /> <input type="reset" value="重置" name="reset" /> <br> <textarea cols="50" rows="10" >在这里输入内容...</textarea> <br> 你是否喜欢旅游？请选择<br> <input type="radio" name="radioLove" value="喜欢" id="radioLove_1" checked="checked"><label for="radioLove_1">喜欢</label> <input type="radio" name="radioLove" value="不喜欢" id="radioLove_2" checked="checked"><label for="radioLove_2">不喜欢</label> <input type="radio" name="radioLove" value="无所谓" id="radioLove_3" checked="checked"><label for="radioLove_3">无所谓</label> <br><br> 你对哪些运动感兴趣<br> <input type="checkbox" name="checkbox1" value="跑步">跑步 <input type="checkbox" name="checkbox2" value="打球" checked="checked">打球 <input type="checkbox" name="checkbox3" value="登山" checked="checked">登山 <input type="checkbox" name="checkbox4" value="健身">健身 <br><br> 爱好： <select multiple="multiple"> <option value="看书">看书</option> <option value="旅游" selected="selected">旅游</option> <option value="运动">运动</option> <option value="购物">购物</option> </select> <br><br> 提交按钮 <input type="submit" value="提交" name="submitBtn" /> <br><br> 重置表单数据按钮 <input type="reset" value="重置" name="submitBtn" /> </form> </body> </html>
