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

html 笔记

程序员文章站 2022-04-24 18:29:14

this is the first heading

..
this is heading 5

this is a paragraph

this is another

链接< ......

<html>
</html>

<body>
</body>

<h1> this is the first heading </h1>
.
.
<h5> this is heading 5</h5>

<p> this is a paragraph </p>
<p> this is
another </p>

链接
<a href="http://www.w3school.com.cn"> this is a link </a>

imag只包含属性，没有闭合标签
<img src=" "/>
<img src=" picture name .图像格式" width="number " height=" number" />
图像背景
<body background="picture.格式"/>
</body>
在文字中的位置
<img src="picture" align="bottom/middle/top"/>
在段落的左右位置
align="right/left"


属性
<h1 align="center">this is heading 1 </h1> 居中
<h1 style="text-align:center"> this is heading 1 </h1>
<body bgcolor="yellow">
</body> background color

level line水平线
<hr/>

注释notes
<!-- content 内容 -->

折行<br/>
<p>
break<br/>lines<br/>use br tag
<p/>

样式 style<!--内联样式，个别元素 -->
<h1 style="background-color:green">thie is a heading</h1>
<p style="font -family:arial;color:red;font-size:20px;"> a pargraph</p>
内部样式
添加到<head> </head>间对文件格式化
<head>
<style type="text/css">
body { background-color : red}
p { color : blue}
</style>
</head>
外部样式


文本格式
<b>this text is bold</b> 粗体文本
<i>this text is italic</i> 斜体文本
保留空格和换行
<pre>
content
</pre>

缩写 abbreviation
<abbr title="原内容"> 缩写内容</abbr>
首字母缩写
<acronym title=" World Wide Web">WWW</acronym>
鼠标移至缩略词显示原内容

quote引用
长引用
<blockquote>
</blockquote> <!-- 自动插入换行，外边距 -->
短引用
<q>
</q>

delete 删除
<del> content </del>
下划线效果
<ins> content </ins>

著作标题<cite>
<p> <cite> The Scream </cite> by Munch ,Painted in 1893 </p>

没有下划线的链接
<a href="address" style="text-decoration:none">
content
</a>

本页跳转，the different position of the same page
<p>
<a href="# any name "> content such as 'jump to...'</a>
</p>
...
<h2> <a name=" the name same as above "> chapter six </a></h2>
<!--click jump to,than to chapter six-->


表格table
边宽 、格边距、格间距、背景颜色/图片 <table border="num 1/2/3/..." cellpadding=" number"
cellspacing="number" bdcolor="color red/blue "
background="picture ">
<tr> <!--行-->
<td>content/number</td>
<td> </td>
</tr>
<tr> <!--第二行-->
<td> content </td>
<td bgcolor="color" background="picture"> content </td>
内容左/右对齐
<td align="right/left"> content </td>
<td> </td>
</tr>
表头 header
<tr>
<th> content </th>
</tr>
横跨行列表头
<th colspan=" num 跨几列"> name </th>
<th rowspan=" num跨几行 "> name </th>

无序列表<ul> </ul>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
符号 <ul type="circle/square">
有序列表<ol> </ol>
<ol>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
符号 字母<ol type="A"> 罗马字母 <ol type="I">
<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>

定义列表
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

块
<h3>This is a header</h3>
<p>This is a paragraph.</p>

<div style="color:#00FF00">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
类
行：
<!DOCTYPE html>
<html>
<head>
<style>
span.red {
color:red;
}
</style>
</head>

<body>

<h1>我的<span class="red">重要的</span>标题</h1>

</body>
</html>
块<div>

类
<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;
}
</style>
</head>

<body>

<div id="header">
<h1>City Gallery</h1>
</div>

<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
</body>
</html>

输入
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
文本字段的默认宽度是 20 个字符

按钮
<!DOCTYPE html>
<html>
<body>

<button type="button" onclick="alert('Hello World!')">点击我！</button>

</body>
</html>

上一篇： 几则搞笑军旅笑话

下一篇： C# 当中 foreach 的原理

推荐阅读