HTML

HTML简介

有人会说，网页就是html，那这样理解的话就大错特错，因为在一个网页中有很多东西都是html完成不了的。如特效、复杂的排版等等。所以说html是定义了一套语法规则，而不是我们所认为的就是网页。那么html长什么样？简单的说也就定义如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

也许有的朋友看过许多网站的源代码，乍一看几千行，头就大了，更别说研究了，如果有了解HTML的朋友会发现，把源代码拆开来看就会发现如上所示，所有的功能都是在里面完成的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>hello world</h1>
</body>
</html>
代码

而HTML文档就是一系列的Tag组成，最外层的Tag是<html>。规范的HTML也包含<head>...</head>和<body>...</body>（注意不要和HTTP的Header、Body搞混了），由于HTML是富文档模型，所以，还有一系列的Tag用来表示链接、图片、表格、表单等等。下面就来具体介绍这些标签了

什么是标签

对HTML来说，可以简单的理解为网页标签就是网页浏览的标示符，就像一个人的名字来代表一个人一样。而不同的标签又代表着不同的功能和样式。

在HTML中，标签是放以<>中开始以</>结束的基本格式，当然也有<>开始和结束，这种属于自闭合标签，在<>内有规定的内容，我们自己随意定义的，浏览器会不识别，内部填写不区分大小写。

在HTML中，细心的朋友会发现我们打开编译器时，编译器会默认的给出<html></html>和<head></head>和<body></body>三种基本的标签。那么这三种标签代表的含义是什么？

  • <html> </html>这是一对超文本开始与结束标签
  • <head></head>是一对头部声明标签，如标题标签、JS链接、CSS链接都是放入此对标签内
  • <body></body>是一定内容标签，即要显示内容都放入此标签内

下面主要介绍<head></head>和<body></body>两种标签

head标签

我们打开编译器时，编译器会默认给出meta标签和title标签在head标签里面。此时我们可以分为meta标签和非meta标签两类去理解。

meta标签

在一个网页中meta标签常常被用做网页关键字、网页介绍、作者、网页编码、robots、自动跳转等声明及说明标签。

网页中常见的字符集编码如下

中文：<meta http-equiv="Content-Type" content="text/html;charset=utf8" />，可以简写为<meta charset="UTF-8">

网页制作信息

<meta name="author" content="Evance" />

网页关键字说明

<meta name="keywords" content="abc,xxx,defg,xyz" />

网页简历说明

<meta name="description" content="你很帅等等" />

自动跳转（此标签用法可以让网页在2秒后自动从当前页面跳转到另外一个网页页面或网站）

<meta http-equiv="Refresh" content="2;URL=http://www.baidu.com" /> 

  • Content后跟值为当前页面在多少时间跳转；
  • Url值为跳转到具体网页网站

网页告诉搜索机器人向导对此网页操作（用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引）

<meta name="robots" content="all" /> 一般情况下我们用不到
content的参数有all,none,index,noindex,follow,nofollow。默认是all。如果在一个页面不加入此标签默认情况下content="all"意思是搜索并收录抓取爬行此网页及此网页指向页面。

我们会注意到在meta后面会有name 和 http-equiv，这就是meta标签的两种属性，不同的属性又有不同的参数值(后面跟的就是)

  • name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。     
  • http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content

非meta标签

顾名思义除了meta意外的

<title>titile</title>
<link rel="icon" href="http://www.jd.com/favicon.ico">
<link rel="stylesheet" href="css.css">
<script src="hello.js"></script>　

以link为例，最常见的就是<link> 标签最常见的用途是链接外部样式表，外部资源。

  • href 值为外部资源地址，这里是css的地址
  • rel 定义当前文档与被链接文档之间的关系,这里是外部css样式表即stylesheet
  • type 规定被链接文档的 MIME 类,这里是值为text/css

body标签

<h1>：加黑，加大
<p>:换行和隔行  块级标签
<br>:换行
<hr>:分割线
<a href="">  链接   锚(#id属性)
<img src="" alt="" title="">
<ul>  <ol>  <dl>: 列表标签
<table border="1" cellspacing  cellpadding> : 表格标签  
<div>  <span>
    
<form>表单 里面的其它标签等等
常用标签

基本标签

<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.
<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.
<b> <strong>: 加粗标签.
<strike>: 为文字加上一条中线.
<em>: 文字变成斜体.
<sup>和<sub>: 上角标 和 下角表.
<br>:换行.
<hr>:水平线
<div><span>

<a>锚文本超链接标签

基本格式

<a href="网址、链接地址" target="目标" title="说明">被链接内容</a>

<a>标签内属性

href：打开目标地址（网址），一般填写将要转到目标地址。如href="http://www.baidu.com/"这样浏览者在网页中鼠标点击对应此锚文本将打开到网页http://www.baidu.com/　　

target：打开目标方式
如果a标签内没有此元素，默认是在浏览网页中重新载入对应链接网页
_blank ：新建标签窗口页，设置此属性，点击锚文本后对应新建标签网页窗口卡打开对应地址
_parent：父级打开网页，此属性可以理解为本页网页从新载入锚文本的网页，针对html框架iframe网页中，整个网页将重新载入打开目标网址地址

举个简单实例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            height: 300px;

        }
        #div2{
            height: 300px;

        }
        #div3{
            height: 300px;

        }

    </style>
</head>
<body>
    <a href="#div1">第一章</a>
    <a href="#div2">第二章</a>
    <a href="#div3">第三章</a>

    <div id="div1">
        第一张<br>
        <img src="1.jpg" alt="hehe" title="汽车">
    </div>
    <div id="div2">
        第二张<br>
        <img src="1.jpg" alt="hehe" title="汽车">
    </div>
    <div id="div3">
        第三张<br>
        <img src="1.jpg" alt="hehe" title="汽车">
    </div>


</body>
</html>
A标签链接示例

列表标签

分为有序列表、无序列表和定义列表

ol li有序列表标签语法与结构

<ol> 
    <li>内容一</li> 
    <li>内容二</li> 
    <li>内容三</li> 
</ol>

Ul li无序列表标签语法与结构

<ul> 
    <li></li> 
    <li></li> 
    <li></li> 
</ul>

具体使用和ol 有序标签相同

dl定义列表　　

html <dl> <dt> <dd>是一组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又叫表格标签，与table表格类似组合标签，故名我们也叫dl表格

dl dt dd列表标签语法

<dl>
<dt>列表标题</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
...
</dl>

首先dt和dd是放于dl标签内，标签dt与dd处于dl下相同级。也就是dt不能放入dd内，dd不能放入dt内。在dl下，dt与dd处于同级标签。DD标签可以若干。同时不能不加dl地单独使用dt标签或dd标签。

表格标签　<table>　

border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
 像素 百分比.（最好通过css来设置长宽）
<tr>: table row

         <th>: table head cell

         <td>: table data cell

rowspan: 单元格竖跨多少行

colspan:  单元格横跨多少列（即合并单元格）

<th>: table header <tbody>(不常用): 为表格进行分区.

图形标签 <img>　　

语法结构

<img src="图片路径" width="175" height="47" alt="" title='描述'>
  • Src 跟图片路径
  • Width 设置图片宽度
  • Height 设置图片高度
  • Alt 没有加载成功时的提示　
  • title: 鼠标悬浮时的提示信息

form表单

Form表单区域标签语法与结构

<form action="" method="get"> </form>
或
<form action="" method="post"> </form>
  • action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理
  • Method的值为get时，是通过URL传内容与参数,这个时候我们通过网址URL能看见自己填写内容提交处理
  • Method的值为post时，是通过类似缓存传填写内容与参数，而URL是不能看到form表单填写内容提交内容。

所以get方式较post方式不安全

Form表单区域标签使用说明 

比如我们要写一个简单的登陆注册界面就需要很多用到form表单，如要选择性别，爱好，输入姓名年龄等。都需要在form表单内部输入input、单选、多选等等。

input标签

input type包含input text输入框、input submit按钮、input checkbox多选复选框、input radio单选框等等

Form input标签语法与结构 

<input name=""  type="submit"  value="提交" >

Name为此表单控件识别命名，一般使用英文字母在一个页面里具有唯一性

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

Type为表单控件样式

type="text" 输入框控件，用于输入内容如用户名、密码之类内容输入框控件

type="submit" 按钮控件，用于提交、重置动作

type= 'button' 按钮(需要配合js使用.) button和submit的区别？

type="checkbox" 多选复选框控件，用于多选题、多选功能(进入了解 html checkbox多选框)

type="radio" 单选框，用于单选，唯一选择功能

type='file' 提交文件：form表单需要加上属性enctype="multipart/form-data"

 <textarea>文本区域表单标签元素　　

textarea语法结构

<textarea name="HTML" cols="30" rows="4">
  • Name 为传值命名
  • Cols 为字符宽度（每行输入文字多少宽度），跟具体数字
  • Rows 为行数，默认输入框区域显示高度，跟具体数字　　　

<select>下拉框标签

Form select语法与结构

<select name="city" size='2' multiple="multiple" > 
<option value="0">北京</option> 
<option value="1">天津</option> 
</select> 

#size：设置下拉框显示的个数
#value表单项提交时能提交的值
#multiple 默认可以选多个

<label>标签　　

在表单布局中会遇到label标签的使用，label没有任何样式效果，有触发对应表单控件功能。
比如我们点击单选按钮或多选框前文字对应选项就能被选中，这个就是对文字加了<label>标签实现

注：点击<label>标签文字时，实现对应控件被选择，需要对应表单控件id的值与label标签内的for值相同。

label语法

<label for="man">男</label>
#Label标签内for属性的值为自定义，一般与想实现点击会触发控件对象的ID对应相同。

举个简单单击性别的例子

<form action="" method="get"> 
性别：<br /> 
<input name="sex" id="man" type="radio" value="" /> 
<label for="man">男</label> 
<input name="sex" id="woman" type="radio" value="" /> 
<label for="woman">女</label> 
</form>

需要注意的事项

在HTML中<div>和<span>本身没有任何意义，所有我们可以在里面添加很多属性，去进行修改成我们想要的结果

在HTML中注释的格式为

<!--  html注释的内容   -->

　　

　　

　　

　　

 

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/flash55/p/6012209.html