HTML：基本的标签

概述：

<html></html>标准的语言格式，回环标签，有头和躯体部分，头里面一般显示标题title，躯体部分显示内容：背景色、文字、图片、超链接、表格、表单等。

可以直接去官方文档去查看：http://www.w3school.com.cn/jsref/jsref_events.asp

标题：<title></title>

超链接：<a href=""></a>

段落：<p></p>

换行：<br/>

分割线：<hr>

引用：<blockquote cite> </blockquote>

代码：<pre></pre>

表格：<table></table>

行：<tr></tr>

格：<td></td>

图片：<img src ="" />

表单：<form></form>

扩展：

html看似复杂，其实常用的标签并不多，这里总共介绍一些html的常用标签
文字处理：
①标题:<h1> to <h6>
②段落：<p>文字段落</p >
③加粗：<b>单纯的文字加粗效果</b>
④<strong>：把文本定义为语气更强的强调的内容，文字也会加粗</strong>
⑤<span>定义文档中的节</span>
⑥<em>强调文字,文字会出现斜体</em>

<i>单纯的文字斜体效果</i>
⑦<font>字体大小,颜色等</font>
列表
①无序列表：<ul><li>列表</li></ul>
②有序列表：<ol><li>列表</li></ol>
③用来创建一个普通的列表:
< dl>
< dt>用来创建列表中的上层项目< /dt>
< dd>用来创建列表中最下层项目< /dd>
< /dl>
图片
①插入图片：< img src="图片路径" />
布局
①层
<div></div>
②表格(1行2列演示)
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td> </td>
    <td> </td>
  </tr>
</table>
表单:
<form>
　　<input type="text" name="fname" /> 
　　<input type="password" name="password">  
　　<input type="submit" value="Submit" />  <!--提交按钮—>
　　<input type="checkbox" name="Car"><!--复选—>
　　<textarea cols="30" rows="5">文本域</textarea> <!--文本域—>
　　<select name="cars">  <!--下拉列表—>
　　　　<option value="volvo">Volvo</option>
　　　　<option value="saab">Saab</option>
　　　　<option value="fiat">Fiat</option>
　　　　<option value="audi">Audi</option>
　　</select>
</form>

练习：

<!doctype html>
<html>
    <head>
        <title> 我是html语言 </title>        
    </head>

<body bgcolor="#FF7EFF">  
    <strong><em>我的第一个网页！</em></strong>
    <hr>
    <br/>
    <a href="http://my.51job.com/careerpost/marketing/sem/sogou_v1.html?from=sogouad"> 58招聘 </a>
    <p> 
      我喜欢PHP！我喜欢PHP！我喜欢PHP！我喜欢PHP！我喜欢PHP！我喜欢PHP！我喜欢PHP！
      我喜欢PHP！我喜欢PHP！我喜欢PHP！我喜欢PHP！我喜欢PHP！我喜欢PHP！我喜欢PHP！我喜欢PHP！我喜欢PHP！
      我喜欢PHP！我喜欢PHP！我喜欢PHP！我喜欢PHP！我喜欢PHP！
    </p>
    
    <hr>
    <p> 
      <i>我是iOS工程师！ 我是iOS工程师！ 我是iOS工程师！ 我是iOS工程师！ 我是iOS工程师！ 我是iOS工程师！ 我是iOS工程师！
      我是iOS工程师！ 我是iOS工程师！ 我是iOS工程师！ 我是iOS工程师！ 我是iOS工程师！ 我是iOS工程师！ 我是iOS工程师！
      我是iOS工程师！</i>
    </p>
    <br/>
    <img src="http://i.mmcdn.cn/simba/img/TB1KElTLpXXXXXHXVXXSutbFXXX.jpg" />
    
    <blockquote cite="http://www.baidu.com">
        <p>授人以鱼，不如授人以渔</p>
    </blockquote>
    
    <table>
       <tr><td> 第一个单元格</td> <td> 第二个单元格</td></tr>
       <tr><td> 第三个单元格</td> <td> 第四个单元格</td></tr>
    </table>
    
    <form>
        <input type="text" name="bd1"/>
        <input type="submit" name="bd2"/>
    </form>
</body>
</html>

截图：

posted @ 2016-08-17 16:10 XYQ全哥阅读(387) 评论(0) 编辑收藏举报

刷新页面返回顶部

HTML：基本的标签

公告