欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  什么是 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