美文网首页
html基础

html基础

作者: 李小萌mmm | 来源:发表于2018-10-29 19:39 被阅读0次

html标签

标签 == 标记

 1.标签语法
 双标签(常规标签): <标签名 属性名1:属性值1 属性名2:属性值2...> 标签内容 </标签名>
 单标签: <标签名 属性名1:属性值1 属性名2:属性值2.../> 或者  <标签名 属性名1:属性值1 属性名2:属性值2...> 
 
 说明:
 标签名 - 是html中已有的标签,不能自己随便命名。标签名和<以及标签名和/之间都不能有空隙
 属性 - 属性和属性值之间用:连接,多个属性之间用空格隔开。所有的属性没有位置要求
 标签内容 - 在开始标签和结束标签之间,标签的内容可以是任意的(可以文本也可以是其他标签)
 
 
 2.head标签中的内容
 head中的标签有:title,mate, base, link, style, script
 title - 设置网页标题
 meta - 设置网页元数据(单标签)
 
 3.body
 body中的标签主要用来在网页的内容中添加显示信息的

文本标签

2.段落标签 p
    一个段落使用一个p标签,p标签会换行
     -->
     <p> JSON是一种取代XML的数据结构,和xml相比,它更小巧但描述能力却不差,由于它的小巧所以网络传输数据将减少更多流量从而加快速度,</p>
     <p>那么,JSON到底是什么?</p>
     
     
     
    
     3.特殊功能和符号
     html中文本中的换行,空格,tab等都是无效的
     换行:<br>
     空格:&nbsp;
    
       <p>
           &nbsp;&nbsp;忽如一夜春风来,<br>
           &nbsp;千树万树梨花开.<br>
                  
       </p>
    
    
    
     4.字体相关标签
     加粗:<b></b>,<strong></strong>
     b标签只是单纯的文字效果加粗,strong标签有强调的意思
     
     倾斜: i标签/em标签
     i标签只是单纯的文字效果倾斜,em标签有强调的意思
     <hr>水平线
    

列表标签

列表标签分为有序列表,无序标签,自定义列表
1.有序列表:
        ol标签  --代表整个列表
        li标签  -- 代表列表中的元素
2.无序列表:
        ul标签  --代表整个列表
        li标签  -- 代表列表中的元素

3.自定义列表
        dl标签 -代表整个列表
        dt标签 -分组名
        dd标签 -分组的内容

图片和超链接

 1.图片标签:img
        单标签
        
        a.src属性 - 图片地址(可以本地图片路径也可以说是网络图片url)
        本地图片:地址可以是绝对路径也可以是相对路径,一般吧图片放在img文件夹中,然后写相对路径
        
        b.title - 设置图片标题(鼠标停留在图片上,显示的内容)
        c.alt  设置图片加载失败的提示信息

  2.超链接标签:a标签
          a.内容 -文字/图片
          b.href -跳转的目标地址
          c.target - 跳转方式
可以是文字超链接和图片超链接

href跳转到的目标地址
        1.href可以跳转到网络地址 
        2.也可以跳到本地html文件地址
        3.不写href可以刷新网页
        4.可以选择器,跳转到指定的位置

target 跳转方式
        _self - 默认值,在当前页面加载新的网页
        _blank 创建一个新的窗口打开网页

数据表格

1.表格标签 
        table标签  -整个表格
        tr - 行
        td - 单元格(列)
        
        2.边框相关属性
        border - 边框的宽度设置的是最大的外面边框和里面的小边框
        bordercolor - 背景颜色  传的可以是英语单词,也可以是RGB对应的16进制值
        cellspacing - 单元格和单元格之间的间隙
        cellpadding -  设置内容和单元格边框之间的间距
        
        3.背景颜色属性
        bgcolor - 背景颜色
        a.作为table属性 - 设置整个表格的背景颜色
        b.作为tr属性  - 设置一行的背景颜色
        c.作为td属性 - 设置一个单元格的背景颜色

                4.宽度和高度 
        width 和 height
        a.作用与table - 设置整个表格的宽度和高度(会按比例分配每)
        b.分别设置每一行的高度和宽度
        
        
        5.对齐方式
        align -center/left/right
        a.作用于table,让整个表格在父标签中居中/左对齐/右对齐
        b.作用于tr ,让整行的内容居中/左对齐/右对齐
        c.作用于td,让指定的单元居中/左对齐/右对齐

             应用:细线表格
         第一步:设置整个表格的背景颜色(边框颜色) 和每个单元格的背景颜色(表格内容的颜色)不一样
         第二步:设置cellspacing的值为边框的宽度

不规则表格

 1.制作复杂表格的方法:
         a.确定表格的最大行数用tr表示出来
         b.确定每一行有多少个单元格(共用的单元格只算一次)
         c.确定每一个单元格是否有合并现象,如果是行合并就设置rowspan的值,
         如果是列合并就设置colspan的值

相关文章

网友评论

      本文标题:html基础

      本文链接:https://www.haomeiwen.com/subject/tyditqtx.html