码迷,mamicode.com
首页 > Web开发 > 详细

30分钟入门HTML

时间:2015-07-22 00:11:40      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:

一、HTML标签

1.标题标签  <h1> - <h6>等标签进行定义的。

2.段落标签  <p></p>

3.图片标签  <img></img>

例如:<img src="photo.jpg" width="1024" height="1024">

总之注意:所有标签不要忘记结束标签。

二、元素

元素指的是从开始标签到结束标签之间的所有代码。元素之间可以嵌套。

例如:<body><p>元素</p></body>

注意:<br/>表示换行。

<hr/>表示水平线。

<!-- 注释 -->

三、属性

标签中包含了HTML中的更多信息,通常都是用属性表示,属性总是以名称/值的形式出现。

例如: <a href="https://github.com/Guicai-Li">超级链接</a>

1.样式

作用:用来修饰元素。

格式:<标签 style="属性:值">元素</标签> 

例如:<p style="backgroud-color:green">样式变了</p>

2.target

作用:在新的浏览器窗口打开链接

例如:<标签 href="url" target="_black">在新的浏览器窗口打开链接</标签>

2.超链

作用:跳转url

格式:<标签 href="url">元素</标签>

3.锚点

作用:减少服务器请求。

格式<标签 锚点="锚点名">元素</标签>

例如:<a name="tips">Useful Tips Section</a>

<a href="http://localhost:3000/html/html_links.asp#tips">

Jump to the Useful Tips Section.

</a>

注意:

假如你这样书写链接的话:href="http://localhost:3000/html",就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href="http://localhost:3000/html/"命名锚经常被用在长的文档中创建目录。可以为每个章节赋予一个命名锚,然后连接到这些锚的链接被置于文档的上部。

假如浏览器找不到已定义的命名锚,那么就会定位到文档的顶端。不会有错误发生。

四、表格<table></table>

<tr></tr>行

<td></td>表格数据

每行包含多个<td></td>表格数据,表格数据可以包含文字、图片、列表、段落、表单、水平线、表格等。

表格边框:<table border="1"></table>

每列的表头:<th>列名</th>

标题:<caption>标题</caption>

注意:空单元格 <td>&nbsp;</td>

跨列:<th rowspan="2">内容</th>

跨行:<th colspan="2">内容</th>

列表:<li></li>

单元格边距:<table cellpadding="10"></table>

单元格间隔:<table cellspacing="10"></table>

表格背景颜色:<table bgcolor="red"></table>

表格背景图片:<table background="back.png"></table>

单元格背景颜色:<td bgcolor="red"></td>

单元格背景图片:<td background="back.png"></td>

...等

五、列表

无序列表:<ul><li></li></ul>

有序列表:<ol><li></li></ol>

自定义列表: 以<dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

例如:<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dt>Milk</dt>

<dd>White cold drink</dd>

</dl>

六、表单

格式:<form>input 元素</form>

例如:<form><input type="类型" name="firstName"></form>

类型:

textField -> text

单选 -> radio

复选 -> checkbox

action:响应


30分钟入门HTML

标签:

原文地址:http://my.oschina.net/CgShare/blog/481613

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!