自学前端HTML总结笔记

1、注释：    

(1)<!-- 注释内容 -->

(2)IDEA中快捷键为：ctrl+/

 

2、基本标签： 

快捷键:先输入标签名称,再用tab键

(1) <!--标题标签，数字越大，标题越小-->

<h1>一级标签</h1>

<h2>二级标签</h2>

<h3>三级标签</h3>

 

(2)<!--段落标签-->

   <p>这是第一个段落标签</p >

   <p>这是第二个段落标签</p >

 

(3)<!--换行标签-->

    <br/>

(行间距:比段落标签小) 

      

(4)<!--水平线标签-->

<hr/>

 

(5)<!--字体标签-->

     粗体标签:<strong></strong>

     斜体标签:<em></em>

     ……

 

(6)<!--特殊符号-->

1:空格: &nbsp;

2:大于号>: &gt;

3:小于号<: &lt;

4:版权符号: &copy;

……

 

(7)图像标签：

< img src=“path” alt=”text” title=”text” width=”x” height =”y”/>

  

  src:图像地址

  alt:图像的替代文字

  title；鼠标悬停提示的文字

   

  其中：  ../ 是指上一级目录

 

  例如：< img src="../resource/image/院徽.png" alt="图片加载失败" title="院徽" width="1000" height="200"/>

 

（8）链接标签:

页面间链接：

<a href= >链接文本或图像</a >

 

例如：<a href="http://www.baidu.com">百度</a >

      <a href="图像标签学习.html">查看自己制作的网页</a >

      <a href="图像标签学习.html">

      < img src="../resource/image/院徽.png" alt="图片加载失败" title=" 院徽" width="1000" height="200"/></a >

 

目标窗口位置：1、_blank:新窗口中打开

                 2、_self:本窗口中打开（默认）

 

锚链接：需要一个锚标记，然后跳转到标记位置

<a name=”top”>顶部</a >

……

<a href=”#top”>回到顶部</a > 

或 <a href="图像标签学习.html#down">跳转另一网页底部</a > 

 

功能性链接：

1、邮件链接： mailto：

<a href="mailto:csh3352973259@qq.com">发送邮件</a >

 

……

   

 

3、（1）块元素：无论元素多少，该元素独占一行。

                如：p,h1-h6

   （2）行内元素：内容撑开宽度，左右都是行内元素的可以排在一行。

如：a,strong,em

 

 

4、列表标签：

（1）有序列表： <ol> （自带序号）

                    <li></li>

                    <li></li> （应用场景：问卷，问答……）

                    ……

</ol>             

        

（2）无序列表：<ul> （无序号，有黑点）

                    <li></li>

                    <li></li>         

                    ……

</ul>  

 

（3）自定义列表：<dl>

<dt></dt> （列表名称）

    <dd></dd> （列表选项）

    <dd></dd>

    <dd></dd>     

    ……

</dl>

     （一般用于公司网站底部）

 

5、表格标签：

<table boerder=”线宽度” align="center"></table> align="center"：居中

（1）行标签：<tr colspan=”n”></tr> colspan=”n”:跨n列

（2）列标签：<td rowspan=”n”></td> rowspan=”n”:跨n行

（3）字体加粗列标签：<th></th>