html

一、HTML介绍

1、HTML的概述

html全称HyperText Mackeup Language，翻译为超文本标记语言，它不是一种编程语言，是一种描述性的标记语言，用于描述超文本内容的显示方式。比如字体、颜色、大小等。

  • 超文本：音频，视频，图片称为超文本。
  • 标记 ：<英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成。

作用：HTML是负责描述文档语义的语言。

注意：HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程)，HTML页面直接由浏览器解析执行。

二、HTML的规范

  • HTML是一个弱势语言
  • HTML不区分大小写
  • HTML页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)
  • HTML的结构：
    • 声明部分：主要作用是用来告诉浏览器这个页面使用的是哪个标准。是HTML5标准。
    • head部分：将页面的一些额外信息告诉服务器。不会显示在页面上。
    • body部分：我们所写的代码必须放在此标签內。

1、编写HTML的规范

1）所有标记元素都要正确的嵌套，不能交叉嵌套。正确写法举例：<h1><font></font></h1>

（2）所有的标记都必须小写。

（3）所有的标记都必须关闭。

  • 双边标记：<span></span>
  • 单边标记：<br> 转成 <br /> <hr> 转成 <hr />，还有<img src=“URL” />

（4）所有的属性值必须加引号。<h1 id="head"></h1>

（5）所有的属性必须有值。<input type="radio" checked="checked" />

2、HTML的基本语法特征

 （1）HTML对换行不敏感，对tab不敏感

HTML只在乎标签的嵌套结构，嵌套的关系。谁嵌套了谁，谁被谁嵌套了，和换行、tab无关。换不换行、tab不tab，都不影响页面的结构。

也就是说，HTML不是依靠缩进来表示嵌套的，就是看标签的包裹关系。但是，我们发现有良好的缩进，代码更易读。要求大家都正确缩进标签。

   (2) 空白折叠现象

HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。

（3）标签要严格封闭

1、文档声明头

任何一个标准的HTML页面，第一行一定是一个以

<!DOCTYPE...

开头的这一行，就是文档声明头，DocType Declaration，简称DTD。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

2、头标签（head）

head标签都放在头部分之间。这里面包含了：<title>、<meta>、<link>，<style>

  • <title>：指定整个网页的标题，在浏览器最上方显示。
  • <meta>：提供有关页面的基本信息
  • <link>：定义文档与外部资源的关系。
  • <style>:定义内部样式表与网页的关系

  2.1 Meta标签介绍：

元素可提供有关页面的原信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。

标签位于文档的头部，不包含任何内容。

提供的信息是用户不可见的。 meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，

不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

常用的meta标签：

　　（1）http-equiv属性

　　　　它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，

content中的内容其实就是各个参数的变量值。

<!--重定向 2秒后跳转到对应的网址，注意分号-->
<meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">
<!--指定文档的内容类型和编码类型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告诉IE浏览器以最高级模式渲染当前网页-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

（2）name属性

主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，

content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />

这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到。

   2.2 title标签

      主要用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出当前网页的主题。 

三.html中标签的分类：

  1.行内标签
     （1）在一行内显示 a span i em strong b、label
     （2）不能设置宽高，默认的宽和高是内容填充
    1.1 行内块标签 img input
         (1) 在一行内显示
         (2) 可以设置宽高
  2.块级标签  h1（页面中只有一个h1,为了这个搜索引擎）~h6  div ul li ol dl dt dd form table 
       （1）独占一行
       （2）可以设置宽高,如果不设置宽和高，默认的宽是父亲的100%。高度是内容的高度
p标签的嵌套 多注意！！！！！！
    p中只能存放字体、图片、表单控件 不能放盒子标签等其它元素


四.doby标签中相关标签


一、字体标签


(1)标题


标题使用<h1>至<h6>标签进行定义。<h1>定义最大的标题，<h6>定义最小的标题。具有align属性，属性值可以是：left、center、right。


 

  <h1>路飞学城</h1>
    <h2>路飞学城</h2>
    <h3>路飞学城</h3>
    <h4>路飞学城</h4>
    <h5>路飞学城</h5>
    <h6>路飞学城</h6>




(2)上标<sup> 下标<sub>
例子：




5<sup>2</sup>
8<sub>2</sub>




(3)特殊字符


    

  • &nbsp;：空格 （non-breaking spacing，不断打空格）
    • 

  • &lt;：小于号（less than）
    • 

  • &gt;：大于号（greater than）
    • 

  • &amp;：符号&
    • 

  • &quot;：双引号
    • 

  • &apos;：单引号
    • 

  • &copy;：版权©
    • 

  • &trade;：商标™
    • 



比如说，你想把<p>作为一个文本在页面上显示，直接写<p>是肯定不行的，因为这代表的是一个段落标签，
所以这里需要用到转义字符。应该这么写：




这是一个HTML语言的&lt;p&gt;标签






效果显示：




二、排版标签


（1）段落标签<p>




段落：是英文paragraph的缩写。




属性：




    

  • align='属性值'：对齐方式。属性值包括：left、center、right
    • 





示例：




<p>这是一个段落</p>
<p align="center">这是另一个段落</p>




效果：




HTML标签是分等级的。HTML将所有的标签分为两种：


    

  • 文本级标签：p、span、a、b、i、u、em。文本标签里只能放文字、图片、表单元素。
    • 

  • 容器级标签：div、h系列、li、dt、dd。容器级标签里可以放任何东西。
    • 



从学习p的第一天开始，就要死死记住：p标签是一个文本级标签，p里面只能放文字、图片、表单元素。其他的一律不能放。


错误写法：（把h系列的标签放到p里）




<p>
    我是个段落
    <h2>我是二级标题</h2>
</p>




（2）块级标签 <div>和<span>


div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。这两个东西，都是最最重要的“盒子”。


div：把标签中的内容作为一个块儿来对待(division)。必须单独占据一行。


div标签的属性：


    

  • align="属性值"：设置块儿的位置。属性值可选择：left、right、 center
    • 



<span>和<div>唯一的区别在于：<span>是不换行的，而<div>是换行的。


如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。或者说，DIV+CSS来实现各种样式。


 示例：




<body>

    <div>
        导航栏
    </div>
    <div>
        中心banner
    </div>
    <span>路飞</span>
    <span>alex</span>
    
</body>






div在浏览器中，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。




div标签是一个容器级标签，里面什么都能放，甚至可以放div自己。




span也是表达“小区域、小跨度”的标签，但是是一个文本级的标签。




就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。




 span举例：




<p>
        商品简介:
        <span>
            <a href="">详细信息</a>
            <a href="">生产日期</a>
        </span>
</p>




div举例：




<div class="header">
    <div class="logo"></div>
        <div class="nav"></div>
    </div>
    <div class="content">
        <div class="guanggao"></div>
        <div class="shop"></div>
    </div>
<div class="footer"></div>




所以，我们亲切的称呼这种模式叫做“div+css”。div标签负责布局，负责结构，负责分块。css负责样式。


ps:这个class属性名就与css有很大关联，讲到css模块会详细讲这块内容。



（3）内容居中标签 <center>


此时center代表是一个标签，而不是一个属性值了。只要是在这个标签里面的内容，都会居于浏览器的中间。


示例：




<center>
       <p>小马哥</p>
</center>    




效果如下：





 到了H5里面，center标签不建议使用。


 




 








        

	      

	    

	  

	  

	    
      
        【推广】
        免费学中医，健康全家人
      
	  

    

    

          原文地址：https://www.cnblogs.com/zwq-/p/9647412.html