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

HTML5基本元素的使用。

2017-01-15 15:53 246 查看

HTML5基本元素的使用。

HTML5：

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）

HTML 编辑器推荐:

Notepad++：https://notepad-plus-plus.org/

Sublime Text：http://www.sublimetext.com/

HBuilder：http://www.dcloud.io/

WebStorm：https://www.jetbrains.com/webstorm/

个人推荐使用：WebStorm

有很强的代码提示功能跟调试功能

HTML是由众多标签组成的，所以掌握了标签你就掌握了网页开发的的基础

接下来只演示常用的一些标签，目的是为了能让初学者快速制作一个网页

<!--    -->     注释
<title>         标题
<a href=””>     网页连接
<from>          from表单

<input>标签

帐号：  <input type="text" name="username" id="username">
密码：  <input type="password" name="password" dir="password">

type:指定一个类型

HTML 标题（Heading）是通过<h1 > - <h6> 标签来定义的.

<h1>this is my page</h1>
<h2>this is my page</h2>
<h3>this is my page</h3>
<h4>this is my page</h4>
<h5>this is my page</h5>
<h6>this is my page</h6>

<br>        换行
<p>         换段
<b>         加粗

<div>   盒子

实例：文档中的一个区域将显示为蓝色：

<div style="color:#0000FF">
<h3>这是一个在 div 元素中的标题。</h3>
<p>这是一个在 div 元素中的文本。</p>
</div>

多行文本框

<textarer cols="" rows="">

cols : 列
rows:  行

锚：

设置锚：

<a name="mao1">

链接锚：

<a href="#mao1">第一个锚</a><br>

图像链接

<img src="图片url或者觉得路径" alt="">

通过获取网络图片的方式显示图片：

<img src="http://img.taopic.com/uploads/allimg/140513/235059-14051310145412.jpg" alt="小企鹅">

通过绝对路径的方式显示图片：

<img  src="235059-14051310145412.jpg" alt="大企鹅">

background =”img.jpg” 背景图片

给刚刚的多行文本框设置一个背景图片：

<textarea style="background: url('235059-14051310145412.jpg') " name="textarea" id="textarea" cols="20" rows="10" size="14"></textarea>

效果图：

表格标签

<table> 表格标签
<th>    标题
<tr>    行
<td>    列

----------

<table width="500px" border="1" bgcolor="aqua" >
<caption><h2>学生信息表</h2></caption>
<tr bgcolor="#a52a2a">
<th>学号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr >
<td>1001</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>1002</td>
<td>李四</td>
<td>男</td>
</tr>
</table>

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

标签： html5 html

相关文章推荐

新的分享

章节导航