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>
复制代码

 截图:

程序猿神奇的手,每时每刻,这双手都在改变着世界的交互方式!
本文转自当天真遇到现实博客园博客,原文链接:http://www.cnblogs.com/XYQ-208910/p/5780430.html ,如需转载请自行联系原作者
相关文章
|
28天前
|
移动开发 搜索推荐 HTML5
如何使用HTML5的语义化标签来提高网站的可访问性?
【4月更文挑战第1天】如何使用HTML5的语义化标签来提高网站的可访问性?
29 1
|
21天前
|
前端开发
HTML中的pre标签表示空格或换行
HTML中的pre标签表示空格或换行
|
13天前
HTML_表单标签
HTML_表单标签
16 0
|
1天前
|
编解码 移动开发 前端开发
【专栏:HTML与CSS移动端开发篇】使用Viewport Meta标签优化移动端显示
【4月更文挑战第30天】本文介绍了HTML的Viewport Meta标签在移动端网页优化中的作用。Viewport Meta标签定义了视口属性,如宽度、高度、初始缩放等,解决移动设备因屏幕尺寸差异导致的显示问题。主要属性包括width(常用device-width)、initial-scale、maximum-scale、minimum-scale和user-scalable。
|
1天前
|
移动开发 前端开发 开发者
【专栏:HTML进阶篇】网页结构与语义化标签进阶
【4月更文挑战第30天】提升网页结构清晰度和无障碍访问性,有利于SEO。这些标签为屏幕阅读器提供额外上下文,简化CSS样式设计,避免无意义的&lt;div&gt;和&lt;span&gt;。正确使用语义化标签是现代网页开发的关键,能创造更优质、易访问和优化的Web体验。
|
4天前
|
前端开发 数据安全/隐私保护
Day-1 HTML基本标签和CSS常用样式
Day-1 HTML基本标签和CSS常用样式
|
13天前
|
前端开发 容器
HTML_块级标签
HTML_块级标签
12 0
|
13天前
HTML_行内标签
HTML_行内标签
13 0
|
13天前
|
前端开发 JavaScript 开发者
html标签的样式
【4月更文挑战第19天】html标签的样式
13 2
|
13天前
|
JavaScript 前端开发 SEO
html标签
【4月更文挑战第19天】html标签
19 1