、表单:
网页仅有表单才能接收用户输入信息、并将信息提交到服务器进行处理。
表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。
二、制作规范的表单
<form name="表单名称" method="提交的方式:get|post" action="处理表单的服务器地址">
一系列的表单对象
提交按钮:<input type="submit" value="提交" name="sum" />
</form>
注意:表单必须要有提交按钮,作用:当点击提交钮时,会自动将表单中的数据提交到表单action属性所指定的地址进行处理.
三、定义表单对象
1.使用input标签定义表单对象
<input type="元素类型" name="表单对象名称" value="表单对象的值">
1.1 type的类型:
text(文本框)、password(密码框)、checkbox(复选框)、radio(单选按钮)
submit(提交按钮)、reset(重置按钮)、file(文件域)、button(按钮)、
image(图片域:具备提交按钮)、hidden(隐藏域)、
date(日期控件:html5新增的)、number(数字调节器:html新增的)
2.使用select标签定义下拉列表
<select name="sel">
<option value="项值">项文本</option>
<option value="研究生">研究生</option>
<option value="本科">本科</option>
....
</select>
3.使用textarea定义文本域:
<textarea cols="80" rows="8">请输入内容</textarea>
四、常用表单对象的属性
1.文本框:
<input type="text" name="uname" value="Admin" maxlength="最大字符数:15" size="文本框长度:10" readonly="只读:readonly"/>
2.设置单选框和复选框的默认选中
checked="checked"属性
3.使用selected属性设置下拉列表的选中项
<option value="本科" selected="selected">本科</option>
来自网络
五、css(Cascading style sheet):级联(层叠)样式表。
1.作用:修饰html标签
2.优势:
内容与表现分离;
网页的表现统一,容易修改;
丰富的样式,使得页面布局更加灵活;
减少网页的代码量,增加网页的浏览速度,节省网络带宽;
运用独立于页面的CSS,有利于网页被搜索引擎收录。
六、在html文档添加css样式的方法。
1.行内样式:使用标签的style属性添加样式
<标签 style="一系列的样式规则">
样式规则的格式:样式属性:样式属性值;
2.内部样式:使用style标签定义样式
<style type="text/css">
一系的样式选择器(选择器必需先定义,后引用)
</style>
注意:通常情况style标签放在head标签中。
2.1基本选择器分类:类选择器、Id选择器、标签选择器
2.2使用类选择器
定义类选择器
.类选择器名{一系列样式}
引用类选择器:使用标签的class属性引用类选择器名称
2.3使用Id选择器
定义id选择器
#id选择器名{一系列样式规则}
引用ID选择器:使用标签的ID属性引用ID选择器名称
2.4定义标签选择器
标签名称{一系列样式规则}
引用标签选择器:当使用该标签时自动套动标签样式
3.外部样式:
外部样式是将一系列样式选择器定义在外部样式文件(**.css)中
3.1在网页使用link标签引用外部样式文件
<link href="index.css" type="text/css" rel="stylesheet" />
七、样式优先级(就近原则)
行内样式>内部样式>外部样式
id选择器>类选择器>标签选择器
八、高级选择器(复合选择器)
1.层选选择器
1.1后代选择器
定义后代选择器
选择器1 选择器2{一系列样式规则}
使用:必需先用选择器1,再使用选择器2,且选择器存在层次关系
1.2子选择器
定义子选择器
选择器1>选择器2{一系列样式规则}
使用:必需先用选择器1,再使用选择器2,且选择器存在父子关系
1.3相邻兄弟选择器
定义相邻兄弟选择器
选择器1+选择器2{一系列样式规则}
使用:必需先用选择器1,再使用选择器2,且相邻的
1.4通用相邻兄弟选择器
定义通用相邻兄弟选择器
选择器1~选择器2{一系列样式规则}
使用:必需先用选择器1,再使用选择器2,且相邻之后的所有兄弟
2.交集选择器
定义交集选择器
标签选择器类选择器|id选择器
使用:使用标签的同时还引用类或者id选择器
3.并集选择器
定义并集选择器
选择器1,选择器2
使用:使用选择器1 或者 选择器2 都行
九、span标签
文本标签,由内容决定自身大小。
例
创建带有 4 个选项的选择列表:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
浏览器支持
所有主流浏览器都支持 <select> 标签。
标签定义及使用说明
<select> 元素用来创建下拉列表。
<select> 元素中的 <option> 标签定义了列表中的可用选项。
提示和注释
提示:<select> 元素是一种表单控件,可用于在表单中接受用户输入。
HTML 4.01 与 HTML5之间的差异
HTML5 增加了一些新的属性。
属性
New:HTML5 中的新属性。
属性 | 值 | 描述 |
---|---|---|
autofocusNew | autofocus | 规定在页面加载时下拉列表自动获得焦点。 |
disabled | disabled | 当该属性为 true 时,会禁用下拉列表。 |
formNew | form_id | 定义 select 字段所属的一个或多个表单。 |
multiple | multiple | 当该属性为 true 时,可选择多个选项。 |
name | name | 定义下拉列表的名称。 |
requiredNew | required | 规定用户在提交表单前必须选择一个下拉列表中的选项。 |
size | number | 规定下拉列表中可见选项的数目。 |
全局属性
<select> 标签支持 HTML 的全局属性。
事件属性
<select> 标签支持 HTML 的事件属性。
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!
html是一种超文本标记语言,进行网页页面的文本编辑
html注释写法:<!--注释内容-->
基本结构如下:
<!DOCTYPE html> <!--文档声明-->
<html lang="en"> <!--lang="en"表示语言-->
<head> <!--头部信息:网站的配置信息-->
<meta charset="UTF-8"> <!--解码方式-->
<title>我是标题</title> <!--网站标题-->
</head>
<body>
</body> <!--body体:网站显示内容-->
</html>
link图标:
标题图标:
写法:<link rel=“icon” href=“图片路径”>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
<link rel="icon" href="timg.jpeg">
</head>
<body>
</body>
</html>
标签写法分类:
1、全封闭标签,如<h1>xxx</h1>
标签属性:<h1 xx=“ss”>xxx</h1> xx:属性名 ss:属性值
2、自封闭标签:<meta charset=“UTF-8”>
<h1></h1>-<h6></h6>:表示一级标题到六级标题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
公司
<b>Asir</b> <!--加粗-->
<s>Bsir</s> <!--加划线-->
<h1>小王</h1>
<h2>小李</h2>
<h3>小赵</h3>
<h4>小<br>胡</h4> <!--<br>换行-->
<hr> <!--<hr>加分割线-->
<h5>小周</h5>
<h6>小李</h6>
</body>
</html>
页面效果:
跳转对应网址的页面
未访问之前是蓝色字体,访问后变紫色
# 要a标签的效果,但不刷新或跳转页面:
<a href="#">xxx</a>
<a href=“javascript:void(0);”>xxx</a>
锚点:
页面内容进行跳转
标签设置id属性=值(xx),a标签href属性的值写法href=’#xx’,点击这个a标签就能跳转到id属性为xx的那个标签所在位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
<div id="top">顶部位置</div> <!--设置锚点-->
<a>公司</a>
<a href="">potal</a>
<a href="http://www.baidu.com" target="_blank">百度</a> <!--_blank表示在新标签页打开-->
<a href="#">potal</a>
<a href="javascript:void(0);">potal</a>
<a href="#top">回到顶部</a> <!--返回锚点-->
</body>
</html>
页面效果:
可通过第二个按钮跳转到百度:
img标签:页面插入图片
src属性:图片路径 必须写
alt属性:图片加载失败或者正在加载时提示的内容
title属性:鼠标悬浮时显示的内容,不是img标签独有的
width:设置图片宽度(建议用css设置)
height:设置图片高度(建议css设置)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1319369445,160835837&fm=26&gp=0.jpg" alt="图片未成功加载" title="清新办公" width="300" height="500">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1941575090,3819526635&fm=26&gp=0.jpg" alt="图片未成功加载" title="未闻花名">
<img src="timg.jpeg" alt="图片未成功加载" title="未闻花名2" width="1000" height="500">
</body>
</html>
页面效果:
没有任何文本修饰效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
<span>小王</span>
<p>小李</p>
<span>小文</span>
<div>小林</div>
</body>
</html>
页面效果:
扩展:标签分类
块级标签(行外标签):独占一行,h1-h6、p、br、hr、div、ul、li
块级标签可以包含内联标签,以及某些块级标签
内联标签(行内标签):不独占一行,img/a/span,只能包含内联标签,不能包含块级标签
1)ul标签:
写法:
<ul type="none">
<li>内容1</li>
<li>内容2</li>
......
<ul>
2)ol标签
写法:
<ol type="指定标注种类" start="指定标注起始值">
<li>内容1</li>
<li>内容2</li>
......
</ol>
3)dl标签
<dl>
<dt>无空位内容</dt>
<dd>有空位内容<dd>
......
</dl>
页面效果:
可以在网页中生成表格
写法:
<table border="表框粗细" cellpadding="表格大小" cellspacing="表线宽度">
<thead> <!--表头信息-->
<tr>
<th>表头1</th>
<th>表头2</th>
...
</tr>
<thead>
<tbody> <!--body-->
<tr>
<td>内容1</td>
<td>内容2</td>
...
</tr>
</tbody>
</table>
colspan:横行合并
rowspan:纵列合并
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="8">
<thead> <!--表头信息-->
<tr>
<th>名称</th>
<th>年龄</th>
<th>爱好</th>
</tr>
</thead>
<tbody> <!--body-->
<tr>
<td>小王</td>
<td>18</td>
<td>篮球</td>
</tr>
<tr>
<td rowspan="2">小李</td>
<td>20</td>
<td>游泳</td>
</tr>
<tr>
<td colspan="2">小王</td>
</tr>
</tbody>
</table>
</body>
</html>
页面效果:
<form action="http://127.0.0.1:8001">
</form>
action属性:指定提交路径,提交到哪里去
form表单标签会将嵌套在form标签里面的输入框的数据全部提交到指定路径
input标签 输入框:
input标签,如果要提交数据,一定要写name属性
<input type=“text”> 普通文本输入框
<input type=“password”> 密文输入框
<input type=“submit” value=“登陆”> 提交按钮 触发form表单提交数据动作
<input type=“reset”> 重置按钮 清空输入内容
<input type=“button” value=“注册”> 不会触发form表单提交数据的操作
<input type=“date”> 时间日期输入框
<input type=“file”> 文件选择框
<input type=“number”> 纯数字输入框
单选框:
<input type=“redio”>
多选框:
<input type=“checkbox”>
单选框和多选框请务必加name属性和value默认值
单选和多选value默认值可将存储的数据变短
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标签</title>
</head>
<body>
<form action="http://127.0.0.1:8001">
<div>
<h1>欢迎来到xxx公司</h1>
用户名:<input type="text" name="username">
<br>
密码:<input type="password" name="password">
<br>
性别:
<input type="radio" name="sex" value="0">女
<input type="radio" name="sex" value="1">男
<br>
爱好:
<input type="checkbox" name="hobby" value="1">篮球
<input type="checkbox" name="hobby" value="2">足球
<input type="checkbox" name="hobby" value="3">乒乓球
<br>
<input type="reset">
<br>
<hr>
数字:
<input type="number">
<br>
<input type="date">
<br>
<input type="file">
<br>
<input type="submit" value="点击确认">
</div>
</form>
</body>
</html>
页面效果:
<select name="属性">
<option value="默认值">
</select>
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标签</title>
</head>
<body>
选择性别:
<select name="sex">
<option value="0">男</option>
<option value="1">女</option>
</select>
<br>
喜欢的明星:
<select name="star" multiple> <!--允许多选-->
<option value="1">明星1</option>
<option value="2">明星2</option>
<option value="3">明星3</option>
</select>
</body>
</html>
页面效果:
多行文本输入框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标签</title>
</head>
<body>
<span>请输入内容:</span>
<br>
<textarea name="message" cols="30" rows="10"></textarea>
</body>
</html>
页面效果:
第一种:
直接在头部添加<style>引入:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
<style>
span{
width:100px;
height:100px;
background-color:navajowhite;
}
div{
width:100px;
height:50px;
background-color:red;
}
</style>
</head>
<body>
<div>hello</div>
<span>How are you?</span>
</body>
</html>
页面效果:
第二种:
外部文件引入
<link rel=“stylesheet” href=“css文件路径”>
html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div>hello</div>
<span>How are you?</span>
</body>
</html>
css文件:
span{
width:100px;
height:100px;
background-color:navajowhite;
}
div{
width:100px;
height:50px;
background-color:red;
}
页面效果:
第三种:
内联样式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div style="background-color:red;weight:100px;height:100px">hello</div>
<span style="background-color:wheat">How are you?</span>
</body>
</html>
页面效果:
块级标签能够设置高度宽度,能够嵌套某些块级标签和内联标签,p不能嵌套块级标签,也不能嵌套p标签
内联标签不能设置高度宽度,它的高度宽度由内容来决定,只能嵌套内联标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
<div>
<span>hello</span>
</div>
<p>
<p>how old are you?</p>
</p>
</body>
</html>
页面效果:
<div id="d1">内容</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
<style>
#d1{
width:100px;
height:100px;
background-color:red
}
#d2{
background-color:wheat;
}
</style>
</head>
<body>
<div id="d1">你好啊</div>
<span id="d2">最近还好吗</span>
</body>
</html>
页面效果:
3)类选择器
class后面跟类,表示一类,可统一改渲染效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
<style>
.c1{
width:100px;
height:100px;
background-color:red
}
</style>
</head>
<body>
<div id="d1" class="c1">你好啊</div>
<span id="d2" class="c1">最近还好吗</span>
</body>
</html>
页面效果:
4)属性选择器
可自定义属性选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
<style>
[ss]{
width:100px;
height:100px;
background-color:red
}
[ss="dd"]{
background-color:wheat;
}
</style>
</head>
<body>
<div id="d1" class="c1" ss="xx">你好啊</div>
<span id="d2" class="c2" ss="dd">最近还好吗</span>
</body>
</html>
页面效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
<style>
#d1 > span{
width:100px;
height:100px;
background-color:red
}
.c2 .c4{
background-color:wheat;
}
</style>
</head>
<body>
<div id="d1" class="c1" ss="xx">
<span id="d3" class="c3">hello</span>
</div>
<div id="d2" class="c2" ss="dd">
<span class="c4">how old are you?</span>
</div>
</body>
</html>
页面效果:
6)组合选择器
后代选择器用逗号组合:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
<style>
#d1 span,#d2 span{
width:100px;
height:100px;
background-color:red
}
</style>
</head>
<body>
<div id="d1" class="c1" ss="xx">
<span id="d3" class="c3">hello</span>
</div>
<div id="d2" class="c2" ss="dd">
<span class="c4">how old are you?</span>
</div>
</body>
</html>
页面效果:
建议收藏,不然刷着刷着就可能找不到了。
学习是一个艰苦的过程,当然如果能把技术学成,最后也一定可以获得高薪工作。掌握一个好的学习方法,跟对一个学习的人非常重要。今后要是大家有啥问题,可以随时来问我,能帮助别人学习解决问题,对于自己也是一个提升的过程。自己整理了一份2020最全面前端学习资料,从最基础的HTML+CSS+JS到HTML5的项目实战的学习资料都有整理web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取
*请认真填写需求信息,我们会在24小时内与您取得联系。