html 笔记
2018-06-24 02:16:02来源：未知 阅读 ()
<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>
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
下一篇：网页设计学习笔记（1）
- DIV居中的经典方法 2020-06-13
- Html/css 列表项 区分列表首尾 2020-06-11
- HTML骨架 2020-06-10
- HTML基础教程_1 2020-06-09
- HTML基础02 2020-06-09
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
