欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

2.HTML解剖标签、标签

程序员文章站 2022-04-29 11:27:57
...

1.解剖标签

用包围文本的成对标签告诉浏览器网页的结构。
记住：<开始标签>+内容+</结束标签>

2.HTML解剖标签、标签

2.标签

2.1 HTML 基本文档

<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>

2.2 基本标签

<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>
 
<p>这是一个段落。</p>
<br> （换行）
<hr> （水平线）
<!-- 这是注释 -->

2.3 文本格式化

<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd> 
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
 
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）

2.4 链接（Links）

普通的链接：<a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:aaa@qq.com">发送e-mail</a>
书签锚点：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>
属性 说明
href 去往的路径(跳转的页面) 必写属性
title 提示文本。鼠标放到链接上显示的文字
target ”_self”：默认值。在自身页面打开(关闭自身页面，打开链接页面)
target ”_blank”：打开新页面。(自身页面不关闭，打开一个新的链接页面)
target _parent
target _top

2.5 图片（Images）

<img src="URL" alt="替换文本" height="42" width="42">
属性 说明
src 图片的来源必写属性
alt 替换文本，图片不显示的时候显示的文字
title 提示文本，鼠标放到图片上显示的文字
width 图片宽度
height 图片高度

图片没有定义宽高的时候，图片按照百分之百比例显示，如果只更改图片的宽度或者高度，图片等比例缩放。

2.6 样式/区块（Styles/Sections）

<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>

2.7 无序列表

<ul>
<!-- 注意：在 HTML 4中 ul 属性已废弃，HTML5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表如下： -->
    <li style="list-style-type:disc" >项目</li>
    <!-- list-style-type: 值可以是disc(圆点)、circle(圆圈)、square(正方形) -->
    <li>项目</li>
</ul>

2.8 有序列表

<ol type="">
<!-- type="" 值可以是A-Z，a-z,0-9,I-i -->
    <li>第一项</li>
    <li>第二项</li>
</ol>

2.9 定义列表

<dl>
  <dt>项目 1</dt>
    <dd>描述项目 1</dd>
  <dt>项目 2</dt>
    <dd>描述项目 2</dd>
</dl>

2.10 表格

<table border="1">
<!-- colspan(扩列)、rowspan(跨行) -->
<!-- 单元格边距(cellpadding)、单元格间距(cellspacing) -->
  <tr>
    <th>表格标题</th>
    <th>表格标题</th>
  </tr>
  <tr>
    <td>表格数据</td>
    <td>表格数据</td>
  </tr>
</table>

2.11 框架

<iframe src="demo_iframe.htm"></iframe>

2.12 表单（Forms）

<form action="demo_form.php" method="post/get">

单行文本框：<input type=”text” name=”控件名称” size=”控件的长度” maxlength=”最长字符数” value=”文字字段的默认取值”>

多行文本框：<textarea name=”控件名称” rows=”行数” cols=”列数”>默认多行文本</textarea>

密码域：<input type=”password” name=”控件名称” size=”控件的长度” maxlength=”最长字符数” value=”文字字段的默认取值”>

普通按钮：<input type=”button” name=”按钮名” value=”按钮的取值” onclick=”处理程序”>
<!--其中value的取值就是显示在按钮上的文字；onclick属性可以实现一些特殊的功能，onclick参数是设置单击按钮时执行的脚本代码。-->

提交按钮：<input type=”submit” name=”按钮名” value=“按钮的取值”>

重置按钮：<input type=”reset” name=”按钮名” value=“按钮的取值”>

单选按钮：<input type=”radio” value=”单选按钮的取值” name=”单选按钮的名称” checked>
<!-- 其中checked属性表示该单选按钮默认被选中，在一个单选按钮组中只能有一个单选按钮能设置为checked；value用来设置用户选中该项目后，传送到处理程序中的值。-->

复选框：<input type=”checkbox” value=”复选框的值” name=”复选框名称” checked>
<!--其中checked属性表示该单选按钮默认被选中，一组复选框中可以有多个复选框在默认情况下被选中。-->

隐藏域：<input type=”hidden” name=”隐藏域名称” value=”提交的值”>
<!-- 在提交表单时，隐藏域中存储的信息将一起被发送到服务器。-->

图像域控件：<input type=”image” src=”图像地址” name=”图像域名称”>
<!-- 其中“图像地址”可以时相对地址或绝对地址。-->

文件域：<input type=”file“ name=”文件域名称”>

列表框：<select name=”列表框名称” size=”显示的列表项数” multiple>
<option value=”选项值” selected>选项显示内容</option>
<option value=”选项值” selected>选项显示内容</option>
…
</select>其中multiple表示可以选择列表框中的多个项目；selected表示该选项默认情况下被选中；
</form>

属性：action:处理信息
Method=”get | post”   
Get通过地址栏提供（传输）信息，安全性差。
Post 通过1.php来处理信息，安全性高。

2.13 实体

&lt; 等同于 <
&gt; 等同于 >
&#169; 等同于 ©

2.14 滚动字幕

2.HTML解剖标签、标签

2.15 元信息

<meta name=”参数” content=”具体的参数值”>
其中，name属性主要有以下几个参数
keywords(关键字)：用来告诉搜索引擎网页的关键字。
description(网站内容描述)：用来告诉搜索引擎网站的主要内容。
author(作者)：标注网页的作者。
相关标签： HTML基础

上一篇： 用PHP控制您的浏览器cache！_PHP

下一篇： 前端学习笔记: CSS选择器

推荐阅读