HTML速查表

发表于   |   分类于 ，   |  

       其实一开始是打算跟着上一篇一起写的。关键是当时全想着怎么吹那边书去了。。。正好今天整理下HTML一些基础小知识。

调试工具

调试工具我这边使用的是Chrome调试。
具体使用：

  • F12。
  • 鼠标右键-审查元素。
    HTML速查表

meta的作用

  • 搜索引擎定义关键字。

    1
    <meta name="keywords" content="前端，html">

  • 网页定义内容描述。

    1
    <meta name="description" content="简明的现代魔法">

样式的三种写法

  • 外部样式列表
  • 内部样式列表
  • 内联样式（不推荐，不语义化）
    现在一般常用的是外部样式列表。三种使用方法下面会列出：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <link rel="stylesheet" href="XXXX.css">//这个就是外部样式列表啦。
    	<style>
    		body{
    			margin:0;
    			padding:0;
    		}
    	</style>
    	//这个就是内部样式列表
    	<p style="font-size:16px;">简明的现代魔法</p>
    	//这个就是内联样式(不推荐使用，不语义化。)

文本

  • 颜色的几种写法：

    1
    2
    3
    4
    5
    有三种：
    颜色名称：red blue yellow black等
    十六进制：#ffffff(可简写为#fff)
    RGB原色：rgb（255，233，242）【区间：0~255】
    RGBA透明色：rgba（233，243，211，0.2）【a的区间：0~1】

  • 字体样式：

    1
    font-family:"微软雅黑"//这个时候脑子里面想的就只有这个了- -哈哈。，其实还有很多。

  • 字体大小:

    1
    font-size:14px;//这里说一点，一般浏览器默认字体大小都为16px，最小字体为12px;

  • 字体风格：

    1
    font-style：italic//这个一般用的比较少，不过我记得用也是用font-style:normol;

  • 字体粗细:

    1
    font-weight:bold//这里除了可以是bold，thin 外还可以是100~900的数字。

  • 位置

    1
    2
    text-align:center;
    //这里是让一个块级元素中的内联元素居中对齐,是不是很绕？多读两边就好了- -!

  • 间距

    1
    line-height:20px;//这里常常用line-height的高度等于盒子高度，来让文本垂直对齐。

  • 首行缩进

    1
    2

    text-indet:2em;//这里2em 就是两个字符的距离，就是我们平时的那个啥首行缩进。

a标签

现在对于a标签,我最熟悉的莫过于超链接了。平时工作中和他接触最多的就是这个- -

1
2
<a href="http://liruihaod.github.io" target="_blank">这就是超链接</a>
//这个就是一个a标签,设置的是新窗口打开，一般默认是本窗口打开即为——target="_self"

一般来说a标签的作用就三点：

  • 作为锚点
  • 当连接用
  • 下载使用
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <a href="#html">我是传送门</a>
    ----
    ----
    ----
    <p id="html">传送门出口</p> 
    //这个就是作为锚点的作用;
    <a href="http://www.baidu.com">百度一下</a>
    //这个就是作为连接使用
    <a href="XXXX.exe">点我下载文件</a>
    //如何Href指向的是一个文件，就会起到下载文件的作用。

其实说了那么多,我觉得主要还是理解heft的作用，heft:超文本引用,相当于herf里面是一个地址栏，就好比可以给我一个电话号码，打过去可以是学校电话，也可以是公司电话，也可以是空号。

表单

  • form
    1
    2
    3

    <form action="后台地址" method="post" name="memu"></form>
    //把用户输入的数据提交到后台,实现用户交互。

一般来说form 有这几点构成

  • name：表单提交时的名称;
  • action：提交到的地址;
  • method：提交方式 GET/POST;

前面两点都很好理解，这里说几点GET与POST的区别

  • GET用于传输少量数据，POST用于传输大量数据的时候使用
  • GET交互最大数据为1K,收到浏览器窗口的限制，POST理论上无限制，当时收到服务器后台的限制。(GET受到浏览器窗口限制很好理解。里面浏览器输入框都有最大输入限制。字数最大就是1024个字符。,POST收到服务器的限制可能是，如果这个文件太大了，超过服务器能接受的程度，当然就接受不了啦.xD~~)
  • GET安全性不是很好，能在浏览器浏览记录查询到，(毕竟人家就直接在url里面)而POST的不会在URL留下痕迹，安全性优于get。
  • input
    简而言之input就是表单元素中的内容啦。
    为了方便 我就用html一并表示啦
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18

    <input type="text" name="txt"> <br>//设置文本输入框

    <input type="password" name="code"><br>//设置密码输入框

    你喜欢前端吗？<input type="radio" name="person" id="like"> <label for="like">喜欢</label>
    <input type="radio" name="person" id"dislike"> <label for="dislike">不喜欢</label>
    //这里当然是喜欢。如何是单选，name一定要一致，另外设置label之后 就可以点文字 也能相当于点击按钮了。

    你的爱好有哪些？<input type="checkbox" name="interest" disabled>炉石
    <input type="checkbox" name="paly">狼人杀
    <input type="checkbox" name="run">爬山
    //这里设置 disabled 可以让此复选框不能选中。

    有什么想说的话：<textarea name="say" id="sat" cols="30" rows="10"></textarea>
    //文本输入框

    还有一个<input type="hidden" name="">//隐藏域,储存一些数据，用户看不到。感觉相当于一个验证的手段。