码迷,mamicode.com
首页 > 其他好文 > 详细

老师叫我们写的,他说这个对以后工作有好处

时间:2017-10-25 21:42:03      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:水平   amp   blog   readonly   样式   hid   .com   --   滑块   

1.编写html步骤
 第一步:新建一个记事本.(以.html结尾)
 第二步:右击选择打开方式为文本文档
 第三步:编写内容
   <html>
             <head></head>
             <body>
         hello html!
             </body>
          </html>
        第四步:用浏览器打开查看内容.
2.HTML的基本结构
 <html>
  <head></head> <!-- 网页头部-->
  <body></body> <!-- 网页的主体-->
 </html>
3.HTML的打开方式
 第一种:用浏览器打开(浏览方式)
 第二种:用文本编辑器打开(编辑方式)

补充:
 HTML全称 Hyper Text Markup Language(超文本标记语言)

4.标题标签
 <title></title> //标题
5.meta标签
 <meta charset="utf-8"/> //设置网页的字符编码
 <meta name="keywords" content="内容"/>//关键词
 <meta name="description" content="内容"/>//网页描述
6.h标签
 <h1></h1>
 <h2></h2>
 <h3></h3>
 <h4></h4>
 <h5></h5>
 <h6></h6>
  注意:h标签只有h1到h6,并且h1最大,依次减小.

 慕客网(技术学习)

7.段落标签
 <p></p>
8.换行标签
 <br/>
9.水平线标签
 <hr/>
10.字体样式标签
 <strong></strong>//加粗
 <em></em> //斜体
11.特殊符号
 &nbsp; //空格
 &gt; //大于符号(>)
 &lt; //小于符号(<)
 &quot;// 双引号(")
 &copy;//版权符号
注释: <!--  被注释的内容 -->
    用途: 第一种:解释代码.
          第二种: 当前代码现在用不到,可能以后用得到.

12.图片标签
 <img src="图片地址"
      alt="当图片找不到时提示的文字"
      title="当鼠标放图片上面时显示的文字"
      widht="图片宽度"

height="图片的高度"/>技术分享

 


     

13.a标签(超链接)
 <a href="跳转的路径" target="目标窗口"><a/>
 注意:target的常用值:_self(表示当前窗口)
                     _blank(表示新窗口)
 1)锚链接的使用步骤
  第一步:定义锚点
   <a name="名字">锚点</a>
  第二步:定义链接
   <a href="#锚点名">链接</a>
 注意:#可以看出当前页面
      锚点名:表示要跳转到指定的锚点位置.
   (就是定义锚点时,name属性的值.)
 2)功能性链接
  例:<a href="mailto:邮箱地址"></a>

第二章
 1.列表
  1.1 有序列表
   <ol>
    <li>内容</li> //列表项
   </ol>
  1.2 无序列表
   <ul>
    <li>内容</li>
   </ul> 
  1.3 定义列表
   <dl>
    <dt></dt>   //声明列表项
    <dd></dd>   //列表项
   </dl> 技术分享

 


 注意:li独占一行
 2.表格
  <table>   //表格
   <tr>  //行
    <td colspan="" rowspan=""></td> //单元格
   </tr>
  </tabel>技术分享

 


 注意: colspan: 表示本单元格所占列数
      rowspan: 表示本单元格所占的行数
 3.视频
  <video src="视频路径" controls></video>      
        推荐使用:(能够兼容更多的浏览器) 
    <video controls>
     <source src="xx.mp4" type="video/mp4"/>
     <source src="xxx.webm" type="video/webm"/>
    </video>  
 4.音频
  <audio src="音频路径" controls></audio>
  推荐使用:(能够兼容更多浏览器)
  <audio controls>
   <source src="xx.mp3" type="audio/mp3"/>
     <source src="xxx.ogg" type="audio/ogg"/>
  <audio>   
 注意:a.视频和音频标签都存在浏览器的兼容问题,使用的时候,尽量
              使用推荐的方式.
     b.controls表示显示播放控制(如:开始,暂停等).还有其他的
             类似属性参考其他资料.
 
 5.结构化元素
  <header> //表示网页的头部
  <footer> //表示网页的尾部
  <section> //表示网页的独立区域
  <article> //表示文章
  <aside>   //表示相关内容或应用(侧边栏)
  <nav>     //导航
 
 6.网页结构
  <header></header>     //头部
  <section></section>   //主体
  <footer></footer>     // 尾部
  
 7.iframe内联框架
  语法: <iframe src="页面地址" name=""/>
  实现内联:
   第一步: 定义iframe
    <iframe src=""  name="mn"/>
   第二步: 定义超链接并指定超链接内容要放置的地方(由target指定).
       <a href="" target ="mn">xx</a>  
 第一:实验本写两个(第一章,第三个练习)
               (第二章, 练习4.视频播放)
 第二:检查博客.(前面的内容放进去)

第三章 表单
 1.语法
  <form method="get|post" action="数据向哪提交的地址">
   //表单内容
  </form>
  
 2.input 标签常用属性
  <input name="标签名" type="标签类型" value="标签默认值"/>
   size:输入文本框的字符的长度
   maxlength:文本框的宽度
   checked: 单选框和复选框的默认选中.
   selected: 下拉框的默认选中
 
 3.常用标签
  text //文本框
  password //密码框
  radio //单选按钮
  checkbox //复选框
  button  //按钮
  submit  //提交按钮
  reset  //重置按钮
  url    //只能输入网址
  emial  //只能输入邮箱
  number //只能输入数字
  file  //文件域
  range //滑块
  search //搜索框
    其他标签
     <select> :下拉框
       <option></option> 选项
     </select>
     <textarea></textarea> 文本域
 注意: radio和checkbox中的name属性值需要保持一致,才能
           到达单选或者多项的作用.         
 
 4.表单的高级应用
  hidden  //隐藏域
  readonly // 只读
  disabled // 禁用
    
 5.表单元素的标注
  例:
   <label for="id值"> 男</label>
   <input type="radio" id="id值"/>
 6.表单初级验证的方法
  placeholder  //提示
  required     //必填项
  pattern   //正则表达式(输入的内容必须符合这个表达式的要求)

老师叫我们写的,他说这个对以后工作有好处

标签:水平   amp   blog   readonly   样式   hid   .com   --   滑块   

原文地址:http://www.cnblogs.com/liaoping/p/7731847.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!