Day01_网页开发基础知识、HTML概述、HTML标签

01.01_网页开发基础知识

• 代码编写工具
  • python PyCharm Subline iPython。。。
  • HTML HBulider Dreamweaver WebStorm Eclipse。。。
• 网页内容
  • html
    • head 设置信息
      • title 标题
      • script 引入JavaScript代码
      • link 引入css样式表
      • meta 说明/配置
      • 。。。
    • body 展示具体内容
      • div 块级元素 分割网页形成不同模块
      • ol
      • li
      • a
      • img
      • h2
      • 。。。 。。。
• 网站开发过程
  • 客户提需求 –> 产品分析需求，做出原型 –> 需求技术讨论 –> UI/前端/后端/… –> 测试 –> 上线 –> 运维 –> 市场宣传

01.02_html简介

• HTML
  • head
    • js 动作 == 具体动作–动画–交互
    • css 修饰网页内容 == 皮肉/衣服
  • body
    • html标签
      • 网页内容 == 人的骨架
• 第一个HTML程序

  
   
   
我的第一个HTML程序
 
  

• HTML代码规范
  • 文件名
    • 由数字，英文，下划线，$组成
    • 不要以数字开头
    • 不要用中文命名
  • 标签
    • 根据功能命名
    • 大驼峰命名法
    • 下驼峰命名法
    • 下划线命名
    • 中划线命名
    • 。。。

01.03_html常用的标签

• 注释

  • < !-- 这是来自古诗文网的一首诗词 -->

  • 快捷键 Ctrl + /
  • 单行注释和多行注释写法相同
• 文字相关
  • font
    • size 尺寸，字符尺寸最大为7，超过这个标号还是7
    • color
      • 英文表示颜色
      • RGB：16进制表示颜色
        • R == Red
        • G == Green
        • B == Blue
        • 用16进制从0开始，到F结束
  • p
    • 段落标签
    • 每一个p标签自成一段，如果内容超出一行会自动换行，还在本段落中
  • strong
    • 加粗
    • < strong>疑是地上霜
  • hr
    • 一条横线
    • 属性
      • size
      • color
      • width
      • align
      • 。。。
  • s
    • 删除标记
  • u
    • 下划线
  • i
    • 斜体
    • 可以和其他标签混合使用
  • em
    • 斜体
  • pre
    • 原文显示
  • br/
  • blockquote
    • 自动缩进
• 标题
  • hn
  • n 可以是1–6，超出范围没有任何效果
  • 属性
    • color 调整颜色
    • font-size 可以调整大小
    • height 调整本行高度
    • width

 
   
    
     
    
标题01
 
    
标题02
 
    
标题06
 
    
      标题07 
     标题08 
    
  

• 字符实体
  • 空格:  
  • 乘号: ×
  • 除号: ÷
  • … …

 
   
    
     
    
 1）连写式命名法，如    helloworld 2）中线命名法，如：hello-world（目前采用此方法的较多，建议采用） 3）下划线命名法，如：hello_world 4）骆驼命名法，如：helloWorld 5）帕斯卡命名法，如：HelloWorld 6）其他方法。 
 
    
2×3=6
 
    
2x3=6
 
    
6÷3=2
 
    
6/3=2
 
    
< br >的作用是换行
 
    
©copyright-2010-1019
 
    
  

• 图片
  • img
  • 属性
    • width
      • 定义图片在页面占用的宽度
      • 如果只写了宽或者高中的一个，name图片会按比例缩放
      • 如果宽和高都定义了，那就显示具体的款和高
    • height
      • 像素
        • 单位px，具体的尺寸
      • 百分比
        • 参照当前浏览器页面的，50%就是浏览器宽度的一半，其他参数也是这样
    • alt
      • 图片加载失败时显示的文字
    • src
      • 相对路径
      • 绝对路径
    • title
      • 光标悬浮在图片上显示的内容
      • 如果图片加载失败并且没有设置alt，那么会显示title属性的内容

• 超链接
  • a
  • 属性
    • href
      • 网络/本地连接
    • target
      • _self 在当前页面加载新的网页
      • _blank 打开新的页面加载网页
    • name
      • 使用name下锚点，后面的超链接可以指向这个位置
      • < a name=“middle”>
      • < a href="#middle">返回中部
• 段落
  • p
• 块
  • span
    • 使用style修饰属性
    • 宽和高设置失败：需要使用display:block转变为块级元素

 
   
    
    百度一下，你就知道 
      
     无效点击 转义字符 百度一下，你就知道 返回顶部   返回中部    span渡荆门送别 唐代：李白 渡远荆门外，来从楚国游。 山随平野尽，江入大荒流。 月下飞天镜，云生结海楼。 仍怜故乡水，万里送行舟。   
  

• 原文显示
  • pre
• 列表
  • 自定义列表
    • dl area 列表区域
    • dt title 标题
    • dd context 内容
  • 有序列表
    • ol area 列表区域
      • type
        • 有1,a,i,I,A五种，如果输入其他则使用默认值1
    • li context 列表item
  • 无序列表
    • ul area
      • type
        • 有circle，square，disc三种，默认使用disc(实心圆)
    • li context 列表item

 
   
    
    
   
 
    
市场部
 
    
研发部
 
    
行政部
 
    
财务部
 
    
人力资源部
 
   
 
   
 
    
市场部
 
    
研发部
 
    
行政部
 
    
财务部
 
    
人力资源部
 
   
 
   
 
    
市场部
 
    
研发部
 
    
行政部
 
    
财务部
 
    
人力资源部
 
   
 
   
 
    
HTML
 
    
Python
 
    
Java
 
    
UI
 
    
BigData
 
   
 
   
 
    
HTML
 
    
Python
 
    
Java
 
    
UI
 
    
BigData
 
   
 
   
 
    
HTML
 
    
Python
 
    
Java
 
    
UI
 
    
BigData
 
   
 
   
 
    

      武侠名著 
    
 
    

      笑傲江湖 
    
 
    

      天龙八部 
    
 
    

      书剑恩仇录 
    
 
    

      雪山飞狐 
    
 
    

      鹿鼎记 
    
 
   
 
  

• 音频：audio
  • src 资源位置：相对路径、绝对路径
  • autoplay 自动播放
  • controls 控制
  • loop 循环

• 视频：video
  • src 资源位置：相对路径、绝对路径
  • autoplay 自动播放
  • controls 控制
  • loop 循环

• 表格：table
  • 属性：
    • width
    • height
    • align
    • border
    • bgcolor 背景色
    • border-color 表格边线颜色
  • 标签
    • table
    • caption 标题
    • tr 行
    • td 列
    • th 加粗的列
    • tbody 不用编写，网页里有时候回看到
  • 属性
    • width 宽度
    • height 高度
    • border 表格边线
    • bordercolor 边线颜色
    • cellspacing 表格内元素和表格编剧
    • align 摆放位置
• 合并单元格
  • rowspan 合并行
  • colspan 和并列

 
   
    
   
 
    

      英雄榜 
    
 
    
 
     
 
      
天龙八部
 
      
乔峰
 
      
段誉
 
      
虚竹
 
      
慕容复
 
     
 
     
 
      
射雕英雄传
 
      
杨过
 
      
黄蓉
 
      
东邪
 
     
 
     
 
      
少林寺
 
      
圆寂法师
 
      
通济大师
 
      
圆通法师