AllinToyou

这个屌丝很懒，什么也没留下！

热门标签

HTML标记标签_html的body标签里的foot

作者：AllinToyou | 2024-02-16 11:37:51

踩

html的body标签里的foot

HTML <!DOCTYPE>

HTML 文档类型

所有的 HTML 文档必须以 <!DOCTYPE> 声明开头。该声明并非一个 HTML 标签。它是一条“信息”，是为了告知浏览器期望的文档类型。

在 HTML5 中，<!DOCTYPE> 声明非常简单，声明为 html 即可：

<!DOCTYPE html>

而在更老的文档中（HTML 4 或 XHTML），该声明较为复杂，因为声明必须引用 DTD（Document Type Definition）。

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML1.0


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML LANG 语言属性

lang属性的取值应该遵循 BCP 47 - Tags for Identifying Languages。

W3C关于language的详细说明：Language tags in HTML and XML


<!-- 兼容中文 -->
<html lang="zh-CN">
<!-- 中文 -->
<html lang="zh-Hans">
<!-- 简体中文 -->
<html lang="zh-cmn-Hans">
<!-- 繁体中文 -->
<html lang="zh-cmn-Hant">
<!-- English -->
<html lang="en">

HTML <head>

head，顾名思义，是网页的“头”。“头”（head）、“身体”（body）、“脚（foot）构成了基本的网页框架。我们先看看头部区域有哪些元素。

HTML <head> 元素

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

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

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

HTML <title> 元素

<title> 标签定义了不同文档的标题。

<title> 在 HTML/XHTML 文档中是必需的。

<title> 元素：

定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

HTML <base> 元素

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接

HTML <link> 元素

HTML <style> 元素

在<style> 元素中你也可以直接添加样式来渲染 HTML 文档

HTML <meta> 元素

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

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

为网页定义字符编码集：

<meta charset="utf-8">

为搜索引擎定义关键词：

<meta name="keywords" content="keywaords可以更加利于搜索引擎在搜索时发现你的网页">

为网页定义描述内容：

<meta name="description" content="description元数据可以用来描述网页">

定义网页作者：

<meta name="author" content="author元数据表示作者是谁，例如高老师">

每30秒钟刷新当前页面：

<meta http-equiv="refresh" content="我每30秒刷新一次页面">

为网页设置IE兼容模式：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

优先使用最新版本的IE 和 Chrome 内核。

为网页设置视窗相关元素VIEWPORT：

viewport: 一般指的是浏览器窗口内容区的大小，不包含工具条、选项卡等内容；
width: 浏览器宽度，输出设备中的页面可见区域宽度；
device-width: 设备分辨率宽度，输出设备的屏幕可见宽度；
initial-scale: 初始缩放比例；
maximum-scale: 最大缩放比例；

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

HTML <script> 元素

HTML页面模板代码


<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
  <title>网页标题</title>
  <!-- SEO -->
  <meta name="keywords" content="your keywords">
  <meta name="description" content="your description">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="shortcut icon" href="/favicon.ico" />  
</head>
<body>
  
</body>
</html>

HTML <body> 元素

元素定义

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

开始标签	元素内容	结束标签
<p>	This is a paragraph	</p>
<a href="default.html" >	This is a link	</a>
`<br />`

注释：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。

HTML元素语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

HTML标签

标题

HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。


<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h1>标题标签打油诗</h1>
<h1>标题一共六级选,</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减，</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>

示例

段落和换行

HTML 段落是通过 <p> 标签进行定义的。

HTML换行是通过<br />标签进行的。


<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is a paragraph<br />and a wrapping line<p>

示例

链接

HTML 链接是通过 <a> 标签进行定义的。

<a href="http://www.link.com.cn">This is a link</a>

示例

图像

HTML 图像是通过 <img> 标签进行定义的。


<!-- 可通过width和height设置宽度和高度 -->
<img src="img.jpg" width="100" height="100" />
<!-- 同一级路径 -->
<img src="img.jpg" />
<!-- 下一级路径 -->
<img src="images/img.jpg" />
<!-- 绝对路径 -->
<img src="C:\Users\JamieGao\Desktop\img.jpg" />
<img src="http://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0611%2F2e84f869j00qujnx3001nc000hs00hsc.jpg&thumbnail=650x2147483647&quality=80&type=jpg" />

示例

（咦，这图不错，如有侵权联系我删除^ _ ^）

超链接


<body>
  <h4>1.外部链接</h4>
  <a href="http://www.qq.com" target="_blank"> 腾讯</a>
  target 打开窗口的方式  默认的值是 _self 当前窗口打开页面  _blank 新窗口打开页面
  <a href="http://www.itcast.cn" target="_blank">传智播客</a>
  <h4>2.内部链接: 网站内部页面之间的相互链接</h4>
  <a href="gongsijianjie.html" target="_blank">公司简介</a>
  <h4>3.空链接:#</h4>
  <a href="#">公司地址</a>
  <h4>4.下载链接: 地址链接的是 文件 .exe 或者是 zip 等压缩包形式</h4>
  <a href="img.zip">下载文件</a>
  <h4>5.网页元素的链接</h4>
  <a href="http://www.baidu.com"><img src="img.jpg"/></a>
</body>

示例

水平线

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


<body>
  <p>This is a paragraph</p>
  <hr />
  <p>This is a paragraph</p>
  <hr />
  <p>This is a paragraph</p>
<body>

示例

文本格式化


<body>
  我是<strong>加粗</strong>的文字
  我是<b>加粗</b>的文字
  我是<em>倾斜</em>的文字
  我是<i>倾斜</i>的文字
  我是<del>删除线</del>
  我是<s>删除线</s>
  我是<ins>下划线</ins>
  我是<u>下划线</u>
</body>

示例

`<div>`和`<span>`

div标签是块级元素，拥有块级元素的特点。每对div标签（<div></div>）里的内容都可以占据一行，不会其他标签在一行显示；div标签总是从新行开始显示；

且div标签可以通过css样式来设置自身的宽度（也可省略，当没有使用css自定义宽度时，div标签的宽度为其的容器的100%）、高度，且还可以设置标签之间的距离（外边距和内边距）；

我们还可以在div标签中，使用其他标签（行内元素、块级元素都行），比如：span标签，p标签，也可以是div标签。

span标签是行内元素，拥有行内元素的特点。span标签元素和其他标签元素会在一行显示（块级元素除外），不会另起一行显示。

span标签的宽度、高度都无法通过css样式设置，它的宽高受其本身内容（文字、图片）控制，随着内容的宽高改变而改变；span标签无法控制外边距和内边距，虽然可以设置左右的外边距和内边距，但上下的外边距和内边距无法设置。

span标签里只能容纳文本或者是其他的行内元素，不能容纳块级元素。

多个span标签会在一行显示。


<body>
  <div>我是一个div标签我一个人单独占一行</div>
  <div>我是一个div标签我一个人单独占一行</div>
  <span>百度</span>
  <span>新浪</span>
  <span>搜狐</span>
</body>

示例

表格

表格由 <table> 标签来定义。边框属性<border>用来显示一个带有边框的表格，每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的表头使用 <th> 标签进行定义，大多数浏览器会把表头显示为粗体居中的文本。

基本用法


<table>
  <tr><td>姓名</td> <td>性别</td> <td> 年龄 </td></tr>
  <tr><td>刘德华</td> <td>男</td> <td> 56 </td></tr>
  <tr><td>张学友</td> <td>男</td> <td> 58 </td></tr>
  <tr><td>郭富城</td> <td>男</td> <td> 51 </td></tr>
  <tr><td>黎明</td> <td>男</td> <td> 57 </td></tr>
</table>

示例

表头单元格


<table>
  <tr><th>姓名</th> <th>性别</th> <th> 年龄 </th></tr>
  <tr><td>刘德华</td> <td>男</td> <td> 56 </td></tr>
  <tr><td>张学友</td> <td>男</td> <td> 58 </td></tr>
  <tr><td>郭富城</td> <td>男</td> <td> 51 </td></tr>
  <tr><td>黎明</td> <td>男</td> <td> 57 </td></tr>
</table>

示例

表头单元格带属性


<!-- 这些属性要写到表格标签table 里面去 -->
<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="249">
  <tr><th>姓名</th> <th>性别</th> <th> 年龄 </th></tr>
  <tr><td>刘德华</td> <td>男</td> <td> 56 </td></tr>
  <tr><td>张学友</td> <td>男</td> <td> 58 </td></tr>
  <tr><td>郭富城</td> <td>男</td> <td> 51 </td></tr>
  <tr><td>黎明</td> <td>男</td> <td> 57 </td></tr>
</table>

示例

表单


<body>
  <form action="xxx.php" method="get">
    <!-- text 文本框 用户可以里面输入任何文字 -->
    用户名: <input type="text" name="username" value="请输入用户名" maxlength="6">   <br> 
    <!-- password 密码框 用户看不见输入的密码 -->
    密码: <input type="password" name="pwd" >  <br> 
    <!-- radio 单选按钮  可以实现多选一 -->
    <!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
    <!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->
    性别: 男 <input type="radio" name="sex" value="男"> 女  <input type="radio" name="sex" value="女" checked="checked"> 人妖   <input type="radio" name="sex" value="人妖">   <br> 
    <!-- checkbox 复选框  可以实现多选 -->
    爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby">  打豆豆 <input type="checkbox" name="hobby" checked="checked"> 
    <br> 
    <!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 -->
    <input type="submit" value="免费注册">
    <!-- 重置按钮可以还原表单元素初始的默认状态 -->
    <input type="reset" value="重新填写">
    <!-- 普通按钮 button  后期结合js 搭配使用-->
    <input type="button" value="获取短信验证码"> <br>
    <!-- 文件域 使用场景 上传文件使用的 -->
        上传头像:  <input type="file" >
  </form>
</body>

示例

下拉表单


<body>
  <form>
  籍贯: 
  <select>
    <option>北京</option>
    <option>广州</option>
    <option>深圳</option>
    <option selected="selected">上海</option>
  </select>
  </form>
</body>

示例

文本域


<body>
  <form>
    今日反馈:
    <textarea cols="50" rows="5">高老师，这个反馈留言是用textarea来做的！</textarea>
  </form>
</body>

示例

列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 <ul> 标签。每个列表项始于 <li>。

无序列表


<body>
  <h4>喜欢的食物</h4>
  <ul>
    <li>榴莲</li>
    <li>臭豆腐</li>
    <li>螺狮粉</li>
    <li>
      <p>123</p>
    </li>
  </ul>
</body>

示例

有序列表


<body>
  <h4>粉丝排行榜</h4>
  <ol>
    <li>刘德华 10000</li>
    <li>刘若英 1000</li>
    <li>高老师 1</li>
  </ol>
</body>

示例

自定义列表


<body>
  <dl>
    <dt>关注我们</dt>
    <dd>新浪微博</dd>
    <dd>官方微信</dd>
    <dd>联系我们</dd>
    <dt>关注我们</dt>
    <dd>新浪微博</dd>
    <dd>官方微信</dd>
    <dd>联系我们</dd>
  </dl>
</body>

示例

特殊字符

特殊字符常见如下，经常用的版本和空白位填充的记住即可。

HTML 原代码	显示结果	描述
`<`	<	小于号或显示标记
`>`	>	大于号或显示标记
`&`	&	可用于显示其它特殊字符
`"`	“	引号
`®`	®	已注册
`©`	©	版权
`™`	™	商标
`&ensp;`		半个空白位
`&emsp;`		一个空白位
` `		不断行的空白


<body>
    其&nbsp;&nbsp;&nbsp;&nbsp;实
     &lt; p  &gt;   是一个段落标签
</body>

示例

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/92794