一.一个有具体功能的完整的网页,一般由3部分组成
- (1).HTML :网页的内容和结构:比如房子的框架
- (2).CSS: 网页的样式 (美化网页最重要的一块)
- (3).JavaScript(很重要) :网页的交互效果,比如对鼠标事件作出响应
下面是一个重要的学习地址
二.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).图像标签
<img src="路径" alt="提示文字" width="宽高等比例">
相对路径: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引入: 非必须
单标签和双标签
单标签:不可以放东西
双标签:可以放东西,类似容器,可以放东西
网友评论