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

最新推荐文章于 2024-08-04 14:27:56 发布

戚继光

最新推荐文章于 2024-08-04 14:27:56 发布

阅读量456

点赞数 1

分类专栏： web前端文章标签： html 前端标签

本文链接：https://blog.csdn.net/weixin_36244867/article/details/56279474

版权

web前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

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>

这里写图片描述

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

<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>

这里写图片描述

<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 表格

<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>

这里写图片描述

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>

这里写图片描述

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

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

戚继光

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录