01前端-html

挣扎了好久,还是决定在这个大家都不看好的疫情期间裸辞。和老公双双失业,估计在疫情这么严重的2020年,像我们一样的尴尬境地的人真的少之又少。

在嵌入式的行业工作了快10年的时间,从事一份自己从来就不喜欢的职业。应该说一直被金钱裹挟着。加上这次疫情,无数人都提醒我不要在今年换工作,说行业形势很不好,多少人失业,我怎么可能会不知道,但是真的是压抑了太久了,不如离职算了。

人生有时候就是不破不立。

开始学习前端技术是从2019年开始的,2020年6月23日希望以后每天记录一下自己的成长,给自己更多的信心,在新的领域乘风破浪。

  • HTML的定义

    html是超文本标记语言(hyper type markup language)

  • 结构

    html需要由各种标签组合而成的,必须要有<head></head><body></body>组成 <!DOCTYPTE HTML>不是标签,是个声明。指定浏览器使用哪个版本的html进行编写的 <head>标签里面可以包含<link><meta><javascript><title> 等标签

    • <link>标签:外部资源和本html的关系

    • <meta>标签:设置html的元信息,比如编码方式charset

    • <javascript>标签:嵌入javascript代码

    • <title>标签:文档的标题 <body>标签里面主要是内容

  • 标签类型

    • 设置样式的标签(闭合标签):<em> <i> <b> <strong>

    • 段落标签(闭合标签)<p></p>(段落标签之间会空一行)

    • 换行标签(单标签)<br/>(不会空一行)

    • 特殊标签:&nbsp空格、<sup> <sub> &copy

    • 横线标签(单标签)<hr/>

    • 保持文本格式标签<pre></pre>(内部的内容格式保持不变,文本等宽)

    • 列表标签

      • 无序列表<ul><li></li></ul> type类型:默认是disc,circle,square,none

      • 有序列表<ol><li></li></ol> type类型:a、A、1、i

      • 表格列表<dl><dt><dd></dd></dt></dl>顺序不能变

      •  

    • 表格标签

      • 表格标题<caption></caption>

      • 表格<table> <tr> <td> </td> </tr> </table>

      • 表格单元<table> <tr> <th> </th> </tr> </table>

      • 结构表格:<thead></thead> <tbody></tbody> <tfoot></tfoot>

        可以互换位置,布局不会改变

      • 表格属性

        • colspan:合并列

        • rowspan:合并行

        • border:表格边框宽度

        • cellpadding:表格内容距离单元格的距离

        • cellspacing:单元格之间的距离

        • bgcolor:背景颜色

        • align:对齐方式

        • frame:规定外侧边框的哪个部分是可见的

        • rules:规定内侧边框的哪个部分是可见的

        • summary:表格的摘要

        • width:表格的宽度

    • form标签

      • input标签 type元素类型:

        • text(size:输入字段的宽度;maxlength:字符的最大长度;name;value;height;placeholder)

        • password(size:输入字段的宽度;maxlength:字符的最大长度;name;value;height;placeholder)

        • file

        • radio(name要一致,checked默认选中)

        • checkbox(name不需要一致,checked默认选中)

        • image

        • hidden

        • button

        • submit

        • reset

      • textarea标签:输入多行文本

      • select菜单标签

        • option选项标签(size:显示列表标签;multiple:多选;selected默认选中;name;value)

        • optgroup选项组标签(size:显示列表标签;multiple:多选;selected默认选中;name;value)

    • div块标签 一个div块标签占一行,纵向分布

    • span标签 行内标签:横向粉笔

  • 标签分类

    • 块元素:<div>、<h1>~<h6>、<p>、<form>、<hr>、<dd>、<dl>、<dt>、<li> <ul>、<ol>、<table>、<thead>、<tbody>、<tfoot>、<th>

    • 行内元素:<span>、<a>、<input>、<p>、<em>、<select>、<textarea>、<img>

    • 区别:

      • 行内元素设置宽高无效

      • 行内元素margin左右有效、上下无效,padding都无效

      • 行内元素不会自动换行

      • 块元素可以设置宽高

      • 块元素可以设置margin和padding

      • 块元素可以自动换行

      • 块元素默认排列从上到下

猜你喜欢

转载自www.cnblogs.com/muzihuan/p/13180128.html