一, HTML的基本语法
前言： 我学习标签是直接去W3C中的<参考手册>中学习的
1, html中常用的标签，可结合iOS开发中的控件
重点：和iOS一样，标签里面可以放标签，一层层的嵌套，只是合不合理的问题
重点突出容器控件 结合百度网站突出div的重要性，在开发中最常用的是div
上代码：
分析下里面生成的代码
2.如何用标签？
1> 分析下必须要的标签,h1-h4设置内容展示
先h1-h3,再写h4。分析h的特点
2> 知识点：标签前后加空格不会影响，会被忽略
3> a 标签，结合京东分析（注意写注释）
a是超链接标签
herf：是链接地址
*体验不好，有些网站会另外打开一个窗口
target="_blank"：新开一个网页
4> input标签
* 在网页中展示
* 在模拟器中展示
* 特殊点：没有结束标签 区分：如果里面不要放东西，则不需要结束
5> input中常见的样式，用type引出
<input type="color">
<input type="checkbox">
<input type="radio">
<input type="range">
<input type="date">
6> input中的value属性(设置了默认值)
placeholder:请输入用户名(占位文字)
7> br 标签 换行<不需要结束>
8> img 标签
* 本地路径 ----引出协议：https:// http:// ftp:// file:// 跨域的问题
* 相对路径和绝对路径
相对路径：从当前文件入手去找这个图片文件 （加一个文件夹用于区分）
绝对路径：右击-->复制图片网址
9> div 标签
为什么要用div呢，为什么大家都要用它呢？因为它非常灵活
* 放到上面h一起讲解
<div>122121212112</div>
div和h比较像，但是有区别
--再加
<div>122121212112</div>
<div>122121212112</div>
<div>122121212112 放入其他的控件</div>
div就是一个容器，没有更多才华的容器
div 和 h 标签的区别
div:非常纯洁的容器，什么都没有，一块未雕琢的玉，我们想怎么做都可以，演示，个性化定制
关于更多的标签，朋友们可以去W3C中看<参考手册>
二, 标签的简单使用
<!--根标签-->
<html>
<!--头部标签-->
<head>
<meta charset="utf-8">
<title>哈弗大学 - 物理1102 </title>
</head>
<!--内容标签-->
<body>
<!--标题标签 h家族都是标签类型-->
<h1>物理1102 - 男生</h1>
<h2>物理1102 - 女生</h2>
<h3>物理1102 - 胖子</h3>
<h4>物理1102 - 瘦子</h4>
<h5>物理1102 - 男胖子</h5>
<h6>物理1102 - 女的都瘦</h6>
<!--段落标签-->
<p>物流1102班有一个篮球队</p>
<p>也有一个女子篮球队</p>
<p>每个女生的成绩都非常棒</p>
<p>大多数男生的成绩都很好,比如我</p>
<!--输入框标签
1, 最简单的输入框<input>
2, 有占位文字的输入框 <input placeholder="请输入用户名和密码">
3, 输入框中有默认值 <input value="王大帅锅">
4, 插入主题颜色选择 <input type="color">
5, 日期输入框 <input type="date">
6, 选择勾选的 <input type="checkbox">
7, 按钮 <input type="button">
-->
<input>
<input placeholder="请输入用户名和密码">
<input value="王大帅锅">
<input type="color">
<input type="date">
<input type="checkbox">
<input type="button">
<!--换行标签-->
<br> <br> <br> <br> <br>
<input><br>
<input placeholder="请输入用户名和密码"><br>
<input value="王大帅锅"><br>
<input type="color"><br>
<input type="date">
<input type="checkbox"><br><br>
<!--超链接标签-->
<!--打开一个新的网页来展示连接-->
<a href="http://taobao.com" target="_blank">我相信超越马云不是梦</a><br><br>
<!--直接在当前页面展示连接-->
<a href="http://baidu.com">百度一下,您就知道了</a><br><br>
<!--图片标签
加载图片需要了解两个概念
1, 相对路径 : 引用的是项目中的资源
2, 绝对路径 : 也就是全路径, 只要是以http:// , https:// , file://, ftp://开头的都是绝对路径
-->
<!--加载占位图片-->
<img src="#"> <br>
<!--绝对路径加载图片-->
<img src="https://www.google.com.sg/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"><br>
<!--相对路径中加载图片,想讲资源图片导入项目中-->
<!--<img src="imagessources/7.jpg"><br>-->
<!--给图片设置宽和高-->
<img src="https://www.google.com.sg/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width="150" height="150"><br>
<img src="imagessources/7.jpg" width="150" height="150"><br>
<!--列表标签-->
<ul>
<li>苹果售后服务</li>
<li>苹果售后技术支持</li>
<li>苹果售后客服</li>
</ul>
<!--容器标签-->
<div>学习iOS是一个持续的过程,所以,不要放弃,坚持自己的梦想</div>
</body>
</html>
网友评论