HTML

  • 注释<!--这里是注释-->
  • 页面内容<body>展示的页面内容</body>
  • 段落 <p></p>
  • 标题<hx></hx>     <body>     <h1>一级标题</h1>       <h2>二级标题</h2>     <h3>三级标题</h3>          <h4>四级标题</h4>     <h5>五级标题</h5>     <h6>六级标题</h6>     </body> 
  • 强调语气      加粗<strong>需要强调的文本</strong>      斜体<em>需要强调的文本</em>
  • span标签      标签是没有语义的,它的作用就是为了设置单独的样式用的。      <style>       <span>{            color:blue;       }      </style>      <span>要修饰的文本</span>
  • 引用      短文本,如一句话,一个词<q></q>              <q>引用的文本</q>(自动会加上双引号)      长引用,如一首诗,想按照好看的格式输出,相当于缩进格式              <blockquote></blockquote>
  • 换行<br/>
  • 空&nbsp;
  • 添加分割线<hr/>
  • 地址<address></address>
  • 添加代码语言     短代码<code></code>     长代码<code></code>
  • 列表      无前后顺序<ul></ul>          <ul>              <li>精彩少年</li>              <li>美丽突然出现</li>              <li>触动心灵的旋律</li>           </ul>

    有前后顺序<ol></ol> <ol>              <li>前端开发面试心法 </li>              <li>零基础学习html</li>              <li>JavaScript全攻略</li>          </ol>

  • div将模块进行分块,每一个都是div块

      给div命名 <div id="name"></div>

  • 表格<table></table>      <table>          <tr>               <th>班级</th>表格头               <th>姓名</th>               <th>性别</th>           </tr>          <tr>第一行              <td>第一列</td>              <td>第二列</td>              <td>第二列</td>          </tr>          <tr>第二行              <td>第一列</td>              <td>第二列</td>              <td>第二列</td>           </tr>      </table>   用css将表格设置表格边框 <style type="text/css"> table tr td,th{border:1px solid #000;} </style>

    为表格添加标题和摘要           摘要<table summary="表格简介文本">           标题<caption>标题文本</caption>

  • 链接     原网页打开窗口<a href="www.baidu.comn" >百度(链接的文字)</a>     新建浏览器窗口打开链接  <a href="目标网址" target="_blank">click here!</a>
  • 插入图片<img>    <img src = "myimage.gif" alt = "My Image"  title = "My Image" />          src图片路径          alt指定图像的描述性文本,当图像不可见时(下载不成功时),nia可看到该属性指定的文本          title提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)
  • 表单标签与用户交互 <form method="传送方式" action="服务器文件">     文本输入框,密码输入框  <input type="text/password" name="名称" value="文本" />               name为文本框命名,以备后台程序ASP 、PHP使用               value为文本输入框设置默认值。(一般起到提示作用)     多行文本输入    <textarea rows="行数" cols="列数">文本</textarea> <form method="post" action="save.php">                     <label>联系我们</label>                  <textarea cols="50" rows="10" >在这里输入内容...</textarea>               </form>
  • 单选框,复选框让用户选择       <input type="radio/checkbox" value="值" name="名称" checked="checked"/>             type                  radio表示单选框                  checkbox复选框              chekced=“checked”默认为对勾打上,不写的话就不勾上

注意:同一组的单选按钮,name取值一定要一致,比如上面例子为同一个名称“radioLove”,这样同一组的单选按钮才可以起到单选的作用。

  • 下拉表框单选  <label>爱好:</label>     <select>        <option value="看书">看书</option>        <option value="旅游" selected="selected">旅游</option>        <option value="运动">运动</option>         <option value="购物">购物</option>     </select>  selected="selected"表示默认被选中
  • 下拉表框多选  <label>爱好:</label>      <select multiple="multiple">         <option value="看书">看书</option>          <option value="旅游">旅游</option>         <option value="运动">运动</option>         <option value="购物">购物</option>       </select>
  • 提交按钮 <input type="submit" value="提交">
  • 重置按钮        <input type="reset" value="重置">
  • 标签    label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上    <label for="male">男</label>    <input type="radio" name="sex" id="male" /><br />     <label for="female">女</label>    <input type="radio" name="sex" id="female" /> 注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。 PS:这篇文章是对于慕课网的学习笔记 http://www.imooc.com/learn/9

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端说吧

CSS- ie6,ie7,ie8 兼容性写法,CSS hack写法

33740
来自专栏liulun

学习WPF——WPF布局——初识布局容器

StackPanel堆叠布局 StackPanel是简单布局方式之一,可以很方便的进行纵向布局和横向布局 StackPanel默认是纵向布局的 <Window ...

23670
来自专栏阮一峰的网络日志

自适应网页设计(Responsive Web Design)

随着3G的普及,越来越多的人使用手机上网。 移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈...

1K70
来自专栏一“技”之长

AppleWatch开发入门二——界面布局 原

        在iphone开发中,最基本的布局方式是通过frame,将控件的位置和大小固定在屏幕上,后来,由于手机屏幕的尺寸有了略微变化,有了autores...

10420
来自专栏Nian糕的私人厨房

WeChat 文章列表页面(一)

本次的系列博文的知识点讲解和代码,主要是来自于 七月老师 的书籍《微信小程序开发:入门与实践》,由个人总结并编写,关于更多微信小程序开发中的各项技能,以及常见问...

12040
来自专栏前端笔记

【CSS3 理论知识】表格边框(table-border)你知多少???

table之间的边框存在共用问题,自然而然就存在冲突。既然存在冲突,那么就势必涉及到最后渲染哪一个样式的问题。本文就主要研究当冲突产生时,如何让浏览器按照自己...

33760
来自专栏IMWeb前端团队

CSS StickyFooter——当内容不足一屏时footer紧贴底部

一般来说我们的footer是跟着内容走的,所以当内容较少不足一屏的时候,footer也会跟着内容往上走,导致下面一段空白。所以这里我们来探讨下当内容不足一屏时f...

24070
来自专栏偏前端工程师的驿站

CSS魔法堂:改变单选框颜色就这么吹毛求疵!

 是否曾经被业务提出"能改改这个单选框的颜色吧!让它和主题颜色搭配一下吧!",然后苦于原生不支持换颜色,最后被迫自己手撸一个凑合使用。若抛开input[type...

16830
来自专栏mySoul

SVG可伸缩的矢量图形

SVG是对画该图形时的一些路径,做出精准的,必要的与分辨率无关的一种描述。即对矢量图的描述

19830
来自专栏老马寒门IT

Html5 学习系列(五)Canvas绘图API快速入门(1)

引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,...

230100

扫码关注云+社区

领取腾讯云代金券