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

HTML基础

2016-07-30 21:10 267 查看

什么是HTML?

HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言: HyperText Markup Language。

它不是一种编程语言，而是一种标记语言，标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。标签是由尖括号包围的关键词，比如 <html>，通常是成对出现的，比如 <b> 和 </b>。

HTML页面就是由许多标签组成的。我们的浏览器负责解析这些标签，从而为我们展示丰富的内容。

HTML 属性

属性一般描述于开始标签，属性总是以名称/值对的形式出现，比如：name="value"。

例如：下面a标签中的href就是a标签的一个属性。

<a href="http://www.runoob.com">这是一个链接</a>

下面从一个页面分析具体的HTML

　　下面具体的列出了测试代码的运行显示情况。可以很直观的看到各种常用HTML元素的使用情况。

这是个测试文章-文章标题

本篇文章列举了常用HTM的元素。

文章段落标签span这是个a标签，通常用来表示链接，href属性配置链接地址

文本格式化标签：定义粗体文本b。定义着重文字em。定义斜体字i。定义加重语气strong。定义下标字sub。定义上标字sup。定义插入字ins。定义删除字del。

“计算机输出”标签:

定义计算机代码code

定义键盘码kbd。定义计算机代码样本。samp

定义预格式文本pre。

引用、引用和术语定义:定义缩写abbr。

定义地址address。
定义文字方向bdo。

定义长的引用blockquote。

定义短的引用语q。定义引用、引证cite。定义一个定义项目dfn。

<!-这个换行符->

<!-这个分隔线符->

这是无序列表ul

这是无序列表ul

这是有序列表ol

这是有序列表ol

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>这是个测试文章-文章标题</h1>
<p>本篇文章列举了常用HTM的元素。</p>
<p id="pp">文章段落标签<span>span</span><a href="http://www.w3school.com.cn">这是个a标签，通常用来表示链接，href属性配置链接地址</a></p>
<p>文本格式化标签：<b>定义粗体文本b。</b><em>定义着重文字em。</em><i>定义斜体字i。</i><strong>定义加重语气strong。</strong><sub>定义下标字sub。</sub><sup>定义上标字sup。</sup><ins>定义插入字ins。</ins><del>定义删除字del。</del></p>
<p>“计算机输出”标签:<code>定义计算机代码code</code><kbd>定义键盘码kbd。</kbd><samp>定义计算机代码样本。samp</samp><pre>定义预格式文本pre。</pre></p>
<p>引用、引用和术语定义:<abbr>定义缩写abbr。</abbr><address>定义地址address。</address><bdo>定义文字方向bdo。</bdo><blockquote>定义长的引用blockquote。</blockquote><q>定义短的引用语q。</q><cite>定义引用、引证cite。</cite><dfn>定义一个定义项目dfn。</dfn></p>
<br/><!-这个换行符->
<hr/><!-这个分隔线符->

<ul>
<li>这是无序列表ul</li>
<li>这是无序列表ul</li>
</ul>

<ol>
<li>这是有序列表ol</li>
<li>这是有序列表ol</li>
</ol>
<dl>
<dt>这是个自定义列表dl</dt>
<dd>具体项目</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
<img src="pikaqiu.ico" alt="图片显示">
<form>
<!-- ------------------------------------------------------>
<fieldset>
<legend>文本输入样例组</legend>
<label>文本输入框：</label><input  id='i1' type="text" value="原始字符" placeholder="这是提示信息"/><br>
<label>密码框：</label><input id='i2' type="password" value="123" /><br>
<label>email：</label><input type="email" value="12@qq.com"/><br>
<label>多行文本输入：</label><textarea  id="i3" placeholder="这是提示信息">value </textarea><br>
<label>url：</label><input type="url" value="www.test.com"/><br>
<label>颜色：</label><input type="color" /><br>
<label>文件：</label><input type="file" /><br>

</fieldset>
<!-----------------------chexkbox----------------------------->
<fieldset>
<legend>选择样例组</legend>
<ul id="check-box">
复选框：
<li><input type="checkbox" value="1" checked="checked"/>篮球</li>
<li><input type="checkbox" value="2"/>足球</li>
<li><input type="checkbox" value="3"/>排球</li>
</ul>
<ul id="radio-test">
单选框：
<!--name一样才能同组互斥-->
<li><input type="radio" value='11' name="text" checked="checked"/>男</li>
<li><input type="radio" value='22' name="text"/>女</li>
<li><input type="radio" value='33' name="text"/>人妖</li>
</ul>
select下拉选择框：
<select id="select-test">
<option value="11">北京</option>
<option value="22" selected="selected">上海</option>
<option value="33">广州</option>
<option value="44">深证</option>
</select>
</fieldset>
<fieldset>
<legend>按钮样例组</legend>
<input type="button" value="普通按钮"/>
<input type="submit" value="提交按钮"/>
<input type="image"  src="submit.gif" alt="图像按钮"/>
<input type="reset" value="重置按钮"/>
</fieldset>
</form>
<hr/>
表格：
<table border="1">
<tr>
<th>表头</th>
<th>表头</th>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
</body>
</html>

View Code

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

标签：

相关文章推荐

新的分享

章节导航