北京(总部)
北京(总部)
开心果烁烁
2017-10-18
505
1
摘要： HTML超文本标记语言，由浏览器负责将它解析成具体的网页内容，包含图片链接音乐等元素。<head></head>开头结尾，Head头部提供网页信息，<body></body>Body主题提供具体内容。
HTML超文本标记语言，由浏览器负责将它解析成具体的网页内容，包含图片链接音乐等元素。<head></head>开头结尾，Head头部提供网页信息，<body></body>，Body主体提供具体内容。
<!--1.根标签-->
<html>
<!--2.头部-->
<head>
<!--放配置性的东西,外部引用的资源-->
<!--头部内不可缺少的两个标签:-->
<!--(1)标题标签-->
<title>
我的世界
</title>
<!--设置编码(语言)-->
<meta charset="utf-8">
</head>
<!--3.主要内容-->
<body>
<div>
你好,世界
</div>
</body>
</html>
HTML第一个编程-Hello World
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5</title>
</head>
<body>
<h1>Hello World</h1>
<p>Hello World</p>
</body>
</html>
展示图如下：
Hello World设置居中显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5</title>
</head>
<body>
<center>
<h1>Hello World
</h1>
</center>
<p>Hello World</p>
</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.itdongshi.com" target="_top">东时教育</a>
<a target="_blank" href="http://www.itdongshi.com">
<img src="img/3.jpg" width="20%">
</a>
lt;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>
