美文网首页H5前端让前端飞
过来人教你如何打好web前端基础——系统学习HTML

过来人教你如何打好web前端基础——系统学习HTML

作者: web前端开发砖家 | 来源:发表于2018-02-04 19:46 被阅读0次

    单标签

    ◆注释标签 ctrl+/

    ◆水平线标签


    ◆换行标签

    双标签

    ◆段落标签

    ◆h1-h6 值只能取到6 h1在页面中只能出现一次。

    ◆文本标签

    ◆图片标签

    ◆ 在这里我还是要推荐下我自己建的web前端开发学习群:617327703,群里都是学web前端开发的,如果你正在学习前端 ,小编欢迎你加入,今天分享的这个案例已经上传到群文件,大家都是软件开发党,不定期分享干货(只有前端软件开发相关的),包括我自己整理的一份2018最新的前端进阶资料和高级开发教程,欢迎进阶中和进想深入前端的小伙伴。

    上标 下标

    路径

    ◆相对路径

    ★文件和图片(html)在同一文件夹(目录)时,直接写文件名 ★图片在上一级目录,..+/+文件名

    ★图片在下一级目录,文件夹名+/+文件名

    ◆绝对路径

    超链接

    链接文本

    ◆锚链接

    ◆空链

    ◆链接优化写法

    特殊字符

      空格

    < <

    > >

    ©

    ¥

    列表

    无序列表

    • 有序列表

      1. 自定义列表

        !+tab html5的标签结构

        Charset 编码

        Ascll

        Ansi

        Unicode

        Gbk

        Gb2312

        Big5

        Utf-8 通用字符集

        link标签作用:

        链接外部样式表

        设置icon图标

        表格

        展示数据。 是对网页重构的一个有益补充。

        表格

        ◆属性:

        Border="1" 边框

        Width="500" 宽度

        Height="300" 高

        cellspacing="2" 单元格与单元格的距离

        cellpadding="2" 内容距边框的距离

        align="left | right | center"

        如果直接给表格用align="center" 表格居中

        如果给tr或者td使用 ,tr或者td内容居中。

        bgcolor="red" 背景颜色。

        表格的标准结构

        表头和单元格合并

        ◆ 表头

        colspan="2" 合并同一行上的单元格

        rowspan="2" 合并同一列上的单元格

        表格标题、边框颜色、内容垂直对齐

        ◆表格标题 用法和td一样

        标题的文字自动加粗水平居中对齐

        ◆边框颜色

        ◆内容垂直对齐方式

        Valign="top | middle | bottom"

        表单

        表单的作用是收集信息。

        表单的组成

        ◆提示信息

        ◆表单控件

        ◆表单域

        属性:action:处理信息

        Method="get | post"

        Get通过地址栏提供(传输)信息,安全性差。

        Post 通过1.php来处理信息,安全性高。

        ◆文本输入框

        maxlength="6" 限制输入字符长度

        readonly="readonly" 将输入框设置为只读状态(不能编辑)

        disabled="disabled" 输入框未激活状态

        name="username" 输入框的名称

        value="大前端" 将输入框的内容传给处理文件

        ◆密码输入框

        ★注意:文本输入框的所有属性对密码输入框都有效。

        ◆单选框

        ★只有将name的值设置相同的时候,才能实现单选效果。

        ★checked="checked" 设置默认选择项。

        ◆下拉列表

        下拉列表选项

        下拉列表选项

        属性:

        Multiple="multiple" 将下拉列表设置为多选项

        Selected="selected" 设置默认选中项目

        对下拉列表进行分组。

        Label="" 分组名称。

        ◆多选框

        Checked="checked" 设置默认选中项

        ◆多行文本框

        Cols 控制输入字符的长度。

        Rows 控制输入的行数

        ◆ 文件上传控件

        ◆文件提交按钮

        ★:可以实现信息提交功能

        ◆普通按钮

        ★不能提交信息,配合JS使用。

        ◆图片按钮

        ★图片按钮可实现信息提交功能

        ◆重置按钮

        ★将信息重置到默认状态

        ◆表单信息分组

        对表单信息分组

        表单信息分组名称html5补充表单控件

        标签语义化

        好的语义化的网站标准就是去掉样式表文件之后,结构依然很清晰。

        标签语义化概念:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)

        -标签语义化意义:

        1:网页结构合理

        2:有利于seo:和搜索引擎建立良好沟通,有了良好的结构和语 义你的网页内容自然容易被搜索引擎抓取;

        3:方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)

        4:便于团队开发和维护

        1:尽可能少的使用无语义的标签div和span;

        2:在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;

        3:不要使用纯样式标签,如:b、font、u等,改用css设置。

        4:需要强调的文本,可以包含在strong或者em标签中strong默认样式是加粗(不要用b),em是斜体(不用i);

        想系统学习的关注小编,私信回复“系统学习”便可。

      2. 相关文章

          网友评论

            本文标题:过来人教你如何打好web前端基础——系统学习HTML

            本文链接:https://www.haomeiwen.com/subject/dsqvzxtx.html