欢迎您, 来到 宁时修博客.^_^

前端----HTML系列_01

2017/10/18 言则行 HTML 771
HTML系列

一、HTML介绍

  • 超文本标记语言(Hypertext Markup Language,HTML)通过标签语言来标记要显示的网页中的各个部分。是一套浏览器认识的规则。

  • 浏览器按顺序渲染网页文件,然后根据标记符解释和显示内容。但需要注意的是,对于不同的浏览器,对同一标签可能会有不完全相同的解释(兼容性)。

  • 静态网页文件扩展名:.html 或 .htm。

  • HTML 不是一种编程语言,而是一种标记语言 (markup language)。HTML 使用标记标签来描述网页。


二、HTML的结构

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

</body>
</html>
  • <!DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档。

  • <html></html>是html文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档,在它们之间是文档的头部<head>和主体<body>。

  • <head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示,但是其间的元素有特殊重要的意义。

  • <title></title>定义网页标题,在浏览器标题栏显示。 

  • <body></body>之间的文本是可见的网页主体内容。


三、HTML标签格式


    1、HTML标签是由尖括号包围的关键字,比如<html>。    

    2、HTML标签通常是成对出现的(双边标记),如:<div>和</div>。

    3、标签不区分大小写 <html>和<HTML>,建议用小写。

    4、标签分为两部分:开始标签<a>和结束标签</a>,两个标签之间的部分叫做'标签体'。有些标签功能比较简单,使用一个标签即可,这种标签叫做'自闭和标签'。例:<br/>、<hr/>、<input/>、<img/>。

    5、标签可以有若干个属性,也可以不带属性。如<head>元素就不带任何属性。

    6、标签可以嵌套,但不能交叉嵌套:<a><b></a></b>。

    

    标签的语法:    

    <标签名 属性1="属性值1" 属性2="属性值2"....>内容部分</标签名>

    <标签名 属性1="属性值1" 属性2="属性值2"..../>



四、常用标签

    1、<!DOCTYPE> 标签

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

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

    BackCompat:怪异模式,浏览器使用自己的怪异模式解析渲染页面。

    CSS1Compat:标准模式,浏览器使用W3C的标准解析渲染页面。

    没有DOCTYPE声明,compatMod默认是BackCompat。


    2、head内的标签

    ①<meta>标签

    <meta>元素可提供有关页面的元信息(meta-information),针对搜索引擎和更新频度的描述和关键词。

    <meta>标签位于文档的头部,不包含任何内容。

    <meta>提供的信息是用户不可见的。

    

    meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name 属性,

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


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

    <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">  #为搜索引擎定义关键字
    <meta name="description" content="Cocolait博客是由一个牛逼的PHP程序员开发的"> # 为网页定义描述内容
    <meta name="author" content="Cocolait">  # 定义网页作者

    

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

    <meta http-equiv="Refresh" content="2;URL=http://www.mgchen.com"> //(注意后面的引号,分别在秒数的前面和网址的后面)  # 刷新网页
    <meta http-equiv="content-Type" charset=UTF8">
    <meta http-equiv="X-UA-Compatible" content = "IE=EmulateIE7" />

    

    ②非<meta>标签

    (1) <title></title> 标签定义不同文档的标题,在HTML/XHTML文档中是必须的。

    <title>元素:

        定义了浏览器工具栏的标题

        当网页添加到收藏夹时,显示在收藏夹中的标题

        显示在搜索引擎结果页面的标题

    例:

    <title>这是一个测试网页</title>

    

    (2) <base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接.

    例:

    <head>
    <base href='http://www.mgchen.com' target='_blank'>
    </head>

    

    (3) <link> 标签定义了文档与外部资源之间的关系。

    <link> 标签通常用于链接到样式表:

    <head>
    <link rel='stylesheet' type='text/css' href='mycss.css'>
    </head>

    

    (4) <style></style> 标签定义了HTML文档的样式文件引用地址。

    在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:

    <head>
        <style type='text/css'>
            body {background-color:yellow}
            p {color:blue}
        </style>
    </head>

    

    (5) <script>标签用于加载脚本文件,如: JavaScript。

    <script> 元素在以后的章节中会详细描述。

    例:

    <script src='myscript.js'></script>

    

    3、<body>内标签

    ①分类

        块级标签

        内联标签


    ②基本标签

        <hn></hn>: n的取值范围值是1~6,字体从大到小,用来表示标题。

        <p></p>: 段落标签。使文档内容分为若干段落,且上下文之间有空白间隙。

        <b></b>: 等于<strong></strong>,加粗标签,使文档内容加粗显示。

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

        <em></em>: 使文字变成斜体。

        <sup></sup>: 上角标

        <sub></sub>: 下角标

        <br>: 换行

        <hr>: 添加一条水平线


    ③<div>和<span>

        <div></div> : <div>只是一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。

        <span></span>: <span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现。

        

        块级元素与行内元素的区别

        所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行。如果单独在网页中插入这两个元素,不会对页面产生任何的影响。

        

        这两个元素是专门为定义CSS样式而生的。

        

        标签嵌套原则:

            块级标签可以嵌套 块级、内联,但是内联只能嵌套内联标签。

  222.png


    ④图像标签:<img>

        在HTML中,图像由<img>标签定义。

        定义图像的语法:

        <img src='' alt=''>

        

        src: 图片所在的路径(URL)

        alt: 图片没有加载成功时得提示

        title: 当鼠标悬浮于图片时的提示信息

        width: 设置图片的宽

        height: 设置图片的高(宽高两个属性只用一个会自动等比缩放)



    ⑤超链接标签:<a></a>

        超链接:从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。

  <a href='www.baidu.com/' target='_blank'>点击</a>
    
    target='_blank':链接将在新窗口打开。
    href属性指定目标网页地址。该地址可以有几种类型:
      绝对 URL - 指向另一个站点(比如 href="http://www.jd.com/")
      相对 URL - 指当前站点中确切的路径(href="index.htm")
      锚 URL - 指向页面中的锚(href="#top")

        

        锚:

  链接中的id属性:
     在HTML文档中插入ID:
        <a id='tips'>有用的部分</a>
   在HTML文档中创建一个链接到"有用的提示部分(id="tips")":
       <a href='#tips'>访问有用的部分</a>
   或者,从另一个页面创建一个链接到"有用的提示部分(id="tips")":
       <a href="http://www.mgchen.com/5/0.html#tips">访问有用的提示部分</a>

        

        

        注意: 请始终将正斜杠添加到子文件夹。假如这样书写链接:href="http://www.mgchen.com/70.html",

        就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,

        就像这样:href="http://www.mgchen.com/70.html/"


    ⑥表格标签:<table></table> 

        表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。

        字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

        

        表格的基本结构:

   <table>
     <tr>
       <td>标题</td>
       <td>标题</td>
     </tr>
     <tr>
       <td>内容</td>
       <td>内容</td>
     </tr>
   </table>

        

        属性:

   <tr>:定义表格的行
   <th>:定义表格的头,加粗显示
   <td>:定义表格单元
        
   border:表格边框设置
   cellpadding:表格内边距
   cellspacing:表格外边距
   width:像素百分比(最好通过CSS来设置长宽)
   rowspan:单元格竖跨多少行
   colspan:单元格横跨多少列(即合并单元格)

  

    ⑦列表标签

   <ul>: 无序列表 [type属性:disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]
     <li>:列表中的每一项.
        
   <ol>: 有序列表
     <li>:列表中的每一项.
        
   <dl> 定义列表
     <dt> 列表标题
     <dd> 列表项



    ⑧表单标签

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

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

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

        

        

        关于表单两个属性:

            name : 作为发送server端的数据的键

            value : 作为发送server端的数据的值

        

        表单属性:

        action:表单提交到哪.一般指向服务器端一个程序,程序接收到表单提交过来的数据

                (即表单元素值)作相应处理,比如https://www.sogou.com/web

        method:表单的提交方式--post/get默认取值就是get

        

        

        

        

        <input>系列标签

  1.表单类型
    type=""
       text:文本输入框
       password:密码输入框
       radio:单选框
       checkbox:多选框
       submit:提交按钮
       button:按钮(需要配合js使用)
       file:提交文件,from表单需要加上属性 enctype="multipart/from-data"
          上传文件注意两点:
           1、请求方式必须是 POST
           2、enctype="multipart/from-data"
        
  2、表单属性
    name=""
       表单提交项的键
       注意和id属性的区别:name属性是和服务器通信时使用的名称
                           而id属性是浏览器端使用的名称,该属性主要是为
                           了方便客户端编程,而在CSS和JavaScript中使用的。
        
    value=""
       表单提交项的值,对于不同的输入类型,value属性的用法也不同:
         type="button","reset","submit" --> 定义按钮上显示的文本
         type="text","password","hidden" --> 定义输入字段的初始值
         type="checkbox","radio","image" --> 定义与输入相关联的值
        
    checked="checked"
       也可以不写等号后面的,这只是radio和checkbox的设置默认值。
        
    readonly
       只读,text和password
        
    disabled
       禁用,对所有input都好使

        

        

        <select>标签

  <select>下拉选项标签属性
        
    name:表单提交项的键
    size:选项个数
    multipart:multipart
      <optgroup> 为每一项加上分组
      <option> 下拉选中的每一项属性:
          value:表单提交项的值
          selected:selected下拉选默认值

        

        

        <textarea> 多行文本框

    <textarea name="personalinfo" id="" cols="60" rows="10"></textarea>
        
     cols:宽度
     rows:高度
     name:名称

        

        

        <label> 标签

   定义:为input元素定义标注(标记)
   说明:
     1、label 元素不会向用户呈现任何特殊效果。
     2、 <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
     
   示例:
   <form method="post" action="">
            <label for="username">用户名</label>
            <input type="text" name="username" id="username" size="20" />
      </form>

        

        <fieldset>标签

   <fieldset>
      <legend>登录吧</legend>
      <input type="text">
   </fieldset>


点赞
说说你的看法

所有评论: (0)