初识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>
好的编写习惯:
有代码必注释