HTML的的基本标签

1.HTML的基础结构

            超文本标记语言: 标记,记号

2.基本语法===标签的基本语法

            书写形式分类:

            1)双标签:双标记(元素)

                含义:标签成对儿出现,有开始有结束

                例如:

                    <标签名字 属性="属性值" 属性="属性值" 属性="属性值"></标签名字>

            2)单标签:单标记(空元素)

                含义:自己单独出现,只有开始没有结束

                例如:

                    <标签名字 属性="属性值" 属性="属性值">

                属 性:属性是对于一个事物或者是一个元素的一个描述  

                属性值: 这个事物的描述的一个取值

 .标签学习

3)文本加粗标签     

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

            作用:让文本加粗显示  

 4)文本倾斜标签     

 基本语法: <i>文本</i>   <em>文本</em>  <var>文本</var>   

            作用:让文本倾斜显示

5)下划线标签           

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

           作用:为文本添加下划线效果

6)删除线标签         

作用:为文本添加删除线

<s>文本</s>  <del>文本</del>

           

7)页面中的标题标签    

基本语法   <h1></h1>  

一共 6个标题标签:h1-h6  双标签   

8)文本修饰标:font标签    

   文本的:颜色,大小,字体进行修饰

      标签:font标签       语法:双标签

    基本语法:<font color="文本颜色" size="文字大小没有单位1-7" face="字体">文本</font>

       属性:color="文本颜色"

                size="字体大小"

                face="字体"

9)角标标签

             上角标标签    ^数值

             下角标标签   _数值

10)段落和换行

        段落:独立成段的    p标签===双标签  段落和段落之间存在一个比较大的段间距

        换行:强制换行:      br ===单标签 具有强制性    折行效果

11)图片标签:

          向页面中插入图片的标签  基本语法:单标签

               <img src="图片存储的地址路径"

            租用:向页面中插入一张图片,让图片显示出现

            语法:单标签

            基本语法: <img src="图片存储的地址">

             属性:

             1)src路径属性:

          相对路径:相对于文件和文件夹之间的关系去查找对应的文件以上的几种情况都属于相对路径

          绝对路径: 是一个完整的地址:互联网地址,某一盘符中的地址

            注意:

                   ./=====当前目录          /======进入目录

                  ../====放回上一接         ../../=返回上两级

          2)alt属性

               图片描述:作用:图片为破损文件的时候,会有一个提示文本显示出来,告诉用于该图片显示的应该是啥,只有为破损文件的时候才会显示,正常加载不会显示;文本可以选中,文本是占空间位置的

            3)title属性  

<img src="img/文件的地址.jpeg" width="200px" alt="破损了才看的到" title="鼠标划在上面看到的文本">

        图片描述:作用:当鼠标划过的时候,会有一个提示信息,告诉用户这里显示的是啥,如果你有超链接的话,高度你跳转的目标地址是啥.

        4) width和height===需要带单位

        width==宽度      注意:实际开发的时候很少使用代码控制图片的大小:使用了代码控制图片大小,让图片容易失真   ,

       height==高度     注意:只设置一个属性的话,另外一个方向会自动缩放,会成等比例的缩小方法

   12.列表标签:

     1)有序列表;                                       2)无序标签:

 <ol>                                                               <ul>

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

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

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

  </ol>                                                                       </ul>

     3)自定义列表 

                <dl>

                      <dt>图片</dt>

                      <dd>对图片的解释说明</dd>

                </dl>

13.特殊符号
            因为有些符号,直接不能在浏览器中显示的,需要,使用特殊符号处理显示

            1)空格

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

            2)大于号和小于号<>

                p标签的基本语法为:<p>文本</p>

                <======&lt;      >======&gt;      &lt;p&gt;文本&lt;/p&gt;

           3)版权符号

                ©======&copy;

            4)商标符号:

                ™======&trade;     ®======&reg

14.超链接标签   

            超链接标签就是a标签     存在两个功能

            1)超链接功能: 能实现不同页面之间的跳转,跳转到百度,新浪,跳转到其他的页面

                标签:a标签==双标签

                基本语法:<a href="地址,链接">文本/图片</a>

            2)锚点功能: 能实现:相同页面中的不同区域的跳转 ===锚点功能

                基本语法:

                    点击区域: <a href="#锚点名字">文本</a>

                    跳转区域: <div id="锚点名字"></div>

                作用,点击超链接的视乎让其跳转到对应的位置;====某区域置顶课件

                实际开发的时候:大部分使用一行js代码完成

           3)返回置顶:只需要在超链接区域href取值上面给上一个#:<a href="#">返回置顶</a>

15.表单及其控件

作用:

            表单:用来收集用户信息的 form标签,双标签,主要作用,就是用来收集用户信息的

            基本语法: <form action="提交跳转地址" method="提交方法,提交方式">   一系列的控件:输入框,密码框,按钮等等单选框和多选框</form>
                          学习表单最主要的是学习的是其他的控件:form==打包的作用

            控件:

            1)输入框:文本框,单行文本输入框

                基本语法:单标签     <input type="text">

           2)密码框:  基本语法:单标签 <input type="password">

           3)按钮类型

                提交按钮:type="submit"  配合form标签以及action属性能实现跳转

                重置按钮:type="reset"      配合form标签,实现清空前面输入框输入的数据

               普通按钮:type="button"   什么功能都没有 通过value属性能修改显示的值

 16.补充一个属性: 

超链接和表单form共有的一个属性target属性 控制表单,超链接的打开方法在新的页面打开还是原窗口打开     target=""

               取值 

                        _self======默认值,在之窗原本窗口打开

                        _blank=====新的窗口打开  不常使用

                        _top=======在顶部框架窗口打开

                        _parent====在父级框架窗口打开

17.水平线标签    hr==单标签

基本语法:<hr>

<hr noshade>

            noshade===取消引用  属性和属性值一致的话,则直接使用属性替换

            color="red"  水平线的颜色

            width="500px"

            align="left/right/center(默认)"   调整水平线的水平位置

            size="控制的高度"

 18.div和span标签=======使用的频率是最高的

            1)div=====盒子标签,块元素,容器标签

                作用:主要应用于布局区块的划分        语法:双标签

                基本语法:<div></div>

                特点:纵向排列,如果想要实现横向排列:需要使用在后面使用:浮动 标签

             2)span====空标签,空标记,行内元素,容器,只放文本

                作用:独立文本的修饰   语法:双标签

                基本语法:<span>文本</span>

                特点:span标签横向排列