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 ,如需转载请自行联系原作者
相关文章
|
移动开发 HTML5
HTML5标签的类型
HTML5标签的类型。
390 5
|
数据采集 移动开发 前端开发
HTML代码的革命:语义化标签的魅力,让你的网页结构焕然一新!
【8月更文挑战第26天】本文探讨了Web前端开发中的语义化标签概念及其重要性。语义化标签通过使用具有明确含义的HTML标签来构建页面结构,提升了网页的可访问性及搜索引擎优化效果,并增强了代码的可读性和维护性。文章还讨论了实际开发中遇到的问题及未来发展趋势。
374 0
|
移动开发 搜索推荐 UED
HTML5的新语义化标签
HTML5引入的这些新语义化标签,通过明确标识内容的结构和意义,使得网页结构更加清晰,易于理解和维护。使用这些标签不仅提升了网页的可读性和可访问性,还增强了搜索引擎和辅助技术对网页内容的解析能力。在实际开发中,合理使用这些语义化标签,能够显著提升网页的质量和用户体验。
620 49
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
427 5
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
482 13
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
342 2
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
215 1
|
搜索推荐 SEO
HTML中各种标题标签的正确使用方法及其特点
在HTML中,标题标签(`&lt;h1&gt;`至`&lt;h6&gt;`)用于定义文档的标题结构。`&lt;h1&gt;`表示主标题,每个页面应只有一个;`&lt;h2&gt;`至`&lt;h6&gt;`分别表示不同层级的子标题,可用于细分内容。正确使用这些标签不仅有助于文档的层次分明和可读性提升,还能优化SEO。使用时需注意保持层级结构连续、内容描述清晰。
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)