初识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
扫描二维码关注公众号，回复：
539739 查看本文章
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>
好的编写习惯：
有代码必注释