您的位置：首页 > Web前端 > HTML

html入门

2016-06-02 18:15 549 查看

HTML
指的是超文本标记语言 (Hyper
Text
Markup
Language)

HTML
不是一种编程语言，而是一种标记语言 (markup
language)

标记语言是一套标记标签 (markup
tag)

HTML
使用标记标签来描述网页

例子

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>
例子解释

<html>
与 </html> 之间的文本描述网页

<body>
与 </body> 之间的文本是可见的页面内容

<h1>
与 </h1> 之间的文本被显示为标题

<p>
与 </p> 之间的文本被显示为段落

常用的html属性：

HTML
链接是通过 <a> 标签进行定义的。

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

HTML
图像是通过 <img> 标签进行定义的。

<img src="w3school.jpg" width="104" height="142" />

居中排列标题
<h1 align="center">

背景颜色

<body bgcolor="yellow">

标签在
HTML 页面中创建水平线
<hr
/>

可以将注释插入
HTML 代码中，这样可以提高其可读性，使代码更易被人理解



<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
在新窗口打开网页
<body background="/i/eg_background.jpg">
设置背景图片

设置图片在文本中的位置

<img src="/i/eg_mouse.jpg" width="200" height="200">
通过改变
img 标签的
"height" 和
"width" 属性的值，您可以放大或缩小图像。

<img src="/i/eg_goleft.gif" alt="向左转" />

<p>如果无法显示图像，将显示
"alt" 属性中的文本：</p>

<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>
创建一个表格注：表格属性不加border则无边框
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td> </td>
<td>row 2, cell 2</td>
</tr>
</table>
在空单元格中添加一个空格占位符，就可以将边框显示出来。

<table border="1">
<caption>我的标题</caption>
<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>
表格中的表头

<ol start="50" type="A">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
创建一个有序列表

<ul type="square">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>
创建一个无序列表

创建div元素

<form>
用户：
<input type="text" name="user">
<br />
密码：
<input type="password" name="password">
</form>
创建输入内容

<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>
创建复选框

<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">

</frameset>

</html>

使用三份不同的文档制作一个垂直框架。

（把cols改成rows则变成水平框架）

<iframe src="demo_iframe.htm" width="200" height="200" frameborder="0"></iframe>

网页中显示的网页

html颜色知识：http://www.w3school.com.cn/html/html_colors.asp

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航