Html中超链接标记独占一行,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 序列的编号

1. 湖人
2. 快船
3. 爵士
4. 骑士

应用场景：热词榜单，排名等

自定义列表

dl 自定义列表

dt 表头

dd 行

python学科

python基础

数据库

linux

pythonweb

java学科

java基础

ssm

javaee

python

• 环境安装
• 基本语法
  1. 分支结构
  2. 循环结构
  3. 函数
• 数据结构
  1. 数字类型
  2. 字符串类型
  3. 列表类型
  4. 字典类型

pythonweb

• 前端页面开发
• 后台开发

列表的可嵌套

表格标签

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、

双标签一般可以写内容