49、HTML基础

前端基础 / 2021-01-28

一、前后端简单区别

1.1、什么是前端?

任何直接跟用户直接打交道的操作界面都可以称之为前端,它是一个广泛的定义!

1.2、什么是后端?

后端类似于幕后操作者,不直接出面跟用户打交道!

二、前端历程

2.1、语法:

HTML

前端的骨架内容,没有任何样式!

CSS

为骨架赋予血肉,添加各种样式,令应用变得丰满起来!就好像给人化妆!

JavaScript

控制网页的动态效果,就好比如跳舞等动作能够更新吸引别人的注意力!

2.2、框架

如:bootstrap、JQuery、Vue等。它们封装了很多底层操作,我们不再需要自己编写上述的HTML、CSS等代码,只需要按照框架的固定语法调用即可!

三、HTML基础

3.1、HTML是什么?

HTML,hypertext MarkUp language,它是一种创建网页的标记语言,也称为超文本标记语言,它可以用来规定服务端和浏览器之间的数据交互的格式!

3.2、HTTP四大特性

3.2.1、基于请求响应

客户端发起请求,服务端响应请求的内容!本质上也是基于C/S架构的一种应用手段!

3.2.2、基于TCP/IP作用于应用层的协议

很容易理解,基于TCP/IP是因为它基于请求响应,那么客户端就必须拥有IP+port来标识身份!

3.2.3、无状态

不保存用户的信息,不管你来访问多少次,我都当你是第一次来!任你虐我千百遍,我待你依旧如初恋???也正是因为HTTP是无状态的,所以后续出现了一些专门用户记录用户状态的技术,如cookie、session、token...,可以大大缓解服务器并发压力!

3.2.4、无/短链接

请求来一次响应一次,之后两者就没有任何关系了!跟上面的无状态也是相呼应!与之相反的是长链接:双方建立链接之后默认不断开,这叫websocket,后面学到再介绍!

3.2.5、C/S交互

请求数据格式
GET / HTTP/1.1
Host: blog.sanxi.info
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
DNT: 1
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.104 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Sec-Fetch-Site: none
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Sec-Fetch-Dest: document
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Cookie: scroll-cookie=0|/; Hm_lvt_cd22b9a461e8cc9641fd7650492a4bc9=1611198970,1611391935,1611413614

大致格式如下:

请求首行

用来标识当前HTTP协议版本、当前请求方式!

请求方式

get请求,朝服务端索要数据,如输入网址获取对应的内容!

post请求,朝服务端提交数据,比如登录注册!

请求头

如上所示,一大堆K/V键值对!

\r\n

就是空一行啦

请求体

并不是所有的请求方式都有,get就没有!

响应数据格式
HTTP/1.1 200 OK
Server: nginx
Date: Mon, 25 Jan 2021 14:21:10 GMT
Content-Type: text/html;charset=utf-8
Transfer-Encoding: chunked
Connection: keep-alive
Access-Control-Allow-Headers: Content-Type,ADMIN-Authorization,API-Authorization
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 3600
Content-Language: zh-CN
Content-Encoding: gzip

响应首行,标识HTTP协议版本,响应状态码

响应状态码

即用一串简单的数字来表示一些复杂的状态或者描述信息

1开头:服务端已成功接收到你的数据正在处理,你可以继续提交额外的数据!

2开头:服务端成功响应了你想要的数据,比如最常见的200表示OK!

3开头:重定向,如当你访问一个需要登录才能看到的,在登录后自动跳转到登录页面!比如我博客网站强制重定向HTTPS!

4开头:请求错误,最常见是:404 not found;403请求不合法或不符合条件,代表被拒绝。

5开头:服务端内部错误,最常见是:500,内部错误!

响应头
\r\n
响应体
URL

统一资源定位符,即网址全称

四、HTML语法基础

HTML,超文本标记语言!如果你想要让浏览器能够渲染出你写的页面,你就必须遵循HTML语法,我们浏览器看到的页面,内部其实都是HTML代码,网站内部也都是HTML代码!HTML就是书写网页的一套标准,它不是一门编程语言!但是呢,学任何一门语言之前先学会注释,注释是代码之母!

4.1、注释

<!--单行注释-->

由于HTML代码非常杂乱无章,所以我们习惯性用注释来划定区域方便后续的查找与阅读!

4.2、HTML文档结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>
4.2.1、声明HTML

声明此HTML文档为HTML5文档!

<!DOCTYPE html>
4.2.2、文档开始结束

文档开始和结束的标记,它是HTML页面的最根本的元素,它里面是文档的头部head和文档主体body!

<html></html>
4.2.3、文档开头

定义HTML文档开头内容,包含了文档的元数据meta,它们里面包含的内容不直接在浏览器展示给用户!

<head></head>
4.2.4、网页标题

定义了网页的标题,它是在浏览器标签页显示!

<title>网页标题</title>
4.2.5、网页主体

body之间的内容是用户可直接看到的网页主体内容

<body>网页主体内容</body>

4.3、标签分类

4.3.1、双标签

HTML标签是由尖括号包围的关键字,如上面的,它们通常是成双成对出现的,结束标签会有斜线/!

4.3.2、单标签

也称自闭和标签,如等

4.3.3、head内常用标签

在书写HTML代码时,只需要写标签名,然后按下tab键就能自动补全

标签用途
<title></title>定义网页标题
<style></style>定义内部即CSS样式
<script></script>定义JavaScript代码或引入JS文件
<link/>引入外部样式文件或网站图标
<meta/>定义网页元数据信息

4.3.4、body内常用标签

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

<b>加粗</b>
<!-- br换行 -->
<br>
<!-- hr水平线 -->
<hr>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<p>段落标签</p>
特殊符号
&nbsp;空格
&gt; 大于号
&lt; 小于号
&amp; &符号
&yen; 人民币符¥
&copy; 版权标签
&reg; 商标
块级标签与行内标签
块级标签

它独占一行,主要通CSS样式赋予不同的效果!块级标签可以修改长宽,但行内标签不可以,写了也没用!块级标签有:body、from、select、textarea、h1-h6、html、table、button、hr、p、ol、ul、dl、cnter、div等!

常用的有:

  • h1-h6 ,标题标签。
  • p,段落标签。
  • div,定义块级元素。

块级标签内可嵌套任意的块级标签和行内标签,只有一个例外:p标签!P标签虽然是块级标签,但是只能嵌套行内标签,不能嵌套块级标签,套了浏览器也会自动解开,因为浏览器是直接面向用户,按照我们编程的套路,就算有报错也不能让用户看到233,所以前端很少会看到有报错。。。
总结:

行内标签

行内标签大小是随着内容变化而变化的,它不能嵌套块级标签,可以嵌套行内标签,但是没意义。行内标签有:heda、meat、title、lable、span、br、a、style、em、b、i、strong等!最常用的是span!

总结

div和span这两个标签是在构造页面初期经常使用的!页面布局一般先用div和span占位之后再调整样式,就好像程序架构设计一样!尤其是div使用非常频繁,div可以把它看成是一块区域,也意味着用div提前规定所有的区域,之后往该区域填写内容即可,而普通的文本可先用span标签或者p标签!

图片标签img
<img 
     src="https://blog.sanxi.info/upload/2021/01/0-_7_-c98f8c96538e473bbdc517247ec8a8bd.png" 
     alt="回龙山云海" 
     title="云海" 
     height="50px" 
     width="50px"
 >
  • src,图片的路径,可以是本地也可以是网络;如果写的是URI,会自动朝该URI发起网络请求加载图片!

  • alt,用来标识图片加载失败后的描述

  • title,当鼠标悬浮到图片上显示的描述信息

  • height,图片高的像素,只修改height时,width参数自动等比例缩放;修改了两个却不考虑比例问题,那么图片就会失真!

  • width,宽,同上。

a标签

即超链接标签,可以链接多种类型文件、地址等,最常用于点击后跳转到指定的链接地址!当a标签未被点击,则是蓝色,点击过是紫色,浏览器记忆的原因

<a href="https://blog.sanxi.info/" target="_blank" >溪明轩</a>
href

指定目标地址,该地址可以是以下类型:

  • 绝对URL:指向另外一个站点(完整的URL地址),如我上面所写!
  • 相对URL:如href="Untitled-1.css",即打开本地的该文件!
  • 锚点:跳转至页面中的锚点,如href="#d1",里面指定要跳转的标签的id值或者继承的class
target
  • _blank,浏览器新标签页打开目标地址
  • _self,当前标签页打开目标地址
标签两个重要属性
ID值

类似于标签的身份证号,在同一个HTML上ID值不能重复!

class

类似于面向对象里面类的继承,一个标签可以继承多个class值!

列表标签
无序列表(常用)
<ul>
<li>sanxi</li>
<li>chrystal</li>
<li>others</li>
</ul>
有序列表
<ol>
    <li>sanxi</li>
    <li>chrystal</li>
    <li>others</li>
</ol>
标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
</dl>
表格标签
<table border="1">
    <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>爱好</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>sanxi</td>
            <td>playing</td>
        </tr>
        <tr>
            <td>2</td>
            <td>chrystal</td>
            <td>reading</td>
        </tr>
    </tbody>
</table>
表格属性
  • border: 表格边框.
  • cellpadding: 内边距
  • cellspacing: 外边距.
  • width: 像素 百分比.(最好通过css来设置长宽)
  • rowspan: 单元格竖跨多少行
  • colspan: 单元格横跨多少列(即合并单元格)

4.4、表单标签

HTML之form表单是HTML中一块非常重要的内容,它往往和CSS、JavaScript等相结合;它最主要的功能是能够获取前端用户的数据,基于网络发送给后端服务器,比如说各大网站的登录注册页面!

<!-- 在该表单内填入的数据都会被提交到action指定的地址 -->
<form action=""></form>

form属性

注意事项

所有获取用户输入的标签都应该有name属性,类似于字典的key,用户输入的数据就类似于字典的value;所有标签也都应该有name属性,用来提交数据!

属性作用
accept-charset设置在被提交表单中使用的字符集(默认为HTML页面字符集)
action定义表单提交到哪里(URL,即提交地址)
autocomplete定义浏览器应该自动完成表单(默认是开启的)
enctype规定被提交数据的编码(默认:url-encoded)
method规定在提交表单时所用的HTTP方法(默认:GET,此为明文,必须改为post密文)。
name规定识别表单的名称(对于 DOM 使用:document.forms.name)。
novalidate规定浏览器不验证表单。
target规定 action 属性中地址的目标(默认:_self)。
action

控制数据提交的后端路径,即要提交到哪里去!有三种方式:

  • 不写,留空则默认往当前页面所在的URL提交数据

  • URL,写全URL地址则提交到指定的URL地址!

  • 只写路径后缀action='/index/',则自动识别出当前服务端IP和port拼接到前面

input标签

input人称HTML变形金刚,通过type属性变形多种功能,加了value就成默认值了!

type属性表现形式代码演示
text普通文本<input type="text" id="d1">
password密码输入框(密文)<input type="password" id="d2">
date日期选择框<input type="date">
submit提交按钮,触发提交form表单提交数据的动作<input type="submit" value="注册">
button普通按钮,可自定义各种功能<input type="button" value="i'm button">
reset重置form内容<input type="reset" value="reset">
radio单选框,默认可加checked<input type="radio" name="gender" checked>male
checkbox多选,要默认也可加checked<input type="checkbox">reading
file文件选择框<input type="file">
hidden隐藏输入框<input type="hidden">
input属性
  • disable:关闭
  • readonly:只读框
  • value:
    • type="button", "reset", "submit"时,为按钮上显示的文本内容。
    • type="text","password","hidden"时,为输入框的初始值。
    • type="checkbox", "radio", "file",为输入相关联的值。
  • checked:用于radio和CheckBox默认选中项
  • name:表单提交时的“键”,注意和id的区别
  • placeholder:默认提示字符
select标签

select为下拉框,默认单选,multiple参数变多选,默认选中selected!

<p>ex-gf:
<select name="ex-grilfriend" >
<option value="2">chrystal</option>
<option value="1" selected>kristal</option>
<option value="3">teac</option>
</select>
</p>
select属性
  • multiple:设置后多选,否则默认单选。
  • selected:默认选中该项
  • value:定义提交时的选项值
label标签

label专为input标签定义标记!label本身不会显示任何特效,它的for值必须与要添加标记的id值一样!

<label for="passwd"> 密码</label>
<input type="password" id="passwd" name="password">
textarea多行文本
<p>个性签名
    <textarea name="signature" id="signature" cols="30" rows="10"></textarea>
</p>
textarea属性
  • name:名称
  • rows:最多显示行数,多余则滚动调显示。
  • cols:单行最大显示列数(字符数)
  • disabled:禁用
世间微尘里 独爱茶酒中