html页面

什么是页面

1. 基于浏览器的应用程序
2. 一个html文件，就是一个页面
3. 数据展示的载体，浏览器、服务器共同执行的产物
   浏览器：
   发送用户的请求，接收服务器的响应，解析数据、展示数据

服务器：
存储数据、页面等资源
接收浏览器的请求、处理请求
返回响应

浏览器-http-服务器-----> B/S 模式
客户端-socket-服务器----->C/S 模式

页面的优势

1. 即时更新
   只需在服务端更新页面，浏览器刷新即可
2. 无需下载、安装软件
   只需打开浏览器，就可以访问页面
   建议使用Chrome、VScode编辑器

VSCode功能介绍

可以按照Chinese、open in browser、python、live server等插件

在vscode中编辑html文件

执行方式：

1. 右键–open in other browser
2. 双击html文件执行浏览器打开，查看内容右键–使用其他程序打开

html

超文本标记语言

1. 浏览器可以 识别、解析的语言
2. 通过元素标签，来构建页面内容、结构

Ctrl + wheel 放大、缩小
！+ tag 自动补全

标签、属性

<div align="center"></div>
<!-- 注释 -->

标签结构：

常用标签

标题

表单

<form action="/user/" method="POST">
  <label for="">姓名:</label><br>
  <input type="text" placeholder="输入姓名" name="user" value=""><br>
  <label for="">密码:</label><br>
  <input type="password" placeholder="输入密码" name="pwd" value=""><br>
  <input type="submit" value="登录">
</form>

表单控件

控件属性
type, 控件的类型
name,控件的名字
value,控件的值，提交时 以name为key, 以value为值
placeholder,提示信息
maxlength,输入的最大长度字符
checked, 单选、复选 默认选中
selected,下拉选项默认选中

<input type="radio" name="an" value="A">A
<input type="radio" name="an" value="B" checked>B

<input type="checkbox" name="c1" value="1" checked>1
<input type="checkbox" name="c2" value="2" >2

班级：<select name="className" id="">
        <option value="1" selected>1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
<!--className = 1-->

<!--多行文本-->
<textarea name="blog" id="" cols="30" rows="10">   
</textarea>

图片标签

img

<img src="" with="200px" height="" title="" alt="">

src,图片路径
title,标题，鼠标悬停显示
alt,加载失败的提示

超链接

a, 实现页面跳转

<!--在当前窗口打开页面-->
<a href="https://www.baidu.com" target="_self">百度

<!--在新窗口打开页面-->
<a href="https://www.baidu.com" target="_blank">百度

<!--href为空时，刷新当前页面-->
<!--无具体地址时，给#，就不会刷新-->
<!--无具体地址时，给javascript:,也不会刷新-->

标签的分类

块标签

占用一行，不与其他元素共行；
可设置宽高，默认为父元素的宽
如：body/div/ul/ol/li/table/form/h1~h6/p

行内标签

与其他元素，共占一行
不可设置宽高，宽高由内容决定
如：span/a/label

行内块标签

与其他元素共行；
可设置宽高；
如：img/input/button

display属性

转换元素标签的类型

display = “none”;不显示该元素
display = “block”;显示为块元素
display = “inline”;显示为行内元素
display = “inline-block”;显示为行内块元素

css页面样式

<div style="color:red;background-color: lightblue;font-size: 20px;text-align: left;">内联的CSS</div>
    <hr/>
    <div class="header">内嵌的CSS</div>
    <style type="text/css">
        .header{
            color:lightpink;
            background-color: lightblue;
            text-align: center;
            font-size: 25px;
        }
    </style>
    <hr/>
    
    <link rel="stylesheet" href="../css/test.css">
    <div class="outlink">外链的CSS</div>

rel代表，当前文档与链入的文件之间的关系
在外链的css文件中，直接写选择器：

/* 直接选择器 */
.outlink{
    color:aqua;
    background-color: beige;
    font-size: 15px;
    text-align: right;
    opacity: 0.5;
}

/* 标签 与类的结合*/
p.test{
	xxxx:xxx;
}

<div class="c1 c2 ...."></div>

群组选择器使用场景：
为多个标签清除默认样式

伪类选择器
.red:hover{} 鼠标滑过时的样式
.red:focus{} 获取焦点时的样式

all为所有属性

选择器的优先级：（权重）
行内选择器（1000）> id（100）>类选择器（10）> 标签（1）
后代、子代、伪类选择器 --权重相加
群组选择器，取生效的选择器的权重

哪个选择器的优先级高，使用它的样式
.red:hover{ } 效果注意优先级

使用css 设置背景图

同一个样式中，选择器的权重相同，后写的选择器生效
选择器未生效—F12：
越靠上，优先级越高
未生效的划掉

CSS特性：
层叠性，多个样式作用于一个标签
继承性，后代节点会继承祖先节点的部分样式（文本样式），继承的属性优先级最低

颜色属性：

1. 单词； red/blue
2. rgb(2,30,45); rgba(1,20,45,0.4)透明效果
   有专业设计人员
3. 16进制方式，#ffaaee (简写#fae) ； 此种使用较多
   尺寸属性：
4. px; 像素 固定
5. % 相对于父元素的百分比 ，一般只设置width，不设置height

文本属性：

1. font-size;字体大小
2. font-weight；加粗
3. font-style:italic
4. font-family;字体 font-family: Arial,’‘宋体’’;
5. font：style weight size family
6. color:red; 字体颜色
7. text-decoration; 装饰线 none;underline;overline;line-through
8. text-align; 文本水平对齐 行内标签无效果
9. line-height; 文本的垂直对齐 垂直居中line-height:height;文本的高度为容器的高度

背景属性：
１．ｂａｃｋｇｒｏｕｎｄ－ｃｏｌｏｒ
２．ｏｐａｃｉｔｙ不透明度
３.　ｂａｃｋｇｒｏｕｎｄ－ｉｍａｇｅ：ｕｒｌ（＂ｘｘｘｘ．ｊｐｇ＂）
４．ｂａｃｋｇｒｏｕｎｄ－ｒｅｐｅａｔ：ｒｅｐｅａｔ／ｎｏ－ｒｅｐｅａｔ／ｒｅｐｅａｔ－ｘ／ｒｅｐｅａｔ－ｙ
５．ｂａｃｋｇｒｏｕｎｄ－ｐｏｓｉｔｉｏｎ：ｘ　ｙ；
６．ｂａｃｋｇｏｕｎｄ－ｓｉｚｅ：ｗｉｔｈ　ｈｅｉｇｈｔ；

方式1

#bg{
	background-image:url('');
	width:100%;
	height:100%;
}

方式二

<style>
.bg img{
	position: fixed; /*fixed 脱离文档流*/
	top:0;
	width: 100%;
	height:100%;
	opacity: 0.6;  /*不透明度*/
	z-index: -100; /*图层的级别*/
}

</style>

<div class="bg">
	<!--div需要内容撑起，无内容时，无高度-->
	<img src="/static/images/c.jpg" alt="">
</div>

<div id="main">
</div>