网页编程基础-HTML

网页编程基础-HTML

1 HTML概述 1

1.1 HTML是什么 1

1.2 HTML的结构 1

1.3 HTML语法(了解) 1

2 HTML标签 1

2.1 图像标签 1

2.2 超链接 1

2.3 表格标签 1

2.4 表单 1

2.4.1 浏览器向服务器发送数据的两种方式 1

2.4.2 案例:实现注册表单页面 1

2.4.3 表单标签 1

2.4.4 表单项标签 1

2.5 注册表单练习 1

3 CSS基础 1

3.1 CSS概述(了解) 1

3.1.1 什么是CSS? 1

3.1.2 在HTML中引入CSS 1

3.2 CSS选择器 1

3.2.1 标签名选择器 1

3.2.2 class选择器 1

3.2.3 id选择器 1

3.3 常用属性总结 1

3.3.1 文本属性 1

3.3.2 字体属性 1

3.3.3 背景属性 1

3.3.4 边框(border) 1

3.3.5 display属性 1

3.3.6 其他属性 1

3.3.7 元素类型(了解) 1

HTML概述

HTML是什么

HTML: 超文本标记语言,是开发网页的最基础的语言

(1)由W3C组织提供

(2)使用html开发的网页文件,以".html"或".htm "(.shtml)为后缀

(3)使用html开发的网页文件,由浏览器负责解析并执行(即显示在浏览器中)

关于HTML:

(1) HTML是一门标记(也叫做标签或元素)语言,不是编程语言

(2) HTML是一门标记语言,是利用标记来组织网页结构的

(3) HTML是文档的一种,例如:word pdf txt…

HTML的结构

1.案例:编写我的第一个HTML网页, 并用浏览器打开

新建一个txt文档,将后缀名改为.html,代码实现如下:

<!DOCTYPE html>

<html>

<head>

<title>网页的标题</title>

</head>

<body>

Hello CGB1808…

</body>

</html>

例如:另存html文档时保存的编码为utf-8:

在这里插入图片描述

只要在html文档中添加一个meta标签,同时也指定保存的编码为utf-8即可解决乱码问题!!

<!DOCTYPE html>

<html>

<head>

<title>网页的标题</title>

<meta charset=“utf-8” />

</head>

<body>

Hello CGB1808…

</body>

</html>

2.HTML结构详解

(1)<!DOCTYPE HTML> 文档声明, 用来声明HTML文档所遵循的HTML规范和版本

上面是html5.0的声明, 也是目前最常用的版本

(2)<head></head> 头部分, 用来存放HTML文档的基本属性信息,
比如网页的标题, 文档使用的编码等, 这部分信息会被浏览器优先加载.

(3)<body></body> 体部分, 用来存放网页可视化数据. 即真正的网页数据

(4)<title></title> 声明网页的标题

(5)<meta charset=“utf-8”/>
用来通知浏览器使用哪一个编码来打开HTML文档,
这个编码一定要和文件保存时的编码保持一致, 才不会出现中文乱码问题.

HTML语法(了解)

1、html标签

HTML是一门标记语言,标记也叫做元素/标签,标签分为开始标签和结束标签。例如:

<body></body>

<table></table>

<form></form>

如果标签内没有内容要修饰,可以合并成一个自闭标签。例如:

<meta/> <br/> <hr/> <input/> <img/>等等

2、html属性

标签都可以具有属性,属性可以有多个,多个属性之间用空格隔开。例如:

<font size=“7” color=“red” face=“华文琥珀”>文本内容…</font>

提示:属性的值用单引号或双引号引起来,或者不用引号。通常使用双引号引起来。

3、html注释

注释格式:<!-- 注释内容 -->,注意html注释不能交叉嵌套,例如:

<!-- 下面声明了一个标题 -->

<h1>一级标题</h1>

4、html空格和换行

如何在网页中做一个空格或者做一个换行?

由于在网页中多个连续的空白字符会被当成一个空格来显示,所以

如果要做一个空格,可以用转义字符 ** **来代替;

如果要做一个换行,可以用**<br/>**标签来代替;

提示:中文状态下的空格(全角空格)请使用: 

  1. HTML标签

    1. 图像标签

img标签用于在网页中插入一幅图片

标签介绍:

<img src=“img/1.jpg” width=“70%” border=“5px”/>

属性介绍:

src属性:用来指定图片的url地址(即图片的所在路径)

width属性:指定图片的宽度,单位可以为px(像素)或者%(百分比)

height属性:指定图片的高度,单位可以为px(像素)或者%(百分比)

自己动手试一试~!

超链接

在HTML网页文档中,通过a标签可以创建一个超链接标签

1、用于创建指向另外一个文档的超链接(点击后可以跳转到另外一个文档),例如:

<a href=“http://www.baidu.com”
target="_blank">百度一下,你就不知道</a>

属性介绍:

href属性:用来指定点击超链接后将要跳转到的url地址

target属性:用来指定以何种方式打开超链,其常用取值为:

_self:默认值,在当前窗口打开超链接

_blank:在新的窗口中打开超链接

表格标签

1.案例:在网页中插入一个表格

html代码示例:

<table>

<tr>

<td>11</td>

<td>12</td>

<td>13</td>

</tr>

<tr>

<td>21</td>

<td>22</td>

<td>23</td>

</tr>

<tr>

<td>31</td>

<td>32</td>

<td>33</td>

</tr>

</table>

在浏览器中显示效果为:

在这里插入图片描述

在head标签内添加如下内容:

<style>

table,td{

border:1px solid #000;/* 设置边框 */

border-collapse:collapse;/* 设置边框合并 */

}

table{

width:70%; /* 设置表格宽度 */

margin:0px auto;/* 设置表格居中 */

background:pink;/* 设置表格背景颜色 */

}

td{

padding:10px;/* 设置单元格边框和内容之间的距离 */

}

</style>

再次刷新浏览器显示效果为:

在这里插入图片描述

1、表格标签介绍

table – 用来定义一个表格

tr – 用来定义表格中的行

td – 用来定义表格中的单元格

th – 用来定义表头

2、练习:使用表格标签在网页中生成一个表格,如下图:

要求如下:

(1) 表格内容如下图, 并设置表格边框

(2) 设置单元格之间没有缝隙, 并设置单元格边框和内容之间的距离为5px

(3) 设置表格的背景颜色为pink, 并设置表格的宽度为70%

(4) 设置表格在网页中居中显示, 并为表格添加表头以及标题
在这里插入图片描述

表单

表单的作用是向服务器发送数据。

浏览器向服务器发送数据的两种方式

思考:如果浏览器在和服务器进行通信的过程中,需要向服务器提交一些数据,比如在登陆时,需要向服务器提交用户名和密码,或者在百度搜索时,需要提交搜索的关键词汇,这些数据浏览器是如何发送给服务器的?

1、通过超链接向服务器发送数据

其实就是在超链接后面通过?拼接参数将数据带给服务器

参数和参数值之间用等号分隔,参数可以有多个,多个参数之间用&分隔,并且参数的名字可以重复。

在这里插入图片描述

2、通过表单向服务器发送数据

其实里通过表单及表单项标签,用户可以通过表单项输入数据,通过提交表单向服务器发送数据。例如下图:

在这里插入图片描述

  1. 案例:实现注册表单页面

  2. 表单标签

标签介绍:

<form action=“http://www.baidu.com” method=“GET”></form>

属性介绍:

action 必须存在的属性,用来指定表单提交的目的地地址

method 可选属性,用来指定以何种方式来提交表单,如果不指定,默认是GET提交

提示1:在HTTP协议中规定了7种提交方式,其中5种都不常用,只用GET和POST。

提示2:只有使用表单,并且明确的指定了提交方式为POST时,才是POST提交,其他方式都是GET提交。

表单项标签

表单中可以有多个输入项,输入项必须有name属性才可以被提交,如果输入项没有name属性,则表单在提交时会忽略它

1、input元素

(1) 普通的文本输入框

用户名: <input type=“text” name=“username”
value=“设置默认值”/>

例如:

在这里插入图片描述

(2) 密码输入框

密码: <input type=“password” name=“password”
value=“设置默认值”/>

例如:
在这里插入图片描述

(3) 单选按钮(单选框)

性别: <input type=“radio” name=“gender” value=“man”/>男

<input type=“radio” name=“gender” value=“woman” />女

属性介绍:

其中checked属性可以设置选项默认被选中

value用来指定选项被提交时的值, 如果不设置value, 选项被提交时, 值为on.

例如:

在这里插入图片描述

(4) 复选框

爱好: <input type=“checkbox” name=“like”
value=“lanqiu”/>篮球

<input type=“checkbox” name=“like” value=“zuqiu”/>足球

属性介绍:

其中checked属性可以设置选项默认被选中

value属性用来指定选项被提交时的值, 如果不设置value, 选项被提交时,
值为on.

例如:
在这里插入图片描述

(5) 提交按钮

<input type=“submit” value=“按钮上显示的文本”>
用来提交表单用的

(6) 重置按钮

<input type=“reset” value=“按钮上显示的文本”>
用来将表单项恢复到初始的状态

例如:
在这里插入图片描述

(7) 普通的按钮

<input type=“button” value=“按钮上显示的文本”>

普通按钮本身没有功能, 但是可以通过js来为按钮添加功能和行为.

2、textarea多行文本输入区域

个人描述: <textarea name=“description” cols=“宽度”
rows=“高度”>请输入个人描述…</textarea>

属性介绍:

cols属性:设置输入框宽度

rows属性:设置输入框高度

示例:
在这里插入图片描述

3、下拉选框:

城市:

<select name=“city”>

<option value=“bj”>北京</option>

<option value=“sh”>上海</option>

<option value=“gz” selected=“selected”>广州</option>

</select>

属性介绍:

其中selected属性用来设置该选项默认被选中

value属性用来设置选项被提交时的值

例如:

在这里插入图片描述

注册表单练习

使用表格标签、表单及表单项标签、图像标签等实现网站注册表单。

部分要求如下:

(1)设置表格边框颜色为red,背景颜色为lightgrey;

(2)设置单元格边框和内容之间的距离为5px;

(3)设置验证码图片宽为80px,高为20px;

在这里插入图片描述

  1. 网页编程基础-CSS

CSS基础

CSS概述(了解)

什么是CSS?

CSS:层叠样式表,用来修饰(美化)HTML网页的一门技术。使用CSS来设置样式,可以将设置样式的CSS代码和展示数据的HTML代码进行分离。并且还可以实现代码的复用,增强网页的展示能力。
在这里插入图片描述

html的作用: 通过html标签组织网页的结构

css的作用: 渲染网页、美化网页

在HTML中引入CSS

1、大多数标签都可以具有style属性,可以通过style属性为当前标签设置样式,例如:

在这里插入图片描述

这种方式设置样式不推荐大量使用,会造成页面结构的混乱,不利于后期的扩展和维护。

2、在head标签内部提供一个style标签,在style标签内部可以选中元素进行修饰,例如:

在这里插入图片描述

3、在head标签下添加一个link标签,link标签可以引入外部的css文件

在这里插入图片描述
| 在这里插入图片描述

CSS选择器

所谓的选择器就是能够在html中帮助我们选中元素进行修饰的一门技术

标签名选择器

根据标签(元素)的名称来选择指定名称的元素进行样式的修饰.

格式:标签名{ css属性… }

示例:

在这里插入图片描述

class选择器

通过标签上通用的属性class,可以为标签指定所属的类(组),所有class值相同的元素则为一组(类),可以通过class属性的值选择这一组的标签,为这一组的标签统一设置样式。

格式:.类名{ css属性… }

示例:

在这里插入图片描述

id选择器

通过标签上通用的属性id,可以为标签设置唯一的标识(ID的值在整个HTML中应该是独一无二的),可以通过id值选中指定的元素.

格式:#id值{ css属性… }

在这里插入图片描述

常用属性总结

文本属性

1.text-align 设置元素中文本水平对齐方式,其常用取值为:

left: 默认值。左对齐

right: 右对齐

center: 居中对齐

justify: 两端对齐

2.text-decoration:设置文本下划线,其常用取值为:

underline: 有下划线

none: 没有下划线

3.letter-spacing: 设置字符间隔/间距,其常用取值为:

normal

像素值

4.text-shadow: 设置字体阴影,其取值为:

像素值 像素值 像素值 颜色值

第一个值为阴影水平位移, 第二个值为阴影垂直位移, 第三个值为阴影扩散值,
第四个值为阴影颜色

字体属性

font-size:设置字体大小

font-weight:设置字体粗细 bold、bolder、normal

font-family:设置字体,比如微软雅黑、黑体、楷体等

color:设置字体颜色

背景属性

background-color:设置背景颜色

background-image:设置背景图片,url(‘图片的路径’);

background-repeat:设置或检索对象的背景图像是否及如何铺排

background-position:设置或检索对象的背景图像位置

边框(border)

border: 宽度 样式 颜色;

border用于设置元素的边框,可以同时设置边框的宽度、样式、颜色等

例如,设置div元素的边框为2像素、实线、红色:border:2px solid red;

扩展内容

  1. display属性

display用来设置元素的类型,常用取值:

block:块级元素的默认值

默认情况下独占一行

可以设置宽高

inline:行内元素的默认值

默认情况下多个行内元素可以处在同一行

一般不能设置宽高

inline-block:行内块元素

多个元素既可以显示在同一行, 也可以设置宽和高

none:表示隐藏元素

其他属性

width:设置元素的宽度

height:设置元素的高度

  1. 元素类型(了解)

(1)块级元素(block)

默认情况下,块级元素独占一行

可以设置宽和高,就是设置宽和高

如果不设置宽和高,其中宽是默认填满父元素,而高是由内容决定(由内容支撑)

(2)行内元素(inline)

默认情况下,多个行内元素处在同一行

不能设置宽和高

(3)行内块元素(inline-block)

既具备行内元素的特征(可以同行显示),还具备块级元素的特征(可以设置宽和高)
background-repeat:设置或检索对象的背景图像是否及如何铺排

background-position:设置或检索对象的背景图像位置

边框(border)

border: 宽度 样式 颜色;

border用于设置元素的边框,可以同时设置边框的宽度、样式、颜色等

例如,设置div元素的边框为2像素、实线、红色:border:2px solid red;

扩展内容

  1. display属性

display用来设置元素的类型,常用取值:

block:块级元素的默认值

默认情况下独占一行

可以设置宽高

inline:行内元素的默认值

默认情况下多个行内元素可以处在同一行

一般不能设置宽高

inline-block:行内块元素

多个元素既可以显示在同一行, 也可以设置宽和高

none:表示隐藏元素

其他属性

width:设置元素的宽度

height:设置元素的高度

  1. 元素类型(了解)

(1)块级元素(block)

默认情况下,块级元素独占一行

可以设置宽和高,就是设置宽和高

如果不设置宽和高,其中宽是默认填满父元素,而高是由内容决定(由内容支撑)

(2)行内元素(inline)

默认情况下,多个行内元素处在同一行

不能设置宽和高

(3)行内块元素(inline-block)

既具备行内元素的特征(可以同行显示),还具备块级元素的特征(可以设置宽和高)

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
语言是一门以中文作为程序代码编程语言,其以“易”著称,创始人为吴涛。易语言早期版本的名字为E语言。其最早的版本的发布可追溯至2000年9月11日。创造易语言的初衷是进行用中文来编写程序的实践,方便中国人以中国人的思维编写程序,并不用再去学习西方思维。易语言的诞生极大的降低了编程的门槛和学习的难度。从2000年以来,易语言已经发展到一定的规模,功能上、用户数量上都十分可观。诞生背景 中国计算机应用的发展在经过操作系统汉化显示环境,中文输入法的两次较大跨越后,正经历一个重要的历史时期:中文编程已成为当务之急。   英文编程软件只能使用英文输入程序代码,并且需要用户掌握大 易语言认证与推广照片 易语言认证与推广照片(17张) 量专业英文术语。   而且国人的述事习惯与外国人的语法习惯还有很大区别,如外国人表示"按从小到大顺序排",而中国人的表达方式为:"按从大到小方式顺序排"或简称"按降序排"。外国人的语法大多数是与中国人不同的,再加上英文有多种语态,有时间动词,有不同的复数形式,这在中国人学习外语上都不能很好的适应。更何况英文编程中大多数用大写缩写的方法表示一个概念、定义和变量,因此如果不了解的人是无从知道,而中文几个字即可简单表示了。中文具有比较明确的归类表达方式,如公交车、小汽车、自行车、吉普车均是行走的车辆,都与车有关,而英语每个事物都有一个不同的名词,不容易记忆,如BUS公交车,CAR小汽车,BIKE自行车,JEEP吉普车。因此这种方式如果套用到编程上,那么每个变量均用不同的代表,那样要记忆的词汇量就非常巨大了,有个对比,中国人只要掌握3000个字就能读名著,而外国人必须掌握30000个以上单词才能看明白报纸。因此小的记忆量可以适合在编程中只考虑方法,而不必过多地考虑语法、变量的名称等。而且由于中文是方块字,包含的信息量也大,能够见文知义。 通过以上,东西方文化的差异造成对编程学习上的很大区别,中文文化背景决定了中国人还是学自己的编程语言好。 [1] 市场推广 2004年易语言获得《科技查新报告》,《科技项目鉴定测试报告》 培训推广图册 培训推广图册(20张) ,《科技项目技术经济评议书》的认可。“易语言汉语编程环境”成功通过国家鉴定,易语言获2004年《大连市科学技术进步奖》二等奖。 2004年易语言正式走上讲台“吉林市计算机专业骨干教师培训班”,2004年7月11日至17日,在吉林市教育局的大力支持下,应吉林市教育学院职教部的邀请,易语言公司培训教师史世恒老师前往吉林,做为期七天的“吉林市计算机专业骨干教师培训班”教学活动。这是易语言与中等专业教育学校的首次合作,同时也为易语言走进教育事业迈向了可喜的一步! 2004 年7月28日-31日易语言参加软交会,大连大有吴涛易语言软件开发有限公司参加中国国际软件和信息服务交易会,展台位置在大连星海会展中心东22号门旁边,届时易语言将携简体中文版、繁体中文版、英文版、日文版向全世界展示! 2005年3月出版发行《易语言编程系统》由易语言公司组织、易语言教材编委会编写。本书按易语言4.0编写。 2005年4月21日中国教育学会中小学信息技术教育专业委员会和各专家领导参与的易语言在中小学项目的推介与申报项目会议在北京招开。 2005年8月3日,“易语言汉语编程环境”国家火炬计划证书已颁发,国家科学技术部火炬高技术产业开发中心颁发“易语言汉语编程环境”国家火炬计划证书。5月由该公司申报的“易语言汉语编程环境”项目已被立项。 2005年8月22日至2005年8月26日全国中小学计算机教育研究中心北京部主持易语言全国首次高级培训会,大连大有吴涛软件开发有限公司承办的易语言全国首次培训会在大连举行。 2005年12月26日,易语言在中小学实验与推广项目教师培训在美丽的 易语言在宁夏和云南 易语言在宁夏和云南(17张) 株洲隆重开题。 2005年易语言在中小学实验与推广项目已全面启动, 由中国教育学会中小学信息技术教育专业委员会(北京,普教系统)组织,易语言公司提供技术支持的"易语言在中小学实验与推广项目"已全面启动。 2006年1月10日-15日在浙江省首次举行中小学骨干教师开题培训。绍兴市中小学信息技术教育中心、绍兴县教师发展中心、绍兴柯桥中学承办了本次培训工作。 2006年由宁夏教育厅教研室和山东教育出版社编写的《初中信息技术·第3册下》已出版发行,全文讲解了易语言的程序设计方法。本教材已在宁夏的所有初中学校中使用。 2006年9月1日易语言公司参加南京软博会。公司随大连展团为期四天,参加在南京市举办的第2届中国(南京)国际软件产品博览会。 2006年10月26日-31日云南省易语言开题培训会召开。全国中小学计算机教育研究中心“易语言在中小学实验与推广项目”在云南省首次举行中小学以及职业高中骨干教师培训。 2006年12月14日,“易语言”项目培训工作在宁夏大学教育科学学院网络实验机房顺利举行。 2007年3月28日-4月1日1“易语言在中小学实验与推广项目”在大连市开题培训,全国中小学计算机教育研究中心“易语言在中小学实验与推广项目”于,在大连教育学院举行首次初中骨干教师培训。 十大自主创新产品奖 十大自主创新产品奖 2007年6月21日,中国软件自主创新论坛暨中国软件自主创新排行榜颁奖典礼在大连举行。“易语言汉语编程环境”获2007中国”十大自主创新软件产品奖。大连大有吴涛易语言软件开发有限公司的“易语言汉语编程环境”以软件自主开了一款全中文、全可视、跨平台的编程语言,在易语言及其编译器的设计与实现、可视化汉语编程的构建、提供多种语言版本等方面具有创新,在技术上居于国内领先地位,达到了当前同类产品的国际先进水平的原因被评为中国 “十大自主创新软件产品奖”。 2008年6月易语言第一部系统的视频学习教程《易语言百集教程》由世恒老师完成并发布。 2010年12月3日易语言运行时环境通过计算机病毒防治产品检验中心的安全检验,检验依据为:GA243-2000《计算机病毒防治产品评级准则》,检测结果:均未发现病毒。 [2] 语言组成编辑 支持库 易语言支持库类似于普通的程序的DLL文件。 这个支持库是易语言专用的,别的程序调用不了的,扩展名有fnr、fne、npk三种。 fnr、fne都是制作好的DLL文件,例如系统核心支持库、应用接口支持库。该类支持库一般由用户使用C++或Delphi制作,具体可以看易语言支持库开发手册。 npk属于易语言COM包装支持库,该支持库是引用COM包装库生成的,例如WebBrowser、Windows媒体播放器。该扩展名格式支持库可用记事本、写字板打开。该支持库可以由用户制作,制作方法:在易语言上点击工具--“类型库或OCX组件→支持库”命令。 模块

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

weixin_44952092

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值