html基础标签
定义最大标题定义最小标题 2.
水平线3.注释 4.
水平线3.注释 4.
段落 5.
换行6. style属性 修改html的样式background-color 改变背景颜色font-family 定义文本字体系列color 定义文本 ......
HTML常用标签
1. <h> 标题
<h1>定义最大标题
<h6>定义最小标题
<h1>this is a heading</h1>
2. <hr/> 水平线
3.注释
<!-- this is a comment-->
4. <p> 段落
<p>this is a paragraph</p>
5.<br/> 换行
6. style属性 修改html的样式
background-color 改变背景颜色
font-family 定义文本字体系列
color 定义文本颜色
font-size 定义文本的字体尺寸
text-align 规定文本水平对齐方式
<body style="background-color:yellow"> <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p> <h1 style="text-align:center">This is a heading</h1>
7.文本格式化相关的标签
粗体文本 <b>
加重语气 <strong>
定义大号字 <big>
定义为着重文字（不如strong） <em>
斜体字 <i>
定义小号字 <small>
定义下标字 <sub>
定义上标字 <sup>
8.预格式文本 <pre>
pre元素中的文本通常会保留空格和换行符，且文本也会显示等宽字体，故常用来显示计算机源代码，注意得使用符号实体表示特殊字符
9.计算机输出标签
定义编程代码 <code> 不会保留多余的空格和换行
定义变量 <var>
定义键盘输入 <kdb>
定义计算机输出实例 <samp>
10.地址 <address>
<address>定义文档或文章的作者的联系信息
位于<body>元素内，表示文档联系信息
位于<article>元素内，表述文章的联系信息
11.缩写和首字母缩写
定义缩写 <abbr>
定义首字母缩写 <acronym>
<abbr title="etcetera">etc.</abbr> <acronym title="World Wide Web">WWW</acronym>
把鼠标移至缩略词语上时，title 可用于展示表达的完整版本
12.定义文字方向 <bdo>
<bdo dir="rtl">Here is some Hebrew text</bdo> 从右向左输出
13.块引用
定义长的引用 <blockquote>
定义短的引用语 <q>
定义项目 <dfn>
定义著作的标题 <cite>
14.删除字效果和插入字效果
定义删除字 <del>
定义插入字 <ins>
15.使用样式方式
外部样式表 针对多个页面
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
内部样式表 针对单个文件
<head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head>
内联样式 针对个别元素
<p style="color: red; margin-left: 20px"> This is a paragraph </p>
16.链接 <a>
<a>标签可以通过href属性创建指向另一个文档的链接，也可以通过name属性创建文档内的书签
例：<a href="http://www.w3school.com.cn/">Visit W3School</a> 例2：<p> <a href="#C4">查看 Chapter 4。</a> </p> <h2><a name="C4">Chapter 4</a></h2> <p>This chapter explains ba bla bla</p>
如果需要在新窗口中打开链接，则应设置target属性为"_blank"
17.图像标签 <img>
例：<img src="boat.gif" alt="Big Boat">
src属性是图片位置，alt属性是设置图像无法加载时的文字显示
18.表格 <table>
其中行用<tr>定义，列用<td>定义
边框通过border属性设置，表头用<th>属性设置
表格标题<caption>
19.无序列表 <ul>
<ul> <li>Coffee</li> <li>Milk</li> </ul>
20.有序列表 <ol>
<ol> <li>Coffee</li> <li>Milk</li> </ol>
21.自定义列表项 <dl>
其中每个自定义列表项以<dt>开始，每个自定义列表项的定义以<dd>开始
22.div元素是为文档布局，span元素主要用于为部分文本设置样式属性
23.框架 <frameset>
垂直框架：
例：
<frameset cols="25%,50%,25%"> <frame src="/example/html/frame_a.html"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> </frameset>
水平框架：
<frameset rows="25%,50%,25%">
24.内联框架 <iframe>
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
25.插入脚本 <script>
<script type="text/javascript"> document.write("Hello World!") </script>
26.<head>所有头部元素的容器
可包含<title> <base> <link> <meta> <script> <style>
<title>定义文档标题
<base>为页面上的所有链接规定默认的地址
<link>常用于连接样式表
<style>为html文档定义样式信息
<meta>用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
一些小技巧：
设置背景图片
<body background="/i/eg_background.jpg">
设置图片对齐方式：
<p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p>
默认为bottom
将段落浮动至段落左边或右边：
<img src ="/i/eg_cute.gif" align ="left">
通过height和width属性放大或缩小图像
<img src="/i/eg_mouse.jpg" width="100" height="100">
创建有可供点击区域的图像地图，其中每个区域是一个超链接
<img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href ="/example/html/venus.html" target ="_blank" alt="Venus" /> <area shape="circle" coords="129,161,10" href ="/example/html/mercur.html" target ="_blank" alt="Mercury" /> <area shape="rect" coords="0,0,110,260" href ="/example/html/sun.html" target ="_blank" alt="Sun" /> </map>
处理空单元格：
用 代替里面的内容
设置跨行或跨列的表格单元格
横跨两列的单元格：
<th colspan="2">电话</th>
横跨两行的单元格
<th rowspan="2">电话</th>
设置单元格边距（单元格内容与边框之间的空白）
<table border="1" cellpadding="10">
设置单元格间距（单元格之间距离）
<table border="1" cellspacing="10">
在表格中添加背景颜色或背景图像
<table border="1" bgcolor="red"> <table border="1" background="/i/eg_bg_07.gif">
在表格单元中排列内容
<th align="right">一月</th>
设置不同类型的有序列表
通过改变type属性的值来改变排序的显示方式
<ol type="A"> 以大写字母类型排序
<ol type="a"> 以小写字母类型排序
<ol type="I">以罗马字母类型排序
<ol type="i">以小写罗马字母类型排序
默认是以数字排序
上一篇： 初次使用IDEA创建maven项目