欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

html基础标签

程序员文章站 2022-07-02 16:25:45
HTML常用标签 1. 标题

定义最大标题

定义最小标题 2.
水平线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>

 

处理空单元格：
用&nbsp;代替里面的内容
设置跨行或跨列的表格单元格


横跨两列的单元格：

<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">以小写罗马字母类型排序
默认是以数字排序

上一篇： iOS 日记app的制作过程（Objective-C）

下一篇： hdu 1078

推荐阅读