前端知识--HTML基本结构与基本语法（一）

深碍√TFBOYSˉ_ 2023-05-28 05:28 4阅读 0赞

解释一下html的基本结构以及html的基本语法的各自含义

### **基本结构如图：** ###

> <!DOCTYPE html>                     ---------->声明文档类型  
> <html>                              ---------->说明写的是html标记语言  
>     <head>                          ---------->文件头部  
>         <meta charset="utf-8">      ---------->声明编码格式  
>         <title>标题文档</title>     ---------->文件标题，显示在状态栏  
>     </head>  
>     <body>                          ---------->文件主体  
>     </body>  
> </html>

### **基本语法：** ###

> 1、<常规标记>  
> <标记 属性=“属性值” 属性=“属性值”></标记>  
> 标记也可叫标签或叫元素  
> 例如：<head></head>  
> 2.空标记  
> <标记 属性=“属性值” />  
> 例如：<meta charset=”utf-8”>

解释一下：  
1.写在<>中的第一个单词叫做标记，也叫标签或元素。  
2.标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在“”号内。  
3.一个标记可以没有属性也可以有多个属性，属性和属性之间不分先后顺序。  
4.空标记没有结束标签，用“/”代替。

### 常用标记： ###

1. 文本标题：h1 - h6  
默认规则：纯文本，在一行显示，文本之间的多个空格，都会合并成一个空格

> <h1>标题一</h1>  
> <h2>标题二</h2>  
>       ...  
> <h6>标题六</h6>

2.段落文本：p

标识一个段落，段落之间有段间距

> <p>段落1</p>
> 
> <p>段落2</p>

3.空格：&nbsp

所占位置没有一个确定的值，这与当前字体字号都有关系

4.换行：br

换行是一个空标记，强制执行换行      <br/>

5.列表：ul、 ol、dl

>  
> 
> <ul>
> 
>         <li >列表1 </li>
> 
>         <li>列表2</li>
> 
>   </ul>
> 
> 
> 
>  <ol>
> 
>         <li>有序列表1</li>
> 
>         <li>有序列表2</li>
> 
> </ol>
> 
>   
> 
>         <dl>
> 
>             <dt>标题1</dt>
> 
>             <dd>摘要1</dd>
> 
>         </dl>

6.超链接的应用

> <a href="http://www.baidu.com" target="\_self">跳转百度</a>

7.插入图片

> <img src="../images/01.jpg" alt="提示文本"  style="width: 400px;">

8. 数据表格的应用

> <table  border="1">  
>       <tr>  
>             <td></td>  
>             <td></td>  
>      </tr>  
> </table>  
> 注：一个tr表示一行;一个td表示一列(一个单元格)  
> 数据表格的相关属性  
> 1）width="表格的宽度"  
> 2）height="表格的高度"  
> 3）border="表格的边框"  
> 4）bgcolor="表格的背景色"  
> 5）bordercolor="表格的边框颜色"  
> 6）cellspacing="单元格与单元格之间的间距"  
> 7）cellpadding="单元格与内容之间的空隙"  
> 8）水平对齐方式：align="left左对齐/center居中/right右对齐";  
> 9) 垂直对齐方式 ：valign="top顶对齐/middle居中/bottom底对齐/baseline(基线);  
> 10)合并单元格属性：  
> colspan=“所要合并的单元格的列数"合并列;  
> rowspan=“所要合并单元格的行数”合并行;