HTML的各种基本标签

2021-03-12 16:31

阅读:648

YPE html>

标签:bottom   方法   自动换行   存在   展示   简体中文   end   tps   区别   

  一 .head中的各种标签        

       1.       文档类型声明   声明当前文件是一个HTML5文件文档类型声明在一个html文件中必不可少   而且必须在网页第一行
       2.           键盘按键为Ctrl+?   注释  
       3.           head中用于设置网页的相关信息
       4.         声明当前网页所采用的字符编码格式
常见的中文编码格式   gb-2312 :国标码简体中文的编码格式
                                   GBK:扩展的国标码 也是简体中文,但是比GB2312多了更多的编码格式
                                   utf-8:unicode万国码 基本兼容各国语言编码。现在最常用
       5. 
name="keywords" 表示这一行meta语句是要设置网页的关键字,content=""设置当前网页的关键字内容,多个关键字用英文逗号分隔,name属性与content属性必须同时设置,name表示需要设置的项目 content表示设置的具体内容
设置网页的描述,网页描述在网页中非常重要,在搜索引擎中搜索网页时,网页标题下面显示的一段文字就是网页的描述
        6.         这是我的第一个网页           title表示网页的标题 ,1也就是网页选项卡上的文字
        7.           形如这样的标签叫做自闭合标签 ,也叫空标签 ,这样的空标签只有一个标签 ,标签在最后用/表示结束,link 标签用于将网页和其他文件进行连接
rel ="icon",rel属性表示即将连接的文件与当前网页的关系  , 属性值选择icon表示即将连接的文件是当前网页的图标,rel是标签的属性,“icon”是标签的属性值 属性值必须用引号引起来href=""表示所要连接的图片地址
 

二 .body中的各种标签

1.从写法上,HTML标签分为成对标签和自闭合标签(空标签)
   ①成对标签:标签成对出现有开始标签就有结束标签,内容包裹在两个标签之间
   ②自闭合标签(空标签),只有一个标签用/标识标签的自动闭合。
2.从功能上,HTML标签分为块级标签和行级标签
【块级标签和行级标签的区别】
1.块级标签会自动换行,前后隔一行   行级标签不会自动换行,从左向右依次排列
2.块级标签默认宽度都是100%         行级标签宽度由里面的文字撑开
3.块级标签可以设置宽度高度内外边距等属性    行级标签不能设置上述属性
 
基本块级标签
块级标签自动换行 前后隔一行
 
  1.h标签:自动加粗 h1最大  h6最小
 代码示例为   

这是h1标签

  

这是h2标签

  

这是h3标签

这是h4标签

  
这是h5标签
  
这是h6标签
 
  2.hr标签            表示水平线标签         
代码示例为  
 
  3.p标签表示段落标签,没有特殊含义,仅仅表示当前文字是一个段落    
代码示例为     

这是一段文字这是一段文字

 
 4.br 标签表示换行符号,代码中直接敲回车,并不能在网页中显示    表示空格但是网页开发中尽量不用
 
 5.blockquote表示引用标签,表明当前文字引用自其他地方,浏览器会默认向右缩进显示但可以通过CSS进行调整       cite属性表示引用的来源,通常是一个网站的地址
代码示例为         
这句话是我引用的
   
 
6.pre标签表示预格式标签,会保留代码中的回车缩进空格等,并在网页中显示pre标签最常用于在网页中展示代码,保留代码格式
代码示例为
这是一段文字
这是一段文字
这是一段文字
这是一段文字
 
7.有序列表:ol (order list) 有序列表中的每一项用li表示type属性表示序号的类型:1表示数字, A/a表示字母,i/I表示罗马数字
代码示例为
  1. www
  2. www
  3. www
  4.  
    8.无序列表:ul unorder list有序列表中的每一项用li表示type属性表示序号的类型:circle表示。disc表示.square表示正方形
    代码示例为
     
                       
    • 第一项
    •               
                             
      • 1-1
      •                      
      • 1-2
      •                       
      • 1-3
      •              
                        
                      
      • 第二项
      •               
      • 第三项
      •   
         
        9.定义描述列表dl 使用dt表示标题 使用dd表示描述项   标题一般只有一个,描述项可以有多个标题顶格显示,描述项相对于标题向右缩进显示
        代码示例为
                              
                      
        标题
                     
        描述项
                    
        描述项
                     
        描述项
                            
         
        10.图片组合标签figure 用于将图片与下方的标题进行包裹,图片用img表示,标题用figcaption表示
           代码示例为                     
                                    
                              
        图片标题
                                                  
         
        11.分区标签div  (px代表像素)是网页开发过程中最常用的标签,div标签可以包裹任何标签,通常配合css使用
        代码示例为     
                                    分区
                                  
         
        基本行级标签
        1.span标签 用于包裹行内的文字,没有其他特殊的含义,可以配合CSS修改某一部分字体的样式
          代码示例为    文字
         
        2. 倾斜加粗标签
        em,strong,i,b的区别
        ①em和i都能倾斜 strong和b都能加粗,但是em和strong多了一层强调的含义。(强调的作用:可以让搜索引擎抓取网页的重点内容,实现代码的语义化)
        ②em和strong都是强调,但是em显示为倾斜,strong显示为加粗,而且strong的强调含义要比em更高
         
        3.引用标签
        常见的引用标签blockquote/q/cite的区别
                ①从显示效果上,blockquote是块级标签而且整段缩进,q为加引号,cite显示为倾斜
                ②从功能上,blockquote用于引用一整段内容,q标签用于引用一句话,cite通常用于书画名,作品名等标题引用
                                      
        4. 图片标签 img
          【路径的表示方法】
                     1.网络图片地址,但不建议使用
                     2.使用图片在本机的绝对路径,但是严禁使用。因为绝对路径使用file://协议引入图片  而网页使用的是     http://协议 ,所以无法访问file://协议引入的文件
                     3.使用相对路径,推荐使用的唯一方式  
                         a.当图片在当前文件的下一层时,使用“文件夹名/图片名“表示
                         b.当图片在当前文件的同一层时,使用“图片名”表示
                         c.当图片在当前文件的上一层时,使用”../图片名“表示
                     注意:图片必须包含在项目目录里面,不能退出文件根目录
         
            图片标签的各种属性
                 ①src属性:表示图片的所在位置             
                 ②width/height 属性     图片的宽度高度
                 ③title属性            当鼠标指上后显示的文字
                 ④ait属性                 图片无法加载时显示的文字,如果省略alt属性,则图片无法加载时显示title的文字
                 ⑤align属性            图片两边文字的相对位置  top 文字居上   centenr文字居中    bottom 文字居下(默认)
                    
        5.超链接标签  a
                ①href属性 超链接即将要跳转的页面,可以是网络地址也可以是本地的HTML文件
                ②target属性 设置新页面打开的位置_self 当前页面打开(默认)_blank在新页面打开
                ③title 当鼠标指上后显示的文字
        代码示例为  这是一个超链接
           [功能性链接
        youjian        mailto 给指定邮箱发邮件
        tenxunqq        Tencent 与指定QQ聊天
                                       
        6.锚链接 点击超链接,跳转到指定位置(锚点)
                    ①在页面指定位置定义一个锚点
                    ② 将超链接的href属性,设置为#锚点名称 点击我回顶部
                    ③跳到其他其他页面位置的方式       跳到其他其他页面位置
        其他行级标签 (了解)
         
        dfn标签 用于定义专业术语
        abbr标签 用于定义缩写词,常配合dfn使用
        code标签 声明当前为一段代码,配合pre标签使用。
         
        var 标签 定义变量
        代码示例为:    x+y=z  显示为 x+y=z
         
        技术图片
        bdo标签 定义文字的显示方向使用dir属性控制文字显示:ltr从左往右显示   rtl从右往左显示
        代码示例为: 12345678      显示为87654321
        技术图片
        kbd标签 用于表示键盘输入的文字
        技术图片
        sup标签 上标文本 
        sub 标签  下标文本
        技术图片
        mark标签  显示为高亮文本
        技术图片
        time标签 表示时间
         
        表格标签
        表格标签用 table表示,表格中的每一行用tr表示,一行中的每个单元格用td表示。表头中的单元格用th表示,会默认加粗居中!层次关系:table>tr>td/th
         
        [表格的各种属性]---作用于table标签
         
        1. border: 给表格的每个td和整个table添加边框。 如果border>1,则只有最外层边框会加粗,td上的边框不会变化。
        2. width/height: 表格的宽度、高度。
        3. cellspacing: 设置单元格与单元格之间的间距。如果cellspacing="0",则单元格之间的间距为0,但是相邻的边框不会合并。而是显示两条边框的宽度。
        4. cellpadding: 设置单元格内边距,单元格中的文字与边框之间的距离。
        5. align: 设置表格在父容器中居左、居中、居右。 align属性相当于使表格浮动,会影响表格后面内容的布局。
        6. bgcolor: 表格背景色background: 表格背景图。 背景色和背景图同时存在时,背景图生效。 bordercolor: 边框颜色。
         
        设置表格边框合并
        可以CSS设置:设置边框合并后,cellspacing属性将会失效,因为两条边框已经合并到一起,不能再产生间距。
         
        【行列的各种属性】---作用于tr和td
        1. width/height: 宽度、高度
        2. bgcolor: 背景色 如果行列属性与table属性冲突,以行列属性为准。
        3. align:设置单元格中的文字,水平对齐方式;
        4. valign: 设置单元格中的文字,垂直对齐方式。
        [表格的跨行与跨列]
        1.表格跨列,colspan如果一个单元格跨n列,则其右方n-1个单元格删掉
        2.表格跨行, rowspan如果一个单元格跨n行,则其下方n-1个单元格删掉
         
        表格的结构化
         
        完整的表格应包含以下几部分
        • caption,表格的标题,用于表格最上方居中
        • thead,表头部分,无论thead在什么地方显示时永远在表格最上方
        • tbody,表格表格的的主体部分,在thead之下
        • tfoot,表格的尾部,无论tfoot在什么地方显示时永远在表格最下方
        表格的直列化
        • 表格有几列,就可以在表格最上方写几个标签,每个都对应着表格的每一列,这就是表格 的直列化
        • 如果要同时修改多列,可以将多个标签用进行包裹,统  一修改
        注意:直列化通常用于给每一列起统一的name或class名字,一般不直接修改样式。
         
         
        表单标签
         
        表单有两个重要属性
        ①action表示表单提交的后台服务器地址
        ②method表单提交数据的方法,可选值有get和post两种
         
         【get和post的区别】
              ①get使用URL地址栏进行传递数据,所有数据在地址栏可见,不安全;post传递数据在地址栏不可见,比较安全
              ②get传递的数据量有限,而且只能传输纯文字数据;post可以传输大量数据,而且可以传输图片视频文字等
              ③get传递数据的速度比post快
         
        【get传递数据的URL格式】
        http://原来的地址.html?name1=valuel&name2=value2...   比如http://127.0.0.1:8020/H51801.html?username=123&password=123
        所以,input使用时name属性必不可少,缺少name将导致该输入框的数据不向后台传递
         
        input标签
        input的常用属性
        ①type    表示当前输入框是什么类型
        ②name    给输入框取名字,向后台传输数据时必不可少
        ③value    给input赋默认值
        ④placeholder    输入框的提示内容,当输入框存在value时,提示内容消失
        ⑤disabled=disabled    禁用当前输入框 ,可以显示, 不能编辑,被disabled="disabled禁用的输入框,数据将不再向后传递
        ⑥hidden=hidden      隐藏输入框,隐藏的输入框中的数据,依然可以向后台传递
        ⑦readonly="readonly"    只读     与disabled=disabled 的区别,readonly可以向后台传递
         
        input的type类型
        ①text 文本输入框
        ②password 密码输入框 输入的内容为小数点
        ③radio 单选框单选按钮的value不能省略 ,这个value需要向后台传递,radio凭借name是否相同区分是否同一组,同一组中name必须相同,而且只能选一个。checked="checked"设置单选按钮的默认选中项
        ④checkbox 多选框 其他与radio相同
        ⑤file 文件上传框,multiple=multiple设置可以多选文件上传,accept属性设置可以上传的类型,*表示所有文件,image/*表示所有图片
        ⑥submit 表单提交按钮
        ⑦reset 表单重置按钮   将表单恢复到最初状态
        ⑧image 图形提交按钮 src属性用于导入图片,功能与submit相同
        ⑨button 显示为按钮形状,但是没有任何功能
        ⑩hidden  隐藏输入框,隐藏的输入框中的数据,依然可以向后台传递
         
        select下拉选择组件
         
        ①下拉框用表示列表中的每一项用表示
        ②下拉框的name要统一写在
        ③如果设置了value属性,则向后台传输的是value中的值
        如果 标签中的文字
        ④在
        ⑤在select上使用multiple=multiple属性,可以设置为多选
        ⑥使用可以对所有的option进行分组,使用label属性可以作为分组名
         
        textarea文字区块  
         
        ①使用cols= rows=属性,可以设置文本域的大小        注意cols表示多少列是每列多少的字符,一个汉字两个字符  一般使用css调整宽高而不是使用这两个属性
        ②使用style="resize: none;",可以设置文本域大小不允许拖放
        ③使用readonly属性,设置文本域为只读
        ④使用style=overflow:  样式可以设置,可以设置超出区域的文字如何显示
        • auto 默认效果,文字少不显示滚动条文字多时显示垂直滚动条
        • hidden 无论文字多少都不显示滚动条,文字超出时将隐藏不显示
        • scroll 无论文字多少都显示垂直水平两根滚动条
        &


        评论


        亲,登录后才可以留言!