美文网首页
HTML

HTML

作者: 点点渔火 | 来源:发表于2018-07-29 16:51 被阅读0次

实例
文本
链接
头部
样式
图像
区块
布局
表单
框架

参考： http://www.runoob.com/html/html-intro.html

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

说明：

  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
  • <h1> 元素定义一个大标题
  • <p> 元素定义一个段落

实例：

  • 标题（Heading）是通过<h1> - <h6> 标签来定义的.

  • 段落是通过标签 <p> 来定义的.

  • 链接是通过标签 <a> 来定义的.

   <a href="http://www.runoob.com">这是一个链接</a>
  • 图像是通过标签 <img> 来定义的
<img src="/images/logo.png" width="258" height="39" />

元素：

  • <p>
  • <body>
  • <html>

    就是没有关闭标签的空元素（
    标签定义换行）

属性：
http://www.runoob.com/tags/html-reference.html

标签 描述
<a> 定义超文本链接
<audio>New 定义音频内容
<b> 定义文本粗体
<body> 定义文档的主体
<br> 定义换行
<button> 定义一个点击按钮
<canvas>New 定义图形，比如图表和其他图像,标签只是图形容器，您必须使用脚本来绘制图形
<caption> 定义表格标题
<center> HTML5不支持，不赞成使用。定义居中文本。
<code> 定义计算机代码文本
<col> 定义表格中一个或多个列的属性值
<colgroup> 定义表格中供格式化的列组
<figure>New 规定独立的流内容（图像、图表、照片、代码等等）。
<h1> to <h6> 定义 HTML 标题
<i> 定义斜体字
<html> 定义 HTML 文档
<p> 定义段落。
<span> 定义文档中的节。
<select> 定义选择列表（下拉列表）。
<section>New <section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<sub> 定义下标文本。
<title> 定义文档的标题。
定义注释

文本内容：

注释：

<!-- 这是一个注释 -->

水平线标签：
<hr> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。

标题：

<h1>这是1号标题</h1>
<font size="6">这是6号字体文本</font>

段落：

标签 描述
<p> 定义一个段落
<br> 插入单个折行（换行）
<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub>> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字
<abbr> 定义缩写 
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
<abbr title="etcetera">etc.</abbr>
<acronym title="World Wide Web">WWW</acronym>
<q>Build a future where people live in harmony with nature.</q>
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

链接

<a href="url">链接文本</a>

发送邮件：

<p>
这是另一个电子邮件链接：
<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发送邮件!</a>
</p>
  • mailto 发送人
  • subject 主题
  • 在进行抄送时，需要使用关键字：cc
  • 在进行密送时，需要使用关键字：bcc

参数说明：

参数 描述
mailto:name@email.com 邮件接收地址
cc=name@email.com 抄送地址
bcc=name@email.com 密件抄送地址
subject=subject text 邮件主题
body=body text 邮件内容
? 第一个参数分隔符
& 其他参数分隔符

注：多个邮件地址用 ; 隔开，空格用 %20 代替。

头部 head

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

  • <style> 元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>

<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>

</html>
  • HTML <meta> 元素
    meta标签描述了一些基本的元数据。

<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

<meta> 一般放置于 <head> 区域

<!--为搜索引擎定义关键词-->
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

<!--为网页定义描述内容-->

<meta name="description" content="免费 Web & 编程 教程">

<!--定义网页作者-->
<meta name="author" content="Runoob">

<!--每30秒钟刷新当前页面-->:
<meta http-equiv="refresh" content="30">
  • HTML <script> 元素
    <script>标签用于加载脚本文件，如： JavaScript。
标签 描述
<head> 定义了文档的信息
<title> 定义了文档的标题
<base> 定义了页面链接标签的默认链接地址
<link> 定义了一个文档和外部资源之间的关系
<meta> 定义了HTML文档中的元数据
<script> 定义了客户端的脚本文件
<style> 定义了HTML文档的样式文件

HTML 样式- CSS

CSS修饰标签的样式，有 "内联" 和 "外引" 两种方式。

对于大部分标签，以上两种方法均可，且修改父级标签，子级标签特性也会改变。但某些标签确无法通过修改父级标签来改变子级标签特性，如a标签，修改其颜色特性，必须直接修改 a 标签的特性才可。
CSS 教程

  • 内联样式
    显示出如何改变段落的颜色和左外边距
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>

背景颜色

<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>

字体, 字体颜色 ，字体大小

<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
标签 描述
<style> 定义文本样式
<link> 定义资源引用地址

图像

<img src="url" alt="some_text">

  • alt 丢失图片显示文字
  • width, height 尺寸
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
<img src="https://images2015.cnblogs.com/blog/1027162/201611/1027162-20161113162105295-307972897.png", width="80%">

<p>创建图片链接:
<a href="http://www.runoob.com/html/html-tutorial.html">
<img  border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
标签 描述
<img> 定义图像
<map> 定义图像地图
<area> 定义图像地图中的可点击区域

表格

<table border="1" cellpadding="10">
  <caption>Monthly savings</caption>
  <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框

跨行或跨列的表格单元格
漂亮的表格

标签 描述
<table> 定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚

区块

HTML 可以通过 <div> 和 <span>将元素组合起来。
<div>组合HTML元素的容器， <span> 内联元素，可用作文本的容器

  • HTML <div> 元素
    HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
  • HTML <span> 元素
    HTML <span> 元素是内联元素，可用作文本的容器
    <span> 元素也没有特定的含义。
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
<div style="color:#0000FF">
  <h3>这是一个在 div 元素中的标题。</h3>
  <p>这是一个在 div 元素中的文本。</p>
</div>

<p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛，我得父亲有 <span style="color:darkolivegreen;font-weight:bold">碧绿色</span> 的眼睛。</p>

</body>
</html>
标签 描述
<div> 定义文档区块，块级(block-level)
<span> 定义 span，用来组合文档中的行内元素。

布局

使用 <div> 元素的网页布局
如何使用 <div> 元素添加布局。 通过坐标位置控制

使用 <table> 元素的网页布局
如何使用 <table> 元素添加布局。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>

</div>
 
</body>
</html>

表单

  • 文本域/密码
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
Password: <input type="password" name="pwd"><br>
<input type="submit" value="提交">
</form>
  • 按钮
<form action="demo-form.php" method="get">
  <input type="radio" name="sex" value="Male"> Male<br>
  <input type="radio" name="sex" value="Female" checked="checked"> Female<br>
  <input type="submit" value="提交"><br>
  <input type="checkbox" name="vehicle[]" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle[]" value="Car" checked="checked"> I have a car<br>
  <input type="submit" value="提交">
</form>
  • 表单发送邮件
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<h3>发送邮件到 someone@example.com:</h3>

<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="发送">
<input type="reset" value="重置">
</form>

</body>
</html>

框架

<iframe src="URL"></iframe>

<iframe src="demo_iframe.htm" width="200" height="200" frameborder="0"></iframe>
<iframe src="http://www.runoob.com">
  <p>您的浏览器不支持  iframe 标签。</p>
</iframe><br>
<iframe src="http://www.runoob.com"></iframe>

```

### 颜色：
<http://www.runoob.com/html/html-colornames.html>
<p style="background-color:rgb(255,255,0)">
颜色
<p>

相关文章

  • 基础编程语言学习线路图

    HTML HTML教程HTML简介HTML编辑器HTML基础HTML元素HTML属性 HTML标题HTML段落HT...

  • HTML头部-10

    HTML 元素 HTML 元素 HTML 元素 HTML 元素 HTML 元素 HTML ...

  • html 大纲

    html 通用 html 简介 html 常用标签 html 属性 html 表格 html 字体 html 表单...

  • web 前端学习线路图

    一、HTML 教程 HTML教程HTML简介HTML编辑器HTML基础HTML元素HTML属性 HTML标题HTM...

  • 2018-06-04——HTML简介

    HTML 简介 HTML 标签 ·HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 ·HTML...

  • HTML 基础

    HTML 标题 HTML 段落 HTML 链接 HTML 图像 HTML 文本格式化标签 HTML ...

  • html常用的基本标签

    HTML基础包括web工作原理，HTML概述，HTML基本标签和HTML高级标签。 〈html〉...〈/html...

  • Html 学习笔记

    HTML基础 HTML 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag) HTML 标签通...

  • HTML：基础（2）元素

    HTML 元素 HTML 文档由 HTML 元素定义。 HTML 元素语法 HTML 元素以开始标签起始 HTML...

  • 2018-10-29 第二阶段 day1 htm

    1.html说明 说明html版本html5-- ...

网友评论

      本文标题：HTML

      本文链接：https://www.haomeiwen.com/subject/acclxxtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|HTML|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！