Hyper Text Markup Language: 超文本标记语言
超文本: 不仅仅是纯文本, 还包括字体相关 以及多媒体内容(图片/音频/视频)
XML也是标记语言 , 区别就是 XML是可扩展标记语言, HTML里面的标签是预设好的,学习HTML实际上就是学习有哪些HTML标签 以及标签和标签之间的关系
创建第一个HTML页面
<!DOCTYPE html> 文档声明:告诉浏览器使用html的哪个版本解析页面 <html> 跟标签 <head> 头标签: 给浏览器看的内容在头标签里面 <meta charset="UTF-8"> 设置字符集 <title>Insert title here</title> 页面标题 </head> <body>体标签: 给用户看的内容写在体标签内 </body> </html>可以把分区标签理解成是一个容器,作用就是将多个有相关性的标签放在同一个分区标签中, 便于统一管理
常见的分区标签有div和span
div: 块级分区元素: 独占一行span:行内分区元素: 共占一行如何对页面进行分区? 页面至少分为三大区,每个大区里面有多个小的分区
<div>头</div> <div>正文</div> <div>脚</div>html5标准中根据分区的作用新增了一些分区元素, 目的是为了提高代码的可读性,包括:header/article/section/footer/nav导航区域
<header>头</header> <article>正文</article> <section></section> <footer>脚</footer>表单作用: 获取用户输入的各种信息,并将信息提交给服务器
学习表单主要学习的就是表单中的各种控件,控件包括:文本框,密码框,单选,多选,下拉选等
各种控件:
<form action="https://www.baidu.com/"> <!-- type是控件的类型 name所有控件都必须写提交数据时的参数名 placeholder: 占位文本 value: 文本框的值 readonly: 只读 --> 用户名:<input type="text" name="username" placeholder="请输入用户名" value="abc" readonly="readonly"><br> <!-- 密码框和文本框属性通用 --> 密码:<input type="password" name="password" placeholder="请输入密码 "><br> <!-- 单选和多选必须写value属性 checked 默认选中 --> 性别:<input type="radio" name="gender" value="m" id="r1" ><label for="r1">男</label> <input type="radio" name="gender" value="f" id="r2" checked="checked"> <label for="r2">女</label><br> <!-- 多选和单选属性通用 --> 爱好:<input type="checkbox" name="hobby" value="cy">抽烟 <input type="checkbox" name="hobby" value="hj" checked="checked">喝酒 <input type="checkbox" name="hobby" value="tt">烫头<br> <!-- 日期选择器 --> 生日:<input type="date" name="birthday"><br> <!-- 文件选择器 --> 靓照:<input type="file" name="pic"><br> <!-- 文本域 rows行 cols列 --> 自我介绍:<textarea rows="3" cols="30" name="intro" placeholder="说点儿啥..."></textarea><br> <!-- 下拉选 selected默认选中--> 所在城市: <select name="city"> <option>请选择</option> <option value="bj">北京</option> <option selected="selected" value="sh">上海</option> <option value="gz">广州</option> </select><br> <!-- 提交按钮 --> <input type="submit" value="注册"> <!-- 重置按钮 --> <input type="reset" > <!-- 自定义按钮 --> <input type="button" value="自定义按钮"> </form>