前端知识之HTML内容

什么是前端？

只要是跟用户打交道的界面都可以称之为前端
例如：电脑界面、手机界面、平板界面

什么是后端？
不跟用户直接打交道的都可以称之为后端
例如：python、Java、go

为什么要学前端？

为了成为全栈工程师
前端、后端、数据库、linux

前端学习历程

1、HTML：网页的骨架，没有任何的样式
2、css：美化网页，给网页骨架添加样式
3、JavaScript：就是让网页动起来

软件开发架构：

​ c/s架构
​ b/s架构

在浏览器地址栏输入网址，回车发生了什么事？

1、浏览器像服务端发起请求
2、服务端接受客户端的请求
3、服务端处理客户端的请求，并且返回给浏览器
4、浏览器根据特定的规则渲染页面

要想让浏览器跟很多个服务端进行交互，就一定要遵循一定的规则

HTTP协议

超文本传输协议，用来规定服务端和客户端之间的数据传输格式

​ 本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性 问题）

四大特征：

1、基于请求响应
2、基于TCP/IP协议之上的应用层协议
3、无状态——不能保存用户信息
保存用户信息的技术：cookie、session、token……
4、短链接/无链接
长链接

请求数据格式：

1、请求首行（请求方式、路径、版本号）
2、请求头（一堆键值对数据）
3、\r\n
4、请求体（get请求没有请求体，post请求有请求体）

get请求参数传递格式
？k=v&k1=v1&k2=v2

响应数据格式
响应首行（响应方式）
响应头（一堆键值对数据）
\r\n
响应体
响应状态码
其实就是用一些数字来表示一些复杂的信息
1xx：数据提交成功，正在处理，你可以进行提交
2xx：200 OK 请求成功
3xx：重定向
4xx：404 请求资源不存在 ； 403 请求的资源没有权限
5xx：500 服务器内部错误

请求方式：

1、get请求——跟服务端要数据

2、post请求——提交数据：比如登录，用户密码

HTML简介

HTML是一种标记语言（markup language），它不是一种编程语言。
HTML使用标签来描述网页。

<h1>hello baby</h1>
<a href='http://www.baidu.com'>click me</a>
<img class="index-logo-src" src="//www.baidu.com/img/flexible/logo/pc/result.png" alt="到百度首页" title="到百度首页">

标签的分类：
	1.双标签
    2.单标签

HTML的书写位置

1. 在pycharm中新建html文件
2. 新建文本文档，然后修改后缀名为.html

HTML的文档结构

<!--HTML的文档结构-->
<!DOCTYPE html> # 告诉浏览器这个文件是html文件
<html lang="en"> # language is english
<head> # head中的标签不是给用户看的
    <meta charset="UTF-8">
    <title>Title</title> # 定义了网页标题，在浏览器标题栏显示
</head>
<body>
 # body中的内容写什么网页主体就显示什么
</body>
</html>

head中常用标签

（补充）打开html文件的方式：
	1. 在pycharm中点击右上角的浏览器图标
    2. 双击html文件

<title></title>
	定义网页标题
<style></style>	
	定义内部样式表
<link/>	
	引入外部样式表文件或网站图标
<script>
	<title>我的第一个html文件</title>
	<script>
        // js代码
        // alert(123)
    </script>
	<link rel="stylesheet" href="mycss.css">-->
    <script src="myjs.js"></script>

body中常用标签

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

<p>段落标签</p>

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

<!--换行-->
<br>

<!--水平线--><hr>

特殊字符
空格		&nbsp;
>		&gt;
<		&lt;
&		&amp;
¥		&yen;
版权		&copy;
注册		&reg;

标签的分类

1. 块级元素
	 # 独自占一行
     <h1>~<h6>
        <p></p>
        <div></div>
2. 行内元素
	 # 自身文本有多大就占多大
    <b>加粗</b>
    <i>斜体</i>
    <u>下划线</u>
    <s>删除</s>
    <span> </span>

标签的嵌套

div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现
span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现

块级元素可以嵌套所有的行内元素
p标签虽然是块级元素，但是不能嵌套块级元素，也不能嵌套p标签
行内元素只能嵌套行内元素，不能嵌套块级元素

img标签

<img src="图片的路径(外链地址和本地地址)" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

a标签

超链接标签

所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
<a href="http://www.baidu.com" target="_blank" >点我</a>
href:指定目标网页的地址
target：
	_blank表示在新标签页中打开目标网页
	_self表示在当前标签页中打开目标网页

列表

1.无序列表*

<ul type="disc">
  <li>第一项</li>
  <li>第二项</li>
</ul>

type属性：
disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）

2.有序列表

<ol type="1" start="2">
  <li>第一项</li>
  <li>第二项</li>
</ol>

type属性：
1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马

3.标题列表

<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>

表格

<table>
    <thead> 表头
        <tr> 表示一行
            <th>姓名</th> # th和td都代表一列，th是单元格内容会加粗并且居中显示
            <th>年龄</th>
            <th>性别</th>
        </tr>

    </thead>
    <tbody> 列表内容
       <tr>
           <td>qq</td>
           <td>18</td>
           <td>male</td>
       </tr>
    </tbody>
</table>

属性:
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）

form表单

表单用于向服务器传输数据，从而实现用户与Web服务器的交互

表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含textarea、select、fieldset和 label标签。

属性 描述
accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。
action 规定向何处提交表单的地址（URL）（提交页面）。
autocomplete 规定浏览器应该自动完成表单（默认：开启）。
enctype 规定被提交数据的编码（默认：url-encoded）。
method 规定在提交表单时所用的 HTTP 方法（默认：GET）。
name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标（默认：_self）。 
action：指定向哪个后端提交数据
	1. 什么都不写，默认提交到当前地址
    2. 全写，http://127.0.0.1:5000/index/
    3. 只写路径后缀action='/index/'  
      自动识别出当前服务端的ip和port拼接到前面
      host:port/index/
            
上传文件必须满足两个条件：
	1. 请求方式必须是post
    2. 编码方式必须改为：enctype='multipart/form-data'
	
    
编码方式：
  	1. urlencoded
  	2. form-data
  	3. json

label标签

目标：
label标签主要目的是为了提高用户体验。当我们点击label标签内的文字时，光标会定位到指定的input标签里

定义：<label> 标签为 input 元素定义标注（标签）。

作用：
用于绑定一个input标签，当点击label标签的时候，被绑定的input标签就会获得输入焦点。

说明：
label 元素不会向用户呈现任何特殊效果。
<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
<form action="">
  <label for="username">用户名</label>
  <input type="text" id="username" name="username">
</form>

如何使用label：
1、第一种 用label标签直接包括input标签
<label> username:<input type="text" name="username" > </label>
2、第二种 for属性规定label与input标签的id绑定。无需嵌套
<label for="d2">password:</label> 
<input type="text" id="d2" name="password">

select下拉列表标签

语法：
  <select name="province">
        <option value="default" selected>--请选择省份--</option>
        <option value="sh">上海</option>
        <option value="bj">北京</option>
        <option value="sz">深圳</option>
    </select>
    
select标签属性说明：
multiple：布尔属性，设置后为多选，否则默认单选
disabled：禁用
selected：option设置后默认选中该项
value：定义提交时的选项值

input标签（单标签）

input标签为单标签

type属性设置不同的属性值用来指定不同的控件类型

除了type属性还有别的属性

type属性值 表现形式 对应代码
text 单行输入文本 <input type=text" />
password 密码输入框
date 日期输入框
checkbox 复选框
radio 单选框
submit 提交按钮
reset 重置按钮
button 普通按钮
hidden 隐藏输入框
file 文本选择框

属性说明:

  • name：表单提交时的“键”，注意和id的区别
  • value：表单提交时对应项的值
  • type="button", "reset", "submit"时，为按钮上显示的文本年内容
  • type="text","password","hidden"时，为输入框的初始值
  • type="checkbox", "radio", "file"，为输入相关联的值
  • checked：radio和checkbox默认被选中的项
  • readonly：text和password设置只读
  • disabled：所有input均适用

标签的两个重要属性

id：不能重复
	<label for="d1">用户名： </label>
class：可以重复
	<input type="text" id="d1" class="c1 c2 c3">
自定义属性
	<input type="text"  username="egon">

//仅供学习交流//

posted @ 2021-09-06 20:19  牛肉炖青菜  阅读(56)  评论(0)    收藏  举报