zoukankan      html  css  js  c++  java
  • HTML5+CSS3。。。。。。。。蒙古人

    1.html5的基本结构

    <!DOCTYPE html>               //声明HTML5结构,表示是否符合W3C的标准
    <html>
      <head>                           //头部
        <title>我的第一个网页</title>      //标题
    	
        <meta name="keywords" content="keyword1,keyword2,keyword3">
        <meta name="description" content="this is my page">
        <meta name="content-type" content="text/html; charset=UTF-8">
        
        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    
      </head>
                        //主题部分
            写自己需要的内容
        <body>
        
        </body>
    </html>
    

    2.网页中的基本标签以及特殊符号

      (1)标题标签

        <h1></h1>
        <h2></h2>
        <h3></h3>
        <h4></h4>
        <h4></h4>
        <h5></h5>
        <h6></h6>

    字体从大到小   h1>.......>h6

    (2)段落标签<p></p>

    (3)换行标签<br/>

    (4)水平线标签<hr/>

    (5)字体加粗标签<strong></strong>

    (6)字体倾斜标签<em></em>

    (7)注释: <!--表明注释的内容-->

    (8)特殊符号

         空格:&nbsp;

         大于号:&gt;

         小于号:&it;

          引号:&quot;

          版权符号:&copy;

    (9)图像标签:<img alt="图像不显示时代替的文字" src="图像路径">

    (10)超链接标签:<a href="超链接的页面" target="添加属性">超链接的内容可以是图片</a>

        应用场合:

             页面间链接:<a href="想要的连接的页面网址" target="_blank">比如是百度页面</a>

             锚链接:<a href="#marker" >当前位置</a>

                        <a name="marker">目标位置</a>

             功能性链接:[<a href="mailto:邮箱地址"></a>]

    3.行内元素和块儿级元素

      (1)行内元素:不会自动换行

        内联元素(inline element)
      a - 锚点
      b - 粗体(不推荐)
      br - 换行
      em - 强调
      font - 字体设定(不推荐)
      i - 斜体
      img - 图片
      input - 输入框
      label - 表格标签
      select - 项目选择
      small - 小字体文本
      span - 常用内联容器,定义文本内区块
      strike - 中划线
      strong - 粗体强调
      sub - 下标
      sup - 上标
      textarea - 多行文本输入框
      tt - 电传文本
      u - 下划线

      (2)块儿级元素:自动换行

         块级元素(block element)
        div -最常用的块级元素
        dl - 和dt dd搭配使用的块级元素
        form - 交互表单
         h1 - 大标题
        hr - 水平分隔线
       ol - 排序表单
        p - 段落
        ul - 非排序列表

    4.列表

       (1)无序列表:

      

                      <ui>
      		<li>难受</li>
      		<li >痛苦</li>
      		<li >悲哀</li>
      		<li>难受</li>
      		<li>难受</li>
      	</ui>
    

      

       (2)有序列表

     <ol>
            <li>男</li>
            <li>女</li>
            <li>中</li>
        </ol>
    

      

       (3)定义列表

    <dl>
          <dt>水果</dt>
          <dd>苹果</dd>
          <dd>香蕉</dd>
          <dd>句子</dd>
          
          <dt>花</dt>
          <dd>玫瑰</dd>
          <dd>菊花</dd>
          <dd>牡丹</dd>
        </dl>
    

    4.表格  

       (1)结构

       tr:为行数 td:为列数

     <table border="1px" style="text-align:center">
        	<tr>
        	   <td colspan="3" >学生成绩</td>
        	</tr>
        	
                      <tr>
        		<td rowspan="2">张三</td>
        		<td>数学成绩</td>
        		<td>80</td>
        	</tr>
        	
                       <tr>
        		
        		<td>语文成绩</td>
        		<td>89</td>
        		
        	</tr>
        	
            <tr>
        		<td rowspan="2">李斯</td>
        		<td>数学成绩</td>
        		<td>98</td>
        	</tr>
        	
                       <tr>
        		
        		<td>语文成绩</td>
        		<td>90</td>
        	</tr>
        </table>
    

      

       (2)表格的跨行与跨列

      跨行: <tr>
                      <td rowspan="2">李斯</td>
                      <td>数学成绩</td>
                      <td>98</td>
                 </tr>

         跨列:

                  <tr>
                       <td colspan="3" >学生成绩</td>
                 </tr>

    5.HTML5的媒体元素

       (1)视频元素

            <video controls>
                   <source src="bu/video.mp4" type="video/mp4"/>
                   <source src="bu/video.webm" type="video/webm"/>
         
           </video>

       (2)

             <audio controls>
                   <source src="bu/video.mp4" />
                   <source src="bu/video.webm"/>
        
           </audio>

    6.HTML5页面结构元素

        <div  id="box" style="margin:0px auto;border:1px solid red;100;height:20px;">
        	<header style="border:1px solid red;100;height:20px;">
        	页面的头部
        	</header>
        	
        	<section style="border:1px solid blue;100;height:20px;">
        	主体部分
        	</section>
        	
        	<footer style="border:1px solid blanck;100;height:20px;">
        	地步
        	</footer>
        </div>
    

     6.iframe属性的使用

        

    <body>
            <a href="超链接的页面" target="my">超链接的内容可以是图片</a>        
            <a href="超链接的页面" target="my">超链接的内容可以是图片</a>
            <a href="超链接的页面" target="my">超链接的内容可以是图片</a>            
                
            <iframe name="my" width="宽度" height="高度" src="上面想要连接的地址"/>
    
    
    </body>
    

      

  • 相关阅读:
    Java Lambda表达式初探
    解开lambda最强作用的神秘面纱
    常用正则表达式
    js,java时间处理
    Java 8新特性探究(二)深入解析默认方法
    Java 8里面lambda的最佳实践
    lambda表达式和闭包
    Lambda语法篇
    lambda表达式
    依赖注入和控制反转的理解
  • 原文地址:https://www.cnblogs.com/bb1008/p/6950691.html
Copyright © 2011-2022 走看看