首页 > 代码库 > HTML的认识
HTML的认识
学了四周多的html,让我认识到这html的神奇。在中西(在操作的过程当中用<p></p>等的结构在其中加字,它能让字变大 缩小 变色等奇妙无比)结合的情形下,在网页上展示了它的精妙之处。
HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页
<!----> 注释 实例: <!-- This is a comment -->
<body> 定义 HTML 文档的主体。
<select id="year" name="year"> <option value="http://www.mamicode.com/91">1992</option> <option>1993</option> <option selected="selected">1994</option> <option>1995</option> <option>1996</option> </select> 下拉列表
<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题 实例: <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>
HTML 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的
图像是通过 <img> 标签进行定义的。 实例: <img src="http://www.mamicode.com/1.jpg" width="104" height="142" />
链接是通过 <a> 标签进行定义的 实例: <a href="http://www.baidu.com">百度</a>
<p> 元素定义了 HTML 文档中的一个段落 实例: <p>不是吗 </p>
<br> 没有关闭标签的空元素(<br> 标签定义换行) 实例: <br />,是关闭空元素的正确方法
<name="value">标签的属性
<h1 align="center"> align="center" 对齐方式的附加信息 实例: <h1 align="center">This is heading 1</h1>
<table> 使用 HTML的表格
<body bgcolor="yellow"> 使用背景颜色的
<table border="1"> <tr><td></td></tr> 使用表格边框的
class 规定元素的类名(
id 规定元素的唯一
style 规定元素的行内样式
<hr /> 水平线 实例: <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p>
<b> 定义粗体文本。
<big> 定义大号字。
<a> 定义锚
空格符号
<table> 定义表格
<caption> 定义表格标题
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
<col> 定义用于表格列的属性
<colgroup> 定义表格列的
无序列表用 <ul> 每个列表要用 <li>开始 实例: <ul> <li>哈哈</li> <li>呵呵</li> </ul> 有序列表用 <ol> 每个列表要用 <li>开始 实例: <ol> <li>哈哈</li> <li>呵呵</li> </ol> 自定义列表用 <dl> 每个自定义列表要用 <dt> 开始。每个自定义列表用 <dd> 开始 实例: <dl> <dt>哈哈</dt> <dd>你要来一炮吗</dd> <dt>呵呵</dt> <dd>你认为是谁</dd> </dl> <ol> 定义有序列表
<ul> 定义无序列表
<li> 定义列表项
<dl> 定义定义列表
<dt> 定义定义项目
<dd> 定义定义的描述
<span> 是内联元素,用于作文本的容器
<div> 定义文档中的分区
<form>使用于表单
<input type="text" name="firstname" />输入的文本框架
<button type="button">按钮</button> 按钮 disabled 是规定禁用此按钮。
alt 用于区域的替换文本
shape 定义区域的形状
<blockquote></blockquote> 标记长的引用
<colspan="" rowspan=""> 用于单元格的合并
selector 选择器
P {color:deeppink; font-size: 20px } #idp{background-color:orangered} .p1 {color:blue } input{color: red } a:link{color: red; text-decoration:none} a:hover{text-decoration:underline color:yellow; font-size: 20px} h1 {color:red; font-size:14px;} 不同的变颜色的方法
规定元素的 id、宽度和高度: 实例: <canvas id="myCanvas" width="200" height="100"></canvas>
在 head 部分通过 <style> 标签定义内部样式表。 实例: <head> <style type="text/css"> p {margin-left: 20px} </style> </head>
外部样式表 <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/mystyle.css">
链接语法 <a href="http://www.mamicode.com/url">Link text</a> <a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
命名锚的语法 <a name="label">Text to be displayed</a>
从不同的位置插入图片 <p> 来自另一个文件夹的图像: <img src="http://www.mamicode.com/i/ct_netscape.jpg" tppabs="http://w3school.com.cn/i/ct_netscape.jpg" /> </p>
<p> 来自 W3School.com.cn 的图像: <img src="http://www.mamicode.com/www.w3school.com.cn/i/w3school_logo_white.gif" tppabs="http://www.w3school.com.cn/i/w3school_logo_white.gif" /> </p>
alt 属性用来为图像定义一串预备的可替换的文本 <img src="http://www.mamicode.com/boat.gif" alt="Big Boat">
插背景图片 <body background="../i/eg_background.jpg" tppabs="http://w3school.com.cn/i/eg_background.jpg">
<h3>图像背景</h3>
<p>gif 和 jpg 文件均可用作 HTML 背景。</p>
<p>如果图像小于页面,图像会进行重复。</p>
叶面布局 <table width="500" border="0"> <tr> <td colspan="2" style=""> <h1>Main Title of Web Page</h1> </td> </tr>
当用户从若干给定的的选择中选取其一时,就会用到单选框。
<form> <input type="radio" name="sex" value="http://www.mamicode.com/male" /> Male <br /> <input type="radio" name="sex" value="http://www.mamicode.com/female" /> Female </form>
HTML的认识