首页 > 代码库 > HTML5 入门一

HTML5 入门一

2024-08-15 02:53:52   222人阅读

<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title></head><body>    <h1>我的第一个页面</h1><p>我的第一个段落。</p><script>window.alert(5 + 6);</script>    </body></html>
  • DOCTYPE 声明了文档类型
  • 位于标签 <html> 与 </html> 描述了文档类型
  • 位于标签 <body> 与 </body> 为可视化网页内容
  • 位于标签 <h1> 与 </h1> 作为一个标题使用
  • 位于标签 <p> 与 </p> 作为一个段落显示

 

可以看出：

  • HTML 是用来描述网页的一种语言；
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • 浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户；

 

基础扩展：

<a>：定义链接

href：指定超链接地址

示例： <a href = "http://www.gameres.com">游资网</a>

 

<img>：定义图像

示例：<img src="http://www.mamicode.com/testImg.png" width="400" height="270">  

如果不按图标自身的长宽比来配置，图标会按配置的长宽比进行拉伸/压缩

 

HTML 属性：

上述的 href 就是一种属性，img 标签的图片源、长、宽都是由属性提供的，可以知道：

  • 属性都被标注在标签的开头；
  • 属性的值都要使用双引号；

id 属性示例：

<html><head><script type="text/javascript">function change_header(){document.getElementById("myHeader").innerHTML="Nice day!";}</script></head><body><h1 id="myHeader">Hello World!</h1><button onclick="change_header()">Change text</button></body></html>

 

HTML 水平线与注释：

<hr>    <!-- 注释测试 --><hr><hr>

 

HTML 段落换行：

<p>这个<br>段落<br>演示了分行的效果</p>

 

HTML 文本格式化：

<b>显示加粗文本</b> <br>   <!-- 换行无效--><i>显示斜体文本</i> <br><big>显示  大号文本</big> <br><small>显示  小号文本</small> <br><pre>                <!-- 换行有效-->换行可以不用标签就可以实现</pre><p>WWF‘s goal is to:     <!-- 换行有效-->            <q>Build a future where people live in harmony with nature.</q>    <!-- <q> 输出引号 -->We hope they succeed.</p><p>My favorite color is <del>blue</del> <ins>red</ins>!</p>        <!-- 删除效果与下划线效果 -->

留下教程来源方便查询：http://www.runoob.com/html/html-formatting.html。

 

HTML 链接：

target 属性：定义被链接的文档在何处显示。

<a href="http://www.gameres.com" target="_blank">游资网</a>

将一张图片作为链接点：

<p>图片链接<a href="http://www.gameres.com"><img src="testImg.png" width="730" height="270"></a></p>

链接到当前页面的指定位置：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title></head><body><p><a href="#C2">查看章节2</a></p><h2>章节 1</h2><p>这边显示该章节的内容……</p><h2><a id="C2">章节 2</a></h2><p>这边显示该章节的内容……</p><h2>章节 3</h2><p>这边显示该章节的内容……</p></body></html>

 

HTML 头部：

标签描述
<head>定义了文档的信息
<title>定义了文档的标题
<base>定义了页面链接标签的默认链接地址
<link>定义了一个文档和外部资源之间的关系
<meta>定义了HTML文档中的元数据
<script>定义了客户端的脚本文件
<style>定义了HTML文档的样式文件

 

HTML5 入门一


联系
我们