### HTML语法整理 #### 1. HTML文档结构 HTML(HyperText Markup Language)是一种用于创建网页的标准标记语言。一个基本的HTML文档结构包括`<html>`标签内的`<head>`和`<body>`部分。 - **`<html>`**:表示整个HTML文档的根元素。 - **`<head>`**:包含关于文档的信息,如文档标题、样式表链接等,这些信息不会显示在页面上。 - **`<body>`**:包含文档的所有可见内容,例如文本、图像、表格等。 示例: ```html <!DOCTYPE html> <html> <head> <title>我的网页</title> </head> <body> <h1>欢迎来到我的网页</h1> <p>这是一个段落。</p> </body> </html> ``` #### 2. 基本标签介绍 - **`<h1>`至`<h6>`**:定义标题,`<h1>`表示最重要的标题,`<h6>`表示最不重要的标题。可以通过`align`属性设置对齐方式。 - 示例:`<h1 align="center">这是标题1</h1>` - **`<p>`**:定义一个段落。 - **`<a>`**:定义超链接,通过`href`属性指定链接地址。 - 示例:`<a href="http://www.example.com">这是一个链接</a>` - **`<img>`**:定义图像,通过`src`属性指定图像源。 - 示例:`<img src="/images/example.jpg" alt="示例图像" width="300" height="120"/>` - **`<br>`**:插入换行符,使文本或元素强制换行。 - **`<hr>`**:定义水平线,常用于分隔文档中的内容。 - **`<body>`**:通过`bgcolor`属性设置背景颜色。 - 示例:`<body bgcolor="yellow">` - **`<table>`**:定义表格,通过`border`属性设置边框宽度。 - 示例:`<table border="1">` - **`class`**、**`id`**、**`style`**、**`title`**:这些是常用的属性,可以用来定义元素的样式、唯一标识、内联样式以及提示信息。 - 示例: ```html <div class="example" id="unique" style="color: red;" title="提示信息">这是一个元素</div> ``` #### 3. 文本格式化标签 - **`<b>`**:加粗文本。 - **`<big>`**:增大字体大小。 - **`<em>`**:强调文本,通常斜体显示。 - **`<i>`**:斜体文本。 - **`<small>`**:减小字体大小。 - **`<strong>`**:强调文本,通常加粗显示。 - **`<sub>`**:下标。 - **`<sup>`**:上标。 - **`<ins>`**:插入文本。 - **`<del>`**:删除文本。 - **`<s>`**:表示不再正确的内容。 - **`<strike>`**:删除线文本。 - **`<u>`**:下划线文本。 示例: ```html <p><b>加粗文本</b></p> <p><em>强调文本</em></p> <p><i>斜体文本</i></p> <p><small>减小字体大小</small></p> <p><strong>强调文本</strong></p> <p><sub>下标</sub></p> <p><sup>上标</sup></p> <p><ins>插入文本</ins></p> <p><del>删除文本</del></p> <p><s>不再正确的内容</s></p> <p><strike>删除线文本</strike></p> <p><u>下划线文本</u></p> ``` #### 4. 预格式化标签 - **`<pre>`**:预格式化文本,保持原有的空格和换行。 - **`<code>`**:表示计算机代码。 - **`<samp>`**:表示样本输出。 - **`<tt>`**:等宽字体。 - **`<var>`**:表示变量名。 示例: ```html <pre> for i = 1 to 10 print i next i </pre> ``` #### 5. 表格标签 - **`<table>`**:定义表格。 - **`<caption>`**:定义表格标题。 - **`<th>`**:定义表头单元格。 - **`<tr>`**:定义表格行。 - **`<td>`**:定义表格数据单元格。 - **`<thead>`**:定义表格头部。 - **`<tbody>`**:定义表格主体。 - **`<tfoot>`**:定义表格底部。 - **`<col>`**:定义表格列的格式。 - **`<colgroup>`**:定义表格列组。 示例: ```html <table border="1"> <caption>示例表格</caption> <thead> <tr> <th>标题1</th> <th>标题2</th> </tr> </thead> <tbody> <tr> <td>数据1</td> <td>数据2</td> </tr> </tbody> </table> ``` #### 6. CSS内联样式与外部样式表 - **内联样式**:通过`style`属性直接为元素添加样式。 - 示例:`<p style="color: red;">这是一个段落。</p>` - **内部样式表**:在`<head>`标签内使用`<style>`标签来定义样式。 - 示例: ```html <head> <style> body { background-color: lightblue; } h1 { color: white; text-align: center; } p { font-family: verdana; font-size: 20px; } </style> </head> ``` - **外部样式表**:使用`<link>`标签链接到外部的CSS文件。 - 示例: ```html <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> ``` 以上是对HTML基础语法的一些整理,涵盖了文档结构、基本标签、文本格式化、预格式化、表格以及CSS样式的使用。希望这些内容能帮助大家更好地理解和掌握HTML的基础知识。如果有任何问题或者想要进一步探讨的地方,欢迎大家留言交流!
贴图:<img alt="图片说明(利于图片的搜索)" src="图片地址">
1.<html> 与 </html> 之间的文本描述网页
2.<body> 与 </body> 之间的文本是可见的页面内容
3.<h1> 与 </h1> 之间的文本被显示为标题 <h1 align="center">This is heading 1</h1> 标题居中排列 left right
4.<p> 与 </p> 之间的文本被显示为段落
5.加入HTML 链接是通过 <a> 标签进行定义的 <a href="http://www.w3school.com.cn">This is a link</a> href 属性规定链接的目标
6.HTML 图像<img src="/i/eg_w3school.gif" width="300" height="120" />
7.P和Br都有换行作用,p标签是段落标签,br是强制换行标签
8.<body> 定义 HTML 文档的主体。 <body bgcolor="yellow"> 拥有关于背景颜色的附加信息
9.<table> 定义 HTML 表格。 <table border="1"> 拥有关于表格边框的附加信息。
10.属性 值 描述
class classname 规定元素的类名(classname)
id id 规定元素的唯一 id
style style_definition 规定元素的行内样式(inline style)
title text 规定元素的额外信息(可在工具提示中显示)
11.HTML 水平线 <hr /> 标签在 HTML 页面中创建水平线
用法:
<h1 align="center">My First Heading</h1>
<hr />
<h2>This is a heading</h2>
<hr />
12.预格式文本 <p>pre 标签很适合显示计算机代码:</p>
for i = 1 to 10
print i
next i
标签 描述
<b> 定义粗体文本。
<big> 定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。
<small> 定义小号字。
<strong> 定义加重语气。
<sub> 定义下标字。
<sup> 定义上标字。
<ins> 定义插入字。
<del> 定义删除字。
<s> 不赞成使用。使用 <del> 代替。
<strike> 不赞成使用。使用 <del> 代替。
<u> 不赞成使用。使用样式(style)代替。
14.“计算机输出”标签
标签 描述
<code> 定义计算机代码。
<kbd> 定义键盘码。
<samp> 定义计算机代码样本。
<tt> 定义打字机代码。
<var> 定义变量。
<pre> 定义预格式文本。
<listing> 不赞成使用。使用 <pre> 代替。
<plaintext> 不赞成使用。使用 <pre> 代替。
<xmp> 不赞成使用。使用 <pre> 代替。
15.引用、引用和术语定义
标签 描述
剩余5页未读,继续阅读
- 粉丝: 1
- 资源: 1
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助