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 图片的高度

超链接标签

< 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 序列的编号
```
    湖人
    快船
    爵士
    骑士
```
应用场景：热词榜单，排名等
自定义列表
- dl 自定义列表
  dt 表头
  dd 行



    python学科
    python基础
    数据库
    linux
    pythonweb
    java学科
    java基础
    ssm
    javaee

列表的可嵌套

表格标签

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



    python班信息表
    
        姓名
        年龄
        性别
        专业
    
    
        张三
        20
        男
        python

python班信息表
姓名	年龄	性别	专业
张三	20	男	python

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

tr 属性

align：内容的水平对齐 left center right

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

td 属性
- align：内容的水平对齐 left center right
- valign：内容的竖直方向对齐 top middle bottom
tr td 合并
- colspan 跨列合并
- rowspan 跨行合并

信息表
姓名	年龄	性别	专业
张三	20	男	python

表单

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

课程介绍

网页开发

HTML

HTML语言的书写格式

第一个html

页面结构

我是标签1

我还是标签1

我是标签1

常用标签

标题标签

我是h1

我是h2

我是h3

我是h4

我是h5

我是h6

段落标签

实体字符

换行标签

水平线标签

文本修饰标签

div标签和span标签

图片标签

超链接标签

锚点定位

列表标签

表格标签

表单

标签分类

你可能感兴趣的:(HTML)