初识HTML
HTML框架,CSS装修,JS动态的交互
编辑器:sublime
HTML :超文本标记语言
1.标签
(1)、根标签 <html> </html>
(2)、结构化标签 <head> 浏览器看的 </head> <body> 展示在浏览器上</body>
HTML示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"> <!-- 万国码 -->
<title>HTML的初步学习</title> <!-- 标题 -->
<meta content="学习" name="keywords"> <!-- 关键字 -->
<meta content="HTML 的初步学习" name="description"> <!-- 描述信息 -->
</head>
<body>
Hello world!
</body>
</html>
(3)、单标签
img,input,meta,link,br,hr
(4)、双标签
div,span,h1~h6,p,script,style a form
a标签的作用: 超链接,利用id来定位锚点 ,打电话(href="tel:1861******2")
form表单发送信息
数据名=数据值
<form method="get" action="">
<p>
用户名:<input type="text" name="username">
</p>
<p>
密 码:<input type="password" name="password">
</p>
<input type="submit" name="">
</form>
(5)、成组标签
ol li 有序列表 例子:
type reversed start属性
<ol type="i" reversed="reversed"> <!-- 一共五种 计数方式 A a 1 i I reversed 倒序-->
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ol>
ul li 无序列表 例子:
可以用于导航栏的制作
<ul type="circle"> <!-- 并列的父子结构 -->
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
1.1标签的嵌套
重要标签
<div> </div>
<span></span>
(1).充当容器,功能块
(2).捆绑操作的作用
<div style="color: #f40">
<strong>div的可操作性</strong>
<em>也包含了标签的嵌套</em>
<del>以及简单的 CSS在标签上直接使用的方法</del>
</div>
HTML编码
常用 空格:  小于号< : < 大于号>:>
<div style="width: 100px; height: 300px; background-color: red" >
空格和回车 在浏览器里有文本分隔符的含义。
HTML 编码:<br>
你 好<br> <!-- 你 好 -->
< div > <!-- < div > -->
</div>
表单标签 form
单选项表达
<form>
<h1>现在练习单选框实例</h1>
1.选项1 <input type="radio" name="danxuan" value="xuanxiang1">
2.选项2 <input type="radio" name="danxuan" value="xuanxiang2">
3.选项3 <input type="radio" name="danxuan" value="xuanxiang3">
4.选项4 <input type="radio" name="danxuan" value="xuanxiang4">
5.选项5 <input type="radio" name="danxuan" value="xuanxiang5">
<input type="submit" name="">
</form>
复选框表达
<!-- ----------复选框--------------- -->
<form>
<h1>现在练习单选框实例</h1>
1.选项1 <input type="checkbox" name="danxuan" value="xuanxiang1">
2.选项2 <input type="checkbox" name="danxuan" value="xuanxiang2">
3.选项3 <input type="checkbox" name="danxuan" value="xuanxiang3">
4.选项4 <input type="checkbox" name="danxuan" value="xuanxiang4">
5.选项5 <input type="checkbox" name="danxuan" value="xuanxiang5">
<input type="submit" name="">
</form>
表单小应用--默认选项
<!-- ----------默认选项--------------- -->
<form>
<h4>选择性别:</h4>
男性<input type="radio" name="morenxuanxiang" value="nanxing" checked="checked">
女性<input type="radio" name="morenxuanxiang" value="nvxign">
<input type="submit" name="">
</form>
下拉菜单--form---select --option
<!-- ----------下拉菜单--------------- -->
<form>
<h3>练习下拉菜单——哪年生人</h3>
<select name="xuanzenian">
<option>1990年</option>
<option>1991年</option>
<option>1992年</option>
<option>1993年</option>
<option>1994年</option>
<option>1995年</option>
<option>1996年</option>
<option>1997年</option>
<option>1998年</option>
</select><br>
<br>
<input type="submit" name="">
</form>
好的编写习惯:
有代码必注释