HTML学习笔记( 二)

1.class 与 id 属性

class 属性 与 id 属性是 HTML 常用的属性,适用于大多数 HTML 元素

class 属性:

class 属性为 HTML 元素定义一个或多个类名。

class 属性通常用于指向样式表的类。 

例子:

<p class="intro">这是一个段落。</p>

id 属性:

id 属性定义 HTML 元素的唯一的 id。

id 在 HTML 文档中必须是唯一的。 

例子:

<h1 id="header">W3Cschool 在线教程</h1>

2.align 属性

align 属性规定文本的对齐方式。
例子:有一个居中对齐的段落,和一个左对齐的水平线
<html>
   <head>
      <meta charset="utf-8">
      <title>HTML 属性</title>
   </head>
   <body>
      <p align="center">这是一些文本。</p>
      <hr width="50%" align="left" />
   </body>
</html>


3.<img> 标签

在 HTML 中,图像由 <img> 标签定义。

<img> 是空标签,它只包含属性,并且没有闭合标签。

要在页面上显示图像,你需要使用源属性(src)。源属性的值是图像的 URL 地址。

定义图像的语法是:

<html>
   <head>
      <title>first page</title>
   </head>
   <body> 
      <img src="logo.png" alt="图像无法显示" />
   </body>
</html>
如果图像无法显示,则 alt 属性用来为图像定义一串预备的可替换的文本。alt 属性是必需的。

4.设置图像的高度与宽度

height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。

该属性值可以以 像素 或 百分比 形式指定,默认单位为像素

<html>
   <head>
      <title>first page</title>
   </head>
   <body> 
      <img src="logo.png" height="100px" width="100px" alt="" />
      <!-- 或者 -->
      <img src="logo.png" height="80%" width="80%" alt="" />
   </body>
</html>

5.图像边框

 <img> 标签的 border 属性规定图像周围的边框的宽度。

注释:默认情况下,图像是没有边框的。

使用 border 属性和一个用像素表示的宽度值就可以去掉 (border="0") 或加宽图像的边框。


例子:带有 2 像素粗边框的图像

<img src="logo.png" height="100px" width="100px" border="2" alt="" /> 

6.<a> 标签

HTML使用标签 <a> 来设置超文本链接。

超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,你可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

在标签 <a> 中使用href属性来描述链接的目标地址。

例子:HTML中超链接
<a href="https://www.qq.com">访问qq</a>

使用 target 属性,你可以规定在何处打开链接文档。

给属性赋予 _blank 值将使链接在新窗口或新选项卡中打开。

例子:下面的超链接会在新窗口打开文档


<a href="https://www.qq.com" target="_blank">访问qq</a>

7.HTML 无序列表


无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

无序列表使用 <ul> 标签,与 <li> 标签一起使用

无序列表的例子:
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul> 
浏览器显示的结果如下:

8.HTML 有序列表

有序列表也是一列项目,列表项目使用数字进行标记。

有序列表始于 <ol> 标签,每个列表项始于 <li> 标签。


有序列表的例子:

<ol>
 <li>咖啡</li>
 <li>茶</li>
 <li>牛奶</li>
</ol>
浏览器中显示结果如下:

9.HTML创建表格

表格由 <table> 标签来定义。

每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。

border 属性规定表格单元周围是否显示边框。

如果不定义边框属性,表格将不显示边框。


下面是一个带有边框的两行两列的表格:

<table border="1">
  <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
  </tr>
  <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
  </tr>
</table>
在浏览器显示结果如下:

10.HTML的表格表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本。

例子:

<table border="1">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
  </tr>
  <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
  </tr>
</table>
在浏览器显示结果如下:

表格 colspan 和 rowspan 属性

使用 colspan 属性定义跨列.

 使用 rowspan 属性定义跨行.

下面是一个单元格跨两行的表格:

<table border="1">
  <tr>
    <td>First Name:</td>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <td rowspan="2">Telephone:</td>
    <td>555 77 666</td>
  </tr>
  <tr>
    <td>555 77 667</td>
  </tr>
</table>
显示的结果:

猜你喜欢

转载自blog.csdn.net/qq_38405966/article/details/80213599