首页 › 前端开发综合论坛 › 前端开发

暖暖冬日 發表於 2022-8-22 19:07:00

前端开发

<p></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>前端开发<ul><li>一、前端简介<ul><li>1.前端与后端</li><li>2.前端核心基础</li></ul></li><li>二、HTML超文本传输协议<ul><li>1.前戏</li><li>2.四大特性</li><li>3.请求数据格式</li><li>4.响应状态码</li></ul></li><li>三、HTML简介<ul><li>1.概念</li><li>2.HTML注释语法</li><li>3.HTML文件结构</li></ul></li><li>四、HTML常用标签<ul><li>1.标签简介<ul><li>1.1.标签语法</li><li>1.2.标签属性</li></ul></li><li>2.标签分类</li><li>3.head内常见标签<ul><li>meta标签<ul><li>1.meta标签介绍</li><li>2.meta标签组成</li></ul></li></ul></li><li>4.body内基本标签</li><li>5.块级标签和行内标签</li><li>6.body内基本符号</li><li>7.body内布局标签</li><li>8.body内常见标签<ul><li>8.1.a标签</li><li>8.2.img标签</li></ul></li><li>9.列表标签<ul><li>9.1.无序列表</li><li>9.2.有序列表</li><li>9.3.标题列表</li></ul></li><li>10.表格标签</li><li>11.表单标签<ul><li>11.1.表单功能</li><li>11.2.表单属性</li><li>11.3.input</li><li>11.4.select标签</li><li>11.5.label标签</li><li>11.6.textarea多行文本</li></ul></li></ul></li></ul></li></ul></div><p></p>
<h1 id="前端开发">前端开发</h1>
<h2 id="一前端简介">一、前端简介</h2>
<h3 id="1前端与后端">1.前端与后端</h3>
<p><strong>前端</strong>：与用户直接打交道的操作界面</p>
<p><strong>后端</strong>：不直接与用户打交道的内部真正执行核心业务逻辑的代码程序</p>
<h3 id="2前端核心基础">2.前端核心基础</h3>
<ul>
<li><strong>HTML</strong>：网页的骨架</li>
<li><strong>CSS</strong>：网页的样式</li>
<li><strong>JS</strong>：网页的动态</li>
</ul>
<h2 id="二html超文本传输协议">二、HTML超文本传输协议</h2>
<h3 id="1前戏">1.前戏</h3>
<ol>
<li>手写一个服务端程序</li>
<li>使用浏览器充当服务器</li>
<li>浏览器端无法直接展示服务端的响应数据</li>
<li>由于浏览器需要兼容很多服务端软件，为了实现无障碍沟通交流有了一些协议
<ul>
<li>HTTP协议、HTTPS协议、FTP协议</li>
</ul>
</li>
<li>浏览器发送的请求数据格式肯定没有问题因为是别人封装好的，问题出在我们自己写的服务端的响应数据格式</li>
</ol>
<h3 id="2四大特性">2.四大特性</h3>
<ol>
<li>基于请求响应</li>
<li>基于TCP / IP之上作用应用层的协议</li>
<li>无状态</li>
<li>无连接/短连接</li>
</ol>
<h3 id="3请求数据格式">3.请求数据格式</h3>
<ol>
<li>请求首行
<ul>
<li>请求方式：有很多种，协议名称及版本</li>
</ul>
</li>
<li>请求头
<ul>
<li>一堆k:v键值对</li>
</ul>
</li>
<li>换行</li>
<li>响应体
<ul>
<li>一般情况下就是浏览器想要展示给用户看的数据</li>
</ul>
</li>
</ol>
<h3 id="4响应状态码">4.响应状态码</h3>
<p>利用数字来表示一些复杂的情况说明（类似于暗号）</p>
<ul>
<li><strong>1XX</strong>：服务端已经接收到请求正在处理，可以继续提交或等待</li>
<li><strong>2XX</strong>：200 OK 服务端给出了相应响应</li>
<li><strong>3XX</strong>：重定向</li>
<li><strong>4XX</strong>：403请求不符合条件，404请求资源不存在</li>
<li><strong>5XX</strong>：服务端内部错误</li>
</ul>
<p>注意：在公司还会自定义更多的状态码，一般情况下从10000开始</p>
<h2 id="三html简介">三、HTML简介</h2>
<h3 id="1概念">1.概念</h3>
<p>HTML：超文本标记语言，是所有浏览器展示的页面必备的</p>
<p>浏览器展示页面：也称之为HTML页面</p>
<ul>
<li>存储HTML语言文件的后缀一般是.html</li>
<li>HTML没有任何逻辑，所见即所得</li>
</ul>
<h3 id="2html注释语法">2.HTML注释语法</h3>
<pre><code class="language-html">&lt;!--注释内容--&gt;
</code></pre>
<h3 id="3html文件结构">3.HTML文件结构</h3>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<ol>
<li>&lt; !DOCTYPE html &gt;：声明为HTML5文档</li>
<li>&lt; html &gt;&lt; /html&gt;：是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body），所有代码都必须写在html标签内部</li>
<li>&lt; head &gt;&lt; /head &gt;：定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示（一般都不是给用户看的）。包含了文档的元（meta）数据。</li>
<li>&lt; title &gt;&lt; /title &gt;：定义了网页标题，在浏览器标题栏显示</li>
<li>&lt; body &gt;&lt; /body &gt;：之间的文本是可见的网页主体内容（展示给用户看的）</li>
</ol>
<h2 id="四html常用标签">四、HTML常用标签</h2>
<h3 id="1标签简介">1.标签简介</h3>
<h4 id="11标签语法">1.1.标签语法</h4>
<ul>
<li>&lt;标签名 属性1=“属性值1” 属性2=“属性值2”……&gt;内容部分&lt;/标签名&gt;</li>
<li>&lt;标签名 属性1=“属性值1” 属性2=“属性值2”…… /&gt;</li>
</ul>
<h4 id="12标签属性">1.2.标签属性</h4>
<table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>类似于身份证号，在同一个html页面上，id值不能重复</td>
</tr>
<tr>
<td>class</td>
<td>类似于分组，多个标签可以拥有相同的class值</td>
</tr>
<tr>
<td>style</td>
<td>规定元素的CSS样式</td>
</tr>
</tbody>
</table>
<h3 id="2标签分类">2.标签分类</h3>
<table>
<thead>
<tr>
<th>标签</th>
<th>描述</th>
<th>常见标签</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>单标签</strong></td>
<td>只有一个标签</td>
<td>&lt; hr /&gt;、&lt; br /&gt;、&lt; meta /&gt;、&lt; img /&gt;、&lt; link /&gt;、&lt; input /&gt;…</td>
</tr>
<tr>
<td><strong>多标签</strong></td>
<td>有开始和结束标签</td>
<td>&lt; html&gt;&lt; /html&gt;、&lt; head&gt;&lt; /head&gt;、&lt; title&gt;&lt; /title&gt;、&lt; body&gt;&lt; /body&gt;、&lt; h1~h6&gt;&lt; /h1~h6&gt;、&lt; p&gt;&lt; /p&gt;、&lt; div&gt;&lt; /div&gt;…</td>
</tr>
</tbody>
</table>
<p>HTML标签关系可以是嵌套关系，也可以是并列关系</p>
<h3 id="3head内常见标签">3.head内常见标签</h3>
<table>
<thead>
<tr>
<th>标签</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>title</td>
<td>定义网页标题</td>
</tr>
<tr>
<td>style</td>
<td>定义内部样式表（CSS）</td>
</tr>
<tr>
<td>link</td>
<td>引入外部CSS文件</td>
</tr>
<tr>
<td>script</td>
<td>内部支持编写JS代码，还可以通过src属性引入外部JS文件</td>
</tr>
<tr>
<td>meta</td>
<td>通过内部属性的不同可以有很多功能</td>
</tr>
</tbody>
</table>
<h4 id="meta标签">meta标签</h4>
<h5 id="1meta标签介绍">1.meta标签介绍</h5>
<ul>
<li>meta标签可提供有关页面的元信息,针对搜索引擎和更新频度的描述和关键词</li>
<li>meta标签位于文档的头部，不包含任何内容</li>
<li>meta标签提供的信息是用户不可见的</li>
</ul>
<h5 id="2meta标签组成">2.meta标签组成</h5>
<p>meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能</p>
<ol>
<li>
<p><strong>http-equiv属性</strong>：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值</p>
<pre><code class="language-html">&lt;!--指定文档的编码类型(需要知道)--&gt;
&lt;meta http-equiv="content-Type" charset=UTF8"&gt;

&lt;!--2秒后跳转到对应的网址，注意引号(了解)--&gt;
&lt;meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"&gt;

&lt;!--告诉IE以最高级模式渲染文档(了解)--&gt;
&lt;meta http-equiv="x-ua-compatible" content="IE=edge"&gt;
</code></pre>
</li>
<li>
<p><strong>name属性</strong>: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的</p>
<pre><code class="language-html">&lt;meta name="keywords" content="填写一些关键字 提升网页被搜索的概率"&gt;
&lt;meta name="description" content="填写一些网页的简介"&gt;
</code></pre>
</li>
</ol>
<h3 id="4body内基本标签">4.body内基本标签</h3>
<table>
<thead>
<tr>
<th>标签</th>
<th>属性</th>
</tr>
</thead>
<tbody>
<tr>
<td>h1~h6</td>
<td>标题标签</td>
</tr>
<tr>
<td>p</td>
<td>段落标签</td>
</tr>
<tr>
<td>hr</td>
<td>水平分割线</td>
</tr>
<tr>
<td>br</td>
<td>换行</td>
</tr>
<tr>
<td>u</td>
<td>下划线</td>
</tr>
<tr>
<td>i</td>
<td>斜体</td>
</tr>
<tr>
<td>s</td>
<td>删除线</td>
</tr>
<tr>
<td>b</td>
<td>加粗</td>
</tr>
</tbody>
</table>
<p>注意：有很多样式，可能存在多种标签可以实现</p>
<h3 id="5块级标签和行内标签">5.块级标签和行内标签</h3>
<table>
<thead>
<tr>
<th>标签</th>
<th>描述</th>
<th>例</th>
</tr>
</thead>
<tbody>
<tr>
<td>块级标签</td>
<td>一个标签独占一行</td>
<td>h1~h6、p、hr、br…</td>
</tr>
<tr>
<td>行内标签</td>
<td>内部文本多大自身就多大</td>
<td>u、i、s、b…</td>
</tr>
</tbody>
</table>
<p>注意：</p>
<ol>
<li>
<p>块级标签是可以通过CSS调整为不独占一行</p>
</li>
<li>
<p>标签之间很多时候可以嵌套</p>
<ul>
<li>块级可以嵌套任何类型的标签</li>
<li>行内标签只能嵌套行内标签</li>
<li>p标签是块级标签，但是p标签不能包含块级标签，p标签也不能包含p标签</li>
</ul>
</li>
</ol>
<h3 id="6body内基本符号">6.body内基本符号</h3>
<table>
<thead>
<tr>
<th>内容</th>
<th>对应代码</th>
</tr>
</thead>
<tbody>
<tr>
<td>空格</td>
<td>&amp; nbsp;</td>
</tr>
<tr>
<td>&gt;</td>
<td>&amp; gt;</td>
</tr>
<tr>
<td>&lt;</td>
<td>&amp; lt;</td>
</tr>
<tr>
<td>&amp;</td>
<td>&amp; amp;</td>
</tr>
<tr>
<td>￥</td>
<td>&amp; yen;</td>
</tr>
<tr>
<td>版权©</td>
<td>&amp; copy;</td>
</tr>
<tr>
<td>注册®</td>
<td>&amp; reg;</td>
</tr>
</tbody>
</table>
<h3 id="7body内布局标签">7.body内布局标签</h3>
<table>
<thead>
<tr>
<th>布局标签</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>div标签</td>
<td>用来定义一个块级标签，并无实际的意义。主要通过CSS样式为其赋予不同的表现</td>
</tr>
<tr>
<td>span标签</td>
<td>用来定义内联(行内)标签，并无实际的意义。主要通过CSS样式为其赋予不同的表现</td>
</tr>
</tbody>
</table>
<h3 id="8body内常见标签">8.body内常见标签</h3>
<h4 id="81a标签">8.1.a标签</h4>
<p>a标签：链接标签。所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序</p>
<pre><code class="language-html">&lt;a href="http://www.oldboyedu.com" target="_blank" &gt;点我&lt;/a&gt;
</code></pre>
<ol>
<li>href属性：指定目标网页地址
<ul>
<li>绝对URL - 指向另一个站点（比如 href="http://www.jd.com）</li>
<li>相对URL - 指当前站点中确切的路径（href="index.htm"）</li>
<li>锚URL - 指向页面中的锚（href="#top"）</li>
</ul>
</li>
<li>target属性：控制是否新建页面跳转
<ul>
<li>_blank表示在新标签页中打开目标网页</li>
<li>_self表示在当前标签页中打开目标网页</li>
</ul>
</li>
</ol>
<h4 id="82img标签">8.2.img标签</h4>
<p>img标签：图片标签</p>
<pre><code class="language-html">&lt;img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)"&gt;
</code></pre>
<ul>
<li>src：图片的路径</li>
<li>alt：图片未加载成功时的提示</li>
<li>title：鼠标悬浮时提示信息</li>
<li>width：宽(宽高两个属性只用一个会自动等比缩放)</li>
<li>height：高(宽高两个属性只用一个会自动等比缩放)</li>
</ul>
<h3 id="9列表标签">9.列表标签</h3>
<h4 id="91无序列表">9.1.无序列表</h4>
<pre><code class="language-html">&lt;ul type="disc"&gt;
&lt;li&gt;第一项&lt;/li&gt;
&lt;li&gt;第二项&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
<p>type属性：</p>
<ul>
<li>disc：实心圆点，默认值</li>
<li>circle：空心圆圈</li>
<li>square：实心方块</li>
<li>none：无样式</li>
</ul>
<h4 id="92有序列表">9.2.有序列表</h4>
<pre><code class="language-html">&lt;ol type="1" start="2"&gt;
&lt;li&gt;第一项&lt;/li&gt;
&lt;li&gt;第二项&lt;/li&gt;
&lt;/ol&gt;
</code></pre>
<p>type属性：</p>
<ul>
<li>1：数字列表，默认值</li>
<li>A：大写字母</li>
<li>a：小写字母</li>
<li>Ⅰ：大写罗马</li>
<li>ⅰ：小写罗马</li>
</ul>
<h4 id="93标题列表">9.3.标题列表</h4>
<pre><code class="language-html">&lt;dl&gt;
&lt;dt&gt;标题1&lt;/dt&gt;
&lt;dd&gt;内容1&lt;/dd&gt;
&lt;dt&gt;标题2&lt;/dt&gt;
&lt;dd&gt;内容1&lt;/dd&gt;
&lt;dd&gt;内容2&lt;/dd&gt;
&lt;/dl&gt;
</code></pre>
<h3 id="10表格标签">10.表格标签</h3>
<p>表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据</p>
<p>表格基本结构</p>
<pre><code class="language-html">&lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
            &lt;th&gt;序号&lt;/th&gt;
            &lt;th&gt;姓名&lt;/th&gt;
            &lt;th&gt;爱好&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
            &lt;td&gt;1&lt;/td&gt;
            &lt;td&gt;jason&lt;/td&gt;
            &lt;td&gt;杠娘&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
            &lt;td&gt;2&lt;/td&gt;
            &lt;td&gt;Yuan&lt;/td&gt;
            &lt;td&gt;日天&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>
<p>属性：</p>
<ul>
<li>border: 表格边框.</li>
<li>cellpadding: 内边距</li>
<li>cellspacing: 外边距.</li>
<li>width: 像素 百分比.（最好通过css来设置长宽）</li>
<li>rowspan: 单元格竖跨多少行</li>
<li>colspan: 单元格横跨多少列（即合并单元格）</li>
</ul>
<h3 id="11表单标签">11.表单标签</h3>
<p>能够获取用户输入(输入、选择、上传)的数据并发送给后端服务器</p>
<pre><code class="language-html">&lt;form action="" method=""&gt;&lt;/form&gt;
</code></pre>
<ul>
<li>action属性：用于控制数据的提交地址 不写的话就是朝当前页面所在的地址提交</li>
<li>method属性：用于控制请求的方式(get\post)</li>
</ul>
<h4 id="111表单功能">11.1.表单功能</h4>
<ul>
<li>
<p>表单用于向服务器传输数据，从而实现用户与Web服务器的交互</p>
</li>
<li>
<p>表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。</p>
</li>
<li>
<p>表单还可以包含textarea、select、fieldset和 label标签</p>
</li>
</ul>
<h4 id="112表单属性">11.2.表单属性</h4>
<table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>accept-charset</td>
<td>规定在被提交表单中使用的字符集（默认：页面字符集）</td>
</tr>
<tr>
<td>action</td>
<td>规定向何处提交表单的地址（URL）（提交页面）</td>
</tr>
<tr>
<td>autoconplete</td>
<td>规定浏览器应该自动完成表单（默认：开启）</td>
</tr>
<tr>
<td>enctype</td>
<td>规定被提交数据的编码（默认：url-encoded）</td>
</tr>
<tr>
<td>method</td>
<td>规定在提交表单时所用的 HTTP 方法（默认：GET）</td>
</tr>
<tr>
<td>name</td>
<td>规定识别表单的名称（对于 DOM 使用：document.forms.name）</td>
</tr>
<tr>
<td>novalidate</td>
<td>规定浏览器不验证表单</td>
</tr>
<tr>
<td>target</td>
<td>规定 action 属性中地址的目标（默认：_self）</td>
</tr>
</tbody>
</table>
<h4 id="113input">11.3.input</h4>
<p>input元素会根据不同的 type 属性，变化为多种形态</p>
<table>
<thead>
<tr>
<th>type属性</th>
<th>表现形式</th>
<th>对应代码</th>
</tr>
</thead>
<tbody>
<tr>
<td>text</td>
<td>单行输入文本</td>
<td>&lt; input type="text" /&gt;</td>
</tr>
<tr>
<td>password</td>
<td>密码输入框</td>
<td>&lt; input type="password" /&gt;</td>
</tr>
<tr>
<td>date</td>
<td>日期输入框</td>
<td>&lt; input type="date" /&gt;</td>
</tr>
<tr>
<td>checkbox</td>
<td>复选框（多选框）</td>
<td>&lt; input type="checkbox" checked="checked" /&gt;</td>
</tr>
<tr>
<td>radio</td>
<td>单选框</td>
<td>&lt; input type="radio" /&gt;</td>
</tr>
<tr>
<td>submit</td>
<td>提交按钮</td>
<td>&lt; input type="submit" value="提交" /&gt;</td>
</tr>
<tr>
<td>reset</td>
<td>重置按钮</td>
<td>&lt; input type="reset" value="重置" /&gt;</td>
</tr>
<tr>
<td>button</td>
<td>普通按钮</td>
<td>&lt; input type="button" value="普通按钮" /&gt;</td>
</tr>
<tr>
<td>hidden</td>
<td>隐藏输入框</td>
<td>&lt; input type="hidden" /&gt;</td>
</tr>
<tr>
<td>file</td>
<td>文件选择框</td>
<td>&lt; input type="file" /&gt;</td>
</tr>
</tbody>
</table>
<p>属性说明：</p>
<ul>
<li>name：表单提交时的“键”，注意和id的区别</li>
<li>value：表单提交时对应项的值
<ul>
<li>type="button", "reset", "submit"时，为按钮上显示的文本年内容</li>
<li>type="text","password","hidden"时，为输入框的初始值</li>
<li>type="checkbox", "radio", "file"，为输入相关联的值</li>
</ul>
</li>
<li>checked：radio和checkbox默认被选中的项</li>
<li>readonly：text和password设置只读</li>
<li>disabled：所有input均适用</li>
</ul>
<h4 id="114select标签">11.4.select标签</h4>
<pre><code class="language-html">&lt;form action="" method="post"&gt;
&lt;select name="city" id="city"&gt;
    &lt;option value="1"&gt;北京&lt;/option&gt;
    &lt;option selected="selected" value="2"&gt;上海&lt;/option&gt;
    &lt;option value="3"&gt;广州&lt;/option&gt;
    &lt;option value="4"&gt;深圳&lt;/option&gt;
&lt;/select&gt;
&lt;/form&gt;
</code></pre>
<p>属性说明：</p>
<ul>
<li>multiple：布尔属性，设置后为多选，否则默认单选</li>
<li>disabled：禁用</li>
<li>selected：默认选中该项</li>
<li>value：定义提交时的选项值</li>
</ul>
<h4 id="115label标签">11.5.label标签</h4>
<p>定义：label标签为 input 元素定义标注（标记）<br>
说明：</p>
<ol>
<li>label 元素不会向用户呈现任何特殊效果</li>
<li>label标签的 for 属性值应当与相关元素的 id 属性值相同</li>
</ol>
<pre><code class="language-html">&lt;form action=""&gt;
    &lt;label for="username"&gt;用户名&lt;/label&gt;
    &lt;input type="text" id="username" name="username"&gt;
&lt;/form&gt;
</code></pre>
<h4 id="116textarea多行文本">11.6.textarea多行文本</h4>
<pre><code class="language-html">&lt;textarea name="memo" id="memo" cols="30" rows="10"&gt;
    默认内容
&lt;/textarea&gt;
</code></pre>
<p>属性说明：</p>
<ul>
<li>name：名称</li>
<li>rows：行数</li>
<li>cols：列数</li>
<li>disabled：禁用</li>
</ul><br><br>
来源：https://www.cnblogs.com/NianBai/p/16613920.html

查看完整版本: 前端开发