web html介绍笔记,WEB 之 HTML 系列笔记

WEB简介及浏览器内核

网页主要由文字、图像和超链接等元素构成。当然,除了这些元素,网页中还可以包含音频、视频以及Flash等。

浏览器的内核

负责读取网页内容, 整理讯息, 计算网页的显示方式并显示页面。

浏览器

内核

备注IE

Trident

IE、猎豹安全、360极速浏览器、百度浏览器

firefox

Gecko

可惜这几年已经没落了,打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。

Safari

webkit

现在很多人错误地把 webkit 叫做 chrome内核(即使 chrome内核已经是 blink 了)。苹果感觉像被别人抢了媳妇,都哭晕再厕所里面了。

chrome

Chromium/Blink

在 Chromium 项目中研发 Blink 渲染引擎(即浏览器核心),内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发

Opera

Presto

Presto(已经废弃) 是挪威产浏览器 opera 的 "前任" 内核,为何说是 "前任",因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了。 现在用blink内核。

注意

移动端的浏览器内核主要说的是系统内置浏览器的内核。

Android手机而言,使用率最高的就是Webkit内核,大部分国产浏览器宣称的自己的内核,基本上也是属于webkit二次开发。

iOS以及WP7平台上,由于系统原因,系统大部分自带浏览器内核,一般是Safari或者IE内核Trident的

Web标准

由W3C组织和其他标准化组织制定的一系列标准的集合。

Web标准的好处:

1、让Web的发展前景更广阔

2、内容能被更广泛的设备访问

3、更容易被搜寻引擎搜索

4、降低网站流量费用

5、使网站更易于维护

6、提高页面浏览速度

Web标准构成

结构标准: 结构用于对网页元素进行整理和分类, HTML。对于网页来说最重要的一部分

表现标准: 表现用于设置网页元素的版式、颜色、大小等外观样式, 主要指的是CSS

行为标准: 行为是指网页模板的定义及交互的编写, Javascript

HTML

HTML指的是超文本标记语言(Hyper Text Markup Lanugage)是用来描述网页的一种语言。

html的骨架

骨架标签定义及说明

标签名

定义

说明

HTML标签

页面中最大的标签,根标签

文档的头部

注意在head标签中我们必须要设置的标签是title

文档的标题

网页标题

文档的主体

元素包含文档的所有内容,页面内容 基本都是放到body里面的

HTML元素标签分类

常规元素(双标签)

内容 标签名>

该语法中“”表示该标签的作用开始,一般称为“开始标签(start tag)”,“标签名>” 表示该标签的作用结束,一般称为“结束标签(end tag)”。

和开始标签相比,结束标签只是在前面加了一个关闭符“/”。

空元素(单标签)

空元素 用单标签来表示, 简单点说,就是里面不需要包含内容, 只有一个开始标签不需要关闭。

文档类型

声明位于文档中的最前面的位置,处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

HTML 常用标签

标题标签 h

标题标签语义: 作为标题使用, 并且依据重要性递减

基本语法

标题文本

标题文本

标题文本

标题文本

标题文本
标题文本

段落标签 p

​作用语义: 把文档分割为若干段落

文本内容

水平线标签 hr

作用语义: 默认样式的水平线


HTML 表格

table 标签

table 表格基本语法*

表头内容
单元格内的文字
代表一行 内只能嵌套 代表单元格标签可以容纳所有的元素 表头元素

表格属性

属性名

含义

常用属性值border

设置表格的边框

像素值

cellspacing

设置单元格与单元格边框之间的空白间距

像素值(默认为2px)

cellpadding

设置单元格内容与单元格边框之间的空白间距

像素值(默认为1px)

width

设置表格的宽度

像素值

height

设置表格的高度

像素值

alian

设置表格再网页钟的水平对齐方式

left, center,right

表格标题 caption

定义和用法

合并单元格

跨行合并: rowspan="合并单元格的个数"

跨列合并: colspan="合并单元格的个数"

合并的顺序按照 先上 后下 先左 后右 的顺序

例如:

总结表格

标签名

定义

说明

表格标签

就是一个四方的盒子

表格行标签

行标签要再table标签内部才有意义

单元格标签

单元格标签是个容器级元素,可以放任何东西

表头单元格标签

它还是一个单元格,但是里面的文字会居中且加粗

表格标题标签

表格的标题,跟着表格一起走,和表格居中对齐

clospan 和 rowspan

合并属性

用来合并单元格的表格提供了HTML 中定义表格式数据的方法。

表格中由行中的单元格组成。

表格中没有列元素,列的个数取决于行的单元格个数。

表格不要纠结于外观,那是CSS 的作用。

表格的学习要求: 能手写表格结构,并且能简单合并单元格。

列表标签

容器里面装载着结构, 样式一致的文字或图标的一种形式, 叫列表

无序列表

无序列表的各个列表项之间没有顺序级别之分, 是并列的。其基本语法格式:

  • 列表项1
  • 列表项2
  • 列表项3

······

注意:

, 直接再与之间相当于一个容器,可以容纳所有元素。

有序列表

有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义,有序列表的基本语法格式如下:

  1. 列表项1
  2. 列表项2
  3. 列表项3

······

自定义列表

定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。其基本语法如下:

名词1
名词1解释1
名词1解释2

...

名词2名词2解释1名词2解释2

...

例如:

页面底下的帮助页面

列表总结

标签名

定义

说明

无序标签

里面只能包含li 没有顺序,布局中最常用的列表

有序标签

里面只能包含li 有顺序, 使用情况较少

自定义列表

dt 和 dd, 创建网页下帮助信息

表单标签

跟用户进行交互,收集用户资料,此时也需要表单。包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

input 控件

属性

属性值

描述type

text

单行文本输入框

password

密码输入框

radio

单选按钮

checkbox

复选框

button

普通按钮

submit

提交按钮

reset

重置按钮

image

图像形式的提交按钮

file

文件域

name

由用户自定义

控件向后台提交的名称

value

由用户自定义

input空间中的默认文本值

size

正整数

input空间在页面中的显示宽度

checked

checked

定义在选择空间默认被选中的项

maxlength

正整数

空间允许输入的最多字符数type属性

属性通过改变值可以决定了属于哪种input表单用户名:

密 码:

value属性

value 默认的文本值, 默认写入的文字。

用户名:

name属性

name表单的名字, 这样,后台可以通过这个name属性找到这个表单。 页面中的表单很多,name主要作用就是用于区别不同的表单。

ajax和后台交互时用到男

checked属性

表示默认选中状态。 较常见于 单选按钮和复选按钮。

下面表示男被默认选中

性 别:

label标签

label标签主要目的是为了提高用户体验。 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

第一种用法就是用label直接包括input表单。 用户名:

适合单个表单选择

第二种用法 for 属性规定 label 与哪个表单元素绑定。男

textarea空间(文本域)

通过textarea控件可以轻松地创建多行文本输入框.

cols="每行中的字符数" rows="显示的行数"

文本内容

文本框和文本域区别

表单

名称

区别

默认值显示

用于场景input type="text"

文本框

只能显示一行文本

单标签,通过value显示默认值

用户名、昵称、密码等

textarea

文本域

可以显示多行文本

双标签,默认值写到标签中间

留言板

select 下拉列表

有多个选项让用户选择, 为了节约空间,我们可以使用select空间定义下拉列表

选项1

选项2

选项3

...

中至少包含一对 option

在option 中定义selected =" selected "时,当前项即为默认选中项。

form表单域

在HTML中,form标签被用于定义表单域,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。

各种表单控件

常用属性:

属性

属性值

作用action

url地址

用于指定接收并处理表单数据的服务器程序的url地址。

method

get/post

用于设置表单数据的提交方式,其取值为get或post。

name

名称

用于指定表单的名称,以区分同一个页面中的多个表单。

内容来源于网络如有侵权请私信删除

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/566531.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机怎样旋转桌面,win7电脑怎么设置翻转屏幕

在深度win7之中使用投影仪或者是一些外置视频输出设备的时候,用户可能会有翻转屏幕的需求。那么大家知道win7电脑怎么设置翻转屏幕吗?今天学习啦小编与大家分享下win7电脑设置翻转屏幕的具体操作步骤,有需要的朋友不妨了解下。win7电脑设置翻转屏幕方法…

从入门到精通 pdf_【推荐】铅笔素描从入门到精通pdf|素描基础教程电子书下载!...

铅笔素描从入门到精通pdf|素描基础教程电子书下载!铅笔素描从入门到精通pdf|素描基础教程电子书下载!铅笔素描从入门到精通pdf|素描基础教程电子书下载!如果你的基础太薄弱,不建议自己瞎摸索,你可以关注一下公众号&…

计算机科学和软件工程区别,计算机科学和软件工程的区别

澳洲热门 IT 计算机专业,许多学校对于专业也有不同的细分以及课程安排。今天就来单独解析下 computer science 计算机科学或 Software Engineering 软件工程,两个专业的区别 ?Computer Science 侧重于计算机的基础,包括算法,计算…

参数估计_状态估计的基本概念(1)参数估计问题

(1)参数估计问题定义如果一个系统的参数随时间而改变,那么称它为“时变的参数”;如果系统的参数不随时间而改变,那么称它为“时不变的参数”。对参数 (时不变)的估计问题定义如下:其…

郑州财税金融职业学院的计算机考试,郑州财税金融职业学院考试流程

考试是教学过程中的一个重要环节,为了考试工作的顺利进行,考试的考务管理、流程及组织工作至关重要。课程考核方式由学期末教务处发布新学期教学工作安排,确定教学计划及下学期课程考核方式。一、命题1.命题工作由院系部主任负责组织。凡建立…

python井字棋游戏人机对战_用Python做一个井字棋小游戏

井字棋是一个经典的小游戏,在九宫格上玩家轮流画OXO,当每列或每行或是两个对角成一线时便是获胜。今天就用Python编写一个井字棋小游戏,与电脑对战。程序执行画面如下图所示:程序提供了两种人工智能选择,一个是强人工智能另一个是…

计算机管理内默认共享,关于Windows的默认共享介绍

C:\Documents and Settings\Administrator>net share ?此命令的语法是:NET SHAREsharenamesharenamedrive:path [/GRANT:user,[READ | CHANGE | FULL]][/USERS:number | /UNLIMITED][/REMARK:"text"][/CACHE:Manual | Documents| Programs | BranchCache | None]…

中绘制折线_漂亮图表也可信手拈来,一文学会用Python绘制堆积折线图

今天咱们还是接着上次的话题,继续和大家聊聊关于Python绘图相关的东东哦,上次已经和大家讨论完了如何给自己所绘制的图表中添加装饰线以及修改装饰线密度的方法,今天呢,咱们再聊点的新的东东哦,还是和大家继续深耕Pyth…

计算机病毒的危害主要体现于对计算机系统的信息破坏和,2014年中央电大专科信息技术应用理论题.doc...

一村一《信息技术应用》复习资料(注:仅提供理论题30分,操作题请大家按照下发的自测光盘综合练习多做多练,考试范围难度差不多)第1套一、单选题1.某单位的人事档案管理程序属于(应用软件)2.微机的核心部件是(微处理器 )3.内存储器根据工作方式的不同可以分…

seo vue 动态路由_VUE项目SEO问题的解决

1. SEOSEO(搜索引擎优化):搜索引擎优化的中文翻译。使用搜索引擎的规则来提高网站的自然排名相关的搜索引擎。当一个网络爬虫抓取网页的内容,它需要分析的内容页面。要点如下:阅读内容的关键字和描述元标签。抓取和分析基于语义html标记的内容。的影响一个网站,作为一个整体使用…

计算机电缆对绞节距,DJYPVP阻燃计算机电缆32/0.2芯数直径

电缆敷设在既有正压力作用又有拉力作用的场合(如水中、垂直竖井或落差较大的土壤中),应选用具有内钢丝铠装的结构型。外护套外护套是保护电线电缆的绝缘层防止环境因素侵蚀的结构部分。外护套的主要作用是提高电线电缆的机械强度、防化学腐蚀、防潮、防水浸人、阻止…

php 监听端口数据客户端ip_PHP做端口监听示例代码

1,PHP端口监听之服务器端复制代码 代码示例:// Server// 设置错误处理error_reporting(E_ALL);// 设置运行时间set_time_limit(0);// 起用缓冲ob_implicit_flush();$ip "127.0.0.1"; // IP地址$port 1000; // 端口号$socket socket_create(AF_INET, SO…

软件测试条件组合覆盖三角形,软件测试三角形问题(覆盖测试)

软件测试三角形问题(覆盖测试) (9页)本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦!9.9 积分成绩辽宁工程技术大学上机实验报吿课程名称软件测试与评估实验题目基于覆盖测试技术院系软件学院专业软件工…

flog和flag_FLAG:写作,英语和持续学习

新年计划一:日更千字只差一个月就可以完成日更100字的任务了。日更百字对我来说已经不再是一种负担和任务,而是每天碎碎念的日记,解压的方式。但是我知道这些碎碎念的日记本质上是没有用的。既没有信息增量,也没有变现价值&#x…

设备dp信号测试软件,DP信号完整性测试,信号质量测试

DP信号完整性测试,信号质量测试在视频和音频内容通过DP link发送并显示在显示屏上之前,在DPsource和sink(可能还有分支装置)之间已经进行了大量通信。DP主数据Link中的多媒体内容传输与数据link的类似程度高于DVI或HDMI。另外连接之前的握手也比纯插件要…

软件测试报告费计什么科目,软件记什么会计科目

1软件记什么 会计 科目会计学的研究对象包括会计的所有方面,如会计的性质、对象、职能、任务、方法、程序、组织,制度、技术等。会计学用自己特有的概念和理论,概括和总结它的研究对象。接下来小编就告诉你软件记什么会计科目。根据《企业会计…

php mysql 统计_PHP和MySQL实现优化统计每天数据

在互联网项目中,对项目的数据分析必不可少。通常会统计某一段时间内每天数据总计变化趋势调整营销策略。下面来看以下案例。案例在电商平台中通常会有订单表,记录所有订单信息。现在我们需要统计某个月份每天订单数及销售金额数据从而绘制出如下统计图&a…

专科计算机专业能报考南方电网,大学毕业想进国家电网?3大条件不可或缺!专科生也有报考机会...

国家电网是许多学子心目中理想的工作,每年的毕业季都有国家电网进入校园招聘。同时每年报考国家电网的人数大概在40万左右,今天,小编就来带大家盘点一下,报考国家电网需要满足哪些条件,方便大四学生对照要求&#xff0…

计算机中丢失了ll是什么意思,丢失了ntoskrnl.exe和hal.ll

满意答案hal.dll丢失、损坏、找不到等情况的解决办法1.尝试使用windows光盘启动,按提示选择修复,再选择启动到故障恢复控制台,输入管理员口令,一部分用户安装时并没有输入管理员口令,可以直接按回车通过。当系统成功的…

执行计划 分析一条sql语句的效率 mysql_mysql的SQL语句执行计划分析:EXPLAIN

数据库最常见的操作就是查询了,我们经常要用"SELECT"语法对已有的表进行某种检索,但是在实际应用中,查询前我们并不知道该查询会如何运行、会使用多少时间、会涉及多少字段和记录,每次输入了SQL语句,点击运行…