HTML入门知识

标签

       1、加粗标签

                     语法格式：b/strong标签   双

                     基本语法： <b>文本</b>  <strong>文本</strong>

                     作用：让文本实现加粗效果

                     区别：strong更加具有语义化

       2、倾斜标签

                     语法格式：i/em标签         双

                     基本语法： <i>文本</i>  <em>文本</em>

                     作用：给文本实现倾斜效果

                     区别：em更加具有语义化

3、下划线标签

                     语法格式：u标签              双标签

                     基本语法： <u>文本</u>

                     作用：给文本添加下划线

       4.角标标签

                     上角标

                                   ^{文本/数值}

                     下角标

                                   _{文本/数值}

       5．删除线标签：

                     作用：给文本添加删除线效果

                     应用场合：商场粗效的时候，文章对文字进行修改删除的效果

                     基本标签： <s>文本</s> <del>文本</del>

                     区别：后者del更加具有语义化效果

       6. div和span标签

                     都没有多大实际含义，但是使用上是有区别的

                     相同点：都是双标签

                     div:布局元素，主要用来做布局区块划分的；纵向排列，要想横着排列需要用到后面的知识点

                     span:主要对于独立文本的修饰，对于某一块文本的修饰；span是横向排列的

       7. 网页中的标题标签：一般指的是，新闻类型的稿件

                     h1-h6=====双标签

                     特点：h1最大，h6最小；总共有6个级别，自动加粗，自动换行

                     总结：

                     h1==一般应用在网页文章标题，网站的logo处         

          h2==新闻稿件的标题，或者是二级标题处

                     h3==新闻稿件居多，布局元素中有加粗效果的部分

                     h4-h6====根据实际情况选择应用

       8.有序列表ol>li

                     与ol相邻的只能是li；如果你想要嵌套别的内容，需要去li里面嵌套

                     基本语法：

                     <ol>

                                   <li>文本</li>

                                   <li>文本</li>

                                   <li>文本</li>

                     </ol>

       9.无序列表ul>li

                     与ul相邻的只能是li、如果想要嵌套别的内容的话，则需要再li里面嵌套

                     基本语法：

                            <ul>

                                   <li>文本</li>

                                   <li>文本</li>

                                   <li>文本</li>                                         

                            </ul>

       10.自定义列表

              一般情况下，应用再；问答列表，图文混排布局区域

                     基本语法：

                            <dl>

                                   <dt>图片/文本</dt>

                                   <dd>文本，对图片的解释说明/回答</dd>

                            </dl>

                     使用：一般情况下一个dl里面嵌套一个dt和一个dd；但是可以放置多个的

       11.p标签

              p标签====段落标签==双标签

p虽然是一个块级元素，但是他是一个独立文本块级元素，只放置文本 ，修饰文本的标签：b,strong,u,等等

                     他里面不能放：p，h，div，ul,li,ol,dl，dt,dd

       12.br标签

              br标签===换行标签==单标签

                     <br/> 等价 <br>

       13.特殊符号

              &nbsp;============半角空格

              &emsp;============全角空格；这个空格能够代替一个文字的位置

              <====&lt;

              >====&gt;

              &copy;============版权

              &reg;=============圈R商标

              &trade;===========TM商标

              标题的标签语法:&lt;h1&gt;这是标题标签&lt;/h1&gt;

       14.图片标签

              img标签=====单标签

基本语法：<img src="路径" alt="" title="" width="" height="">

alt="图片的描述，只有图片是破损文件的时候才会显示出来"

       占位置的

title="当鼠标放在对应的文本或者是图片上面的时候提示文本"

       不占页面空间

                           

面试题：常用的四大标准属性是啥；每一个标签都能使用的属性

       title="提示文本"

       style=""

       id=""

       class=""

                     width="数值px"

                     height="数值px"

                     一般不推荐使用代码控制图片的大小，必须带单位

                     当宽高，只设置一个方向的时候，等比例缩放这个图片

路径：图片或者是文件的存储地址；你可以通过这个地址找到对应的图片或者是文件

如何向页面中插入一张图片

1、如果当前页面，和想要访问的图片是同级关系的话，可以直接把图片的名字当作路

2、如果当前页面，和想要访问的图片所在的文件夹是同级关系，写路径的时候，需要先进入到图片所在的文件夹然后再去找图片

3、如果当前页面所在的文件夹，和图片是同级关系的话，需要先返回上一级然后再去找对应的图片

4、如果当前页面所在的文件夹和图片所在的文件夹是同级关系的话， ../图片所在文件夹/图片

路径：

相对路径：

       相对于某一个文件夹之间的关系，查找对应的图片/文件

              img/pic.png

              ./img/pic.png     ./=当前目录

              ../img/pic.png    ../==返回上一级

              实际项目应用的时候，最多，能返回3级

绝对路径：

       从某一个盘符地址开始，从互联网地址，网盘地址访问对应的文件图片，

              http://www.baidu.com

                            C://study/mp4/123/study.MP4

                                  

       目前使用的是相对路径

       15. 超链接标签：a标签===双标签

              基本语法：<a href="">文本/图片</a>

              作用：跳转，不同页面之间的跳转；相同页面中的，不同区域的跳转（锚点）

                     跳转1：不同页面之间的跳转（调页面）

                                   href==就是路径====想要跳转到某一个页面的路径

                                   跳转地址想要访问互联网地址的话则需要携带互联网http协议

                                   默认跳转打开方式：再本页面中打开

                            其他的打开方式

                                   target="目标链接打开方式"

                                          _self=======再本页面中打开  默认值

                                          _blank======再新的空白页面中打开

                                         

                                          _parent=====父级框架打开

                                          _top========顶部框架打开

                     跳转2：相同页面之间的不同区域的跳转

                            使用a标签实现锚点效果

                            基本语法：<a href="#锚点的名字">文本</a>

                                        <div id=锚点名字""></div>

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

                     <a href="01-p标签和换行.html">跳转到p标签上面</a>

       16.表格标签

表格的作用：用来展示数据信息的；后台管理系统经常使用

                     表格的基本结构

                            <table>

                                   <tr>

                                          <td></td>

                                   </tr>

                            </table>

                            目前来看

                            table里面必须挨着的是tr,

                            tr里面挨着的是td/th

                           

                            table===表格的意思

                            tr======表格里面的行

                            td======单元格，表格里面的列

                            一个tr代表的是一行

                            一个td代表的是一列，一个单元格

                           

                     问题;三行三列表格

                            快速创建：table>tr*3>td*3

                     表格的修饰属性

                            table属性：

                            1、border

                            2、width

                                   取值可以是px为单位的数值，如果是px为单位的数值话，可以省略单位

                                   取值可以是%为单位的数值

                            3、height

                                   取值可以是px为单位的数值，如果是px为单位的数值话，可以省略单位

                                   不能直接设置%

                            4、背景颜色===整个表格的背景颜色

                                   bgcolor="red"

                            5、边框颜色

                                   bordercolor="green"

                            6、表格的水平对其方式

                                   align="left/right/center"

                            7、调整单元格与单元格之间的间距

                                   cellspacing="0px"

                            8、单元格与内容之间的间距

                                   cellpadding="0px"

                                  

                                   表格的特点：如果没有设置对应的单元格的宽度的话，里面文本数量一致，则会均分，但凡里面的内容多一点都会撑大

                                  

                            9、表格的外边框修饰

                                   frame取值

                                          above====上边线  

                                          below====下边线

                                          box/border==一圈的边框线

                                          hsides===上下边框线       使用频率较高

                                          vsides===左右边框线

                                          lhs=====左边框线

                                          rhs=====右边框线

                            10、表格内边的边线修饰

                                   rules

                                          cols====纵向的线

                                          rows====横向的线                     经常使用

                                          all=====横纵向（合并后的）  经常使用

                                          groups/none===取消里面的边线

                                  

                     tr属性：对tr的修饰

                            1、bgcolor  设置一整行单元格的背景颜色

                            2、height   设置一整行单元格的所有的高度

                            3、align    设置一整行单元格里面内容的水平对其方式

                                   left/right/center

                            4、valign   设置一整行单元格里面内容的垂直对其方式

                                   top/bottom/middle

                            默认情况下单元格的内容是再左侧垂直居中显示的

                     td属性：单元格的属性，主要对与单元格的修饰

                            1、width    会影响单元格所在的一整列的宽度

                            2、height   会影响单元格所在的一整行的高度

                            3、bgcolor  只设置这一个单元格的背景颜色

                            4、align    只设置这一个单元格里面内容的水平对其方式

                            5、valign   只设置这一个单元格里面的垂直对其方式

                            6、合并单元格

                                   水平合并单元格

                                          colspan="数值"

                                   垂直合并单元格

                                          rowspan="数值"