【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等,只能把它们转化成对象才可 ...
随机推荐
- js函数之四大调用模式
一.方法调用模式 当一个函数调用保存为一个对象的属性时我们称之为方法调用. var myObject = { value:0, increment:function(inc){ this.value ...
- 嵌入式Linux引导过程之1.1——Xloader的xloader.lds
本文中的所有代码版本都是基于ST的SpearPlus开发板的. xloader是在系统上电之后,执行完ROM中的frimware后最先开始执行的用户程序,它的体积很小,执行的功能也很简单,主要是对系统 ...
- FFmpeg-音频和视频应用程序的瑞士军刀
FFmpeg是一个开源免费跨平台的视频和音频流方案,属于自由软件,采用LGPL或GPL许可证(依据你选择的组件).它提供了录制.转换以及流化音视频的完整解决方案.它包含了非常先进的音频/视频编解码库l ...
- Hybrid APP 架构设计思路
关于Hybrid模式开发app的好处,网络上已有很多文章阐述了,这里不展开. 本文将从以下几个方面阐述Hybrid app架构设计的一些经验和思考. 原文及讨论请到 github issue 通讯 作 ...
- Sublime Text [Decode error - output not utf-8]
改Sublime Text的python build的设置.将其编码设置为cp936. 打开Python.sublime-build文件,并添加”encoding”:”cp936″这一行,保存即可 S ...
- CAN总线基础知识（一）
1．CAN总线是什么? CAN(Controller Area Network)是ISO国际标准化的串行通信协议.广泛应用于汽车.船舶等.具有已经被大家认可的高性能和可靠性. CAN控制器通过组成总线 ...
- 图像处理------Fuzzy C Means的聚合算法
Fuzzy C-Means聚合算法在图像分割(segmentation)和图像视觉处理中常常被用到聚合算法之 一本文是完全基于JAVA语言实现Fuzzy C-Means聚合算法,并可以运用到图像处理中 ...
- DBUtils-对JDBC简单封装的开源工具类库
DBUtils 是对JDBC简单封装的开源工具类 详细介绍地址: https://baike.baidu.com/item/Dbutils/10655914?fr=aladdin 在使用DBUtil ...
- vue cli创建的项目 当你后期使用了ES6语法，如何解决浏览器兼容问题
最近开发了一个项目,开发过程中,由于需要使用了async await ,于是发现,只有少数的浏览器支持,极大多数的浏览器是不支持这玩意的,在网上各种找解决方案,基本都是失败,最后总结了两个方案之后,尝 ...
- visual studio编写C#代码时“未能从程序集.....中加载类型”和“找不到方法”的一种可能的解决办法
编译前报错:$exception {"未能从程序集"XSW.MySQLDAL, Version=1.0.0.0, Culture=neutral, PublicKeyToke ...