程序猿节，自己写第一篇博客来纪念一下，记录一下自己的学习过程。

最新推荐文章于 2024-09-10 12:43:55 发布

fms-123*

最新推荐文章于 2024-09-10 12:43:55 发布

阅读量330

点赞数 1

分类专栏：前端文章标签： html 前端结构

本文链接：https://blog.csdn.net/linpoxx/article/details/78325607

版权

前端专栏收录该内容

4 篇文章 1 订阅

订阅专栏

本人对前端比较感兴趣，所以想要学好前端，那么学好前端的第一步骤自然是学好HTML啦。
首先，我们要知道什么是HTML，它是干什么的，有什么用？少了它会怎么样？
答案是HTML是一种超文本语言（超文本指的是超越文字，意思是不止于文字，比如图片啊，音乐之类的都能有），它能给网页提供一个载体，你可以往里面写入很多东西，可以
理解为HTML就是一间空房，少了它的话，那么网页的结构将无法搭建。
关于HTML的知识，我分为三部分：一.HTML基础                二.HTML表格                  三.HTML表单
一.HTML基础：
首先，我们最先接触的应该就是HTML的标签，标签又分为两种：1.单标签 （<img/>,<hr/>）,注意，在标签闭合前要加上 /  这个正斜杠       2.双标签 ( <h1></h1> ),有开始标签和
结束标签的叫双标签。 然后，标签也有它的属性，叫做标签属性，例如 <img    src="logo.jpg"  width="50px"  height="50px">  其中的src,width,height便是它的标签属性，通过标签
属性告诉浏览器我们的标签在页面以怎么样的形式呈现。
接下来是三种列表，一.无序列表        二.有序列表         三.自定义列表
首先是无序列表，顾名思义，就是无序排列的表啦，但我们要知道，三种列表也是有列表属性的，

   
   苹果
梨子
西瓜


   
   苹果
梨子
西瓜

   
   苹果
梨子
西瓜
效果图如下：

第二种是有序列表，其实和上面的无序列表基本一致，就不多说啦。

<ol><li></li> <li></li> </ol>

第三种是自定义列表，这个比较重要：

自定义列表的特点：dl

<dl>

<dt>定义列表项</dt>

<dd>列表项的描述</dd>

</dl>

<dl><dt><dd>要同时使用，并且<dt>和<dd>是同级标签。

<dl>
    <dt>定义列表项</dt>
    <dd>列表项的描述</dd>
    <dd>列表项的描述</dd>
    <dt>定义列表项</dt>
    <dd>列表项的描述</dd>
    <dd>列表项的描述</dd>
    <dt>定义列表项</dt>
    <dd>列表项的描述</dd>
    <dd>列表项的描述</dd>
</dl>

效果图如下

接下来便是图片和超链接啦。图片最重要的便是引入，引入的话我们要知道图片的路径，路径有两种：1.绝对路径 2.相对路径

1.绝对路径，就是一种文件在你电脑上的位置。例如：C:\Intel\Logs。

相对路径，就是相对于你写的HTML文件的位置。仔细研究研究下面的图：

超链接：超链接可以分为内部链接和外部链接，内部链接就是说在同一页面上的链接，外部链接就是说不同页面之间的链接。

链接的基本样式：<a href="" target="" name=""> 内容 </a>

href是指链接的地址，也就是你页面的url，target指的是链接的目标窗口以何种方式打开，它的常用属性有"-self"，"-blank"。"-self"的意思就是在当前的窗口打开，

"-blank"的意思就是另起一个窗口，在新页面打开这个页面。

超链接中重要的锚链接：锚链接就是说当你点击链接的时候，它会将焦点转移到指定的位置，可以是同一网页内，也可以是不同网页的。

切记#键和name属性，相当于这是他们之间的约定，锚名一定要相同！

1.定义锚（同一页面）

2.定义锚（不同页面）

网页一：<a href="......" name="锚名">内容</a>

网页二：<a href="网页的地址#锚名">内容</a>

超链接还有特殊的标签：邮件标签，当你想让别人给你发邮件的时候就可以使用这个标签了。

<a href="mailto:邮件的地址">请给我发邮件</a>

二.HTML的表格：

表格的元素共有八种<table>,<tr>，<td>,<th>，<caption>,<thead>,<tbody>,<tfoot>.

其中<tr>代表行,<td>代表单元格,<th>代表表格头,<caption>代表标题，

<thead>,<tbody>,<tfoot>.分别代表表格的头，表格的主体，表格的脚。

比如我们要创建以两行三列的表格：

<thead>

<th>

</th>

<thead>

<tbody>

<tr>

</tr>

</tbody>

</tfoot>

<tr>

</tr>

</tfoot>

</table>

效果如下：

<th>标签的作用是居中显示并且加粗。

<thead>，<tbody>,<tfoot>引入的目的是为了优化用户的体验，优化结构

<thead>:表格头，（放标题之类的内容）

<tbody>：表格的主体(放数据的主体)

<tfoot>:表格的脚(放表格的脚注)

表格的嵌套尽量少用，如果要用的话就是在大的表格的<td></td>中加入你想创建的表格；

表格中还有跨行(colspan),跨列(rowspan)的属性，当我们在进行跨行和跨列的时候，要注意colspan和rowspan的值，

就是说 colspan 的值加上当行的单元格 = 下一行的单元格

假如我们忽视它的值：就会出现下面这种情况：

<table border="1" bgcolor="#dcdcdc">
    <tr><td colspan="2">1</td>  <td>2</td>  <td>3</td>  </tr>        //这一行的colspan的值为2 加上两个单元格，总值为4，而下面的总值为3，所以畸形了。
    <tr><td>1</td>  <td>2</td>  <td>3</td>  </tr>
    <tr><td>1</td>  <td>2</td>  <td>3</td>  </tr>
    <tr><td>1</td>  <td>2</td>  <td>3</td>  </tr>
</table>

效果图：

假如我们注意了它的值，

<table border="1" bgcolor="#dcdcdc">
    <tr><td colspan="2">1</td>  <td>3</td>  </tr>     //这一行的colspan的值为2 加上一个单元格，总值为3，下面的总值也为3，所以正常。
    <tr><td>1</td>  <td>2</td>  <td>3</td>  </tr>
    <tr><td>1</td>  <td>2</td>  <td>3</td>  </tr>
    <tr><td>1</td>  <td>2</td>  <td>3</td>  </tr>
</table>