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

最新推荐文章于 2022-03-06 13:27:00 发布

小黑爱上排骨

最新推荐文章于 2022-03-06 13:27:00 发布

阅读量603

点赞数

文章标签： html web html5

本文链接：https://blog.csdn.net/sinat_41920065/article/details/105151755

版权

解释一下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=“所要合并单元格的行数”合并行;

小黑爱上排骨

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端知识--HTML基本结构与基本语法（一）

解释一下html的基本结构以及html的基本语法的各自含义基本结构如图：<!DOCTYPE html> ---------->声明文档类型<html> ---------->说明写的是html标记语言 <head>...
复制链接

扫一扫