额。。是这样的，去年为了学习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>　　按代码中文字的原样显示文本内容,比如写:

<pre>

    ab

    cd

</pre>

　　在网页上显示的就是:

    ab

    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，如果内部资源可以写相对路径

■　　列表

　　●　无序列表

<ul type="circle">

    <li>item1</li>

    <li>item2</li>

</ul>

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

　　●  有序列表

<ol type="A">

    <li>item</li>

    <li>iitem2</li>

</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来形成网页的布局，比如下面这段示例代码:

<!DOCTYPE html>

<html>

<head>

<style>

#header {

    background-color:black;

    color:white;

    text-align:center;

    padding:5px;

}

#nav {

    line-height:30px;

    background-color:#eeeeee;

    height:300px;

    width:100px;

    float:left;

    padding:5px;

}

#section {

    width:350px;

    float:left;

    padding:10px;

}

#footer {

    background-color:black;

    color:white;

    clear:both;

    text-align:center;

   padding:5px;

}

</style>

</head>

<body>

<div id="header">

<h1>City Gallery</h1>

</div>

<div id="nav">

London<br>

Paris<br>

Tokyo<br>

</div>

<div id="section">

<h2>London</h2>

<p>

London is the capital city of England. It is the most populous city in the United Kingdom,

with a metropolitan area of over 13 million inhabitants.

</p>

<p>

Standing on the River Thames, London has been a major settlement for two millennia,

its history going back to its founding by the Romans, who named it Londinium.

</p>

</div>

<div id="footer">

Copyright ? W3Schools.com

</div>

</body>

</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. R语言实现︱局部敏感哈希算法（LSH）解决文本机械相似性的问题（二，textreuse介绍）

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 上一篇(R语言实现︱局部敏感哈希算法(LSH) ...

  2. C#连接oracle数据库步骤

    1.  确认操作系统类型,操作系统是64位还是32位: 2.  按对应版本安装oralce客户端版本(64位还是32位): 3.  安装oralce管理员模块,同时赋予安装目录权限 4.  注册old ...

  3. Django学习-3-请求流程

    Django请求生命周期     -> URL对应关系(匹配) -> 视图函数 -> 返回用户字符串     -> URL对应关系(匹配) -> 视图函数 -> 打 ...

  4. 不为人知的scanf

    这是一篇为老谭洗白的文章 前几天,我见有人在群里说,谭浩强那本书不咋样,还不少错误.我就看了看他发出来的错误 #include<stdio.h> int main(){ int a,b; ...

  5. spring整合JMS

    浏览博客时看到大神写的,直接转载过来收藏了.原文地址:http://elim.iteye.com/blog/1893038

  6. 第九篇：Map/Reduce 工作机制分析 - 作业的执行流程

    前言 从运行我们的 Map/Reduce 程序,到结果的提交,Hadoop 平台其实做了很多事情. 那么 Hadoop 平台到底做了什么事情,让 Map/Reduce 程序可以如此 "轻易& ...

  7. ssm框架之将数据库的数据导入导出为excel文件

    在这里首先我要将自己遇到的各种问题,以及需求记录下来,做一个备忘,便于以后查看: 需求:主要实现两个功能,将oracle数据库里的数据导出为excel,同时需要将excel表格的数据导入到数据库 环境 ...

  8. telnet命令使用详解

    telnet命令用于登录远程主机,对远程主机进行管理.telnet因为采用明文传送报文,安全性不好,很多Linux服务器都不开放telnet服务,而改用更安全的ssh方式了.但仍然有很多别的系统可能采 ...

  9. 面向对象和面向过程，python中的类class，python中程序的入口——main方法，

    1.程序入口,让main显现出来: print(__name__)#__name___是模块中的隐藏字段,当前模块运行的函数名 if __name__ == __main__ __main__() # ...

  10. NancyFX 第三章 Web框架

    如果使用Nancy作为一个WEB框架而言,会有什么不同?实际上很多. 在使用Nancy框架为网页添加Rest节点和路由和之前的Rest框架中是相同的,这方面没有什么需要学习的了.Nancy采用一贯的处 ...