【HTML】 HTML基础知识 一些标签
额。。是这样的，去年为了学习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代码中，也无法解析到网页上。所以对这些特殊字符，需要进行一个转义。
对应关系：
< < 或 <
> > 或 >
& & 或 &
" " 或 "
! !
空格  
同其他语言一样，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基础知识 一些标签的更多相关文章
- [SEO基础知识] html标签优化 (摘抄)
1.<title>页面标题</title> 百度优化全靠它!对于做百度优化来说,一定要记得这个标签可能是你是否真正能够做到网站排名提高的重点,而且这个重点绝对不容忽视.标题主要 ...
- Python学习-基础知识-2
目录 Python基础知识2 一.二进制 二.文字编码-基础 为什么要有文字编码? 有哪些编码格式? 如何解决不同国家不兼容的编码格式? unicode编码格式的缺点 如何既能全球通用还可以规避uni ...
- 9月5日网页基础知识 通用标签、属性（body属性、路径、格式控制） 通用标签（有序列表、无序列表、常用标签）（补）
网页基础知识 一.HTML语言 HTML语言翻译汉语为超文本标记语言. 二.网页的分类 1.静态页面:在静态页面中修改网页内容实际上就是修改网页原代码,不能从后台操作,数据来只能来源于原于代码.静态网 ...
- html基础知识1（基本标签）2017-03-07
摘要:php基础知识1 内容:大学中虽有接触,却是以学生的心态去应付考试的,学的都是理论知识:从今天开始我同样还是要以学生的心态去学习,但却要以要从事工作的心态去练习. 以下为第一天所学内容,因电脑原 ...
- selenium自动化基础知识
什么是自动化测试? 自动化测试分为:功能自动化和性能自动化 功能自动化即使用计算机通过编码的方式来替代手工测试,完成一些重复性比较高的测试,解放测试人员的测试压力.同时,如果系统有不份模块更改后,只要 ...
- 网络爬虫: 从allitebooks.com抓取书籍信息并从amazon.com抓取价格(1): 基础知识Beautiful Soup
开始学习网络数据挖掘方面的知识,首先从Beautiful Soup入手(Beautiful Soup是一个Python库,功能是从HTML和XML中解析数据),打算以三篇博文纪录学习Beautiful ...
- 前端开发：css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- Java基础知识【下】( 转载)
http://blog.csdn.net/silentbalanceyh/article/details/4608360 (最终还是决定重新写一份Java基础相关的内容,原来因为在写这一个章节的时候没 ...
- IOS开发基础知识碎片-导航
1:IOS开发基础知识--碎片1 a:NSString与NSInteger的互换 b:Objective-c中集合里面不能存放基础类型,比如int string float等,只能把它们转化成对象才可 ...
随机推荐
- 修正uboot网络不可用
通过使用uboot的网络功能可以更新ubook,烧写内核,文件系统,如果网络功能不可能,那还不如同变砖了一样.当然如果支持sd卡启动,可能通过sd卡完成这些功能,但是也太过麻烦了.飞凌的6410开发板 ...
- php 连接mssql
以前用的都是mysql,今天突然想用下mssql,起先用的是sql server200. 第一种方法 打开mssql.dll拓展.然后把mssql.secure_connection = off改为o ...
- servlet上传文件报错（三）
1.具体报错如下 null null Exception in thread "http-apr-8686-exec-5" java.lang.OutOfMemoryError: ...
- （二十四）mongodb中group的问题二
今天的工作还是继续昨天没有完成的,由于对mongodb数据库的不熟悉,导致昨天的思路上也出了一点问题,我需要查询出同一个ruleID中不同的processingID的条数,然后根据条数来排列先后顺序, ...
- eclipse 修改默认的author
1. 在eclipse.ini中添加 -vmargs -Duser.name={author name} 记得一定要在-vmargs之后,否则无效. 2. 设置eclipse参数 windows--& ...
- emWin 2天速成实例教程000_如何快速入门ucGUI/emWin
备注:(1)打开工程目录下的"Exe\GUISimulationDebug.exe"即可看到效果.(2)看完教程000-005就基本会用emWin做项目,其他章节可以需要时再参考. ...
- Linux之23个重要命令
作为工作几年的Linux运维老司机,总结了Linux命令行的常用的一些用法,希望对您有所收获. 1. 搜索 在vi和vim中如果打开一个很大的文件,不容易找到对应的内容,可以使用自带的搜索关键字进行搜 ...
- 【POJ2387】Til the Cows Come Home （最短路）
题面 Bessie is out in the field and wants to get back to the barn to get as much sleep as possible bef ...
- 【CJOJ2498】【DP合集】最长上升子序列 LIS
题面 Description 给出一个 1 ∼ n (n ≤ 10^5) 的排列 P 求其最长上升子序列长度 Input 第一行一个正整数n,表示序列中整数个数: 第二行是空格隔开的n个整数组成的序列 ...
- CDQ分治嵌套模板:多维偏序问题
CDQ分治2 CDQ套CDQ:四维偏序问题 题目来源:COGS 2479 偏序 #define LEFT 0 #define RIGHT 1 struct Node{int a,b,c,d,bg;}; ...