额。。是这样的，去年为了学习web框架，自己开发了一个zbx配置管理的二次开发系统，当时从零开始接触web开发，也第一次接触到了前端的一些知识。其中最基础的就是html/css了。我把那部分笔记整理上来，但是肯定是非常粗浅的（本来写一本书都不为过的内容记录在一篇文章里），总之先记录下来了。

html

■　　HTML基本标签

　　<html></html>　　整个文件的开始标签

　　<head></head>　　关于html文件本身的一些信息，比如可以有子标签如下：

　　　　title　　文件名称，显示在网页标题栏中的文字

　　　　base　　base标签为页面上的所有链接规定默认地址或默认目标（target）如<base href="default_url" target="_blank" />

　　　　link　　指明一个引用的外部文件，通常引用比如样式表，js脚本，js库等等，如<link rel="stylesheet" type="text/css" href="mystyle.css" />

　　　　style　　用于指定本文件一些标签的个性化样式

　　　　meta　　meta标签提供了一些html文档的元数据，虽然不显示到页面上，但是对于解析html的工具而言是可读的。比如搜索引擎就会读取页面的meta标签中的一些内容来抓取关键信息。

　　　　//关于meta中设置页面编码的问题。之前我都不太关注html页面的编码问题，主要是因为在我的IDE中创建html文件时都会自动帮我设置好utf8的编码。。当我今天想要用程序创建一个html文件的时候发现GG，中文乱码了。。所以在程序创建html的时候还是要注意得在文件中添加一个 类似于<meta charset="utf8">的编码声明。

　　　　script　　定义客户端脚本

　　<body></body>　　正文开始的标记

■　　页面布局相关标签

　　<br>　　换行

　　<nobr></nobr>　　强行不换行

　　<wbr></wbr>　　自动换行

　　<p></p>　　分段，可以选属性align来选择left,right,center等

　　<pre></pre>　　按代码中文字的原样显示文本内容,比如写:

  1. <pre>
  2.     ab
  3.     cd
  4. </pre>

　　在网页上显示的就是:

  1.     ab
  2.     cd

　　<center></center>　　将内容相对网页居中显示

　　<hr>　　插入水平分割线，可用参数size(像素，粗细)，width（百分比像素均可），align（对齐），color，noshade（去阴影）

　　<adress></adress>　　签名，通常可以放在页面最下面，用斜体展示

* 属性的值可以不写引号，但是基本上还是写上比较好

■　　特殊字符和注释

　　字符如">"，"<"，"!"，空白字符等即使写到html代码中，也无法解析到网页上。所以对这些特殊字符，需要进行一个转义。

　　对应关系：

　　　　<　　&lt 或 &#60

　　　　>　　&gt 或 &#62

　　　　&　　&amp 或 &#38

　　　　"　　&quot 或 &#34

　　　　!　　&#33

　　　　空格　　&nbsp

　　同其他语言一样，html还可以进行注释。注释都写在<>中，以!开头。有<!some comment>和<!--some comment -->两种形式。如果原本是有用的标签，注释之后就没用了

■　　美化工作

　　●  网页背景设置

　　背景属性在<body>中设置，比如有属性bgcolor="#nnnnnn"（设置背景色），text="#FFFF00"（设置文字颜色）。

　　●  字体

　　自带标题字体<h1></h1>到<h6></h6>，可以设置align属性

　　另外可以用<font>标签对文字分区块地进行个性化的外观设置。<font>有参数face(字体，如face="黑体"），size（大小，默认是3，最大是7），color

　　还有一些自带的字体：

　　　　<b></b>　　粗体

　　　　<i></i>　　斜体

　　　　<u></u>　　下划线

　　　　<em></em>　　强调

　　　　<strong></strong>　　重强调

　　　　<site></site>　　引用

　　　　<code></code>　　代码

■　　超链接

　　任何可以连接到网站内外的资源的字符串，都可以用超链接

　　用 <a href="some link"></a>

　　连接外部资源可以用绝对路径的URL，如果内部资源可以写相对路径

■　　列表

　　●　无序列表

  1. <ul type="circle">
  2.     <li>item1</li>
  3.     <li>item2</li>
  4. </ul>

　　type可选disc（小黑点），circle（小圆圈），square（小黑方块）

　　●  有序列表

  1. <ol type="A">
  2.     <li>item</li>
  3.     <li>iitem2</li>
  4. </ol>

　　type可选1,A,a和I，代表有序列表的项是1,2,3..或A,B,C...或a,b,c...或I,II,III,IV...

■　　表格

　　表格用到 <table><tr><th><td>四种标签

　　<table>用于总起总结，可选属性有

　　　　border = 数值　　边框密度

　　　　bordercolor

　　　　width = 数或百分比

　　　　height = 数或百分比

　　　　align　　对齐方式，值表格整体相对于页面

　　　　bgcolor

　　　　background = URL　　可以设置背景用图片

　　　　cellspacing = 数　　内部格框线的密度

　　　　frame = box或者void或者其他情况　　见书P70，设置边框的显示情况

　　　　rules = all或者groups或者其他　　见P71

　　* 在<table>中的<tr>标签之前加上<caption>可以加上表的标题

　　<tr>总起一行到</tr>总结，属性可选

　　　　height = 数　　设置行高

　　　　bordercolor

　　　　bgcolor

　　　　align　　设置行内内容的水平对其方式

　　　　valign　　设置行内内容的垂直对齐方式

　　<th>,<td>都是单元格，<th>指表头字段，这些单元格标签有属性：

　　　　bgcolor

　　　　bordercolor

　　　　width = 数或百分比

　　　　rowspan,colspan = 数　　指出该单元格跨了几行/几列，用于合并单元格

　　　　align,valign

■　　块和布局

　　大多数HTML元素被分成了块级元素和内联元素两种（block level element & inline element），所谓块级元素在浏览器中显示时通常以新行开始，比如<h1>,<p>, <ul>, <table>等。与之相对的，内联元素在显示时通常不会以新行开始，比如<b>, <td>, <a>, <img>等。

　　<div>和<span>是两个重要的容器标签，本身没有实际内容，但是可以作为容器组合其他html标签。<div>是个块级标签，浏览器会在其前后显示折行。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。一方，<span>是内联元素，可用作文本的容器。<span> 元素也没有特定的含义。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

　　利用div和span的特点，可以结合CSS来形成网页的布局，比如下面这段示例代码:

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <style>
  6. #header {
  7.     background-color:black;
  8.     color:white;
  9.     text-align:center;
  10.     padding:5px;
  11. }
  12. #nav {
  13.     line-height:30px;
  14.     background-color:#eeeeee;
  15.     height:300px;
  16.     width:100px;
  17.     float:left;
  18.     padding:5px;
  19. }
  20. #section {
  21.     width:350px;
  22.     float:left;
  23.     padding:10px;
  24. }
  25. #footer {
  26.     background-color:black;
  27.     color:white;
  28.     clear:both;
  29.     text-align:center;
  30.    padding:5px;
  31. }
  32. </style>
  33. </head>
  34.  
  35. <body>
  36.  
  37. <div id="header">
  38. <h1>City Gallery</h1>
  39. </div>
  40.  
  41. <div id="nav">
  42. London<br>
  43. Paris<br>
  44. Tokyo<br>
  45. </div>
  46.  
  47. <div id="section">
  48. <h2>London</h2>
  49. <p>
  50. London is the capital city of England. It is the most populous city in the United Kingdom,
  51. with a metropolitan area of over 13 million inhabitants.
  52. </p>
  53. <p>
  54. Standing on the River Thames, London has been a major settlement for two millennia,
  55. its history going back to its founding by the Romans, who named it Londinium.
  56. </p>
  57. </div>
  58.  
  59. <div id="footer">
  60. Copyright ? W3Schools.com
  61. </div>
  62.  
  63. </body>
  64. </html>

　　得到的效果是:

■　　框架和框架集

　　框架可以让一个页面上显示另一个页面。在selenium等工具的实践中也确实碰到过框架切换的操作。一般框架的标签是 <frame> ，其属性src指向一个url，表示该框架内显示的内容来源，可以是站内的一些资源也可以是站外的一些资源。

　　<frameset>是框架集，可以指定属性 rows或cols。这两者的值比如rows="30%,70%"表示把页面分成两行，第一行高页面的30%，第二行高70%，然后在这个frameset里面写两个frame，两个frame自动地按照顺序填进frameset里面。在frameset中可以设置属性noresize="noresize"的话就可以让框架不可调整大小。

　　需要注意的一点：frame必须写在frameset里面且frameset是和body同级别的一个标签。也就是说frameset不能写在body里面，即frameset和body不能同时被显示在页面上。一个html要么显示body中的内容，要么就是frameset中的几个框架铺满整个窗口。

　　*关于如何让框架跳转到指定的元素：

　　在浏览网页的时候经常需要一下跳转到相应的元素的位置。frame可以在其属性src的url最后跟上类似于#ID的写法让这个框架在加载完成后就跳转到id是ID的元素的位置。

　　

■　　内联框架

　　上面说到的框架和框架集要么不用，一用就是铺满整个页面的。如果想要在html的body里面添加上框架就要用到内联框架，其标签是<iframe>

　　iframe可以添加到body中去，在页面上显示，同时iframe的属性有src指向url，width=数或百分比,height=数或百分比等来设置大小的属性。frameborder=像素来设置边框的粗细，设置为0时为无边框。

　　iframe可以和一个链接元素<a>来进行互动，比如设置iframe的name属性（不是id是name）和某个<a>的target属性一致的话，那么就可以在点击这个超链接的时候让不是整个页面加载新网页而是把新网页加载到相应的iframe里面了。

■　　颜色代码和颜色名

　　在一些设置颜色比如bgcolor之类的场合中，可能会用到颜色代码。颜色代码是#nnnnnn的井号加六位数字的格式，html也支持一些颜色名称来指代颜色比如red,blue,green等。具体的颜色代码和颜色名称可以参考w3cschool的http://www.w3school.com.cn/html/html_colornames.asp。

东西有点多啊。。再开一篇√

【HTML】 HTML基础知识 一些标签的更多相关文章

  1. [SEO基础知识] html标签优化 (摘抄)

    1.<title>页面标题</title> 百度优化全靠它!对于做百度优化来说,一定要记得这个标签可能是你是否真正能够做到网站排名提高的重点,而且这个重点绝对不容忽视.标题主要 ...

  2. Python学习-基础知识-2

    目录 Python基础知识2 一.二进制 二.文字编码-基础 为什么要有文字编码? 有哪些编码格式? 如何解决不同国家不兼容的编码格式? unicode编码格式的缺点 如何既能全球通用还可以规避uni ...

  3. 9月5日网页基础知识 通用标签、属性（body属性、路径、格式控制） 通用标签（有序列表、无序列表、常用标签）（补）

    网页基础知识 一.HTML语言 HTML语言翻译汉语为超文本标记语言. 二.网页的分类 1.静态页面:在静态页面中修改网页内容实际上就是修改网页原代码,不能从后台操作,数据来只能来源于原于代码.静态网 ...

  4. html基础知识1（基本标签）2017-03-07

    摘要:php基础知识1 内容:大学中虽有接触,却是以学生的心态去应付考试的,学的都是理论知识:从今天开始我同样还是要以学生的心态去学习,但却要以要从事工作的心态去练习. 以下为第一天所学内容,因电脑原 ...

  5. selenium自动化基础知识

    什么是自动化测试? 自动化测试分为:功能自动化和性能自动化 功能自动化即使用计算机通过编码的方式来替代手工测试,完成一些重复性比较高的测试,解放测试人员的测试压力.同时,如果系统有不份模块更改后,只要 ...

  6. 网络爬虫: 从allitebooks.com抓取书籍信息并从amazon.com抓取价格(1): 基础知识Beautiful Soup

    开始学习网络数据挖掘方面的知识,首先从Beautiful Soup入手(Beautiful Soup是一个Python库,功能是从HTML和XML中解析数据),打算以三篇博文纪录学习Beautiful ...

  7. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  8. Java基础知识【下】( 转载)

    http://blog.csdn.net/silentbalanceyh/article/details/4608360 (最终还是决定重新写一份Java基础相关的内容,原来因为在写这一个章节的时候没 ...

  9. IOS开发基础知识碎片-导航

    1:IOS开发基础知识--碎片1 a:NSString与NSInteger的互换 b:Objective-c中集合里面不能存放基础类型,比如int string float等,只能把它们转化成对象才可 ...

随机推荐

  1. 笔记︱基于网络节点的node2vec、论文、算法python实现

    看到一个很有意思的算法,而且腾讯朋友圈lookalike一文中也有提及到,于是蹭一波热点,学习一下.论文是也发KDD2016 . . 一.主要论文:node2vec: Scalable Feature ...

  2. ARM开发软件ADS教程

    ARM开发软件ADS教程 ADS(ARM Developer Suite)是ARM公司推出ARM集成开发环境,操作简单方便,获得广大开发人员的青睐.下面使用ADS v1.2做一个实例教程,帮助大家学会 ...

  3. R用户的福音︱TensorFlow：TensorFlow的R接口

    ------------------------------------------------------------ Matt︱R语言调用深度学习架构系列引文 R语言︱H2o深度学习的一些R语言实 ...

  4. 在Ubuntu 中使用Source Code Pro字体

    1.下载字体 推荐GitHub上面的项目主页上下载 Source Code Pro 2.解压 unzip SourceCodePro_FontsOnly-1.013.zip 3. 打开SourceCo ...

  5. HighCharts之2D饼图

    HighCharts之2D饼图 1. HighCharts之2D饼图源码 <!DOCTYPE html> <html> <head> <meta charse ...

  6. java中final和static

    final的意思是最终的,最后的额,不可变的,在java中也具有相似的含义. final修饰基础数据表示把该数据修饰成常量,意味着不可修改,不可变. final修饰对象的引用的时候,表示该引用不可变, ...

  7. 芝麻HTTP：

    只要你的Scrapy Field字段名字和 数据库字段的名字 一样.那么恭喜你你就可以拷贝这段SQL拼接脚本.进行MySQL入库处理. 具体拼接代码如下: def process_item(self, ...

  8. pat1041-1050

    没想到半天就做完了10题 = =,这几题太简单了,基本10分钟一题 1041 #include<cmath> #include<map> #include<iostrea ...

  9. RLS自适应滤波器中用矩阵求逆引理来避免求逆运算

    在RLS自适应滤波器的实现过程中,难免不涉及矩阵的求逆运算.而求逆操作双是非常耗时的,一个很自然的想法就是尽可能的避免直接对矩阵进行求逆运算.那么,在RLS自适应滤波器的实现中,有没有一种方法能避免直 ...

  10. 都在说RunLoop...... 到底什么是RunLoop？

    RunLoop(消息循环):说白了就是一种事件监听循环.就好比是一个while循环,监听到事件就起来,没有就休息. 介绍: 它可以在不同模式下进行切换,iOS有五种模式,其中UIInitializat ...