码迷,mamicode.com
首页 > Web开发 > 详细

HTML5+CSS3。。。。。。。。蒙古人

时间:2017-06-06 13:13:43      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:lsp   web   esc   需要   百度   链接   keyword   路径   blank   

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;width:100;height:20px;">
    	<header style="border:1px solid red;width:100;height:20px;">
    	页面的头部
    	</header>
    	
    	<section style="border:1px solid blue;width:100;height:20px;">
    	主体部分
    	</section>
    	
    	<footer style="border:1px solid blanck;width: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>

  

HTML5+CSS3。。。。。。。。蒙古人

标签:lsp   web   esc   需要   百度   链接   keyword   路径   blank   

原文地址:http://www.cnblogs.com/bb1008/p/6950691.html

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