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

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

        下面我就先试着写一篇关于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的基础标签。

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,294评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,493评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,790评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,595评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,718评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,906评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,053评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,797评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,250评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,570评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,711评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,388评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,018评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,796评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,023评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,461评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,595评论 2 350

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,637评论 18 139
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,737评论 1 92
  • 前端开发面试题 <a name='preface'>前言</a> 只看问题点这里 看全部问题和答案点这里 本文由我...
    自you是敏感词阅读 757评论 0 3
  • 什么是html? html是一种网页标记语言,叫超文本标记语言,我们平时上网所看到的所有网页均来自于html,英文...
    波段顶底阅读 8,354评论 2 7
  • 在前一篇文章中已经简单提到Html标签了,在本文中就不再赘述它的介绍了。想要再看看的可以戳Html+Css基础概要...
    年少有van阅读 886评论 0 14