day01_H5基础

1 基本结构

  • head
    • title
    • meta
  • body

2 head标签

  • meta
    元标签,定义了html文档中的元数据(设置了网页的基本设置);charset属性设置网页的文本编码方式。
  • title
    设置网页标题,不设置标题则默认显示ip
  • style
    在html提供css代码对应的标签
  • link
    导入图标/css文件的标签


    
        
        
        
        
        head中的标签
        
        
        
        
    
    
        111
    

3 文本标签

如果需要在网页中显示文在,一般不直接将文字写在body中,而是根据文字的功能找到对应的标签。

  • 标题标签
    标题标签(h1-h6),双标签,一个标签占一行
  • 段落标签(p标签)
    双标签,保证一个段落对应一个p标签,一个标签占一行
  • font标签
    双标签,一行可以显示多个
  • 文字效果相关标签
    在html中直接敲空格、缩进是无效的。

    - 单标签,在网页中的内容强制换行,也可以让标签换行
      - 一个像素(一个 代表空一个像素)
    &emsp - 一个空格
    - 加粗
    - 加粗,有强调意义
    - 倾斜
    - 倾斜,有强调意义


    
        
        
    
    
        
        

我是标题1

我是标题1

我是标题1

我是标题1

我是标题1
我是标题1

hello

world

性别

床前明月光,
 疑是地上霜;
举头明月

4 列表标签

  • 无序列表
    ul标签 - 代表列表容器,是一个整体
    li标签 - 列表中的元素
  • 有序列表
    ol标签 - 代表列表容器,是一个整体
    li标签 - 列表中的元素
  • 自定义列表
    dl标签 - 代表列表容器,是一个整体
    dt标签 - 小分类标签(名词)
    dd标签 - 小分类下面的元素(解释)


    
        
        
    
    
        
        
  • python
  • h5
  • java
  • testing
  1. 111
  2. 222
  3. 333
  4. 444
四川
成都
绵阳
南充
辽宁
沈阳
大连
盘锦

5 图片和超链接

  • 图片标签(img)
    单标签,默认一行显示多张图片
    a. src属性:设置图片地址/路径;可以是本地路径,也可以是网络地址
    b. title属性:设置图片标题,鼠标停留在图片上才会显示出来
    c. alt属性:图片加载失败时的提示信息
  • 超链接(a)
    双标签
    a. href属性:跳转的目的地
    网址 - 点击超链接直接加载网址对应的网页
    本地html文件地址 - 点击超链接直接加载本地html文件对应的网页
    # - 刷新
    选择器 - 让当前页面滚动到指定的位置
    b. target属性:设置跳转方式
    _self - 在当前页面中加载新的内容
    _blank - 在新的页面中加载新的网页


    
        
        图片和超链接
    
    
        
        图片不存在

百度一下,你就知道


列表
刷新
文本标签

依据《网络安全法》,为保障您的账户安全和正常使用,请尽快完成手机号验证! 新版《京东隐私政策》已上线,将更有利于保护您的个人隐私

6 表格标签

表格
1. table标签 - 代表表格整体
2. tr - 代表表格中的一行
3. td - 代表表格中的一个单元格

属性:
cellsapacing - 设置表格中单元格与单元格及表格边框的间距
bgcolor - 设置整个表格、某一行或者某个单元格的背景颜色
border - 设置单元格边框的宽度
bordercolor - 设置边框的颜色
cellpadding - 设置单元格中的内容到单元格边框(上下左右)之间的距离
width - 设置整个表格或一列的宽度
height - 设置整个表格或一行的高度
align - center(居中),left(左对齐),right(右对齐)
让表格在整个浏览器中居中(左,右)
或让单元格在表格中居中(左,右)

        补充:细线表格
        1)设置整个的table的背景颜色是边框线的颜色
        2)设置每个单元格的颜色和边框线的颜色不一样
        3)设置单元格和单元格的间距(cellspacing为1)


    
        
        
    
    
        
        
姓名 成绩 学员评价
张三 60 不留级
李四 80 不留级
王麻子 55 留级

7 复杂表格

colspan属性:列合并
rowspan属性:行合并



    
        
        
    
    
        
        


你可能感兴趣的:(day01_H5基础)