学习文本前端基础首先学习HTML、css、JavaScript
1.Html的英文全称是HyperTest MarKup language 即超文本标记语言,他是Internet上用于编写网页的主要标记语言。
2.css是英文Cascading Style Sheet的缩写,又称为层叠样式表简称样式表 是 w3c的定义标准 是一种用来为机构化文档添加样式的计算机语言;、
3.JavaScript是一种描述性的脚本语言(Script language)它是由客户端浏览器解释执行在执行期间无需web服务器,减轻服务器的负担。javaScript可以向HTML页面添加交互行为,读写元素,验证表单以及进行事件处理。
一:HTML文件的基本机构
1)一个完整的HTML文件是由各种元素与标记组成,包括标题、段落、表格、文本和超链接。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
...............
<body>
</body>
................
</html>
从上面的代码段可以看出,HTML分为3部分 各部分的含义如下
<html>......</html>;表示HTML的开始和结束位置,里面包括<head>和<body>等标记。HTML文件中所有的内容都放在这里面;
<head>.......</head>;文件的头部标记 一般称为HTML的头部部分;
<body>....<./body>;用来指明文档的主题区域,网页所显示的所有内容都放这里面;
二:它们的扩展名;
1)HTML文件的扩展名为 .html;
2)css的文件扩展名为.css;
3)JavaScript的文件扩展名为.js
三:常用的HTML标签;
1)标题;
<h1>...........</h1>>
<h2>...........</h2>>
<h3>...........</h3>>
<h4>...........</h4>>
<h5>...........</h5>>
<h6>...........</h6>>
字号<h1> 到<h6>由大到小 演示
2)段落;
<p>:实现一个新的段落,语法格式
<p>段落内容</p>>
<p>标签中的属性align能够设置段落中字体的对齐方式 可以有左对齐 ,居中 右对齐 语法格式
<p align = "left">段落内容</p>
<p align = "right">段落内容</p>
<p align = "center">段落内容</p>
实现演示;
3)滚动(marquee)
在HTML中可以使用<marquee>标签让文字滚动起来,该标记滚动方向<direction>、滚动方式(behavior)、滚动次数(loop)、滚动速度(scrollamount)、滚动延迟(scrolldelay)、背景颜色(bgcolor)、宽度和高度常用属性。
<marque direction="滚动方向" behavior="滚动方式">滚动的文字</marque>
其中,direction的值有up、down、lef、和right分别表示向上、向下、向左和向右滚动,向左滚动是默认情况:behavior的值有scroll。slide和alternate,分别表示循环滚动。只滚动一次和来回交替滚动;loop的值为整数;scrollamount的值为文字每次移动的长度,以像素为单位;scrolldelay的单位是毫秒。
下面是实例:
<body>
//编写一个网页,网页中有一段滚动文字,文字滚动方向默认方向(向左滚动)文字滚动的背景设置为蓝色,文字滚动方式为
//来回交替滚动
<p align="center">《赠汪伦》<br><font size="2">李白</font><br>
李白乘船将欲行;<br>
忽闻岸上踏歌声;<br>
桃花潭水深千尺;<br>
不及汪伦送我情;<br>
</p>
<marquee bgcolor="blue" behavior="alternate">
<font color="white">大家好,我正在学习《古诗三百首》 </font>
</marquee>
</body>
效果图
4)列表
①无序列表标记<ul>
<ul>标记用于设置无序列表,在每个列表项目文字之前,以项目符号作为每条列表项目的前缀,各个列表没有级别之分。无序列表的语法格式如下;
<ul>
<li>列表项</li>
<li>列表项</li>
</ul>
图示
前面的黑点 可以通过属性 type 赋值 disc 、circle、square 分别代表着实心圆 空心圆 实心正方体
②有序列表 <o;>
语法格式
<ol>
<li>有序列表项</li>
<li>有序列表项</li>
</ol>
结果图:
例子:有序和无序都有自己的项目类型、通过type设置自己的项目类型
type后面跟的属性值:1、a、A、i、I
<body>
<ul type="circle">
<h1>无序列表--车类</h1>
<li type="disc">小轿车</li>
<li type="square">小货车</li>
<li>重型卡车</li>
</ul>
<ol type="a">
<h1>计算机网络专业的学生应该具备的能力</h1>
<li>办公自动化能力</li>
<li>计算机硬件选购与测试能力</li>
<li>计算机组装与维护能力</li>
<li>网站建设与维护能力</li>
<li>动态网页设计能力</li>
</ol>
</body>
结果图
5)图像与多媒体
在HTML中通过<img>标记及你在哪个图片插入;它的属性src属性代表着所插入图像的位置和名称 ;语法格式
<img src="图像文件的路径及名称">
在网页中使用<bgsound>标记给网页添加背景音乐,语法格式如下:
<bgsound src="音乐文件的路径及名称" loop="播放次数">
在网页中使用<embed>标记将多媒体文件(例如flush、mp3 )添加到网页 ;语法格式如下;
<embed src="所媒体文件的路径及名称" width="播放器的高度" height="播放器的高度"></embed>
代码演示
<!DOCTYPE html>
<html lang="en" xmlns="">
<meta charset="UTF-8">
<title>Title</title>
<embed src="music/香香%20-%20千年等一回.mp3" autostart="true" loop="true">
</head>
<body>
<!--<bgsound src="music/香香%20-%20千年等一回.mp3"></bgsound>-->
<img src="img/book7.png">
</body>
</html>
结果
6)超链接
超链接的作用是建立从一个位置到另一个位置的链接。code形式
<a href="https://www.baidu.com/?tn=62095104_19_oem_dg" target="_self">百度</a>
其中链接的内容可以是文字内容也可以是一张图片 target 有(-salf、-blank、-top、-parent)这几个属性 -blank表示新的内容会在一个新的窗口中打开,top表示目标页会在顶层框架中打开、parent表示目标页会在当前框架的上一层打开
假设有3个文件,分别为index.html、addGoods.html、updataGoods.html。其中index.html为起始页,其余两个在同一目录下,在index.html中可以链接到哪两个网页上
①index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电子商务后台首页</title>
</head>
<body>
<ul>
<li><a href="index.html" >首页</a></li>
<li><a href="addGoods.html" >添加商品</a></li>
<li><a href="updateGoods.html">修改商品</a></li>
</ul>
<p >首页</p>
</body>
</html>
②addGoods.html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加商品</title>
</head>
<body>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="addGoods.html">添加商品</a></li>
<li><a href="updateGoods.html">修改商品页</a></li>
</ul>
<p>添加商品页面</p>
</body>
</html>
③updateGoods.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="addGoods.html">添加商品</a></li>
<li><a href="updateGoods.html">修改商品页</a></li>
</ul>
<p>修改商品页面</p>
</body>
</html>
结果图
7)表格 使用table ;tr代表行 td代表列 td的属性colspan:为跨越列的数值 ;td的属性rowspan :为跨越行的值 ;code演示:
<!DOCTYPE html>
<html lang="en" xmlns="">
<meta charset="UTF-8">
<title>演示页面</title>
</head>
<body>
<table border="1" style="border-color: green">
<tr>
<td>单元格里面的内容</td>
<td>单元格里面的内容</td>
<td> 单元格里面的内容</td>
</tr>
<tr>
<td>过分了啊</td>
<td>过分了啊</td>
<td> 过分了啊</td>
</tr>
</table>
<table border="1">
<tr>
<td colspan="5">姓名</td>
</tr>
<tr>
<td>姓名</td>
<td> 姓名</td>
<td> 姓名</td>
<td>姓名</td>
<td> 姓名</td>
</tr>
</table>
<table border="1">
<tr>
<td rowspan="2">123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
</table>
</body>
</html>
图示
示例做一个个人简历
<!DOCTYPE html>
<html lang="en" xmlns="">
<meta charset="UTF-8">
<title>演示页面</title>
</head>
<body>
<table border="1" style="border-color: #55a532">
<caption>个人简历</caption>
<tr>
<td rowspan="2">基本资料</td>
<td>姓名</td>
<td>李小白</td>
<td>性别</td>
<td>女</td>
</tr>
<tr>
<td>政治面貌</td>
<td>群众</td>
<td>出生日期</td>
<td>1988-12-09</td>
</tr>
<tr>
<td colspan="5" align="center">业余爱好</td>
</tr>
<tr>
<td>替身</td>
<td>各种球类(包括中国足球)</td>
<td>看言情</td>
<td>爬山</td>
<td>压马路</td>
</tr>
</table>
</body>
</html>
结果图示
8)form表单表单是将用户输入的信息封装提交给服务器,实现与用户的交互,表单是用<from>标记定义的,表单对象必须放在表单中才有效,code格式如下:
<form action="表单的处理程序">
....
input 元素
......
</form>
form的属性:
①action:属性值是表单提交的地址,即收集到信息后传递到程序地址;
②name:这个属性用于给表单命名,控制表单和后台程序之间的关系;
③method:属性用于指定使用哪种提交方法将表单数据提交到服务器。在默认情况下提交的方法是get。get方法将表单内容附在URL地址的后面,因此长度有限制(最大8192个字符),而且不安全。post方法将用户在表单中输入的数据包含在表单主体中,
一起提交给服务器,该方法没有信息长度的限制,也比较安全。
④:enctype:这个属性用于指定表单信息提交的编码方式,这个编码方式通常情况下采用默认的(application/x-www-form-urlencoded)即可,但是上传文件时必须选择mime编码(multipart/form-data)
1.文本框与密码框 code演示
<form>
姓名:<input type="text" value=" " name="userName"/>
<br>
密码:<input type="password" value="" name="pwd"/>
</form>
图示
2:单选按钮和复选按钮 code演示
<input type="radio" value="单选按钮值" name="单选按钮名称" checked/>
其中checked 在一组单选按钮中只能有一个被设置为checked 例子
<from>
<input type="radio" value="male" name="sex" checked/>男
<input type="radio" value="female" name="sex"/>女
</from>
结果图
复选框的属性为 type= “CheckBox” 这个属性是可以被同时选定的
3.按钮
按钮是配合脚本语言的(JavaScript)来进行表单处理,语法格式如下:
<from>
<input type="button" value="按钮的值" name="按钮的名称"/>
</from>
例子:
4.文件域
在使用文件域上传文件时,一定不要忘记设置form表单信息提交的编码方式为 enctype=“multipart/form-data”
<form action="" enctype="multipart/form-data">
你的靓照:<input type="file" name="fileName"/>
</form>
图示
5.下拉列表 语法格式如下:
<select name="下拉列表的名称" size="显示项数" multiple>
<option value="选项值1" selected>选项值1
........
</select>
例子:
<select name="cities" size="2" multiple>
<option value="beijing" selected>北京
<option value="shanghai" selected>上海
<option value="guangzhou" >广州
<option value="shenzhen" >深圳
</select>
结果
6.文本区: 语法格式:
<textarea name="文本区域的名称" cols="列数" rows="行数"></textarea>
四:对之前所学的做个总结 做一个问卷调查
<!DOCTYPE html>
<html lang="en" xmlns="">
<meta charset="UTF-8">
<title>实践环节---制作调查问卷</title>
</head>
<body>
<div >
<form>
<h3>调查问卷</h3>
姓名            <input type="text" name="userName"/>
<br>
性别            <input type="radio" />男 <input type="radio" />女
</form>
所在地          <select name="cities" size="1" multiple>
<option value="l" selected> 利比亚
<option value="e" > 俄国
</select>
<form>
喜欢的歌手   <input type="checkbox" value="zhangSan" />张三
<input type="checkbox" value="W" />王五
<input type="checkbox" value="li" />李四
</form>
<form action="" enctype="multipart/form-data">
你的靓照:  <input type="file" name="fileName"/>
</form>
<table>
<tr>
<td rowspan="5">个人描述   </td>
</tr>
<tr>
<td colspan="">
<textarea cols="5" rows="5"></textarea>
</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
<form>
<input type="submit" value="提交"/>       <input type="submit" value="重置"/>
</form>
</div>
</body>
</html>
结果图