700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 表格 树形结构 HTML 语言 CSS HTML介绍(示例代码)

表格 树形结构 HTML 语言 CSS HTML介绍(示例代码)

时间:2021-08-01 06:21:56

相关推荐

表格 树形结构 HTML 语言 CSS HTML介绍(示例代码)

一.什么是HTML

html(hypertext makeup language),中文名为超文本标记语言,他是一门能被浏览器解析成网页的标签语言,当我们使用浏览器访问网页时,那边就有一个服务端给你发送数据到你的浏览器上,而那些数据就包括html,然后被浏览器渲染成我们看到的那个样子,浏览器就相当于一个解释器解释html

二.网页的组成

我们网页的组成其实就是由三大部分组成的,俗称网页三件套:

html:最先出现,它包括一系列的标签,通过这些标签,把网络上的文档格式统一,使分散的Internet资源连接成一个逻辑整体,html命令可以说明文字、图形、动画、声音、表格、链接等;它在网页三件套中相当于一个没穿衣服的人;

css:用于装饰html,是网页变得更加美观;在网页三件套中相当于给html这个裸人穿上了衣服;

js:实现了网页的动态效果;在网页三件套中承担了使得html这个裸人跑起来的功能;

三.html文档树形结构图

上面我们已经对html有了一些了解,接下来咱们就来认识一些html的树形结构:

四.标签是什么

上面我们说html是标签语言,那什么是标签语言呢?

1.是由一对尖括号包裹的单词构成 例如: *所有标签中的单词不可能以数字开头.

2.标签不区分大小写如 和 . 推荐使用小写.

标签分为两部分: 开始标签 和 结束标签. 两个标签之间的部分 我们叫做标签体.

3.有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如:

4.标签可以嵌套.但是不能交叉嵌套.

五.标签的属性

1.通常是以键值对的方式出现,如:name = "luyi"

2.属性只能出现在开始标签和自闭标签

3.属性名字全部小写,属性值必须是用双或单引号引起来的

4.如果属性名和属性值一样,可以直接写属性名就行,如readonly

六.标签

现在我们开始正式讲标签了,接下来我们来看看标签;

标签是用来给浏览器开启一个标准模式的;

下面我就来讲讲为什么需要给浏览器开启标准模式:

由于历史的原因,各个浏览器在对页面的渲染上存在差异,甚至同一浏览器在不同版本中,对页面的渲染也不同。在

W3C标准出台以前,浏览器在对页面的渲染上没有统一规范,产生了差异(Quirks mode或者称为Compatibility

Mode);由于W3C标准的推出,浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars

mode),这就是二者最简单的区别。如果你的网页没有加入标签,那默认就是怪异模式(Quircks mode),那你的网页在不同的浏览器上就会有不同的样式,这也就是标签的作用了;

七.head标签

meta标签

meta标签共有两个属性:分别是http-equiv和name属性;

1.http-equiv属性,相当于http的文件头作用,他可以向浏览器传回一些有用的信息,以帮助正确地显示网页内容,与之对应的属性名为content,cotent中的内容其实就是各个参数的变量值;

//表示着两秒后跳转到

//设置编码方式为UTF8

2.name属性主要用于描述网页,与之对应的属性名为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的;

八.body标签

基本标签

//n为1-6的数值,从大到小,表示标题

//段落标签,包裹的内容被换行,而且上下内容之间有一行空白

//加粗标签

//为文字加上一条中线,还有标签也一样

//斜体标签

//上角标和小角标

//换行标签

//水平线标签//没功能的标签,但是我们会经常用到的

图形标签

img标签的属性

src:要显示的图片路径(常用)

alt:图片没加载成功时要显示的内容

title:鼠标放到这张图片时显示的文字

超链接标签

a标签的属性

href:要链接过去的url

target:_blank:在新的窗口打开超链接,如果是框架名称的话,就是在指定框架中打开链接内容

name:定义一个页面的书签

补充:a标签还可以实现在页面跳转(锚)的功能:

href: #id//跳转到id属性值为id的标签的位置

列表标签

无序列表:有序列表

一般与

标签一起用列表标题列表项

表格标签

table标签的属性

border:设置表格边框

cellpadding:内边距

cellspacing:外边距

table标签一般与以下标签一起使用

:表示行:表示列的数据:这一行数据的数据标题(不常用):为表格进行分区

他们的属性:rowspan:单元格竖跨多少行

colspan:单元格横跨多少行(即单元合并)

例子:

表单标签

(重点)

1.form标签属性:

action:表单要提交到哪去,一般指向服务器端一个程序,程序接收到表单提交过来的数据(即表单元素值)作相应处理,

比如/web,他还可以跳转到指定的网页,如index.html

method:表单提交的方式(get/post),默认是get

//get提交的键值对会放在地址栏后面,安全性相对较低,而且提交的内容长度是有限制的

//post提交的键值对不会放在地址栏后面,安全性相对较高,而且对提交内容的长度理论上无限制

2.表单元素之input标签

属性:

type: text 文本输入框

password 密码输入框

radio 单选框

//注意单选框中如果是二选一这种情况,就需要把两个多选框的name值设置成一样的,

然后value值设置为不同的

二选一例子:

boy:

girl:

checkbox 多选框

submit 提交按钮//f非常好用,点击它就会自动向服务端提交数据

button 按钮(常常配合js使用)

file 提交文件,如果要提交文件,form表单需要加上属性

enctype="multipart/form-data"

name:表单提交项的键,这个name非常重要,服务端获取数据就是通过这个name的值来获取的

value:表单提交项的值,对于不同的type,value属性的用法也不一样:

type="button", "reset", "submit" - 定义按钮上的显示的文本

type="text", "password", "hidden" - 定义输入字段的初始值

type="checkbox", "radio", "image" - 定义与输入相关联的值

checked:用于radio和checkbox设置默认选中

readonly:只读,用于text和password

disabled:对所有type类型都适用

表单元素之select的属性:

name:表单提交项的键

size:选项个数

与标签option一起用:

option标签就是下拉选中的每一项

属性:value:表单提交项的值

selected:selected下拉选默认被选中,可以直接写成selected

还有一个optgrounp,为每一项加上分组

例子:

apple

banana

pear

red

green

blue

表单元素之其他

文本域

属性:name:表单提交项的键

cols和rows:文本域默认有多少列和多少行

:用法:

姓名

//当用户点击姓名两字后鼠标会自动将焦点转到id为www的input去

例子:

登录信息

用户名:

密码:

例子的结果为:

!DOCTYPE>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。