HTML和前端

a标签用来超连接

<a href="http://www.baidu.com">百度</a>

a标签扩展使用

1.锚链接
	创建标记:<a name="标记名"></a>
	创建连接:<a name="#标记名"></a>      //名字需要一样
2.功能连接
	邮箱连接：<a href="mailto:bdqnWebmaster@bdqn.cn">联系我们</a>


		<a href="#title1">跳转到一</a>
		<a href="#title2">跳转到二</a>
		<a href="#title3">跳转到三</a>
		
		<hr>
		
		<a href="mailto:bdqnWebmaste  r@bdqn.cn">联系我们</a>
		
		<h1><a name="title1">一</a></h1>
		<br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br>
		<h1><a name="title2">二</a></h1>
		<br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br>
		<h1><a name="title3">三</a></h1>
		<br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br>

标题标签

<H1>H1标签</H1>
<H2>H2标签</H2>
<H3>H3标签</H3>
<H4>H4标签</H4>
<H5>H5标签</H5>
<H6>H6标签</H6>     //数字越小字越大
<br> 换行标签
<hr> 换行线标签

link 标签

定义当前文档与外部资源之间的关系

<head>
  <link rel="stylesheet" href="styles.css">
</head>    //一般在head标签里面

meta标签

元素可提供有关页面的信息，比如针对搜索引擎描述和关键词

设置网络搜索关键字
<meta name="keywords" content="网络安全，WEB渗透，数据安全，渗透测试，安全培训"/>

文本属性标签

<b>b是加粗</b><br>
<strong>strong是加粗</strong>
<del>del是删除线</del><br>
<i>i是斜体</i><br>
<u>u是下滑线</u><br>
<sup>sup是上标</sup><hr>
<sub>sub是下标</sub><br>
<p>p是一个段落标签</p>
<pre>pre是代码样式原样输出</pre>

form表单

<form action="" method="get"> 
        <input class="input" type="" name="username" placeholder="账号"> <br>
        <input class="inpu" type="" name="password" maxlength="4" placeholder="密码"> <br>
        <button type="submit">登录</button>
 </form>
 -------------------------------
 method 的提交方法有get post
 checkbox 复选框
 redio 单选框

img标签

向网页中嵌入一幅图片

<img src="/i/eg_tulip.jpg"  alt="图片" />  
src  图片路径
alt  图片如果加载不出来就显示文字

列表标签

<ul>   
        <li>无序列表</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <hr>
    <ol>
        <li>有序列表</li>
        <li>3</li>
        <li>2</li>
        <li>1</li>
    </ol>

锚文本

<a href="#2">1锚点</a>
<a name="2">锚点</a>
点击1锚点会跳转到锚点

前端和后端的区别?

前端和后端是应用程序的两个方面。

前端是用户所能看到的,包括图标，按钮，输入框，视频等，允许用户可以交互的。后端就是你的程序正常运行的数据，为用户存储和处理数据

前端的工作原理

前端指的是用户可以直接与之交互的图形页面

html css js 会影响用户和前端的交互方式

html (超文本标记语言) 定义前端结构和不同的DOM元素
Css (层叠样式表) 定义web程序的样式比如字体背景颜色，布局
JavaScript 给网页增加一些动作

javascript可以触发页面上的更改并显示新信息，意味着前端可以处理用户的基本请求，前端会把更复杂的传给后端

后端的工作原理

后端有时被称为服务端，用于管理web应用程序的整体功能，当用户与前端交互时，会以http的格式像后端发送请求,后端处理请求并返回响应。

用于检索或修改相关数据的数据库服务器
执行用户所请求任务子集的微服务
用于收集额外信息或执行其他功能的第三方API （比如验证码的第三方可能就是阿里云，验证码不是从访问的服务发来的，是从阿里云发）

后端使用多种通信协议和技术来完成请求，还可以同时处理数千个不同请求，后端结合并行并发技术，例如在多个服务器上分配请求、缓存和数据复制

浏览器的主要功能

将用户想要看到的东西视图化的显示出来，用户用url（统一资源标识符）来指定所请求位置的信息

浏览器的主要组件包括：

用户界面 --包括地址栏，输入框，书签，就是你所看到的除了页面主窗口之外的其他部分
浏览器引擎 --用来查询及操作渲染引擎的进口
渲染引擎 --用来显示请求内容，将代码解析后的内容结果显示出来
网络 --用来完成网络掉用，如http请求，它具有平台无关的接口，可以在不同平台工作
UI后端 --用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口
JS解释器 --用来解析JS代码
数据存储 --属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术。

浏览器输入URL到显示页面发生了什么？

首先会将url解析成IP地址
在查看浏览器有无缓存，有则直接调用显示，没有就看本机host文件下有无缓存，还没有就看路由缓存，DNS服务器缓存
获取端口号
建立tcp连接

连接过程：客户端向服务器发送连接请求

服务端接收客户端发起的连接请求后并回复一个ACK报文

客户端接收到ACK报文后也向服务端发送一个ACK报文
建立成功后，连接到web服务器，浏览器根据ip和端口发送http请求
关闭tcp
浏览器渲染