HTML5-1(简单介绍)

2016-10-28 本文已影响92人 IIronMan

一.一个有具体功能的完整的网页,一般由3部分组成

(1).HTML :网页的内容和结构:比如房子的框架
(2).CSS: 网页的样式 (美化网页最重要的一块)
(3).JavaScript(很重要) :网页的交互效果,比如对鼠标事件作出响应

下面是一个重要的学习地址

HTML5学习网站

二.HTML5讲解

(1).什么是HTML??
答:HTML5的全称是 HyperText Markkup Language ,超文本标记语言,其实它就是文本,由浏览器将它解析成具体的网页内容
如下:

HTML5的组成

跟XML类似,HTML是由N个标签 (节点,元素,标记) 组成
HTML语法非常松散,目前的最新版本是5.0,也就是HTML5

HTML5基本架构

三.HTML常用标签的介绍

(1).标题标签

h1,h2,h3,h4,h5,h6 六个等级字体依次减小

标题标签

(2).表单标签 input

input更多的属性

表单标签 input

(3).段落标签

<p>加内容</p>

段落标签

(4).图像标签

相对路径:http:// https:// ftp:// file://(如此的表示)

 网络图片
 <img src="http://dh1.kimg.cn/tms/images/4b/4b2cc2bbaa00c2c42cd7683d88bde65a.jpg" alt="提示文字" width="200">

绝对路径:" .. " :是文件夹名称 ..//..//（如此的表示）

  <!--本地的图片-->
  <img src="img/王冲.jpg" alt="王冲" width="200">

效果图如下:

图像标签

(5).换行标签

 <br>,想换多行就多谢几个<br>

换行标签

(6).超链接标签
这里 "#" 跳转代表当前的页面

  <a href="#">我是超链接标签</a>   "放链接"

超链接标签

 <a href="http://tool.oschina.net/hexconvert/">我是超链接标签</a>

target="_blank" 新建一个空白来加载下面的链接

target

<a href="http://tool.oschina.net/hexconvert/" target="_blank">我是超链接标签</a>

效果:

效果

(7).列表标签

无序列表(左边的点点取消需要CSS):无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于

ur是一个大的列表的启始

<ur>    
      <li>我是列表</li>    
      <li>我是列表</li>   
      <li>我是列表</li>    
      <li>我是列表</li>
</ur>

无序列表

有序列表:有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于标签<ol>。每个列表项始于<li>标签。

(7).另外一种换行标签

 <hr>

那条线就是换行标签的效果

(8).最重要的一个标签 <div> 类似ios里面的 UIView

<div> 很纯净,它是一个容器标签:里面可以嵌套div,hr等等,可以随意改造,里面可以随意嵌套,不影响性能,唯一影响性能的是里面的内容

如下所示:(随意嵌套)

 "  <div>    
        我是div我是div我是div我是div  
         <ur>     
               <li>我是列表</li>       
               <li>我是列表</li>      
               <li>我是列表</li>       
               <li>我是列表</li>   
         </ur>   
       <p>我是段落标签我是段落标签我是段落标签我是段落标签</p>   
       <p>我是段落标签我是段落标签我是段落标签我是段落标签</p>    
       <p>我是段落标签我是段落标签我是段落标签我是段落标签</p>
    </div>
    <div>我是div我是div我是div我是div</div>
    <div>我是div我是div我是div我是div</div>
    <div>我是div我是div我是div我是div</div>
    <div>我是div我是div我是div我是div</div>""

分析一下src与href的区别

src引用:引用的资源是必须的,不用src图片就出不来
href引入: 非必须

单标签和双标签
单标签:不可以放东西
双标签:可以放东西,类似容器,可以放东西

HTML5-1(简单介绍)

猜你喜欢

热点阅读