HTML

课程介绍

1.前端:写网页(7天,掌握)

2.后台:Flask。Django。tornado(17天重点学会)

3.前端页面:电商首页搭建

4.搭建电商项目,OA系统

5.就业岗位:后台开发工程师,全栈开发工程师

网页开发

  • 环境准备
    • 浏览器:谷歌
  • 编辑器
    • pycharm

HTML

html(hyper text mark-up language):超文本标记语言

超文本:基本特征可以连接到其他的网页

标记:<特点的字符>

注意:html语言是做网站开发的语言(与python等价)

HTML语言的书写格式

html语言:由内容和标签组成

内容:页面上显示的数据

标签:也叫标记

​ 单标签:<特定字符> < br > < hr>

​ 双标签:< 特定字符>内容< /特定字符>

标签属性:属性名称=值

第一个html

页面结构








    

    我的第一个页面



hello,world


页面规范

  • 后缀名:.html

  • 浏览器解析页面

  • html标签不区分大小写,建议小写

    我是标签1

    我还是标签1

  • 双标签必须有闭合标签/

  • 标签属性值要加引号

    
    

    我是标签1

常用标签

标题标签

h1~h6


我是h1

我是h2

我是h3

我是h4

我是h5
我是h6

特点:

  • 默认有字体式样(字体粗细大小)
  • 独占一行

应用场景:新闻标题

查看代码f12到elements在到最左边

[图片上传失败...(image-ff792a-1596804543185)]

段落标签

[图片上传失败...(image-24e338-1596804543185)]

< p>内容< p>

有间隔,自动换行

实体字符

  • 空格  ;

  • 小于号< < ;

  • 大于号> > ;

    应用场景 层级关系

换行标签

< br >

水平线标签

< hr > 一般使用div设置边框会比hr适用的地方更多

文本修饰标签

i,em:倾斜标签

b,strong :加粗

u 表示下划线

del 表示删除线



中公教育 > u就业

中公教育 > u就业

中公教育 > u就业

中公教育 > u就业

div标签和span标签

  • 没有任何的样式
  • div 独占一行,span宽度与内容多少有关
  • div用于大的页面布局
  • span用于小的内容修改
  • 应用场景:页面的布局

之前的布局:table


hello

hello
hello hello
我是图片
¥299.0
UR2020秋季新品女装清熟方领修身针织连衣裙

[图片上传失败...(image-351db5-1596804543185)]

  • 注意:几乎所有标签都有style属性

图片标签

img 图片标签
scr 加载路径
alt 图片的描述信息,图片加载失败后的显示内容
title 标题,但鼠标悬停在图片上显示的内容
width 图片宽度
height 图片的高度



lsp

超链接标签

  • < a > 超链接标签
  • href 跳转的目标路径
  • target="_blank" 从新的页面打开


哈哈哈哈点我一下你就知道
demo9

锚点定位

  • 实现锚点定位功能:
    • 1.给目标元素添加id属性
    • 2.在a标签的href 中使用“#id值”的方式进行定位

拓展:几乎所有的标签都有id style 属性

  • 实现跳转到顶部
    • 顶部设置一个新空的div添加id值
    • 底部添加跳转< a >href #id值


到一层 到二层 到三层
一层楼
二层楼
三层楼
顶层
  • 从其他页面定位到页面摸个位置
    • herf 路径#id值

跳转2层

列表标签

  • 无序列表

    • ul 无序列表标签 li 列表行标签
    • type 指定显示效果:默认 实心圆形
      circe 空心圆形
      square 方块
    • 应用场景:新闻页面
    
    
    
    • pthon
    • ui
    • 大前端
    • java
  • 有序列表

    • ol 有序列表
    • type 序列的编号
    
    
    
    1. 湖人
    2. 快船
    3. 爵士
    4. 骑士

    应用场景:热词榜单,排名等

  • 自定义列表

    • dl 自定义列表
      dt 表头
      dd 行

python学科
python基础
数据库
linux
pythonweb
java学科
java基础
ssm
javaee
python
  • 环境安装
  • 基本语法
    1. 分支结构
    2. 循环结构
    3. 函数
  • 数据结构
    1. 数字类型
    2. 字符串类型
    3. 列表类型
    4. 字典类型
pythonweb
  • 前端页面开发
  • 后台开发

image-20200730161741001

列表的可嵌套

表格标签

  • table 表格标签
    tr 行标签
    td 列标签
  • caption 设置标题

python班信息表
姓名 年龄 性别 专业
张三 20 python
  • table 标签的属性

    • boder 边框线的大小
    • cellpadding 内容到边框的距离
    • cellspacing 每个边框之间的距离
    • width 宽度
    • height 高度
  • tr 属性

    • align:内容的水平对齐 left center right

    • valign:内容的竖直方向对齐 top middle bottom

      信息表
      姓名 年龄 性别 专业
      张三 20 python
  • td 属性

    • align:内容的水平对齐 left center right
    • valign:内容的竖直方向对齐 top middle bottom
  • tr td 合并

    • colspan 跨列合并
    • rowspan 跨行合并

表单

  • form 表单标签 没有样式用于提交
    • action 提交路径
    • method 提交方式 get 和post

注意:以下所有声明 type属性的都是input标签中的type选项

  • type=“text” 表示将input解析成文本框
    placeholder 设置提示语
    readonly 设置只读方式
    name 给input标签起一个名字 作用用于文本框输入值的提交
    value 给文本框这是值,当数据回显时候使用
    注意:提交时信息以键值对的形式提交 name属性的值=value属性的值
    username=zs
    url(网址)=
    网络协议
    域名
    参数
  • type="password" 密码框 多个键值对之间用&连接
  • type="radio" 单选按钮,name值相同才能单选
    checked 设置默认选择状态
  • type=“checkbox” 多选框
  • 上传文件:三要素
    1.method=“post”
    2.enctype=“multipart/form-data”
    3.type=“file”
  • 隐藏域,在也页面上不显示
    当某些内容必须要提交到后台并且不能让用户看到
    type=“hidden
  • select 下拉选项 option 表示选项的内容
  • type="button" 按钮
  • type="reset" 重置按钮
  • button:写在表单中有提交作用,不在表单中就是普通按钮
  • textarea 定义文本域标签
    placeholder="请自我介绍..."提示文字
  • type="submit" 具有提交功能的按钮


用户名:

密码:

性别:

爱好:抽烟 喝酒 烫头

头像:

你喜欢的城市:

自我介绍:

标签分类

  • 单标签
    • hr、br、img、input、meta。DOCTYPE
    • 单标签不需要写内容
  • 双标签
    • html、head、bady、title、h、p、div、span、b、serong、u、i、em、del、table、tr、td、caption、li、
    • 双标签一般可以写内容

你可能感兴趣的:(HTML)