Web前端开发：前端简介与HTML协议

相约星期六 發表於 2022-11-30 20:22:00

<p></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>前端</li><li>一、前端与后端的概念<ul><li>1.前端的概念</li><li>2.后端的概念</li><li>3.了解前端的目的</li></ul></li><li>二、Web前端开发三大技术组成部分<ul><li>1.HTML超文本标记语言</li><li>2.CSS是层叠样式表</li><li>3.JavaScript网页脚本语言</li></ul></li><li>三、Web前端开发与HTTP协议<ul><li>0.知识回顾socket套接字与TCP</li><li>1.编写服务器</li><li>2.浏览器充当客户端访问服务端</li><li>3.编写符合HTTP协议的服务端</li><li>4.HTTP协议是如何传递数据的</li></ul></li><li>四、HTTP协议<ul><li>1.四大特性<ul><li>（1）<strong>基于请求响应</strong></li><li>（2）基于TCP、IP作用于应用层之上的协议</li><li>（3）无状态</li><li>（4）无、短连接</li></ul></li><li>2.数据格式<ul><li>（1）请求格式</li><li>（2）响应格式</li></ul></li><li>3.响应状态码</li></ul></li><li>五、HTML协议<ul><li>1.简介</li><li>2.HTML概览<ul><li>（1）注释语法</li><li>（2）HTML文档结构</li><li>（3）HTML标签分类1<ul><li>1）单标签（自闭和标签）</li><li>2）双标签</li></ul></li></ul></li><li>3.HTML补充</li></ul></li><li>六、head内容常见标签<ul><li>1.title网页小标题</li><li>2.meta定义网页源信息(配置)</li><li>3.style内部支持编写CSS代码</li><li>4.link引入外部CSS文件</li><li>5.script</li></ul></li><li>七、body内基本标签<ul><li>1.标题内基本标签h1至h6</li><li>2.段落标签</li><li>3.其他标签</li><li>4.换行与分割线</li><li>5.HTML标签分类2<ul><li>（1）行内标签</li><li>（2）块级标签</li></ul></li></ul></li><li>七、常见符号</li><li>八、页面body内布局标签</li><li>九、body内常用标签</li><li>十、body内其他标签<ul><li>1.无序列表</li><li>2.有序列表</li><li>3.标题列表</li><li>4.表格标签</li><li>5.表单标签<ul><li>1.表单标签简介</li><li>2.基于form表单发送数据</li></ul></li></ul></li></ul></div><p></p>
<h1 id="前端">前端</h1>
<hr>
<h1 id="一前端与后端的概念">一、前端与后端的概念</h1>
<h2 id="1前端的概念">1.前端的概念</h2>
<p><strong>任何<mark>直接与用户打交道的交互界面</mark>都可以称之为<mark>前端、前端界面、页面</mark></strong></p>
<h2 id="2后端的概念">2.后端的概念</h2>
<p><strong>不直接与用户打交道</strong>，<strong>主要<mark>负责内部真正的业务逻辑</mark>的执行</strong>，<strong>称之为后端</strong></p>
<h2 id="3了解前端的目的">3.了解前端的目的</h2>
<p>（1）简单了解前端的业务</p>
<p>（2）能编写简易的页面</p>
<p>（3）在前端方向更加深入学习</p>
<h1 id="二web前端开发三大技术组成部分">二、Web前端开发三大技术组成部分</h1>
<p>Web前端开发三剑客就是HTML、CSS、JavaScript，通过三种技术的融合产生了各式各样的网站。</p>
<img src="https://ddsg-1314792441.cos.ap-shanghai.myqcloud.com/typora/2022-11-30-005002.png">
<table>
<thead>
<tr>
<th style="text-align: center">名称</th>
<th style="text-align: center">作用</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center"><strong>HTML</strong></td>
<td style="text-align: center">网页的<strong>骨架</strong></td>
</tr>
<tr>
<td style="text-align: center"><strong>CSS</strong></td>
<td style="text-align: center">网页的<strong>样式</strong></td>
</tr>
<tr>
<td style="text-align: center"><strong>JavaScript</strong></td>
<td style="text-align: center">网页的<strong>动态</strong></td>
</tr>
</tbody>
</table>
<h2 id="1html超文本标记语言">1.HTML超文本标记语言</h2>
<p><strong><mark>HTML</mark></strong>是<strong>超文本标记语言</strong>，<strong>是一个网站页面的主要内容和主体框架</strong>。</p>
<p>主要<strong>用来实现静态页面</strong>，目前我们看到的<strong>文字、图片、动画、声音、表格、超链接等网页元素都是通过HTML实现的</strong>。</p>
<p><strong>HTML是由各种标签组成的</strong>，<strong>所以学习HTML就是在了解HTML主体框架的结构基础上学习各种标签的使用方法</strong>。</p>
<h2 id="2css是层叠样式表">2.CSS是层叠样式表</h2>
<p><strong>CSS是层叠样式表</strong>，<strong><mark>主要用来控制调整网页的样式</mark></strong>，<strong>它与网页的结构和内容没有关系，仅仅是通过不同语义的标签来调整网页内容的不同表现样式</strong>。</p>
<p><strong>在网页上实现CSS样式调整一般有两种方式</strong>：</p>
<ul>
<li>
<p><strong>内嵌式</strong></p>
<p>将CSS代码集中写到HTML文档的头部标签中，并用style标记定义，一般位于head标记中的title标记之后，简而言之就是<strong>直接在THML文件中直接添加CSS样式的方式</strong>；</p>
</li>
<li>
<p><strong>嵌入式</strong></p>
<p>是将所有的样式放在一个或多个以CSS为拓展名的外部样式表文件中，通过标记将外部样式表文件链接到HTML文件中，简而言之就是<strong>HTML文件域CSS文件单独存在，再通过Link的方式将CSS所写的样式添加到HTML中。</strong></p>
</li>
</ul>
<h2 id="3javascript网页脚本语言">3.JavaScript网页脚本语言</h2>
<p><strong>JavaScript是一种完整的网页脚本语言</strong>，<strong>有自己独立的语法</strong>，<strong>可以完成复杂的程序逻辑</strong>，<strong>而HTML和CSS仅仅是标记语言，不具备编程语言的程序逻辑</strong>。</p>
<ul>
<li>
<p><strong>JavaScript的作用</strong></p>
<p><strong>JavaScript主要负责网页的各式各样的动态功能</strong>，因此可以为用户提供更流畅美观的页面浏览效果，以及添加页面交互行为，给用户更好的视觉和使用体验。</p>
</li>
<li>
<p><strong>JavaScript的工作原理</strong></p>
<p><strong>JavaScript的工作原理是通过在HTML网页中直接嵌入JS脚本</strong>，可以实现相应浏览器时间，读写HTML元素内容，更改HTML元素样式等功能。</p>
</li>
</ul>
<h1 id="三web前端开发与http协议">三、Web前端开发与HTTP协议</h1>
<p>在软件开发架构中，Web前端开发在软件开发架构中属于C/S中的C客户端，大部分的网络通信协议底层都是基于sokect套接字实现的，使用的大部分是TCP协议，Web前端开发中使用的HTTP协议也是如此，因此缔造了特殊的C/S架构，B/S架构。</p>
<h2 id="0知识回顾socket套接字与tcp">0.知识回顾socket套接字与TCP</h2>
<p>HTTP协议位于应用层而TCP位于传输层，当消息传递到传输层时使用了socket这样一个中介，然后再基于TCP协议发送请求与获得响应。</p>
<blockquote>
<p><strong>socket是应用层与传输层中间的软件抽象层，是一组接口</strong>。在设计模式中，Socket其实就是一个门面模式，它把复杂的TCP/IP协议族隐藏在Socket接口后面。</p>
<p>对用户来说，一组简单的接口就是全部，让Socket去组织数据，以符合指定的协议。</p>
</blockquote>
<img src="https://ddsg-1314792441.cos.ap-shanghai.myqcloud.com/typora/2022-11-30-image-20200813133514981.png">
<h2 id="1编写服务器">1.编写服务器</h2>
<p>编写web前端的服务端</p>
<pre><code class="language-python">import socket

server = socket.socket()
server.bind(('127.0.0.1', 8090))
server.listen(5)
while True:
# 等待客户端连接现在是由浏览器brower充当
conn, address = server.accept()
data = conn.recv(1024)# 会有黏包现象出现，回顾黏包处理
print(data)
conn.send(b'nihao!!')
</code></pre>
<h2 id="2浏览器充当客户端访问服务端">2.浏览器充当客户端访问服务端</h2>
<p>当在python中写一个服务端，打开浏览器输入服务端的地址，连接的时<strong>显示无响应</strong>，因为想要没有支持HTTP协议。</p>
<p>HTTP就是Hyper Text Transfer Protocol（超文本传输协议）是用于从（WWW：World Wide Web，简万维网）服务器传输超文本到本地浏览器的传送协议。</p>
<p><strong>HTTP用来规定服务端和浏览器之间的数据交互的格式</strong></p>
<img src="https://ddsg-1314792441.cos.ap-shanghai.myqcloud.com/typora/2022-11-30-011145.png">
<h2 id="3编写符合http协议的服务端">3.编写符合HTTP协议的服务端</h2>
<p>（1）HTTP传输的格式</p>
<pre><code class="language-http">HTTP/1.1 200 OK
Content-Type: text/html;charset=utf-8
k1:v1
k2:v2
k3:v3

Hello
</code></pre>
<blockquote>
<p>Text 代表了固定的内容</p>
<p>html 代表文件</p>
</blockquote>
<p>（2）符合HTTP协议的服务端</p>
<pre><code class="language-python">import socket

server = socket.socket()
server.bind(('127.0.0.1', 8080))
server.listen(5)
while True:
# 等待客户端连接现在是由浏览器brower充当
conn, address = server.accept()
data = conn.recv(1024)# 会有黏包现象出现，回顾黏包处理
print(data)
conn.send(b'HTTP/1.1 200 OK\r\n\r\n')# http协议规定的格式
conn.send(b'hello!!')# 固定的真实数据
</code></pre>
<blockquote>
<p>符合HTTP协议即可传输成功</p>
</blockquote>
<img src="https://ddsg-1314792441.cos.ap-shanghai.myqcloud.com/typora/2022-11-30-092544.png">
<h2 id="4http协议是如何传递数据的">4.HTTP协议是如何传递数据的</h2>
<p>HTTP基于TCP/IP通信协议来传递数据</p>
<img src="https://ddsg-1314792441.cos.ap-shanghai.myqcloud.com/typora/2022-11-30-091530.png">
<h1 id="四http协议">四、HTTP协议</h1>
<h2 id="1四大特性">1.四大特性</h2>
<h3 id="1基于请求响应">（1）<strong>基于请求响应</strong></h3>
<blockquote>
<p><strong>客户端发送消息：请求</strong></p>
<p><strong>服务端回应：响应</strong></p>
<p><strong>基于http协议，服务端不会主动发消息</strong>，客户端发送什么请求，服务端才会返回什么响应</p>
</blockquote>
<h3 id="2基于tcpip作用于应用层之上的协议">（2）基于TCP、IP作用于应用层之上的协议</h3>
<blockquote>
<p><strong>HTTP协议属于应用层</strong></p>
</blockquote>
<h3 id="3无状态">（3）无状态</h3>
<blockquote>
<p><strong>服务端不会保存客户端的状态</strong></p>
</blockquote>
<h3 id="4无短连接">（4）无、短连接</h3>
<blockquote>
<p><strong>客户端与服务端之间不会保持连接</strong></p>
<p>websocket协议可以保持客户端与服务端保持联系，并且可以让服务端给客户端发送消息</p>
</blockquote>
<h2 id="2数据格式">2.数据格式</h2>
<h3 id="1请求格式">（1）请求格式</h3>
<img src="https://ddsg-1314792441.cos.ap-shanghai.myqcloud.com/typora/2022-11-30-015241.png">
<ul>
<li>请求首行（协议版本、协议方式）</li>
<li>请求头（一大堆<code>K:V</code>键值对）</li>
<li>换行</li>
<li>请求体（存放隐私敏感信息，并不是所有的请求方式都有请求体）</li>
</ul>
<img src="https://ddsg-1314792441.cos.ap-shanghai.myqcloud.com/typora/2022-11-30-015459.png">
<h3 id="2响应格式">（2）响应格式</h3>
<ul>
<li>响应首行（状态码、协议版本）</li>
<li>响应头（一大堆<code>K:V</code>键值对）</li>
<li>换行</li>
<li>响应体（存放给浏览器展示的数据）</li>
</ul>
<h2 id="3响应状态码">3.响应状态码</h2>
<p>用数字来表达一些文字意义，效率更高，方便管理</p>
<p>响应状态码由3位数字组成，第一个数字定义了响应的类别，</p>
<table>
<thead>
<tr>
<th>类别</th>
<th>状态</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>1XX</td>
<td>信息</td>
<td>表示服务端已经接受到请求，客户端(请求者)可以继续发送或者等待</td>
</tr>
<tr>
<td>2XX</td>
<td>成功</td>
<td>服务端发送了对应的响应（这个响应可能是客户端想要的或者不想要的，但是响应了）</td>
</tr>
<tr>
<td>3XX</td>
<td>重定向</td>
<td>需要进一步的操作以完成请求</td>
</tr>
<tr>
<td>4XX</td>
<td>客户端错误</td>
<td>请求包含语法错误或无法完成请求</td>
</tr>
<tr>
<td>5XX</td>
<td>服务端错误</td>
<td>服务器在处理请求的过程中发生了错误，服务端内部错误</td>
</tr>
</tbody>
</table>
<ul>
<li>1XX ：表示服务端已经接受到了你的请求，客户端可以继续发送或者等待</li>
<li>2XX：<strong>200 OK 表示请求成功</strong>，服务端发送了对应的响应（这个响应可能是客户端想要的或者不想要的，但是响应了）</li>
<li>3XX：<strong>302 临时重定向，304 永久重定向</strong></li>
</ul>
<blockquote>
<p>重定向：想访问网页A，但是自动跳到了网页B</p>
</blockquote>
<ul>
<li>4XX：<strong>403访问权限不够，404请求资源不存在</strong></li>
<li>5XX：服务端内部错误</li>
</ul>
<blockquote>
<p><strong>在公司中，一般会自定义更多的响应状态码，通常以10000起步</strong></p>
<p>聚合数据网站可以看到html的一些比较标准格式的html文件</p>
</blockquote>
<h1 id="五html协议">五、HTML协议</h1>
<h2 id="1简介">1.简介</h2>
<ul>
<li>HTML传输的数据类别</li>
</ul>
<p>（1）直接发送的<strong>固定的数据</strong><br>
（2）转为发送<strong>文件里面的数据</strong><br>
（3）编写HTML出现特殊的现象</p>
<p><strong>HTML超文本标记语言的特点</strong>：<strong>所见即所得</strong>（没有任何逻辑，写什么就是什么）</p>
<ul>
<li>服务端</li>
</ul>
<pre><code class="language-python">import socket

server = socket.socket()
server.bind(('127.0.0.1', 8080))
server.listen(5)
while True:
# 等待客户端连接现在是由浏览器brower充当
conn, address = server.accept()
data = conn.recv(1024)# 会有黏包现象出现，回顾黏包处理
print(data)
conn.send(b'HTTP/1.1 200 OK\r\n\r\n')# http协议规定的格式
# conn.send(b'hello!!')# 固定的真实数据
# 可以写成文件
with open(r'a.txt','rb') as f:
   conn.send(f.read())
</code></pre>
<ul>
<li>a.txt</li>
</ul>
<pre><code class="language-text"><h1>hello world</h1>
<a href="https://www.4399.com/">hello world</a>
<img src="https://ddsg-1314792441.cos.ap-shanghai.myqcloud.ora/2022-11-30-015241.png" alt="image-20221130095240748" style="zoom:77%;" />
</code></pre>
<h2 id="2html概览">2.HTML概览</h2>
<h3 id="1注释语法">（1）注释语法</h3>
<pre><code class="language-html">
</code></pre>
<h3 id="2html文档结构">（2）HTML文档结构</h3>
<pre><code class="language-html"><html>固定格式 html包裹
<head>主要放给浏览器交互的配置</head>
<body>主要给用户查看的内容</body>
</html>
</code></pre>
<ul>
<li>例子</li>
</ul>
<pre><code class="language-html"><!DOCTYPE html> 
<html lang="en"> 
<head>
<meta charset="UTF-8">
   <title>共享单车战士</title>
         <style>
            h1{
               color: red;
            }
         </style>
</head>
<body>
<h1>周日打羽毛球</h1>
</body>
</html>
</code></pre>
<img src="https://ddsg-1314792441.cos.ap-shanghai.myqcloud.com/typora/2022-11-30-115132.png">
<h3 id="3html标签分类1">（3）HTML标签分类1</h3>
<blockquote>
<p><strong><code><></code>称为标签</strong></p>
</blockquote>
<h4 id="1单标签自闭和-标签">1）单标签（自闭和标签）</h4>
<pre><code class="language-html"><img/>
</code></pre>
<h4 id="2双标签">2）双标签</h4>
<pre><code class="language-html"><h1></h1>
</code></pre>
<h2 id="3html补充">3.HTML补充</h2>
<p>（1）<strong>网页信息数据一般也会存放在文件中，以<code>.html</code>结尾</strong></p>
<p>（2）pycharm支持前端所有类型的文件编写，内置有自动补全的功能，只需要专注于补全标签名的编写</p>
<p>（3）pycharm内有<strong>通过浏览器打开<code>html</code>文件的功能</strong></p>
<p><img src="https://ddsg-1314792441.cos.ap-shanghai.myqcloud.com/typora/2022-11-30-105454.png"></p>
<h1 id="六head内容常见标签">六、head内容常见标签</h1>
<h2 id="1title网页小标题">1.title网页小标题</h2>
<img src="https://ddsg-1314792441.cos.ap-shanghai.myqcloud.com/typora/2022-11-30-105730.png">
<h2 id="2meta定义网页源信息配置">2.meta定义网页源信息(配置)</h2>
<p><img src="https://ddsg-1314792441.cos.ap-shanghai.myqcloud.com/typora/2022-11-30-030809.png"></p>
<pre><code class="language-html"><meta name="keywords" content="查询关键字">
<meta name="description" content="网页简介">
</code></pre>
<h2 id="3style内部支持编写css代码">3.style内部支持编写CSS代码</h2>
<ul>
<li>例：改变颜色</li>
</ul>
<pre><code class="language-html"> <style>
   h1{
         color: red;
   }
</style>
</code></pre>
<h2 id="4link引入外部css文件">4.link引入外部CSS文件</h2>
<p>可以支持本地css文件，也可以连接外部css文件</p>
<ul>
<li>html文件内</li>
</ul>
<pre><code class="language-html"><link rel="stylesheet" href="mycss.css">
</code></pre>
<ul>
<li>mycss.css</li>
</ul>
<pre><code class="language-css">h1 {
color: cornflowerblue;
}
</code></pre>
<p>这样可以通过外部链接css文件，来为html文件中的内容更改样式</p>
<img src="https://ddsg-1314792441.cos.ap-shanghai.myqcloud.com/typora/2022-11-30-120012.png">
<h2 id="5script">5.script</h2>
<p>可以支持内部编写js代码，也可以引入外部js文件</p>
<ul>
<li>
<p>prompt</p>
<p>制作动态弹窗</p>
</li>
</ul>
<pre><code class="language-html"><script>
prompt('今天好冷','注意添加衣服')
</script>
</code></pre>
<img src="https://ddsg-1314792441.cos.ap-shanghai.myqcloud.com/typora/2022-11-30-120322.png">
<ul>
<li>script</li>
</ul>
<p>js有自己独特的语法</p>
<pre><code class="language-javascript">console.log('hello world')
alert('冬天总会过去')
</code></pre>
<h1 id="七body内基本标签">七、body内基本标签</h1>
<h2 id="1标题内基本标签h1至h6">1.标题内基本标签h1至h6</h2>
<pre><code class="language-html"><body>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
</body>
</code></pre>
<h2 id="2段落标签">2.段落标签</h2>
<table>
<thead>
<tr>
<th>标签</th>
<th>作用</th>
</tr>
</thead>
<tbody>
<tr>
<td><code><p></code></td>
<td>包裹段落内容</td>
</tr>
</tbody>
</table>
<pre><code class="language-html"><body>
<p>三体</p>
<p>三体</p>
<p>三体</p>
<p>三体</p>
<p>三体</p>
</body>
</code></pre>
<h2 id="3其他标签">3.其他标签</h2>
<table>
<thead>
<tr>
<th>标签</th>
<th>内容</th>
</tr>
</thead>
<tbody>
<tr>
<td><code><u>下划线</u></code></td>
<td>下划线</td>
</tr>
<tr>
<td><code><i>斜体</i></code></td>
<td>斜体</td>
</tr>
<tr>
<td><code><s>删除线</s></code></td>
<td>删除线</td>
</tr>
<tr>
<td><code><b>加粗</b></code></td>
<td>加粗</td>
</tr>
</tbody>
</table>
<pre><code class="language-html"><body>
<u>下划线</u>
<i>斜体</i>
<s>删除线</s>
<b>加粗</b>
</body>
</code></pre>
<img src="https://ddsg-1314792441.cos.ap-shanghai.myqcloud.com/typora/2022-11-30-032759.png">
<blockquote>
<p><strong>相同的效果可能是不同的标签来实现的，标签不是固定的</strong></p>
</blockquote>
<h2 id="4换行与分割线">4.换行与分割线</h2>
<table>
<thead>
<tr>
<th>标签</th>
<th>内容</th>
</tr>
</thead>
<tbody>
<tr>
<td><code><br></code></td>
<td>换行</td>
</tr>
<tr>
<td><code><hr></code></td>
<td>分割线</td>
</tr>
</tbody>
</table>
<pre><code class="language-html"><br>
<p>三体</p>
<p>三体</p>
<hr>
<p>三体</p>
<p>三体</p>
</code></pre>
<img src="https://ddsg-1314792441.cos.ap-shanghai.myqcloud.com/typora/2022-11-30-033100.png">
<h2 id="5html标签分类2">5.HTML标签分类2</h2>
<h3 id="1行内标签">（1）行内标签</h3>
<p><strong>内部文本多大，就占多大</strong></p>
<blockquote>
<p>u i s b</p>
</blockquote>
<h3 id="2块级标签">（2）块级标签</h3>
<p><strong>一个文本占一行，没有内容不占行，有内容则独占一行</strong></p>
<blockquote>
<p>h系列、p</p>
</blockquote>
<h1 id="七常见符号">七、常见符号</h1>
<table>
<thead>
<tr>
<th style="text-align: center">代码</th>
<th style="text-align: center">对应内容</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center"><strong><code>&nbsp;</code></strong></td>
<td style="text-align: center"><strong>空格</strong></td>
</tr>
<tr>
<td style="text-align: center"><strong><code>&gt;</code></strong></td>
<td style="text-align: center"><strong>></strong></td>
</tr>
<tr>
<td style="text-align: center"><strong><code>&lt;</code></strong></td>
<td style="text-align: center"><strong><</strong></td>
</tr>
<tr>
<td style="text-align: center"><strong><code>&amp;</code></strong></td>
<td style="text-align: center"><strong>&</strong></td>
</tr>
<tr>
<td style="text-align: center"><strong><code>&yen;</code></strong></td>
<td style="text-align: center"><strong>¥</strong></td>
</tr>
<tr>
<td style="text-align: center"><strong><code>&copy;</code></strong></td>
<td style="text-align: center"><strong>版权</strong></td>
</tr>
<tr>
<td style="text-align: center"><strong><code>&reg;</code></strong></td>
<td style="text-align: center"><strong>注册</strong></td>
</tr>
</tbody>
</table>
<blockquote>
<p>Non-breaking Space-nbsp</p>
</blockquote>
<h1 id="八页面body内布局标签">八、页面body内布局标签</h1>
<pre><code class="language-html">div
块级标签

span
行内标签
</code></pre>
<blockquote>
<p>标签之间可以相互嵌套，并且理论上可以无限嵌套 nested</p>
<ul>
<li>
<p>块级标签内部可以嵌套块级标签和行内标签</p>
</li>
<li>
<p>行内标签内部只能嵌套行内标签</p>
</li>
</ul>
<blockquote>
<p>p标签虽然是块级标签，但是它的内部也不能嵌套块级标签</p>
</blockquote>
</blockquote>
<h1 id="九body内常用标签">九、body内常用标签</h1>
<p>标签括号内填写的 <code>XXX=XXX</code>是标签的属性</p>
<ul>
<li>属性的类型</li>
</ul>
<p>（1）默认属性：标签自带</p>
<p>（2）自定义属性：用户自定义，编写不会有提示甚至会飘颜色</p>
<pre><code class="language-html">a标签链接标签
1.href=""
（1）填写网址    有跳转功能
（2）填写页面内id值具备锚点功能
2.target
默认是_self原网页跳转
-blank新建网页跳转
img标签
1.src=""
（1）图片地址（本地地址/网页地址）
（2）填写路由
2.title
鼠标悬浮图片上，显示title数据
3.alt
   图片加载失败
4.width与height
图片的尺寸两者调整一个即可等比例缩放
</code></pre>
<h1 id="十body内其他标签">十、body内其他标签</h1>
<h2 id="1无序列表">1.无序列表</h2>
<p>ul 套 li</p>
<p>页面上所有的规则排列的横向或者竖向的</p>
<pre><code class="language-html">
<body>
<ul>
   <li>上午</li>
   <li>中午</li>
   <li>下午</li>
</ul>
</body>
</code></pre>
<h2 id="2有序列表">2.有序列表</h2>
<p>ol 套 li</p>
<pre><code class="language-html"><body>
<ol type="A">
   <li>111</li>
   <li>222</li>
   <li>333</li>
</ol>
</body>
</code></pre>
<h2 id="3标题列表">3.标题列表</h2>
<p>d1 套 dt-大标题套 dd-小标题</p>
<pre><code class="language-html"><dl>
<dt>大标题</dt>
<dd>小标题1</dd>
<dd>小标题2</dd>
</dl>
</code></pre>
<h2 id="4表格标签">4.表格标签</h2>
<p><img src="https://ddsg-1314792441.cos.ap-shanghai.myqcloud.com/typora/2022-11-30-065917.png"></p>
<pre><code class="language-html"><tableborder="4">
<thead>
   <tr>
         <th>编号</th>
         <th>姓名</th>
         <th>年龄</th>
   </tr>
</thead>
<tbody>
   <tr>
         <td>1</td>
         <td>jason</td>
         <td>18</td>
   <tr>
</tbody>
</table>
</code></pre>
<h2 id="5表单标签">5.表单标签</h2>
<p>可以获取用户的数据，并发送给服务端</p>
<h3 id="1表单标签简介">1.表单标签简介</h3>
<pre><code class="language-html"><body>
<h2>用户注册页面</h2>
<form action="">

   
   <p>用户名：
         <input type="text" name="username">
   </p>
   <p>密&nbsp;&nbsp;&nbsp;码：
         <input type="password">
   </p>
   <p>生&nbsp;&nbsp;&nbsp;日：
         <input type="date">
   </p>
   <p>邮&nbsp;&nbsp;&nbsp;箱：
         <input type="email">
   </p>
   <p>性&nbsp;&nbsp;&nbsp;别：
         <input type="radio" name="gender" value="male">男
         <input type="radio" name="gender" value="female">女
         <input type="radio" name="gender" value="other">其他
   </p>
   <p>爱&nbsp;&nbsp;&nbsp;好：
         <input type="checkbox">唱歌
         <input type="checkbox">跳舞
         <input type="checkbox">喝水
         <input type="checkbox">吃饭
   </p>
   <p>文&nbsp;&nbsp;&nbsp;件：
         <input type="file">
   </p>
   <p>多文件：
         <input type="file" multiple>
   </p>

   <p>省&nbsp;&nbsp;&nbsp;份：
         <select name="" id="">
            <option value="">北京</option>
            <option value="">广州</option>
            <option value="">上海</option>
         </select>
   </p>
   <p>pre_GF：
         <select name="" id="" multiple="multiple">
            <option value="">北京</option>
            <option value="">广州</option>
            <option value="">上海</option>
         </select>
   </p>
   <p>大段文本：
         <textarea name="" id="" cols="30" rows="10">

         </textarea>
   </p>
   <p>
         <input type="submit" value="注册">
         <input type="reset" value="刷新重置">
         <input type="button" value="自定义按钮">
   </p>

</form>
</body>
</html>
</code></pre>
<img src="https://ddsg-1314792441.cos.ap-shanghai.myqcloud.com/typora/2022-11-30-122436.png">
<p><code>input</code>标签应该有<code>name</code>属性</p>
<p>这样，在接受数据的时候，<code>name</code>属性相当于字典的键，<code>input</code>标签获得到用户数据相当于字典的值。</p>
<p>这样点击发送就会组织成字典的形式发送给服务端，这样的数据在传递给后端的时候才有明确的意义，便于对数据的进一步处理</p>
<h3 id="2基于form表单发送数据">2.基于form表单发送数据</h3>
<p>（1）用于<strong>获取用户数据的标签应含有name属性</strong>，<strong>name属性相当于字典的键</strong></p>
<pre><code class="language-html">--如
<p>用户名：
<input type="text" name="username">
</p>
</code></pre>
<p><strong>用户输入的的数据会保存到标签的value属性中</strong>，<strong>value相当于字典的值</strong></p>
<img src="https://ddsg-1314792441.cos.ap-shanghai.myqcloud.com/typora/2022-12-01-070423.png">
<p>（2）如果用户仅需要选择，不需要填写数据，那么我们需要自己先在选择的标签中填写value值</p>
<p>如果标签中没有name属性，form表单会直接忽略，不会发送</p>
<pre><code class="language-html"><input type="radio" name="gender" value="male">男

当用户选择性别后会保存
"gender" : "male"
</code></pre>
<p>（3）input标签理论上应该搭配label标签使用，但是也可以不写</p>
<p>如：b站的投诉表单中</p>
<img src="https://ddsg-1314792441.cos.ap-shanghai.myqcloud.com/typora/2022-12-01-071410.png">
<p><img src="https://ddsg-1314792441.cos.ap-shanghai.myqcloud.com/typora/2022-12-01-071339.png"></p>
<ul>
<li>input标签放在 label标签内使用</li>
</ul>
<pre><code class="language-html"><label for="d1">用户名：
<input type="text" id="d1" placeholder="请输入用户名" maxlength="30" name="username">
</label>
</code></pre>
<ul>
<li>input标签紧贴着label标签使用</li>
</ul>
<pre><code class="language-html"><label for="d1">用户名：</label>
<input type="text" id="d1" placeholder="请输入用户名" maxlength="30" name="username">
</code></pre>
<p>（4）标签的属性如果和值相等，可以不写值</p>
<pre><code class="language-html"><input type="file" multiple="multiple">
</code></pre>
<p>等价于</p>
<pre><code class="language-html"><input type="file" multiple>
</code></pre>
<p>（5）针对选择类型的标签可以提前设置默认选项</p>
<ul>
<li><code>input</code>中<code>checked="checked"</code></li>
</ul>
<p>例：默认性别为女</p>
<pre><code class="language-html"><input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female" checked>女
<input type="radio" name="gender" value="other">其他
</code></pre>
<ul>
<li><code>option</code>中<code>select</code></li>
</ul>
<p>例：默认多选中选择上广州</p>
<pre><code class="language-html"><select name="" id="" multiple>
<option value="">北京</option>
<option value="" selected>广州</option>
<option value="">上海</option>
</select>
</code></pre>
<p>（6）一些选择性的标签可以用multiple属性从单选改为复选</p>
<ul>
<li>下拉框复选</li>
</ul>
<pre><code class="language-html"><select name="" id="" multiple>
<option value="">北京</option>
<option value="" selected>广州</option>
<option value="">上海</option>
</select>
</code></pre>
<img src="https://ddsg-1314792441.cos.ap-shanghai.myqcloud.com/typora/2022-12-01-073204.png">
<ul>
<li>文件上传可以复选</li>
</ul>
<pre><code class="language-html"><input type="file" multiple name="file">
</code></pre>
<img src="https://ddsg-1314792441.cos.ap-shanghai.myqcloud.com/typora/2022-12-01-073246.png"><br><br>
来源：https://www.cnblogs.com/DuoDuosg/p/16939628.html

頁: [1]

琼殿技术论坛's Archiver

Web前端开发：前端简介与HTML协议