HTML基础语法一文了解

HTML是前端的网页骨架

本文的HTML是HTML5版本

HTML的标准属性

id：单个html文件中id的属性值必须唯一

class：类标签，一个标签可以有多个类名，但一个类名可以用于多个标签

style：样式标签，格式是字典数据格式

title：定义文档的标题， 它的内容会显示在浏览器标签页上，作为页面的标题

六种基本标签

div: 块标签  铺满多行

h1--h6：标题标签，六级标题分为h1、h2、h3、h4、h5、h6

           区别：字体大小的变化，字体加粗加黑效果，有上下行距，行级元素铺满一行，不可以嵌套

p： 段落标签，有上下行距，行级元素铺满一行，不可以嵌套

span：隔离标签，可以单独控制，行内元素，可以被嵌套

br：换行符标签，强行换行

hr：水平分割线标签

文本相关的标签

b：字体加粗

strong：表示强调文本，通常也会加粗

i：文本斜体

em：强调文本，通常也会倾斜

u：文本下划线

del：文本删除线

列表属性标签

ul：无序列表，内部有多个li语句块，左侧没有序号

ol：有序列表，内部使用多个li，上下有行距，有序号，左侧有内补

li：列表选项，一般不单独存在与列表属性同用，在列表内部，铺满一行

dl：自定义列表，外面有的框架，结构与ul、ol基本一样

dt：自定义列表选项，顶格出现

dd：列表项目说明，可以不写，自动缩进

表格属性标签

table：表外框，外部样式表

tr：表格内，行标签

th：表格内的表头标签，加粗居中，个数表示每一行的列数

td：普通单元格标签，个数与th表头标签一致

标签属性：在table标签中对标签结构内容进行修饰

        border ：  边框
        cellspacing：单元格与单元格之间的间距

        cellpadding：单元格內补（文字内容到单元格之间的距离）
        width：宽度

        align：对齐方式

超链接标签

a:  文本超级链接标签

        href：链接地址，支持外部或内部服务器地址

        target：链接打开位置设置，_blank在其他页面打开， _self默认选项，在当前页面打开

img：图片超级链接

        src：图片地址（本地图片/其他服务器图片）

        alt：图片加载失败后显示内容（可以不填写）

audio：音频超级链接

        src：音频地址（本地音频文件/其他服务器音频也可以）

        controls：布尔属性值，添加列该属性音频会中显示控件(比如播放/暂停按钮、音量控制等)

video：视频超级链接

        src：视频地址（本地视频/其他服务器视频均可以）

        controls：布尔属性值，控件展示器，一般不会使用默认控件，通过js交互实现控制

内嵌网页标签--iframe

       src：地址路径，本地地址或者其他服务器地址均可以

        第一次请求是原始页面，包含iframe地址，第二次是iframe页面地址

表单标签

        作用：可以将浏览器输入的数据提交到服务器上

form：表单域

        内容   action： 服务器地址，默认为当前页面的地址

        测试地址：http://httpbin.org/post

                   method：提交方法有两种，get/post

                   get：参数是以？key=value&key=value的格式提交

                   post：参数以表单数据提交

表单标签类型：input、select、textarea

        input·：一般和label配合使用， label的for和input的id保持一致

                type：text-文本，submit-提交，password-密码，reset-重置，

                          checkbox-多选一，file-文本格式，color-颜色设置

                submit与reset为表单按钮

        select：下拉选项，一般配合option使用，name写在select上

                option：value写在option上，带有selected选项默认选中

        textarea：多行文本框

        隐藏域：type为hidden，通常name：crsf.token  value：口令

HTML5语化标签

都是div标签的class的名字
    header： 头部
    nav：导航栏        
    main：主体        
    section： 区域       
    article：文章        
    aside：侧边栏        
    footer：底部