前端学习之路html基础(02)——常用标签

时间：2021-10-18 15:02:13

HTML CSS

  • CSS是在html4以后引用用来渲染html元素的。
  • CSS分为三类，内联样式、内部样式表、外部引用，其中外部引用最佳。
  • 内联样式，当文本中某个标签需要特别的样式时使用内联样式<style>。
  • 内部样式表，作用域整个文本。
  • 外部引用，当多个html文本需要用到同一样式时。

内联样式、内部样式表

  • 当特殊的样式需要应用到个别元素时，就可以使用内联样式。
  • 当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html图像</title>
<style type="text/css">
h1 {color: red; font-size: 20px}
</style>
</head>

<body>
<h1>内部样式表</h1>
<p style="color: blue">内联样式</p>
</body>

</html>

前端学习之路html基础(02)——常用标签

外部引用
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

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

总结

  • 总结了一些style属性;
  • backgroud-color属性，背景颜色；
  • font-family属性，字体；
  • color属性，字体颜色；
  • font-size属性，字体大小；
  • text-align属性，文本对齐方式；

HTML 图像

  • 在html中，用<img>来定义图像；
  • 它是空标签，只包含属性没有闭合标签；
  • src源属性，是指图像的来源；
  • alt属性，当图像无法显示时，显示的解释文本；
  • width、height属性，图像的宽高；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html图像</title>
<style type="text/css">
h1 {color: red; font-size: 20px}
</style>
</head>

<body>
美女哦
<img src="images/girl01.jpg" width="150" height="200">
<img src="images/null" alt="这是错误的图像地址", width="150" height="200">
<abbr title="这是我女朋友"><img src="images/girl02.png" width="150" height="200"></abbr>
</body>

</html>

前端学习之路html基础(02)——常用标签

<map>、<area>标签

  • 用于客户端图像映射。图像映射指带有可点击区域的一幅图像。
  • <img>中的 usemap 属性可引用<map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 添加 id 和 name 属性。
  • <area >元素永远嵌套在<map>元素内部。<area >元素可定义图像映射中的区域。
  • <area>的属性shape，点击区域的形状，rect矩形，circle圆形等；
  • <area>的属性coords，区域内的坐标，rect(left, top, right, bottom)，circle(圆心x, 圆心y, 半径);
  • <area>的属性href，点击的目标URL。
  • 更多<area>属性查询。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html图像</title>
<style type="text/css">
h1 {color: red; font-size: 20px}
</style>
</head>

<body>
<img src="images/girl02.png" width="200" height="300" usemap="#myMap">
<map id="myMap" name="myMap">
<area shape="rect" coords="0, 0, 100, 300" href="http://www.baidu.com" target="_blank">
<area shape="rect" coords="100, 0, 200, 300" href="http://www.google.com" target="_blank">
</map>
</body>

</html>

前端学习之路html基础(02)——常用标签

HTML 表格

  • <table>标签用来定义表格；
  • <th>来定义表头；
  • <tr>用来定义表格的行；
  • <td>来表示每行包含若干单元格（即列），单元格可以使任何格式的标签；
  • <caption>定义表格的标题；
  • <colgroup>定义表格列的组；
  • <col>来定义表格列的属性；
  • <thead>来定义表格的页眉；
  • <tbody>来定义表格的主体；
  • <tfoot>来定义表格页脚。

实例可查看。

HTML 列表

html支持有序列表、无序列表、定义列表三种；

1. 有序列表<ol>、<li>

  • 有序列表是一列项目，列表项目用数字（或者其他标记）来一次排序。
  • 列表始于标签<ol>，列表的每一项始于<li>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html图像</title>
<style type="text/css">
h1 {color: red; font-size: 20px}
</style>
</head>

<body>
<h1>课程列表</h1>
<ol>
<li style="color: blue">语文</li>
<li style="color: red">数学</li>
<li>英语</li>
</ol>

</html>

前端学习之路html基础(02)——常用标签

2. 无序列表<ul>、<li>

  • 无序列表的每一项不用数字来标记，而用黑点，你现在看到的这句话就是无序列表；
  • 无序列表使用标签<ul>，每一项同样使用<li>来表示；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html图像</title>
<style type="text/css">
h1 {color: red; font-size: 20px}
</style>
</head>

<body>
<h1>课程列表</h1>
<ul>
<li style="color: blue">语文</li>
<li style="color: red">数学</li>
<li>英语</li>
</ul>

</html>

前端学习之路html基础(02)——常用标签

3. 定义列表<dl>、<dt>、<dd>

  • 自定义列表以
    标签开始；
  • 每个自定义列表项以
    开始；
  • 每个自定义列表项的定义以
    开始。 
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

浏览器显示如下:

Coffee
- black hot drink
Milk
- white cold drink

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
标签：

相关文章