HTML学习笔记(一)

    科技2024-05-08  90

    HTML

    HTML是超文本标记语言(HyperText Markup Language),用来描述网页。

    HTML不是一种编程语言HTML文档包含HTML标签和文本内容HTML文档也叫做web页面 实例 <!DOCTYPE html> <!--声明为H5文档--> <html> <!--HTML页面的根元素--> <head> <!--包含了文档的元数据(meta)--> <meta charset="utf-8"> <!--定义了网页编码格式为utf-8--> <title>web页面</title> <!--文档的标题--> </head> <body> <!--包含了页面可见的内容--> <h1>一级标题</h1> <!--定义了一个标题--> <p>一个段落</p> <!--定义了一个段落--> </body> </html>

    HTML元素(标签)

    HTML文档由HTML元素定义。

    HTML元素大多数以开始标签起始,以结束标签终止,元素的内容介于开始标签和结束标签之间空元素以开始标签的结束而结束大多数HTML元素可拥有属性大多数HTML元素可以嵌套HTML元素对大小写不敏感,但推荐使用小写

    HTML属性

    属性是HTML元素提供的附加信息。

    属性一般描述于开始标签属性以名/值对的形式出现,如name=“value”属性值始终被包括在引号内,引号可以是双引号或单引号,特殊情况下必须使用单引号,如name=‘John “ShotGun” Nelson’属性和属性值对大小写不敏感,但推荐使用小写

    下面列出几个适用于大多数HTML元素的属性: class:为元素定义一个或多个类名 id:为元素定义一个唯一的id style:规定元素的行内样式 title:给元素附加额外信息 (注意:class=" " 引号里可以填多个值,id=" " 引号里只能填一个,多个无效)

    HTML标题

    标题(heading)是通过 <h1>-<h6> 标签定义的,<h1>定义最大的标题,<h6>定义最小的标题。 注:浏览器会自动在标题的前后添加空行

    标题很重要标题可以使搜索引擎更容易找到你的网页用户可以通过标题快速的浏览你的网页1到6号标题与1到6号字体逆序对应,如1号字体对应6号标题,2号字体对应5号标题

    HTML段落

    段落是通过 <p> 标签定义的。 注:浏览器会自动在段落的前后添加空行(<p>是块级元素)

    HTML文本格式化

    HTML常用某些标签对输出文本进行格式,这些标签被称为格式化标签。

    标签作用<b>定义粗体文本<em>定义着重文字<i>定义斜体字<small>定义小号字<strong>定义加重语气<sub>定义下标字<sup>定义上标字<ins>定义插入字<del>定义删除字<code>定义计算机代码<kbd>定义键盘码<samp>定义计算机代码样本<var>定义变量<pre>定义预格式文本<abbr>定义缩写<address>定义地址<bdo>定义文字方向<blockquote>定义长的引用<q>定义短的引用语<cite>定义引用、引证<dfn>定义一个定义项目

    HTML超链接

    HTML使用超链接与网络上的另一个文档相连,即点击链接可以从一张页面跳转到另一张页面。HTML通过 <a> 标签创建超链接。

    默认情况下,链接将以以下形式出现在浏览器中:

    未访问过的链接显示为蓝色字体并带有下划线

    访问过的链接显示为紫色并带有下划线

    点击链接时链接显示为红色并带有下划线

    (可以为这些超链接设置CSS样式)

    超链接的属性:

    href:描述链接的地址target:定义被链接的文档在何处显示id:创建HTML文档书签标记

    HTML <head>元素

    <head>元素包含了所有的头部标签元素。可以在该元素中插入脚本(script),样式文件(CSS)及各种meta信息。 <head>中可添加的元素:

    标签作用<title>定义了文档的标题<base>定义了页面链接标签的默认链接地址<link>定义了一个文档和外部资源之间的关系<meta>定义了HTML文档中的元数据<script>定义了客户端的脚本文件<style>定义了HTML文档的样式文件 title元素定义的标题即显示在搜索引擎的结果页面的标题meta元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者及其他元数据

    HTML图像

    图像由 <img> 标签定义。要在页面上显示图像,就必须使用源属性(src),其值是图像的URL。

    alt属性:为图像定义一串预备的可替代的文本,在浏览器无法载入图象时显示height与width:用于设置图像的高度和宽度HTML文档包含的图像越多,加载该页面的时间就越长,所以要慎用图片要正确的设置图像的URL,否则浏览器将无法加载图片并显示一个破损的图片

    HTML表格

    表格由<table>标签来定义。 表格中的元素:

    <tr>标签定义表格的行<td>标签定义单元格,单元格中可以包含文本、图片、列表、段落、表单、表格、水平线等 实例: <table border="1"> <!--border属性设置表格边框--> <tr> <th>Header 1</th> <!--<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>

    HTML表格的标准写法:

    <table> <thead> 表格的页眉 </thead> <tbody> 表格的主体 </tbody> <tfoot> 表格的页脚 </tfoot> </table>

    单元格的合并:<td>标签中的colspan属性(合并列)和rowspan属性(合并行)

    HTML列表

    有序列表 由<ol>定义,如:

    <ol> <li>item1</li> <li>item2</li> </ol>

    浏览器中如下显示:

    item1item2

    无序列表 由<ul>定义,如:

    <ul> <li>item1</li> <li>item2</li> </ul>

    浏览器中如下显示:

    item1item2

    自定义列表 实例:

    <dl> <dt>coffee</dt> <dd>-black</dd> <dt>milk</dt> <dd>-white</dd> </dl>

    浏览器中如下显示: coffee -black milk -white

    注:列表元素可以嵌套

    Processed: 0.013, SQL: 8