一 常用的头部元素标签

　　<head>元素包含了所有的头部标签元素。

1、<title>

　　<title>标签定义了HTML文档的标题，在HTML/XHTML文档中是必须的。

　　主要功能：

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

2、<base>

　　<base>标签描述了基本的链接地址或链接目标。

　　该标签作为HTML文档中所有的链接标签的默认链接，即如果HTML文档中的超链接标签没有添加链接地址，则默认访问<base>标签中的链接。

　　语法格式：<base href="url" target="...">

3、<link>

　　<link>标签定义了文档与外部资源之间的关系，常用于链接到外部样式表。

　　语法格式：<link rel="stylesheet" type="text/css" href="xxx.css">

4、<style>

　　<style>标签定义了内部的CSS样式。

　　语法格式：<style type="text/css">css样式规则</style>

5、<meta>

　　<meta>标签描述了一些基本的HTML页面元数据，元数据不显示在页面上，但会被浏览器解析。

　　<meta>元素通常用于制定网页的描述、关键词、文件的最后修改时间、作者，以及其他元数据。

　　主要有http-equiv、name和content三个属性。前两个指定了元数据信息的名称，content用于指定对应的值。

　　例如：<meta http-equiv="Content-Type" content="text/html;charset="utf-8" />

　　　　　<meta name="author" content="LoveStory_Fish" />

6、<script>

　　<script>标签用于加载脚本文件。

7、头部标签元素使用实例

<!DOCTYPE html>

<html>

<!-- 头部标签元素 -->

<head>

    <!-- 定义文档标题 -->

    <title>This is my first html</title>

    <!-- 定义网页默认链接 -->

    <base href="http://www.baidu.com" target="_blank"></base>

    <!-- 定义引用的外部资源文件 -->

    <link rel="stylesheet" type="text/css" href="test.css">

    <!-- 定义文档样式 -->

    <style type="text/css">

    p {color: blue}

    </style>

    <!-- 定义网页语言 -->

    <meta charset="utf-8" />

    <!-- 定义网页作者 -->

    <meta name="author" content="LoveStory_Fish" />

    <!-- 每30秒刷新当前页面 -->

    <meta http-equiv="refresh" content="60" />

    <!-- 执行javascript脚本代码 -->

    <script type="text/javascript">

    alert("Hello World!")

    </script>

</head>

<body>

    <p>这是一个段落！</p>

</body>

</html>

二 常用的块级元素标签

　　浏览器中的块级元素，前后显示折行。

　　块级元素的特点：

  • 块级元素，前后显示折行，从新的一行开始，后面的元素需要另起一行；
  • 元素的高度、宽度、行高、上下边距等都可设置；
  • 可以通过display:block属性键值对将行级元素转化成块级元素；

1、标题标签

　　HTML通过<h1> - <h6>六个标签来定义标题。

　　字体大小按<h1> - <h6>逐渐减小，且重要性递减，<h1>定义最大标题或作主标题（最重要的），<h6>定义最小标题。

　　标题的重要性：搜索引擎使用标题为网页的结构和内容编制索引，用户也可以通过标题来快速浏览网页。

2、<p>

　　用于定义HTML文档的段落。

3、<hr />

　　定义HTML文档的水平线，一般用于分割内容。

4、<div>

　　HTML文档的分区标签，一帮当作HTML文档的结构化块状元素使用。

　　用于对网页进行整体分块布局，当作容器来使用。

5、行级元素标签使用实例

　　注意：一般情况下，段落与段落之间的行距要大于换行的行距。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>This is my first html</title>

</head>

<body>

    <!-- HTML注释，不会在浏览器中显示 -->

    <!-- HTML标题 -->

    <h1>我的第一个标题</h1>

    <h2>我的第一个标题</h2>

    <h3>我的第一个标题</h3>

    <h4>我的第一个标题</h4>

    <h5>我的第一个标题</h5>

    <h6>我的第一个标题</h6>

    <!-- HTML水平线 -->

    <hr/>

    <!-- HTML段落 -->

    <p>这是一个段落！

    <!-- HTML折行 -->

    <br />

    这是段落的一部分内容...</p>
　　<div>

     <p>这是另一个段落！</p>
　　</div>
</body>

</html>

三 常用的行级元素标签

　　行级元素一般按行逐一显示，前后不会自动换行。

　　行级元素的特点：

  • 与其他元素在一行上显示；
  • 元素的高度、宽度、行高、上下边距不能被设置，宽度为它所包含的内容的宽度；
  • 可以通过display:inline属性键值对将块级元素转化成块级元素；

1、<a>

　　定义了HTML文档的超链接。

　　超链接可以是文字或者一幅图像，可以点击这些内容来跳转到新的网页或者当前网页中的某个部分。

　　语法格式：<a href="链接地址" target="目标窗口">链接文本或图片</a>

　　（1）href属性　　

　　href属性用来描述链接的地址或目标。

　　注意：尽量使用正斜杠添加到子文件夹，如果使用反斜杠，则会向服务器产生两次HTTP请求，因为服务器会添加正斜杠到这个地址，然后创建一个新的请求。

　　（2）target属性

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

　　_blank：在新窗口中打

2、<br />

　　定义HTML文档的折行，在不产生一个新段落且需要进行换行的情况下使用，是一个空的HTML元素。

3、格式化标签

　　格式化标签可以对输出的文本进行格式化。

　　（1）常用的文本格式化标签

标签 描述
<b> 定义粗体文字
<strong> 定义粗体文字，突出显示重要的文本内容
<i> 定义斜体文字
<em> 定义斜体文字，突出显示重要的文本内容
<small> 定义小号字
<big> 定义大号字
<sub> 定义下标
<sup> 定义上标
<ins> 定义插入字
<del> 定义删除字

　　（2）常用的计算机输出标签

标签 描述
<code> 定义计算机代码
<kdd> 定义键盘码
<samp> 定义计算机代码样本
<var> 定义变量
<pre> 定义与格式文本，控制空行和空格（会保留）

　　（3）常用引文、引用标签

标签 描述
<abbr> 定义缩写
<address> 定义地址
<bdo> 定义文字方向
<blockquote> 定义长的引用
<q> 定义短的引用
<cite> 定义引用、引证
<dfn> 定义一个定义项目

　　（4）文本格式化实例：

<body>

    <b>文本加粗</b><br/>

    <strong>文本加粗（强调）</strong><br/>

    <i>文本斜体</i><br/>

    <em>文本斜体（强调）</em><br/>

    <big>文本放大</big><br/>

    <small>文本缩小</small><br/>

    文本<sup>上标</sup><br/>

    文本<sub>下标</sub><br/>

    <pre>

        对连续空格     和空行

        进行控制

    </pre>

    <p>该段文字从右往左显示</p>

    <p><bdo dir="rtl">该段文字从右往左显示</p>

    删除错误字体<del>“宋体”</del>，新增字体<ins>华文新魏</ins><br/>

</body>

　　运行结果：

　　

4、<span>

　　在HTML文档中定义一个行内区域，一行内可以被 <span> 划分成多个区域。

四 常用的行内块级元素

1、<img>

　　定义HTML文档中的图像。

　　<img>是空标签，只包含属性，没有闭合标签。

　　语法格式：<img src="图片地址" alt="提示文字">

　　（1）src属性

　　用来定义图像的URL地址。

　　src属性的值是指图像的位置，浏览器会将图像显示在文档中图像标签出现的地方。

　　（2）alt属性

　　alt属性用来为图像定义一串预备的可替换的文本，替换的文本属性值是用户自定义的。

　　当浏览器无法载入图像时，浏览器将会显示这个替代性的文本。

　　（3）height和width属性

　　height和width属性分别用于设置图像的高度和宽度，属性值默认单位为像素px。

　　指定图像高度与宽度，当页面加载时就会保留指定的尺寸，如果不指定图片大小，加载页面时有可能会破坏HTML页面的整体布局。

　　注意：加载图片需要时间，尽量慎用图片。并且需要注意页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，会显示一个破碎的图片。

2、链接与图片综合运用的实例展示：

<body>

    文本链接：<a href="http://www.google.cn">链接</a>

    <br />

    图片链接：<a href="http://www.google.cn">

        <img src="google.JPG" alt="goole图标" height="30" width="30">

    </a>

</body>

五 注释

　　HTML注释可以提高HTML文档的可读性，使代码更易被人理解。

　　浏览器会忽略注释，并且不会显示它们。

　　语法格式：<!-- 注释内容 -->

　　注意：显示页面时，浏览器会移除源代码中多余的空格和空行，所有连续的空格或空行都会被算作一个空格，HTML代码中的所有连续的空行也被显示为一个空格。

　　实例：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>This is my first html</title>

</head>

<body>

    <h1>春晓</h1>

    <p>

        春眠不觉晓，

              处处闻啼鸟。

                夜来风雨声，

                      花落知多少。

    </p>

</body>

</html>

　　运行结果：

HTML笔记（二） HTML标签元素的更多相关文章

  1. qml学习笔记(二)：可视化元素基类Item详解（上半场anchors等等）

    原博主博客地址:http://blog.csdn.net/qq21497936本文章博客地址:http://blog.csdn.net/qq21497936/article/details/78516 ...

  2. Html学习笔记(二) 简单标签

    标签的重点 标签的用途 标签在浏览器中的默认样式 <body>标签: 在网页上显示的内容 <p>标签: 添加段落 <hx>标签: 添加标题 标签一共有6个,h1.h ...

  3. HTML5系列二（标签元素、FileReader、拖放）

    nav元素的使用场合 页面中可以包含多个nav元素,通常情况下头部和尾部都会包含导航,这样提高了可访问性,访客能够清晰的将其辨认出来.nav元素是一个可以用来作为页面导航的链接组:其中的导航元素链接到 ...

  4. Python笔记(二)查找重复元素

    一.查找数列重复元素---count() >>> list = [,,,,,,,,,,,] >>> set = set(list) >>> for ...

  5. jquery学习笔记(二)：DOM元素操作

    内容来自[汇智网]jquery学习课程 2.1 元素属性操作 1.获取元素的属性 语法:attr(name) 参数name表示属性的名称 2.设置元素的属性 单个属性设置语法:attr(key,val ...

  6. HTML5学习笔记<二>:元素,属性,格式化

    HTML元素 元素是指从开始标签到结束标签的所有代码. 开始(开放)标签 元素内容 结束(闭合)标签 <p> this is my web page </p> 没有内容的 HT ...

  7. jQuery源码笔记(二)：定义了一些变量和函数 jQuery = function(){}

    笔记(二)也分为三部分: 一. 介绍: 注释说明:v2.0.3版本.Sizzle选择器.MIT软件许可注释中的#的信息索引.查询地址(英文版)匿名函数自执行:window参数及undefined参数意 ...

  8. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  9. amazeui学习笔记二（进阶开发5）--Web 组件开发规范Rules

    amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意 例如(HISTORY.md Web 组件更新历史 ...

  10. amazeui学习笔记二（进阶开发4）--JavaScript规范Rules

    amazeui学习笔记二(进阶开发4)--JavaScript规范Rules 一.总结 1.注释规范总原则: As short as possible(如无必要,勿增注释):尽量提高代码本身的清晰性. ...

随机推荐

  1. TexturePacker基本使用

    生成后

  2. PostgreSQL 解析json字段

    一.解析json数组 select json_array_elements(lv_num_json)->'l1' lv,json_array_elements(lv_num_json)-> ...

  3. nginx的301与302跳转详细配置教程

    什么是301跳转 301跳转也叫301重定向,也叫301转向,也叫301永久重定向,是网站建设过程中的一个功能.一般用于2个域名指向同一个网站. 一般来说,利用跳转,对网站的排名不会有影响.但不会转移 ...

  4. react ts 上传

    public MessageObjectPO<UploadPO> OnPostUpload(UploadRO uploadRO) { var response = new MessageO ...

  5. 打卡node day05 mongodb

    1.安装 [官网]https://www.mongodb.com/download-center/community?jmp=nav 配置环境变量 配置完环境变量坚持是否成功 在所在位置新建文件夹 启 ...

  6. 牛客 二叉树中和为某一值的路径 【时间19ms】【内存9560k】

    https://www.nowcoder.com/practice/b736e784e3e34731af99065031301bca 构造函数:new ArrayList(al)把al的所有值复制到 ...

  7. JAVA笔记:double四舍五入并保留两位小数的方法

    1.只要输出结果 double x1 = 0.026; System.out.println(String.format("%.2f", x1)); 2.数据转换 //方案一: g ...

  8. 利用python中的win32com模块操作Word、Excel文件

    word操作 doc文件转换为docx文件 安装win32com模块:pip3 install pypiwin32 import os from win32com.client import Disp ...

  9. 【Numpy】安装Anaconda3和调试

    1,在Anaconda官网下载一个对应操作系统的安装包:https://www.anaconda.com/distribution/ 2,然后选版本操作系统和版本号,下载完成后安装 3,windows ...

  10. windows 系统的端口问题

    netstat -ano 列出所有正在使用的端口netstat -aon|findstr "4300" 查询占用该端口的PIDtasklist|findstr "4464 ...