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>