HTML基础知识
2016-07-21 10:49
525 查看
HTML基础知识总结
标签：网页制作HTML 链接
HTML 链接是通过<a>标签进行定义的。
实例:
<html> <body> <a href="http://www.w3school.com.cn"> This is a link</a> </body> </html>
没有下划线的链接：
<a href="/example/html/lastpage.html" style="text-decoration:none">这是一个链接！</a>
用图像做链接
<a href="/example/html/lastpage.html"> <img border="0" src="/i/eg_buttonnext.gif" /> </a>
target="_blank"使得链接在新窗口中打开
跳转到文档的其余部分
<html> <body> <p> <a href="#C4">查看 Chapter 4。</a> </p> <h2>Chapter 1</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 2</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 3</h2> <p>This chapter explains ba bla bla</p> <h2><a name="C4">Chapter 4</a></h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 5</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 6</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 7</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 8</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 9</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 10</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 11</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 12</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 13</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 14</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 15</h2> <p>This chapter explains ba bla bla</p>
HTML图像
HTML 图像是通过<img>标签进行定义的。
实例：
<html> <body> <img src="/i/eg_w3school.gif" width="300" height="120" /> </body> </html>
替换文本：
<img src="boat.gif" alt="Big Boat">
背景图片：
<body background="/i/eg_background.jpg">
排列方式:
<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>
<p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p>
<p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p>
<html> <body> <p> <img src ="/i/eg_cute.gif" align ="left"> 带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。 </p> <p> <img src ="/i/eg_cute.gif" align ="right"> 带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。 </p> </body> </html>
HTML属性
1.<h1 align="center">
2.
<body bgcolor="yellow">
注意事项
1.要有结束标签：<br/>
2.使用小写标签
3.
<hr />标签在 HTML 页面中创建水平线。
4.
注释：<!-- This is a comment -->
文本格式化
<b><strong>:前者为了加粗而加粗，后者为了标明重点而加粗
<em><i>：前者强调内容，后者无强调意味
<small><big>
<sub>subscript</sub>``<sup>superscript</sup>
<pre>保留空格和换行
<address>地址输出
显示全称:
<abbr title="etcetera">etc.</abbr>、<acronym title="World Wide Web">WWW</acronym>
改变文字方向:
<bdo dir="rtl">Here is some Hebrew text</bdo>
引用：
长引用<blockquote>,短引用<q>
删除字和插入字（下划线）：
<del>二十</del> <ins>十二</ins>
HTML表格
如果不定义边框属性，表格将不显示边框。空单元格
<td> </td>
标题（table下面）
<caption>我的标题</caption>
单元格边距（格的大小）：
<table border="1" cellpadding="100">
单元格间距（格与格的距离）：
<table border="1" cellspacing="10">
背景颜色：
<table border="1" bgcolor="red">
背景图片：
<table border="1" bgcolor="red">
一个单元格：
<td bgcolor="red">First</td>
格式化：
<td align="left">衣服</td>
<html> <body> <p>每个表格由 table 标签开始。</p> <p>每个表格行由 tr 标签开始。</p> <p>每个表格数据由 td 标签开始。</p> <h4>一列：</h4> <table border="1"> <tr> <td>100</td> </tr> </table> <h4>一行三列：</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> <h4>两行三列：</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html>
<html> <body> <h4>表头：</h4> <table border="1"> <tr> <th>姓名</th> <th>电话</th> <th>电话</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>垂直的表头：</h4> <table border="1"> <tr> <th>姓名</th> <td>Bill Gates</td> </tr> <tr> <th>电话</th> <td>555 77 854</td> </tr> <tr> <th>电话</th> <td>555 77 855</td> </tr> </table> </body> </html>
<html> <body> <h4>横跨两列的单元格：</h4> <table border="1"> <tr> <th>姓名</th> <th colspan="2">电话</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>横跨两行的单元格：</h4> <table border="1"> <tr> <th>姓名</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">电话</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body> </html>
<html> <body> <p><b>注释：</b>frame 属性无法在 Internet Explorer 中正确地显示。</p> <p>Table with frame="box":</p> <table frame="box"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <p>Table with frame="above":</p> <table frame="above"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <p>Table with frame="below":</p> <table frame="below"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table>
HTML列表
无序列表(实心点，空心点，实心正方形）<html> <body> <h4>Disc 项目符号列表：</h4> <ul type="disc"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ul> <h4>Circle 项目符号列表：</h4> <ul type="circle"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ul> <h4>Square 项目符号列表：</h4> <ul type="square"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ul> </body> </html>
有序列表
<html> <body> <h4>数字列表：</h4> <ol> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ol> <h4>字母列表：</h4> <ol type="A"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ol> <h4>小写字母列表：</h4> <ol type="a"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ol> <h4>罗马字母列表：</h4> <ol type="I"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ol> <h4>小写罗马字母列表：</h4> <ol type="i"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ol> </body> </html>
定义列表（自定义列表以
<dl>标签开始。每个自定义列表项以
<dt>开始。每个自定义列表项的定义以
<dd>开始。）
<html> <body> <h2>一个定义列表：</h2> <dl> <dt>计算机</dt> <dd>用来计算的仪器 ... ...</dd> <dt>显示器</dt> <dd>以视觉方式显示信息的装置 ... ...</dd> </dl> </body> </html> 结果： 一个定义列表： 计算机 用来计算的仪器 ... ... 显示器 以视觉方式显示信息的装置 ... ...
HTML样式
<meta http-equiv=Content-Type content=text/html;charset=gb2312>它表示强制浏览器编码设为简体中文(GB2312).这句不能写在js文件中，否则仍不起作用，浏览器编码会默认为GB18030。 但是样式表语句可写在js文件中，唯独
<meta>语句不可以。
<meta http-equiv="Content-Language" content="zh-cn">:服务器类型，中文
<head> <link rel="stylesheet" type="text/css" href="/html/csstest1.css" > </head>:
这是w3c的标准
rel: 属性用于定义连接的文件和HTML文档之间的关系
type: 是说明外链文档的的类型
href: 导入css文件的路径
备注:导入css文件 前面两个属性不需要改 就只需改 href 对应的CSS文件路径 标签 一般都放在头部的标签里
外部样式表，内部样式表，内联样式：
<p style="color: red; margin-left: 20px">This is a paragraph</p>
<html>
<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>
<body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body>
</html>div标签
<html> <body> <h3>This is a header</h3> <p>This is a paragraph.</p> <div style="color:#00FF00">//00FF00可以写成green(red,green,blue) <h3>This is a header</h3> <p>This is a paragraph.</p> </div> </body> </html>
HTML布局
使用div<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#container{width:500px}
div#header {background-color:#99bbbb;}
div#menu {background-color:#ffff99;height:200px;width:150px;float:left;}
div#content {background-color:#EEEEEE;height:200px;width:350px;float:left;}
div#footer {background-color:#99bbbb;clear:both;text-align:center;}
h1 {margin-bottom:0;}
h2 {margin-bottom:0;font-size:18px;}
ul {margin:0;}
li {list-style:none;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Main Title of Web Page</h1>
</div>
<div id="menu">
<h2>Menu</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<div id="content">Content goes here</div>
<div id="footer">Copyright W3School.com.cn</div>
</div>
</body>
</html>使用table
<!DOCTYPE html> <html> <body> <table width="500" border="0"> <tr> <td colspan="2" style="background-color:#99bbbb;"> <h1>Main Title of Web Page</h1> </td> </tr> <tr valign="top"> <td style="background-color:#ffff99;width:100px;text-align:top;"> <b>Menu</b><br /> HTML<br /> CSS<br /> JavaScript </td> <td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;"> Content goes here</td> </tr> <tr> <td colspan="2" style="background-color:#99bbbb;text-align:center;"> Copyright W3School.com.cn</td> </tr> </table> </body> </html>
HTML表单和输入
<html> <body> <form> 用户： <input type="text" name="user"> <br /> 密码： <input type="password" name="password"> </form> <p> 请注意，当您在密码域中键入字符时，浏览器将使用项目符号来代替这些字符。 </p> </body> </html>
单元框
<input type="radio" checked="checked" name="Sex" value="male" />默认选项为male
<form> <input type="radio" name="sex" value="male" /> Male <br /> <input type="radio" name="sex" value="female" /> Female </form>
复选框
<form> <input type="checkbox" name="bike" /> I have a bike <br /> <input type="checkbox" name="car" /> I have a car </form>
动作属性和确认按钮
<form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form>
有预选值的下拉列表：
<html> <body> <form> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected="selected">Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html>
文本域（字符数不受限制）
<textarea rows="10" cols="30"> The cat was playing in the garden. </textarea>
创建按钮
<form> <input type="button" value="Hello world!"> </form>
<input type="button" />这就是一个按钮。如果你不写javascript 的话，按下去什么也不会发生。
<input type="submit" />这样的按钮用户点击之后会自动提交 form，除非你写了javascript 阻止它。
带标题的框：
<form> <fieldset> <legend>健康信息</legend> 身高：<input type="text" /> 体重：<input type="text" /> </fieldset> </form>
HTML框架
假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在<frame>标签中加入：
noresize="noresize"。
<frameset cols="120,*">:一列120，其余的为另外一列。
<html> <frameset rows="50%,50%"> <frame src="/example/html/frame_a.html"> <frameset cols="25%,75%"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> </frameset> </frameset> </html>
不能将
<body></body>标签与
<frameset></frameset>标签同时使用！不过，假如你添加包含一段文本的
<noframes>标签，就必须将这段文字嵌套于
<body></body>标签内。
<html> <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"> <noframes> <body>您的浏览器无法处理框架！</body> </noframes> </frameset> </html>
导航框架(导航框架包含一个将第二个框架作为目标的链接列表。名为 “contents.htm” 的文件包含三个链接。)
<html> <frameset cols="120,*"> <frame src="/example/html/html_contents.html"> <frame src="/example/html/frame_a.html" name="showframe"> </frameset> </html>
内联框架
<html> <body> <iframe src="/i/eg_landscape.jpg"></iframe> <p>一些老的浏览器不支持 iframe。</p> <p>如果得不到支持，iframe 是不可见的。</p> </body> </html>
<iframe src="/example/html/demo_iframe.html" frameborder="0"></iframe>
<iframe src="/example/html/demo_iframe.html" width="200" height="200"></iframe>
使用iframe作为链接的目标
<!DOCTYPE html> <html> <body> <iframe src="/example/html/demo_iframe.html" name="iframe_a"></iframe> <p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p> <p><b>注释：</b>由于链接的目标匹配 iframe 的名称，所以链接会在 iframe 中打开。</p> </body> </html>
HTML背景
<html> <body bgcolor="#ff0000" text="yellow">//文本为黄色 <p> 这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。 </p> <p> 这是另一个段落。这是另一个段落。这是另一个段落。这是另一个段落。这是另一个段落。这是另一个段落。这是另一个段落。 </p> </body> </html>
<body>标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的 HTML 标准（HTML4 和 XHTML）中已被废弃。W3C 在他们的推荐标准中已删除这些属性。
应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- go利用x/net/html包实现的蜘蛛
- HTML 引用资源路径整理
- 解决Ckeditor编辑器不显示html实体，自动过滤html的问题
- iphone上对于动态生成的html元素绑定点击事件$(document).click()失效解决办法
- Html body的滚动条禁止与启用
- 使用FreeMarker生成静态HTML
- html头文件中的 content = "IE=edge,chrome=1"
- html常见布局问题
- 认识html文件基本结构
- 嵌入在html页面中图像格式的区别与选用
- HTML 基础 元素 属性 标题
- 自定义Html标签方式
- HTML DOM addEventListener() 方法
- <!DOCTYPE>的含义及用法
- html音频音量调节
- html 图片垂直居中
- HTML基础篇（标签和属性整--已剔除不被浏览器支持的部分）
- 网页图片的懒加载和预加载
- html替换和不可替换元素
- html中显示xml