美文网首页
2018-05-02 WEB前端学习 第一章 HTML基础(

2018-05-02 WEB前端学习 第一章 HTML基础(

作者: 进入web前端 | 来源:发表于2018-05-02 19:52 被阅读0次

            学习前端已经一段时间了,总是觉得时间很少,想将自己学到的一些知识进行分享,可也总是没时间,经过这几天的思考,想要试着将自己知道的一写东西写出来,我知道自己刚开始入门,学的不是很好,表达能力也不好,但在这写出来希望大家进行评论指出,我将不胜感激。

            下面我就先试着写一篇关于HTML的文章,可能逻辑会乱点,大家就将就这看看!嘿嘿!

            在正式说HTML之前,先说下,WEB标准提倡结构、表现和行为相分离,即: ---HTML结构、CSS表现、JavaScript行为。结构标准包括XML标准、XHTML标准、HTML标准;样式标准主要是指CSS标准;行为标准主要包括DOM标准和ECMAScript标准。了解这个之后,接着往下说今天的HTML。


    一、html==>根元素(html标签中只能嵌套两个标签):

    大家先看一个图片吧:

    1.head标签==>文件说明类文件

            meat==>指明文件的编码格式    utf-8(中文简体)

            title==>标题

            ink==>引入css外部文件(后面详细介绍)

    2.body==>展示,可以放如下类型的标签

        div

        p

        h1~h6

    二、标签:

    1.p标签       ==》双闭合标签     ==》段落标签    

            <p>内容</p>

    2.br 和 hr标签     ==》单闭合标签     ==》换行标签    

            <br />          换   行(空标签)

            <hr />        分割标签(空标签)

    3.h系列标签  ==>双闭合标签  ==》默认字体标签    

            <h1></h1>

            <h2></h2>

            <h3></h3>

            <h4></h4>

            <h5></h5>

            <h6></h6>

            效果如下:

    4.a标签  ==》双闭合标签  ==》链接标签  

            <a href="https://www.baidu.com/"></a>

            //href 链接地址:本地文件 网络网站网址

    5.img标签 ==》单闭合标签 ==》图片标签

            <img src = " " />

            //src属性代表图片的地址

    6.div标签  ==》双闭合标签  ==》盒子标签  

            <div> </div>

    7.列表标签(li表示列表项)

            ol:有序列表

    有序列表

            ul:无序列表

    无序列表

            list-style: none; (用来去除列表自带的样式,实际开发中都会去除)

    8.table表格标签==》双闭合标签  ==》表格标签

            tr:行   ——————  <tr></tr>

            td:列  ———————  <td></td>

            th:表头  —————— <th></th>

            常见属性:

                border:边框大小

                colspan:合并列  --》 column 列

                rowspan:合并行  --》 row 行

                cellpadding:单元格内文字与边框的距离

                cellspacing:单元格之间的距离

    9.大于小于报错问题

           &gt;         :大于

           &lt;         :小于

           &nbsp;    :空格

    10.文本格式化标签

    文本格式化标签

    11.span标签 ==》双闭合标签   ==》万能标签    

                <span>   </span>

    12.form表单 ==》双闭合标签==》表单

    示例

    ①.action属性: 向后端发送的地址; ==》   

            eg:  <form  action="https://www.baidu.com" 点击跳转百度</form>

    ②.input标签: input用于搜取用户信息   ==》定义的默认宽度是20px

            type:指定input的类型,常见类型如下:

                        text 文本

                        password 密码

                        radio 单选框

                        checkbox 复选框

                        submit 提交按钮

                        reset 重置按钮

                        button 按钮(不可提交,配合js等使用)

                        tel 电话

                        email 邮箱

                        number 数字

                        file 上传文件

                        month 日期 -年-月

                        date 日期 -年-月-日

                        datetime-local 日期 -年-月-日-时间

         name:前端向后端发送的字段 如单选框name值一样,才可单选

         value:   值

                        <input type="checkbox" />和    <input  type="checkbox"/>中必须设置 value 属性。

    13.select标签  ==》双闭合标签   ==》 下拉列表标签

    select标签示例

            其中cols和rows分别代表的是列和行的数

    15.video标签 ==》单闭合标签==》视频标签

    视频标签

    16.audio标签 ==》单闭合标签==》音乐标签

    音乐标签

            以上就是今天写的内容,总结以下就只简单说了两部分,一是HTML根元素的组成;二是:HTML的基础标签。

            希望写的可以给向我一样的初学者一些思路,但更多的还是需要自己在编辑器中进行实验,有不对的希望指出。后续再接着更新!

    相关文章

      网友评论

          本文标题:2018-05-02 WEB前端学习 第一章 HTML基础(

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