OMG前端之HTML

HTML概念定义

　　html是一个纯本文文件（就是用txt文件改名而成），用一些标签来描述文字的语义，这些标签在浏览器里面是看不到的，所以称为“超文本”，所以就是“超文本标记语言”了。

  • 　　HTML 指的是超文本标记语言: HyperText Markup Language 　　
  • 　　HTML 不是一种编程语言，而是一种标记语言 　
  • 　　标记语言是一套标记标签 (markup tag) 　　　　
  • 　　HTML 使用标记标签来描述网页 　　
  • 　　HTML 文档包含了HTML 标签及文本内容 　　
  • 　　HTML文档也叫做 web 页面 　　
  • 　　HTML文档通过web浏览器来解析,显示所写内容 　　
  • 　　HTML文档的后缀名一般是.html(推荐)

HTML标签格式　　

　 HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  •        HTML 标签是由尖括号包围的关键词，比如 <html>
  •        HTML 标签通常是成对出现的，比如 <b> 和 </b>
  •        标签对中的第一个标签是开始标签，第二个标签是结束标签
  •        开始和结束标签也被称为开放标签和闭合标签
  •        有一些标签功能比较简单,使用一个标签即可,这种标签叫做自闭和标签:例如<br/>换行 <hr/>下划线 <input/>文本框<img/>图片
<h1>内容</h1>   标签对儿      主标题。
<h2>内容</h2>   标签对儿      二级标题。
<p>内容</p>     标签对儿      普通段落。

HTML标签属性　

  • 　　通常是以键值对形式出现的. 例如 name="alex"
  • 　　属性只能出现在开始标签 或 自闭和标签中.
  • 　　属性名字全部小写. *属性值必须使用双引号或单引号包裹 例如 name="alex"
  • 　　如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly

HTML整体结构　　

　　

  • 　　<!DOCTYPE html>  告诉浏览器使用什么样的html或者xhtml来解析html文档
  • 　　<html></html>      是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部<head>和主体<body>。
  • 　　<head></head>    元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。
  • 　　<title></title>         定义网页标题，在浏览器标题栏显示。 
  • 　　<body></body>    之间的文本是可见的网页主体内容

   　　　　　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　简版html文档树形结构图

<!DOCTYPE >标签

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

作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。

document.compatMode：
BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat

<head>标签

　　<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

 　　文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

head标签下可以分为两种标签 meta标签 和 非meta标签

meta标签

  • <meta>元素可提供有关页面的元信息（meta-information），针对搜索引擎和更新频度的描述和关键词。
  • <meta>标签位于文档的头部，不包含任何内容。
  • <meta>提供的信息是用户不可见的

meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。 

(1)name属性：主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。  

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">

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

<meta http-equiv="Refresh" content="2;URL=https://www.360.com"> //(注意后面的引号，分别在秒数的前面和网址的后面)

非meta标签

详情请点击 <link> <meta>  <script>, <style> <title>

注意： <title> 定义文档的标题，它是 head 部分中唯一必需的元素。

例：下面代码简单阐释了下head头部信息的一些标签

<!DOCTYPE html>　　　　　　　　　　　　　　　　　　　　　　 # 声明
<html lang="en"> 
<head>                        　　　　　　　　         # 头部信息,包含的数据并不会真正作为内容显示给用户
    <meta charset="UTF-8">　　　　　　　　　　　　　　   # 设定编码格式为utf8
    <title>病毒尖er</title>           　　　　　　　　  # 标题描述
    <!--<meta http-equiv="Refresh" content="2;url=https://www.baidu.com">-->     # 此代表刷新的概念,即过俩秒跳转到指定的url
    <meta http-equiv="Refresh" content="2">　　　　　　　　　　　　　　　　　　　　　　 # 即每俩秒自动刷新
    <meta name="keywords" content="汽车">　　　　　　　　　　　　　　　　　　　　　　　　# 搜索关键词
    <meta name="description" content="爱卡选车中心汽车大全页为您提供最新车型报价及图片、排行榜">  # 描述内容
    <link rel="icon" href="汽车.ico">             　　　　　　　　　　　　　　　　　　　　　　   # 标题图片
</head>
<body>                                     　　　　　　　　　　　　　　　　　　　　　　 # body标签里面所包含是真正呈现给用户的数据
    <h1 style="color: chartreuse">这里是爱卡选车中心....</h1>  
</body>
</html>

<body>标签

 基本标签（块级标签和内联标签）

 块级标签 

　　HTML块级通过标签<div>来定义,以上标签可以称之为块级标签

　　注释：<div> 是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符，通俗讲独占一行

　　提示：请使用 <div> 元素来组合块级元素，这样就可以使用样式对它们进行格式化。

 内联标签

　　注释：span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

　　提示：请使用 <span> 来组合行内元素，以便通过样式来格式化它们。

<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.

<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.

<b> <strong>: 加粗标签.

<strike>: 为文字加上一条中线.

<em>: 文字变成斜体.

<sup>和<sub>: 上角标 和 下角表.

<br>:换行.

<hr>:水平线

块级标签：<p>  <h1>  <table>  <ol>  <ul>  <form>  <div>

内联标签：<a>  <input>  <img>  <sub>  <sup>  <textarea>  <span>

特殊符号有很多很多,例如  &lt 小于 &gt 大于 &copy 版权   更多请点击

图像

HTML 图像通过标签 <img> 来定义

<img src="picture.jpg" width="100" height="60" />
  • img 表示创建一个图片对象
  • src 表示图片的路径 
  • width 图片的宽度
  • height 图片的高度
  • alt 图片没有加载成功的提示
  • title 鼠标悬浮时的提示信息(当然还有其它的属性)

表单标签

HTML表单通过标签<form>来定义

      功能：表单用于向服务器传输数据，从而实现用户与Web服务器的交互

      表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。

　  表单还可以包含textarea、select、fieldset和 label标签。

<input>

—可以理解为输入属性，input属性type="以下"

  • text              文本输入
  • password    密文输入
  • checkbox    多选框
  • radio           单选框
  • file              上传文件（form表单需要加上属性enctype="multipart/form-data"）
  • reset           重置;即所填写的内容进行清空操作
  • submit        提交按钮
  • button         按钮;需要配合js使用

补充

name: 表单提交项的键，只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
注意name和id属性的区别：name属性是和服务器通信时使用的名称；而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css、javascript中使用的

value: 表单提交项的值.对于不同的输入类型，value 属性的用法也不同

checked: radio 和 checkbox 默认被选中

readonly: readonly 属性规定输入字段为只读。 text 和 password

disabled: 属性规定应该禁用 input 元素，对所用input都好使

更多input详情请猛戳　

<select> 

— 下拉框

  • mutiple 多选
  • size 显示在页面的最大限制
  • name 提交项的键    以上三个属性为select内的属性
  • option下拉选中的每一项 属性：value:表单提交项的值. selected: selected下拉选默认被选中
  • optgroup 为每一项加上分组

<textarea>

— 多行文本框

  • name: 表单提交项的键. 文本框内容即为提交的值
  • cols: 文本域默认有多少列
  • rows: 文本域默认有多少行

<fieldset>

<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。

当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。

<label>

定义：<label> 标签为 input 元素定义标注（标记）。
说明：
1 label 元素不会向用户呈现任何特殊效果。
2 <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

 

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　————未完待续。

posted @ 2017-10-12 08:41  panda_R  阅读(92)  评论(0)    收藏  举报