熟悉的html,却说不出html的味道

html 常常被使用着，却表达不出对应的点，内心懂！却说不出html那种味道。

例如：什么是网页，对着心中提问（个人回答，网页就是浏览器显示的页面）这样说也没什么很差，但总感受缺乏点啥，若是对着内心这么去说：网页就是一个文件，一个html文件，这个文件是由图片、文字、声音、视频、等元素组成的，这些元素利用html标签描述出来，而后经过浏览器解析给用户，以后就造成了网页。

内心获得了答案，瞬间豁然开朗 ^^

既然网页是一个html文件，那html又是什么？？？

html是超文本标记语言，它是用来描述网页的一种语言，那超文本又有何含义呢！所谓的超文本就是它加入了图片、声音、动画、多媒体等内容，它超越了文本的限制而且能够从一个文件跳入另外一个文件，这就是超文本（解除了心中的疑惑）

html须要在浏览器上运行（浏览器是网页的运行平台），经常使用的浏览器他们拥有不一样的内核（渲染引擎：它的做用就是读取网页的内容整讯信息，计算网页的显示方式，将网页渲染在浏览器上最终展现在咱们眼前）。

说到浏览器的不一样那他们渲染页面和排版确定会各有差别，那就须要制度去管理它们，也就是web标准（w3c是著名的标准化组织）当咱们遵循了web标准以后可让网页被更普遍的设备访问，更容易被搜索引擎搜寻，使网站更易于维护。

前面说到，网页就是一个文件，由图片、文字......等标签描述出来，经过这些标签搭建起了网页的基本结构，不一样的标签会被用到这些结构的不一样场景。也就是说每一个标签都有不一样的语义，根据标签的语义，在合适的地方给一个最合理的标签，可使结构更加的清晰。

例如：div它是一个大盒子，能够在这个盒子中放置不一样的标签，span它是一个小盒子，在网页的一行中它能够放置多个。修饰网页的标题（<h1>-<h6>），表格(<table></table>)，一段段落能够包含在(<p></p>)标签中，换行(<hr>）超连接(<a></a>）， 图片(<image></image>)，列表(<ul></ul>)，表单及表单控件......以及文本格式化标签（加粗<strong></strong>，倾斜<em></em>，删除线<del></del>，下划线 <ins></ins>）...... 不一样的标签在网页的结构中发挥着不一样的做用。

连接标签（ <a></a>）

做用：定义超连接，它自身也有多个种类
    1. 外部连接：
        eg：想跳到百度的页面（填写表单成功后跳转到客户的页面）
    2. 内部连接
        eg：网站内部页面之间相互跳转（设计稿模拟路由跳转）
    3. 网页元素连接
        eg：网页中图像，音频，视频均可以添加连接
    4. 锚点连接
        eg:点击连接，能够快速定位到页面中的某个位置（在angular2中使用该锚点定位，控制台会提示找不到路由）
复制代码

图像标签（<image></image>）

做用：定义html的图像，
    1. src是img标签的必须属性（属于这个标签的特性），它用于指定图像文件的路径和文件名
        eg：路径（绝对路径/相对路径）
            a. 相对路径常常被使用到，它的路径参考是以当前的文件为参考基础，而创建的目录路径
            b. 绝对路径，它是指目录下的绝对位置直接达到目录位置，一般是从盘符开始(常见的就是直接从网上copy一条图片的连接，这就是一个绝
               对路径)
    2. alt ：替换文本
    3. title：提示信息
    4. 在没理解alt与title两个属性时，总以为它两是同样的意思（为了提示）
        a. alt是替换文本，图片出现网络错误时会出现该文本
        b. title提示文本，鼠标移入图片上，鼠标下会出现提示信息 
复制代码

表格标签 （<table></table>）

做用：用于显示，展现数据，它可让数据显示很是规整，可读性很是好
    1.表格基本语法：
        table 用于定义表格标签
        tr 用于定义表格中的行必须嵌套在table中
        th 表示表格表头部分，必须嵌套在tr中（经常使用于表格第一行，突出重要性，使用th单元格里面的文字会加粗居中显示）
        td 用于定义表格中单元格，必须嵌套在tr中
        若是表格很长为了快速定位到元素，能够将表格分割成表格头部和表格主体两大部分（分清表格结构）
            thead：表示头部区域
            tabody：表示主体部分

    2.常常把thead与th的概念混淆
        a. thead 表明的是表头区域
        b. th 表明的是表头中的单元格

    3.表格合并
        a. 跨行合并（须要合并几行）:rowspan
        b. 跨列合并（须要合并几列）:colspan
复制代码

列表标签

做用：用于布局，它最大的特色就是整齐有序
    1.无序列表
        <ul>
            <li></li>
        </ul>
        a. 无序列表项没有级别之分，是并列的
        b. ul中只能嵌套li（不容许直接在ul中放置标签或者文字）
        c. li至关于一个容器，能够容纳全部元素
    2.有序列表
        <ul>
            <ol></ol>
        </ul>
        a.有序列表有排列顺序的列表，各个列表项会按照必定的顺序排列定义
        b. ul中只能嵌套li（不容许直接在ul中放置标签或者文字）
        c. ol至关于一个容器，能够容纳全部元素
        
    3.自定义列表
        场景：经常使用于对术语或者名词进行描述，定义列表的列表项没有任何符号
        <dl>
            <dt></dt>
            <dd></dd>
        </dl>
复制代码

表单

做用：用来收集用户信息（在网页中须要收集用户信息进行交互，此时就能够用到表单，一个完整的表单一般由表单域，表单控件（表单元素）
提示信息3部分组成）
    a.from（from就是一个表单域，它是包含表单元素的区域）
        做用：from标签用于定义表单域以实现用户信息的收集和传递，form会将范围内的表单元素信息提交到服务器

    b.表单控件（表单元素）
        做用：让容许用户在表单中输入或选择内容
        常使用的，输入，单选，多选，下拉，文本域，按钮
        
    c.提示信息
        做用：增长语义
复制代码

当咱们的结构多了以后，不免会出现不知其意，因此能够在html中添加一些便于阅读和理解但又不须要显示在页面中的注释文字，能够更好的解释代码的功能，便于相关人员理解。