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程序



	
		HelloWorld
		
	

	
		

我的第一个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 >的作用是换行

<br>的作用是换行

©copyright-2010-1019

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




    
    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




    
    Title


    


    
  1. 市场部
  2. 研发部
  3. 行政部
  4. 财务部
  5. 人力资源部
  1. 市场部
  2. 研发部
  3. 行政部
  4. 财务部
  5. 人力资源部
  1. 市场部
  2. 研发部
  3. 行政部
  4. 财务部
  5. 人力资源部
  • 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 和并列




    
    Title



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

你可能感兴趣的:(HTML)