标签：行内 浏览器 标签 元素 列表 学习 HTML 超链接
文章目录
提示：以下是本篇文章正文内容，下面案例可供参考
一、html基础语法
<img src="http://c.biancheng.net/cpp/templets/new/images/logo.jpg?v=3.994"/> 引用网络图片
<img src="../image/logo.jpg"/> 引用上一层image目录下的一张图片
示例：
<img src="http://c.biancheng.net/cpp/templets/new/images/logo.jpg?v=3.994"
width="200"
height="200"
title="这是C语言中文网的logo"
alt="这是C语言中文网的logo"
/>
- src 表示图片的引用地址，这个地址可以是相对 url，也可以是绝对 url；
- alt 表示图片加载失败时显示的内容；
- title 表示鼠标移动到图片上时显示的文字；
- width 表示图片的宽，默认单位是像素（px）；
- height 表示图片的高，默认单位也是像素（px）。
<a> 标签来表示超链接
<a href="url" target="opentype">链接文本</a> 语法格式
<a href="http://c.biancheng.net" target="_blank">C语言中文网</a>
绝大部分情况下，target 属性要么不写，保持默认的 _self，要么把它的值设置为 _blank，在新的窗口中打开链接
- _self：默认，在现有的窗口中打开新页面，原窗口将被覆盖
- _blank：在新的窗口中打开新页面
- _parent：在当前框架的上一层打开新页面
- _top：在顶层框架中打开新页面
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a标签</title>
</head>
<body>
<a href="http://c.biancheng.net/" target="_blank">C语言中文网（新窗口打开）</a>
<a href="http://c.biancheng.net/">C语言中文网（现有窗口打开）</a>
</body>
</html>
当鼠标移入网页上的某个超链接时，其样式会变为一只小手；当鼠标移出超链接区域时，样式会再次回到箭头形状
在浏览器下，超链接被点击后颜色会发生改变：超链接被点击之前是蓝色的，点击之后会变成紫色
超链接默认是带下划线的，下划线颜色和文本颜色保持一致。 浏览器根据历史记录来判断超链接是否被点击过，如果 <a> 标签的 href 属性和历史记录中的某条 URL 重合，那就说明该链接被点击了，否则是没有被点击的。所以，清空浏览器的历史记录会让超链接的颜色再次变回蓝色
HTML 元素根据其表现形式可以分为 2 种；块级元素，行内元素
块级元素（block element）在浏览器中占据整行，并排斥其它元素与其位于同一行。也就是说，块级元素的宽度是 100%
常见的块元素如下：
div：最典型的块元素
p：表示段落
h1-h6：表示1-6级标题（默认加粗）
br：表示换行
ol：有序列表
ul：无序列表
行内元素又称内联元素（inline block）。在浏览器中可以与其它行内元素共占一行，只有当多个元素的总宽度大于浏览器的宽度时，才会换行显示
常见的行内元素如下：
a：超链接
span：常用行级
strong：加粗，强调
b：加粗，不强调
em：斜体，强调
i：斜体，不强调
img：图片
input：输入框
select：下拉列表
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块元素与行内元素</title>
</head>
<body>
<div>div标签（块级标签）</div>
<p>p标签（块级标签）</p>
<span>span标签（行内标签）</span>
<a href="#">a标签（行内标签）</a>
</body>
</html>
总结：
块级元素的宽度是 100%，在浏览器中默认独占一行。
行内元素在浏览器中默认与其它行内元素共占一行。只有当多个行内元素的总宽度大于浏览器的宽度时，才会换行显示。
块级元素内部可以嵌套块级元素或行内元素。
建议行内元素里面只嵌套行内元素。
HTML 为我们提供了 3 种不同的列表：有序列表，无序列表，定义列表
有序列表示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML有序列表</title>
</head>
<body>
<!-- 有序列表 -->
<ol>
<li>先将水煮沸</li>
<li>加入一勺米</li>
<li>搅拌均匀</li>
</ol>
</body>
</html>
<ol> 是 order list 的简称，表示有序列表。它可以为列表的每一项进行编号，默认从数字 1 开始
<li> 是 list item 的简称，表示列表的每一项。列表中还可以包含文本或其它元素，甚至是新的列表。<ol> 中有多少个 <li> 就表示有多少条内容
无序列表示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML无序列表</title>
</head>
<body>
<!-- 无序列表 -->
<ul>
<li>鸡蛋</li>
<li>牛奶</li>
<li>面包</li>
</ul>
</body>
</html>
<ul> 是 unordered list 的简称，表示无序列表。默认情况下，无序列表的每一项都使用●符号表示
定义列表示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML定义列表</title>
</head>
<body>
<!-- 定义列表 -->
<dl>
<dt>Web前端简介</dt>
<dd>HTML（超文本标记语言）</dd>
<dd>CSS（层叠样式表）</dd>
<dd>JavaScript（脚本语言）</dd>
</dl>
<dl>
<dt>C语言中文网</dt>
<dd>HTML教程</dd>
<dd>CSS教程</dd>
<dd>JavaScript教程</dd>
</dl>
</body>
</html>
<dl> 是 definition list 的简称，表示定义列表
<dt> 是 definition term 的简称，表示定义术语，也就是我们常说的定义标题。一般情况下，每个定义标题都会对应若干条定义描述
<dd> 是 definition description 的简称，表示定义描述。定义描述一般是对定义标题的解释说明
注意：<dt>、<dd> 是同级标签，都是 <dl> 的子标签
表格示例：
<table border="1">
<tr>
<th>名称</th>
<th>官网</th>
<th>性质</th>
</tr>
<tr>
<td>C语言中文网</td>
<td>http://c.biancheng.net/</td>
<td>教育</td>
</tr>
<tr>
<td>百度</td>
<td>http://www.baidu.com/</td>
<td>搜索</td>
</tr>
<tr>
<td>当当</td>
<td>http://www.dangdang.com/</td>
<td>图书</td>
</tr>
</table>
总结
提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
标签：行内,浏览器,标签,元素,列表,学习,HTML,超链接 来源： https://blog.csdn.net/qq_33754935/article/details/120434011
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。