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

来源：互联网发布：阿里云二级域名端口编辑：程序博客网时间：2024/06/05 06:04

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

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

0 0