什么是 HTML?
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言,而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
html中,除了语义,其他什么都没有。
html是一个纯本文文件(就是用txt文件改名而成),用一些标签来描述文字的语义,这些标签在浏览器里面是看不到的,所以称为“超文本”,所以就是“超文本标记语言”了。
所以,接下来,我们肯定要学习一堆html中的标签对儿,这些标签对儿能够给文本不同的语义。
比如,面试的时候问你,h1标签有什么作用?
正确答案:给文本增加主标题的语义。
错误答案:给文字加粗、加黑、变大。
2、HTML的网络术语
网页 :由各种标记组成的一个页面就叫网页。
主页(首页) : 一个网站的起始页面或者导航页面。
标记: 称为开始标记 ,称为结束标记,也叫标签。每个标签都规定好了特殊的含义。
元素:称为元素。
属性:给每一个标签所做的辅助信息。
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词,比如 <html>
HTML 标签通常是成对出现的,比如 <b> 和 </b>
标签对中的第一个标签是开始标签,第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
在我们新建一个新的html文件的时候,总共会分为两部分,一部分是Html的头文件即<head>标签中的内容,还有一部分是Html的<body>即html 的主体。接下来先分开来看两这两部分。
同时html有着自己的一份规范
1)所有标记元素都要正确的嵌套,不能交叉嵌套。正确写法举例:
(2)所有的标记都必须小写。
(3)所有的标记都必须关闭。
双边标记:
单边标记: 转成 转成 ,还有
(4)所有的属性值必须加引号。<h1 id=”head”></h1>
(5)所有的属性必须有值。
任何一个标准的HTML页面,第一行一定是一个以
开头的这一行,就是文档声明头,DocType Declaration,简称DTD。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
PS:
XHTML:Extensible Hypertext Markup Language,可扩展超文本标注语言。
XHTML的主要目的是为了取代HTML,也可以理解为HTML的升级版。
HTML的标记书写很不规范,会造成其它的设备(ipad、手机、电视等)无法正常显示。
XHTML与HTML4.0的标记基本上一样。
XHTML是严格的、纯净的HTML
Head部分
首先从Head标签来开始看起,首先我们需要知道的是Head标签中并不会直接将内容展现在页面之中,更多的是隐藏的内容,同时Head中的内容会在Html中优先执行。在Head中常用的几种标签让我们一个一个的来看下都有哪些常用的。
1、<meta>标签
http-equiv属性
它用来向浏览器传达一些有用的信息,帮助浏览器正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。
其他实例
2、Link标签
3、script标签
这个script标签我们放到js部分去看
Body部分
HTML标签中有两类标签:
字体标签
排版标签
标题使用至标签进行定义。定义最大的标题,定义最小的标题。具有align属性,属性值可以是:left、center、right。
上小标这两个标签容易混淆,我们可以这样来记:b的意思是
除了这些标签之外,我们还有一些其他常用的符号,
:空格 (non-breaking spacing,不断打空格)
:小于号(less than)
:大于号(greater than)
:符号
:双引号
:单引号
:版权
:商标
<p>标签,段落:是英文paragraph的缩写。属性:align=’属性值’:对齐方式。属性值包括:left、center、right
示例:
在这里我们需要记住一点:p标签是一个文本级标签,p里面只能放文字、图片、表单元素,不可以放其他的。
<span>标签:与p标签有点类似是一个文本级的标签,不同点是不会单独新起一行去展示。
<div>标签:
div:把标签中的内容作为一个块儿来对待(division)。必须单独占据一行。
div标签的属性:
:设置块儿的位置。属性值可选择:left、right、 center
如果单独在网页中插入这两个元素,不会对页面产生任何的影响。div元素是专门为定义CSS样式而生的。或者说,DIV+CSS来实现各种样式。
。行内元素与块级元素直观上的区别
行内元素会在一条直线上排列,都是同一行的,水平方向排列
块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。
块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
行内元素与块级元素属性的不同,主要是盒模型属性上
3、超链接
超链接有下面两种常用形式:
外部链接:链接到外部文件。举例:
a是英语“锚”的意思,就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。
锚链接:
指给超链接起一个名字,作用是在本页面或者其他页面的的不同位置进行跳转。比如说,在网页底部有一个向上箭头,点击箭头后回到顶部,这个就是利用到了锚链接。
首先我们要创建一个锚点,也就是说,使用属性或者属性给那个特定的位置起个名字。效果如下
图片标签<img>
:宽度
:高度
:提示性文本。公有属性。也就是鼠标悬停时出现的文本。
:指图片的水平对齐方式,属性值可以是:left、center、right
:当图片显示不出来的时候,代替图片显示的内容。
文本级的标签显示在浏览器上时,不管你的图片多高,它总会底边对齐,这是一种现象,“高矮不齐,底边对齐”。
此时大家可以给图片设置align属性,来查看效果吧!
注意事项:
(1)如果要想保证图片等比例缩放,请只设置width和height中其中一个。
(2)如果想实现图文混排的效果,请使用align属性,取值为left或right。
4、表格
表格标签用表示。
一个表格是由每行组成的,每行是由组成的。
所以我们要记住,一个表格是由行组成的(行是由列组成的),而不是由行和列组成的。
在以前,要想固定标签的位置,唯一的方法就是表格。现在可以通过CSS定位的功能来实现。但是现在在做页面的时候,表格作用还是有一些的。
例如,一行的单元格:
如果我们需要多行
:边框。像素为单位。
:单元格的线和表格的边框线合并
:宽度。像素为单位。
:高度。像素为单位。
:表格的边框颜色。
:表格的水平对齐方式。属性值可以填:left right center。
注意:这里不是设置表格里内容的对齐方式,如果想设置内容的对齐方式,要对单元格标签进行设置)
:单元格内容到边的距离,像素为单位。默认情况下,文字是紧挨着左边那条线的,即默认情况下的值为0。
注意不是单元格内容到四条边的距离哈,而是到一条边的距离,默认是与左边那条线的距离。如果设置属性,那就指的是内容到右边那条线的距离。
:单元格和单元格之间的距离(外边距),像素为单位。默认情况下的值为0
:表格的背景颜色。
:背景图片。
背景图片的优先级大于背景颜色。
一个表格就是一行一行组成的嘛。
属性:
:公有属性,设置这一行单元格内容的排列方式。可以取值::从左到右(left to right,默认),:从右到左(right to left)
:设置这一行的单元格的背景色。
注:没有background属性,即:无法设置这一行的背景图片,如果非要设置,可以用css实现。
:一行的高度
:一行的内容水平居中显示,取值:left、center、right
:一行的内容垂直居中,取值:top、middle、bottom
属性:
:内容的横向对齐方式。属性值可以填:left right center。
如果想让每个单元格的内容都居中,这个属性太麻烦了,以后用css来解决。
:内容的纵向对齐方式。属性值可以填:top middle bottom
:绝对值或者相对值(%)
:单元格的高度
:设置这个单元格的背景色。
:设置这个单元格的背景图片。
如果要将两个单元格合并,那肯定就要删掉一个单元格。
单元格的属性:
:横向合并。例如表示当前单元格在水平方向上要占据两个单元格的位置。
:纵向合并。例如表示当前单元格在垂直方向上
表单标签用表示,用于与服务器的交互。表单就是收集用户信息的,就是让用户填写的、选择的。
属性:
:表单的名称,用于JS来操作或控制表单时使用;
:表单的名称,用于JS来操作或控制表单时使用;
:指定表单数据的处理程序,一般是PHP,如:action=“login.php”
:表单数据的提交方式,一般取值:get(默认)和post
form标签里面的action属性和method属性,在后面课程给大家讲解。稍微说一下:action属性就是表示,表单将提交到哪里。 method属性表示用什么HTTP方法提交,有get、post两种。
get提交和post提交的区别:
GET方式:
将表单数据,以”name=value”形式追加到action指定的处理程序的后面,两者间用”?”隔开,每一个表单的”name=value”间用”&”号隔开。
特点:只适合提交少量信息,并且不太安全(不要提交敏感数据)、提交的数据类型只限于ASCII字符。
POST方式:
将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见。Action指定的处理程序可以获取到表单数据。
特点:可以提交海量信息,相对来说安全一些,提交的数据格式是多样的(Word、Excel、rar、img)。
Enctype:
表单数据的编码方式(加密方式),取值可以是:application/x-只能在POST方式下使用。
Application/x-默认加密方式,除了上传文件之外的数据都可以
Multipart/form-data:上传附件时,必须使用这种编码方式。
用于接收用户输入。
属性:
:文本类型。属性值可以是:
(默认)
:密码类型
:单选按钮,名字相同的按钮作为一组进行单选(单选按钮,天生是不能互斥的,如果想互斥,必须要有相同的name属性。name就是“名字”。
)。非常像以前的收音机,按下去一个按钮,其他的就抬起来了。所以叫做radio。
:多选按钮,名字相同的按钮作为一组进行选择。
:将单选按钮或多选按钮默认处于选中状态。当标签的时,可以用这个属性。属性值也是checked,可以省略。
:隐藏框,在表单中包含不希望用户看见的信息
:普通按钮,结合js代码进行使用。
:提交按钮,传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后,这个表单就会被提交到form标签的action属性中指定的那个页面中去。
:重置按钮,清空当前表单的内容,并设置为最初的默认值
:图片按钮,和提交按钮的功能完全一致,只不过图片按钮可以显示图片。
:文件选择框。
提示:如果要限制上传文件的类型,需要配合JS来实现验证。对上传文件的安全检查:一是扩展名的检查,二是文件数据内容的检查。
:文本框里的默认内容(已经被填好了的)
:表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。
注意size属性值的单位不是像素哦。
:文本框只读,不能编辑。因为它的属性值也是readonly,所以属性值可以不写。
用了这个属性之后,在google浏览器中,光标点不进去;在IE浏览器中,光标可以点进去,但是文字不能编辑。
:文本框只读,不能编辑,光标点不进去。属性值可以不写。
标签里面的每一项用表示。select就是“选择”,option“选项”。
select标签和ul、ol、dl一样,都是组标签。
标签的属性:
:可以对下拉列表中的选项进行多选。没有属性值。
:如果属性值大于1,则列表为滚动视图。默认属性值为1,即下拉视图。
标签的属性:
:预选中。没有属性值。
如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h59983.shtml