HTML笔记（二） HTML标签元素
一 常用的头部元素标签
<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标签元素的更多相关文章
- qml学习笔记(二)：可视化元素基类Item详解（上半场anchors等等）
原博主博客地址:http://blog.csdn.net/qq21497936本文章博客地址:http://blog.csdn.net/qq21497936/article/details/78516 ...
- Html学习笔记(二) 简单标签
标签的重点 标签的用途 标签在浏览器中的默认样式 <body>标签: 在网页上显示的内容 <p>标签: 添加段落 <hx>标签: 添加标题 标签一共有6个,h1.h ...
- HTML5系列二（标签元素、FileReader、拖放）
nav元素的使用场合 页面中可以包含多个nav元素,通常情况下头部和尾部都会包含导航,这样提高了可访问性,访客能够清晰的将其辨认出来.nav元素是一个可以用来作为页面导航的链接组:其中的导航元素链接到 ...
- Python笔记(二)查找重复元素
一.查找数列重复元素---count() >>> list = [,,,,,,,,,,,] >>> set = set(list) >>> for ...
- jquery学习笔记(二)：DOM元素操作
内容来自[汇智网]jquery学习课程 2.1 元素属性操作 1.获取元素的属性 语法:attr(name) 参数name表示属性的名称 2.设置元素的属性 单个属性设置语法:attr(key,val ...
- HTML5学习笔记<二>:元素,属性,格式化
HTML元素 元素是指从开始标签到结束标签的所有代码. 开始(开放)标签 元素内容 结束(闭合)标签 <p> this is my web page </p> 没有内容的 HT ...
- jQuery源码笔记(二)：定义了一些变量和函数 jQuery = function(){}
笔记(二)也分为三部分: 一. 介绍: 注释说明:v2.0.3版本.Sizzle选择器.MIT软件许可注释中的#的信息索引.查询地址(英文版)匿名函数自执行:window参数及undefined参数意 ...
- Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
- amazeui学习笔记二（进阶开发5）--Web 组件开发规范Rules
amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意 例如(HISTORY.md Web 组件更新历史 ...
- amazeui学习笔记二（进阶开发4）--JavaScript规范Rules
amazeui学习笔记二(进阶开发4)--JavaScript规范Rules 一.总结 1.注释规范总原则: As short as possible(如无必要,勿增注释):尽量提高代码本身的清晰性. ...
随机推荐
- 区分CommonJs/ES6 Module/AMD/CMD
模块加载方式 CommonJs ES6 Module AMD CMD UMD Commonjs和ES6 Module的区别 总结 1.CommonJS CommonJS 是一个项目,其目标是为 Jav ...
- VC 运行时库的引用区别 /MD、/MDd 和 /MT、/MTd和DllMain函数
/MT和/MTd表示采用多线程CRT库的静态lib版本.该选项会在编译时将运行时库以静态lib的形式完全嵌入.该选项生成的可执行文件运行时不需要运行时库dll的参加,会获得轻微的性能提升,但最终生成的 ...
- 关于uniapp 打自定义基座部分手机不能自动安装的问题
部分手机指的是-------没错就辣鸡 vivo手机 解决办法----进入手机文件管理-----根目录-----会有一个你打包的app.apk文件,手动安装一下就好了 搜索 复制
- vue 移动端px转rem
1.安装lib-flexible 终端执行命令:npm i lib-flexible --save 2.在main.js引入lib-flexible 3.终端执行命令:npm install post ...
- 基于Java语言的编码问题了解
基于Java语言的编码问题了解 以下仅为本人工作.学习过程中所接触到的内容,不足之处欢迎指出. 近两天使用maven的tomcat插件,以及使用非插件版的tomcat部署项目时遇到了乱码问题,在解决乱 ...
- 053_Salesforce Lightning与Classic对比
Classic页面 Lightning页面 特点: 应用程序的切换更加方便 可以快速访问最近项目和备注等 新的记录页面布局 涡轮增压列表视图 仪表板有所变化 圆滑的报告视图 其中最重要的变化也当属 ...
- SSH的密钥登录配置
1.ssh的登录方法. 两种方法: (1)linux系统connect to linux ssh -l root 192.168.2.191 #直接登录. 语法:$ssh -p 22 user@hos ...
- Unity WebGL与JS脚本交互
1.Unity调用JavaScript脚本方法 官网文档 老版本方法 之前Unity提供的Application.ExternalCall方法现在已经被设为过时弃用.(但是现在还能用,但是不知道什么时 ...
- 如何在centos7.6操作系统下安装mysql数据库
1.从mysql官网上下载自己合适mysql版本,进入mysl官网https://dev.mysql.com/downloads/mysql/5.6.html#downloads,依次点击: 2.下载 ...
- Docker学习——Docker 三剑客（七）
Docker Compose 简介 Docker Compose 是 Docker 官方编排(Orchestration)项目之一,负责arg>...] [options] [COMMAND] ...