初学HTML（1）－－helloworld初体验
2016-08-08 19:55
197 查看
－网页的组成
一个有具体功能的网页一般由三部分组成：
（1）HTML：网页的具体内容和结构
（2）CSS：网页的样式（美化网页最重要的一块）
（3）JavaScript：网页的交互效果，比如用户鼠标事件做出响应
－什么是HTML
HTML的全称是HyperText Markup Language 超文本标记语言。其实它就是文本，由浏览器负责将它解析成具体的网页内容
HTML的组成：
跟XML类似，由N个标签（节点、元素、标记）组成
标题：h1、h2、h3、h4、h5....
段落：p
换行：br
容器：div、span（用来容纳其他标签）
表格：table、tr、td
列表：ul、ol、li
图片：img
表单：input
链接：a
href是引用,相当于iOS中的import,不是必须的(比如<link>,<a>,...)
src是引入,是必须的,没有这个资源,标签就用不起来(比如<img>,<audio>,<video>,...)
一个有具体功能的网页一般由三部分组成：
（1）HTML：网页的具体内容和结构
（2）CSS：网页的样式（美化网页最重要的一块）
（3）JavaScript：网页的交互效果，比如用户鼠标事件做出响应
－什么是HTML
HTML的全称是HyperText Markup Language 超文本标记语言。其实它就是文本，由浏览器负责将它解析成具体的网页内容
HTML的组成：
跟XML类似，由N个标签（节点、元素、标记）组成
<!--1.根标签--> <html> <!--2.头部--> <head> <!--放配置性的东西,外部引用的资源--> <!--头部内不可缺少的两个标签:--> <!--(1)标题标签--> <title> 我的第一个程序 </title> <!--设置编码(语言)--> <meta charset="utf-8"> </head> <!--3.主要内容--> <body> <div> 你好,世界 </div> </body> </html>－常见的HTML标签：
标题：h1、h2、h3、h4、h5....
段落：p
换行：br
容器：div、span（用来容纳其他标签）
表格：table、tr、td
列表：ul、ol、li
图片：img
表单：input
链接：a
<!--标题标签又称h标签--> <!--字体大小改变,1-6依次变小--> <h1>我是h1标签</h1> <h2>我是h2标签</h2> <h3>我是h3标签</h3> <h4>我是h4标签</h4> <h5>我是h5标签</h5> <h6>我是h6标签</h6> <!--线条标签--> <hr> <!--表单标签--> <!--输入框--> <input placeholder="我是占位符"><br> <input value="我是默认的文字"><br> <!--日期--> <input type="date"><br> <!--文件选择--> <input type="file"><br> <!--颜色块--> <input type="color"><br> <!--单选按钮--> <input type="radio"><br> <!--复选按钮--> <input type="checkbox"><br> <!--段落标签--> <p>我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落</p> <p>我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落</p> <p>我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落</p> <!--图像标签--> <!-- 相对路径和绝对路径: 相对路径:资源在当前的项目中./ ../ ././ 绝对路径:资源不在当前的项目中, 网络上 或 本地 http:// https:// ftp:// file:/// --> <!--%比 动态控制尺寸--> <img src="img/1.jpg" alt="这是一张图片" width="50%"> <img src="img/2.jpg" width="150"> <!--换行标签--> <br> <!--列表标签--> <!--无序列表--> <ul> <li>我是无序列表</li> <li>我是无序列表</li> <li>我是无序列表</li> <li>我是无序列表</li> <li>我是无序列表</li> </ul> <!--有序列表--> <ol type="I"> <li>我是有序列表</li> <li>我是有序列表</li> <li>我是有序列表</li> <li>我是有序列表</li> <li>我是有序列表</li> </ol> <!--超链接标签 # 代表跳转至当前界面 target :_blank 代表新窗口打开 --> <a target="_blank" href="#">我是超链接标签</a> <a href="http://www.baidu.com" target="_top">百度一下你就知道</a> <a target="_blank" href="http://www.520it.com"> <img src="img/3.jpg" width="20%"> </a> <hr> <!--容器 div 相当于OC中的UIView span--> <div>我是div标签我是div标签我是div标签</div> <div>我是div标签我是div标签我是div标签</div> <div>我是div标签我是div标签我是div标签</div> <div> <div> <p>我是测试div的段落</p> </div> </div>－href与src的区别
href是引用,相当于iOS中的import,不是必须的(比如<link>,<a>,...)
src是引入,是必须的,没有这个资源,标签就用不起来(比如<img>,<audio>,<video>,...)
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 