Day04
一、HTML
（一）HTML介绍
Web前端三大核心技术
- HTML：负责网页的架构
- CSS：负责网页的格式、美化
- JS：负责网页的行为
HTML的定义：
HTML（超文本标记语言）是用来描述网页的一种语言，由一套标记标签组成。
HTML标签：
单标签 <标签名>双标签 <标签名>内容</标签名>
标签属性：
属性格式：属性名 = "属性值"
eg:<a href="http://www.jd.com">京东</a>
（二）HTML骨架标签
html：根目录，所有的内容都应该放在html标签中
hand：头部标签
body：身体标签（代码编写区域）
（三）注释
-
作用：描述的内容不会被浏览器执行
-
说明：解析程序给程序员看
-
国际通用注释快捷键：Ctrl+/
-
测试点：前端页面发布上线之前，需要检查（描述不恰当的文字出现）所有注释或去除注释
（四）常用标签
标题标签
- 说明：HTML标题是通过
<h1>~<h6>等标签进行定义
<h1>最大，<h6>最小
<h1>一级标题</h1>
段落标签
- 说明：HTML段落是通过
标签进行定义的
<p>第一个段落</p> - 特点：独占一块（换行作用），有语义含义——浏览器知道你是段落
超链接标签
- 说明：超链接是通过
<a>标签进行定义的 - 作用：点击文本跳转到指定页面
- 属性：
- href：点击文本要跳转的地址（网址、本地文件）
- target：指定窗口打开模式
图片标签
-
说明：网页中插入图片就要使用图片标签，HTML图片是通过
<img>标签进行定义的 -
属性：
- src：图片路径
- title：光标悬停显示文字
- alt：图片未加载时显示文字
- width：图片宽度
- height：图片高度
-
测试点：必须有title属性（悬停和未加载显示）
换行和空格
- 换行：
<br /> - 空格：
布局标签
- 说明：页面布局使用，常用
div和span
div：大盒子 独占一行
span：小盒子 一行可以放多个
列表标签
- 说明：列表标签常用
li元素（分为有序和无序）
<body> <!--1、有序列表--> <ol> <li>北京</li> <li>上海</li> </ol> <!--2、无序列表--> <ul> <li>测试</li> <li>开发</li> </ul> </body>
<body> <style> /*css标签*/ </style> <script> //js标签 </script> </body>
style：css标签
script：js标签
link：外部加载css标签
表单标签
- 说明：页面提交输入信息需要使用表单标签
<form>
- input标签
- 文本框：
<input type="text" /> - 密码框：
<input type="password" /> - 单选框：
<input type="radio" />
- 文本框：
<!--单选效果： 1、设置一组radio才能做单选； 2、设置相同（组名）name属性值为一组 --> 性别： <input type="radio" name="sex" />男 <input type="radio" name="sex" />女
-
- 复选框：
<input type="checkbox" />
- 复选框：
爱好： <input type="checkbox" />看书 <input type="checkbox" />看电影 <input type="checkbox" />打游戏
-
- 按钮：
-
-
- 提交按钮：
<input type="submit" />
- 提交按钮：
-
-
-
- 重置按钮：
<input type="reset" />
- 重置按钮：
-
-
-
- 普通按钮：
<input type="button" value="普通按钮" />
- 普通按钮：
-
- form
- 作用：将页面输入的数据提交到后台或指定页面
- 属性：
action:指定将数据提交到哪个页面
method:提交参数的方法（get、post）
get:查询使用
1、参数url明文显示
2、提交速度快
3、提交参数有长度限制
post:提交数据、登录、注册
1、参数url明文显示
2、提交速度快
3、提交参数有长度限制
按钮测试点：统一使用value进行赋值
普通按钮默认没有执行效果，需要配合js来实现
