【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等,只能把它们转化成对象才可 ...
随机推荐
- The Windows account sa does not exist and cannot be provisioned as a SQL Server system administrator
今天遇到一个案例,在使用命令修改一个测试服务器(SQL Server 2014标准版)的服务器排序规则时,遇到了下面错误信息 (具体账号信息脱敏处理,随机生成一个账号密码) The Windows a ...
- 实战DeviceIoControl 之二：获取软盘/硬盘/光盘的参数
Q 在MSDN的那个demo中,将设备名换成"A:"取A盘参数,先用资源管理器读一下盘,再运行这个程序可以成功,但换一张盘后就失败:换成"CDROM0"取CDR ...
- API接口签名校验
在开发app中,我们经常要为app提供接口.但是为了保证数据的安全,我们通常会对接口的参数进行加密. 1.不验证的接口api api接口请求,"http://www.xx.com/getUs ...
- Nginx负载均衡和反向代理的配置和优化
负载均衡 负载均衡是由多台服务器以对称的方式组成一个服务器集合,每台服务器都具有等价的地位, 反向代理 是指以代理服务器来接受internet上的请求,然后将请求转给内部的服务器 常见的负载均衡 1. ...
- 《实战Nginx》读书笔记--Nginx配置文件
先看下一份的Nginx 的配置 #user nobody nobody;#使用的用户和组 worker_processes 4;#工作进程的个数,一般等于CPU核数或者总核数的两倍 #error_lo ...
- 【mongodb系统学习之八】mongodb shell常用操作
八.mongodb shell常用基础操作(每个语句后可以加分号,也可以不加,看情况定(有的工具中可以不加),最好是加): 1).进入shell操作界面:mongo,上边已有演示: 2).查看当前使 ...
- Stanford Word Segmenter使用
1,下载 Stanford Word Segmenter软件包: Download Stanford Word Segmenter version 2014-06-16 2,在eclipse上建立一个 ...
- 挖一挖不常用到而又很实用的重载-Trim
这个我想没有那个开发人员说不知道,但是里面有一个重载,这个不知道有多少开发人员知道! 可以看到,我可以去掉字符串前后的指定字符,只要我在char[]中指定即可,而不是仅仅去掉空格,这次为什么要提它,是 ...
- 获取JSON对象的属性名称
1.问题背景 一个json对象,是以键值对组成,通过循环json对象,获取json对象中的属性名称 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- 一道bfs与邻接表应用题
Problem Description 终于有一天,王元姬用他的劫打上了最强王者.他号称,他从来不会在偶数段位停留,因为他的实力太强会跳段(这个13我给满分).傲娇棠和翔妹觉得他的13装的都比勇哥哥好 ...