11.12 前端标签

一、前端

1.什么是前端：

任何与用户直接交互的操作界面，比如电脑、手机、平板界面。

2.什么是后端：

真正的幕后操作者。

3.全栈工程师：前后端都得会，进步最快。

二、web服务的本质

请求响应

浏览器输入网址回车发生了哪些事

1.朝着指定的服务器地址发送请求

2.服务端接收请求并处理

3.返回相应的响应

4.浏览器接收并渲染出好看的页面，给用户看

请求方式：

1.get请求：朝服务器要资源，例如输入www.baidu.com

2.post 请求：朝服务器提交数据例如登录功能

三、HTTP协议：

超文本传输协议：规定了服务端与浏览器数据传输的数据格式

1四大特性：

1.基于TCP/IP作用于应用层之上的协议

2.基于请求响应：请求对应响应

3.无状态：不保存客户端状态（解决方法：cookies，session）

4.无连接：长连接 websocket

2数据格式

请求格式：请求首行（请求方式协议版本）请求头（一大堆k:v键值对）请求体（敏感信息密码身份证号）

响应格式：响应首行（请求方式协议版本）响应头（一大堆k:v键值对）响应体（给用户看的数据）

3响应状态码

用数字来表示一串文字需要表达的意思

1XX：服务端已经成功接收到了你的请求正在处理你可以继续提交其他数据

2XX：服务端成功响应了相应的数据（200）

3XX：重定向

4XX：（404请求资源不存在）（403 你当前不符合某一些条件无法正常访问）

5XX：服务器内部错误（500）

HTML ：超文本标记语言

文件的后缀名：文件的后缀名是给人看的对于计算机来说全都是二进制

之所以不同的后缀名有不同的功能那是我们程序员自己认为是定制的

四、注释

注释是代码之母

HTML的注释

<!--单行注释-->

<!--
多行注释1
多行注释2
多行注释3
-->

我们在搭建页面的时候通常会利用注释来划分区域

<!--导航条开始-->


<!--导航条结束-->

<!--侧边栏开始-->


<!--侧边栏结束-->

HTML的文档结构

<html>
    <head> head 内代码不是给人看的，是给浏览器看的</head>
    <body>
        body内代码才是给人看的
    </body>
</html>

<h1>hello zhuzhu</h1>
<a href="https://www.baidu.com"></a>
<img src="http://img5.imgtn.bdimg.com/it/u=268421633,928848426&fm=26&gp=0.jpg/>

五、标签

标签的分类1：

双标签（h1,a）

自闭合标签（img）

head内常用标签

title 定义网页标题

style 内部支持写css代码

link 引入外部css样式

script 内部可以直接写JS代码也可以引入外部JS 文件

meta 定义网页源信息

<meta name="keywords" content="meta 总结：html,meta 属性，meta跳转">
<meta name="description content="老男孩 教育">

body内常用标签

h1 ~ h6 标题标签

p 段落标签一个p就是一行内容

s 删除线

b 加粗

u 下划线

i 斜体

br 换行

hr 一条分割线

body内特殊符号
```
&nbsp;     空格
&amp;      &
&yen;      ￥
&gt;       >
&lt;       <
&copy;      ©
&reg;       ®
```
5.标签的分类2

1.块儿级标签 h1~h6 p br hr div

独占一行

1.块儿级标签内可以嵌套其他块儿级和行内标签

2.注意：p标签虽然是块儿级标签但是它的内部不能嵌套任何块儿级标签只能嵌套行内标签

2.行内标签 s i u b span

内部文本多大就占多大

行内不能嵌套行内和块儿级

标签通常应该有两个属性

id 就类似于是身份证号码每一个标签都应该有id值并且在同一个html文档中标签的id 不能重复

class 类属性有点类似于面向对象的继承 class='c1 c2 c3',这个标签就会拥有 c1,c2,c3的所有样式
body内重要的标签

div 一块区域可以往这块区域内填写任何内容

span

div 和span是前期构建网页的基本骨架

a 链接标签

1.跳转功能 href参数控制跳转的地址

这个地址如果在当前用户的机器上没有被点击过默认是蓝色，点击过一次就是紫色
```

```
a标签默认是在当前窗口跳转

你可以指定新建窗口打开
```
target="_self"   #默认当前页打开
target="_blank"   #新窗口打开
```
2.锚点功能

给a标签设置id 值

然后在href中书写对应的a标签id值点击即可跳转到对应的位置
```
<a href="" id="a1">开头</a>
<div style="background-color: red;height:300px"></div>
<div style="background-color: blueviolet;height: 500px"></div>
<div style="background-color: aqua;height: 400px"></div>
<a href="" id="a2">中间</a>
<div style="background-color:green;height:300px"></div>
<div style="background-color: yellow;height: 500px"></div>
<div style="background-color: aqua;height: 400px"></div>
<a href="#a1">回到开头</a>
<a href="#a2">回到中间</a>
```
1. img 图片标签
src

1.图片地址可以是图片网址也可以是本地图片路径

2.url（网址）自动朝该网址发送get请求获取图片资源

alt

当图片加载不出来时候展示的是提示信息

title

鼠标悬浮上去之后展示的提示信息

width和height

这两个参数只需要设置一个就可以默认是等比例缩放

两个都调整图片就会失真

8.列表标签

#无序列表
ul
  li
type 参数
   disc(实心圆点，默认值)
   circle（空心圆圈）
   square（实心方块）
   none(无样式)
#有序列表
ol
   li
type参数
   1 数字列表，默认值
   A 大写字母
   a 小写字母
   I 大写罗马
   i 小写罗马
#标题列表
dl
  dt 小标题
  dd  小章节
<dl>
    <dt>标题</dt>
    <dd>内容</dd>
</dl>

9.表格标签

展示数据一般都用到表格标签

一个tr就表示一行

姓名	密码	爱好	删除
猪猪	123	学习	no

<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>
  <table border="1">
    <thead>
        <tr>
            <th>姓名</th>
            <th>密码</th>
            <th>爱好</th>
            <th>删除</th>
        </tr> 一个tr就表示一行
    </thead>
    <!--表头-->
    <tbody>
        <tr>
            <td>猪猪</td>
            <td>123</td>
            <td>学习</td>
            <td>no</td>
        </tr>
    </tbody>
    <!--表数据-->
  </table>
</body>
</html>

posted on 2019-11-12 22:16 wtfss 阅读(153) 评论(0) 收藏举报