web前端三大核心技术
HTML：（超文本标记语言），是一种用于创建网页的标准标记语言，HTML使用标记标签来描述网页，简单来说就是负责一个网页的架构。
CSS：（层叠样式表），可以用来为网页创建样式表，通过样式表可以对网页进行装饰，简单来说就说负责网页的样式，美化
JavaScript：是一种轻量级的编程语言，用于控制网页的行为、响应用户操作，用于实时更新网页中的内容，让网页更加生动，负责网页的行为
HTML简介
什么是HYML
HTML是超文本标记语言（HyperText Markup Language）是一种用于创建网页的标准标记语言。HTML负责网页三个组成部分中的结构，HTML使用标签的形式来标识网页中的不同组成部分。所谓的超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面。
HTML 是用来描述网页的一种语言。
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 标签
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
HTML单标签和双标签：
单标签书写规则： <单标签名称 /> ，例如 <br/>
双标签书写规则： <双标签名称>xxx</双标签名称> ，例如 <a>xxx</a>
HTML属性
HTML属性指的是标签属性
HTML标签可以拥有属性，属性提供了有关 HTML 元素的更多的信息
属性总是以名称/值对的形式出现，比如：name="value"
属性总是在 HTML 元素的开始标签中规定，比如： <a href="http://www.baidu.com">百度</a>
HTML标签骨架
HTML最基本的就是骨架标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>软件测试</title>
</head>
<body>
软件测试
</body>
</html>
HTML骨架标签详解
<!DOCTYPE html> ：用来声明当前的文档类型是 html
html：是网页当中最大的标签，我们称之为根标签
head：称之为网页的头部，它里面的内容主要用来定义网页标签及给浏览器查看的一些信息
<meta charset="UTF-8"> ：用来定义网页的编码标准 ，国际编码
title：称之为网页标题标签，它里的内容会显示在浏览器的标签页上
body：称之为网页主体标签，它里面的内容都会显示在浏览器的白色窗口区域【网页里展示的内容都会写在
body标签里】
基本的HTML标签
HTML标题
HTML 标题是通过 <h1> - <h6> 等标签进行定义的
实例：
<h1>一号标题</h1>
<h2>二号标题</h2>
<h3>三号标题</h3>
HTML段落
HTML 段落是通过 <p> 标签进行定义的
实例：
<p>第一个段落</p>
<p>另外一个段落</p>
HTML超链接
HTML超链接是通过 <a>标签进行定义的，在 href 属性中指定链接的地址。
实例：
<a href="http://www.baidu.com">百度</a>HTML图片
网页中插入图片就要使用图片标签，HTML图片是通过 <img> 标签进行定义的。
实例：
<img src="logo.jpg" title="软件测试" alt="logo" width="104" height="142" />属性说明：
1. src：用来指定当前想要引入的图片位置，也叫路径
2. title：用来定义鼠标悬停到图片上方时的提示文字
3. alt：当图片由于某些原因无法正常加载显示的时候，才会显示 alt 里的文字
4. width：用来定义图片的宽度
5. height：用来定义图片的高度
6. 如果只设置宽度或高度中的一个，另外的一个就会按着原图的比例自动缩放
HTML空格和回车
在HTML代码中，手动输入回车、换行和空格在浏览器上的显示效果是有问题的，必须使用代码才能很好的实现。
空格：
回车： <br />
提示：HTML版本的发展决定了这门语言比较松散，写法较为随意。
布局标签
布局标签没有语义，专门负责布局的标签，在页面中较为常见。
div：块级元素；独占一行
span：是内联元素，可用作文本的容器，该元素也没有特定的含义；可以一行放置多个
HTML内联元素在显示时通常不会以新行开始
<div>大盒子、独占一行</div>
<span>小盒子、一行可以放置多个</span>
<span>另一个小盒子</span>
HTML文字标签
目标
1. 能掌握加粗标签写法
2. 能掌握倾斜标签写法
3. 能掌握删除线标签写法
文字加粗标签
b和strong都可以实现加粗效果，后者有特别强调语义
<b>加粗</b>
<strong>加粗、特别强调</strong>
文字倾斜标签
i和em都可以实现倾斜效果，后者有一般强调语义
<i>倾斜</i>
<em>倾斜、一般强调</em>
文字删除线标签
s和del都可以实现删除线效果，前者即将被后者替代
<s>删除线</s>
<del>删除线、今后主流</del>
HTML表单标签
目标
1. 能掌握常用表单标签语法
HTML表单标签
表单就是在web网页上用来收集用户输入数据，并将数据提交到后台的一个HTML代码段
表单可以包含许多不同类型的表单元素，比如：输入框、单选框、复选框、提交按钮等等
form标签
所有的表单元素必须要放在一个form标签中
<form action="/user/login.jsp" method="get">
</form>
属性说明：
action：表单数据提交的服务器地址（URL）
method：提交表单时所用的 HTTP 请求方式（默认：GET）
文本输入框
文本输入框提供文本输入功能，并且是单行输入
<input type="text">
密码输入框
密码输入框中输入的内容会被做掩码处理，一般显示为星号或实心圆
<input type="password">单选按钮
在一组单选按钮中，同时只能选中其中的一个；name的属性值相同，即为一组元素
checked="checked" ：使用checked属性设置默认选中状态
<form>
<input type="radio" name="sex" value="male" checked="checked">男
<input type="radio" name="sex" value="female">女
</form>复选框
复选框又称多选框
复选框允许用户在有限数量的选项中选择零个或多个选项
checked="checked" ：使用checked属性设置默认选中状态
<form>
<input type="checkbox" name="hobby" value="1">吃饭
<input type="checkbox" name="hobby" value="2">睡觉
<input type="checkbox" name="hobby" value="3" checked="checked">打豆豆
</form>下拉框
<select> 元素定义下拉列表
<option> 元素定义下拉列表的选项
列表通常会把首个选项显示为被选选项
通过添加 selected 属性来定义预定义选项
<select name="city" id="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
<option value="sz" selected="selected">深圳</option>
</select>文本域
文本域可以输入多行文本内容
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>按钮
普通按钮
必须配合js才能实现其它效果
重置按钮
恢复表单数据到初始化状态
提交按钮
提交表单数据到服务器
普通按钮：<input type="button" value="我是按钮" />
重置按钮：<input type="reset" value="我是重置按钮" />
提交按钮：<input type="submit" value="提交按钮" />示例代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="reg.html" method="get">
用户名：<input type="text" name="username" placeholder="请输入用户名"/><br/>
密码框：<input type="password" name="password"/><br/>
性别：
<input type="radio" name="sex" id="nan"/>
<label for="nan">男</label>
<input type="radio" name="sex" id="nv" checked="checked"/>
<label for="nv">女</label>
<br/>
你的爱好：
<input type="checkbox" id="cs" checked="checked"/>
<label for="cs">测试 </label>
<input type="checkbox" id="cf"/>
<label for="cf">吃饭</label>
<input type="checkbox" checked="checked"/>睡觉
<input type="checkbox"/>打豆豆
<br/>
你来自哪里：
<select name="city" id="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="wz">广州</option>
<option value="sz" selected="selected">深圳</option>
</select>
<br/>
建议：<textarea name="message" cols="30" rows="3" placeholder="请填写建议"></textarea>
<br/>
<input type="button" value="普通按钮"/>
<input type="reset" value="重置按钮"/>
<input type="submit" value="提交按钮"/>
</form>
</body>
</html>