前端基础之HTML

一、前端简介

　　　　前端，又称Web前端。前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。前端是网页给访问网站的人看的内容和页面。是为了网页或者网页应用，使用HTML，CSS以及JS代码，用户能够看到并且和这些页面进行交流。

 

二、HTTP协议

　　　　简介

　　　　　　HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写。HTTP 协议和 TCP/IP 协议族内的其他众多的协议相同， 用于客户端和服务器之间的通信。请求访问文本或图像等资源的一端称为客户端， 而提供资源响应的一端称为服务器端。

 

 

 　　　　特点　

　　　　　　1.基于请求响应
　　　　　　服务端永远不会主动给客户端发消息 必须是客户端先发请求
　　　　　　如果想让服务端主动给客户端发送消息可以采用其他网络协议
　　　　　　2.基于TCP、IP作用于应用层之上的协议
　　　　　　3.无状态
　　　　　　无状态是指协议对于事务处理没有记忆能力，服务器不知道客户端是什么状态。即客户端发送HTTP请求后，服务器根据请求，会给我们发送数据，发送完后，不会记录信息。
　　　　　　4.无连接/短连接
　　　　　　无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接，采用这种方式可以节省传输时间。(当今多数服务器支持Keep-Alive功能，使用服务器支持长连接，解决无连接的问题)

　　　　数据格式

　　　　　　请求格式
　　　　　　请求首行(网络请求的方法)
　　　　　　请求头(一堆k:v键值对)
　　　　　　(换行符 不能省略)
　　　　　　请求体(并不是所有的请求方法都有)

　　　　　　响应格式
　　　　　　响应首行(响应状态码)
　　　　　　响应头(一堆k:v键值对)
　　　　　　(换行符 不能省略)
　　　　　　响应体(即将交给浏览器的数据)

　　　　响应状态码

　　　　　　1XX:服务端已经接受到了数据正在处理 你可以继续发送数据也可以等待
　　　　　　2XX:200 OK请求成功 服务端返回了相应的数据
　　　　　　3XX:重定向(原本想访问A页面 但是自动跳转到了B页面)
　　　　　　4XX:403没有权限访问 404请求资源不存在
　　　　　　5XX:服务器内部错误

三、HTML

　　　　　　简介

　　　　　　　　HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

　　　　　　　　超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

 

 

 

　　　　　　head内常见标签

        • title （定义网页的标题）
        • style （内部支持css代码）
        • scripts （内部支持编写JS代码以及导入外部js文件）
        • link （内部可以导入外部的CSS文件）
        • meta （定义网页源信息，keywords）

　　　　　　　　　　　　keywords（关键字搜索）

　　　　　　　　　　　　description（网页描述性信息）

 

 

 　　　　　　body内基本标签

      • h1 ~ h6 （标题）
      • p （段落）
      • u（下划线）
      • i （斜体）
      • s（删除线）
      • b （加粗）
      • br （换行）
      • hr （水平分割）

 

 

 

 

 

 

　　　　　　特殊符号

      • &nbsp；（空格）
      • &gt；（大于号）
      • &lt；（小于号）
      • &amp；（&符）
      • &yen；（￥符）
      • &copy；（版权符）
      • &reg；（注册）

　　　　　　布局标签

　　　　　　　　div（块标签）

　　　　　　　　span （行内标签）

　　　　　　　　块标签可以一直嵌套块标签以及行内标签，行内标签不能嵌套块标签。

　　　　　　　　特例：p标签虽然使一个块标签，但是不能嵌套其他标签　

 

 

 

　　　　常见标签

　　　　　　　a标签（链接标签）

　　　　　　　　用法1：通过herf属性指定的网站点击跳转，跳转的方式有两种，target=“self”（当前页面跳转，默认）target=“blank”（新开一个页面跳转）

<body>
<a href="https://www.baidu.com" >标签</a>
</body>

　　

 　　　　　　　  用法2（锚点功能）：通过herf指定标签的id点击该值即可跳到相对应的位置

 

 

<body>
<a href="#d3" id="d1">标题1</a>
<div style="background-color: greenyellow;height: 1000px"></div>
<a href="#d1" id="d2">标题2</a>
<div style="background-color: blue;height: 1000px"></div>
<a href="#d2" id="d3">标题3</a>
<div style="background-color: pink;height: 1000px"></div>
</body>

　　　　　　　　img标签（图片标签）

　　　　　　　　　　src（指定图片地址）

　　　　　　　　　　alt（编写图片加载失败后的提示信息）

　　　　　　　　　　title（编写鼠标放在图片上时出现的信息）

　　　　　　　　　　height、width（调整图片的尺寸，修改一个另一个会自动修改）

<body>
<img src="图片地址" alt="图片加载失败后信息" title="鼠标放在图片上的信息" height="图片大小">
</body>

　　　　　　

 　　　　列表标签

　　　　　　无序列表

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
	</ul>
</body>

 

 

 　　　　　　有序列表

<body>
    <ol>
    <li>111</li>
    <li>222</li>
    <li>333</li>
	</ol>
</body>

　　

 

 

 　　　　　　标题列表

<body>
  	<dl>
    <dt>标题1</dt>
      <dd>内容1</dd>
    <dt>标题2</dt>
      <dd>内容1</dd>
      <dd>内容2</dd>
	</dl>
</body>

　　

 

 

 

　　　　表格标签

　　　　　　表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
　　　　　　表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。
　　　　　　表格的结构：　

　　　　　　　　<table>　　
　　　　　　　　<thead></thead> 表头

　　　　　　　　　　<tr> 表示一行

　　　　　　　　　　<th> 表示字段内容

　　　　　　　　　　<td> 数据内容
　　　　　　　　<tbody></tbody> 表单
　　　　　　　　</table>

　　　　　　　　

<body>
<table>
    <thead>
        <tr> 
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>xk</td> 
            <td>18</td>
        </tr>
    <tr>
            <td>xzj</td>
            <td>28</td>
        </tr>
    </tbody>
</table>
</body>

　　

　　

 　　　　表格的属性

  • border: 表格边框.
  • cellpadding: 内边距
  • cellspacing: 外边距.
  • width: 像素 百分比.（最好通过css来设置长宽）
  • rowspan: 单元格竖跨多少行
  • colspan: 单元格横跨多少列（即合并单元格）

　　　　

　　　　form表单标签

　　　　　　form表单就是在网页上获取用户的数据，并发送给后端

　　　　　　input标签

　　　　　　　通过修改input标签里的type，可以使表单有不同的效果

　　　　　　　text（普通文本）

　　　　　　    password（输入的内容变成密文）

　　　　　　　date（选择日期）

　　　　　　　radio（默认可以有多个选择，并且取消不了。在每个选项里添加name属性，然后再后面外面输入选项可以变成单选，可以添加checked使某个选项变为默认值）

 

 

 

 

 

 　　　　　　checkbox（多项选择）

 

 

 

 

 

 　　　　　　email（邮箱）

　　　　　　 file（上传文件，增加参数mulitple可以上传多个文件）

　　　　　　 submit（提交按钮）

　　　　　　 button（没有任何功能的按钮，可以自定义添加功能）

　　　　　　 reset（重置页面按钮）

　　　　　　点击提交按钮时，会将数据发送到action里填写的URL地址上的服务端去，并且要填写一个method（数据的提交方式，例如get，post，put，delete，patch）

　　　　　　label标签

　　　　　　　　在代码中直接编写input会飘黄，但是不会报错，可以将input添加到label标签里，必须要搭配id，可以将整个代码放进去，也可以将提示信息放入

 

 　　　　　

　　　　　　其他标签

　　　　　　　select（下拉框标签，默认使单选，增加mulitpel参数可以变为多选）

　　　　　　　textarea （可以输入文本内容，类似于评论框）

　　　

　　　　搭建一个建议的注册页面

<body>
<h1>注册</h1>
<form action="">
   <p> <label for="d1">用户名</label>
       <input type="text" id="d1"><p>
    <p>密码:<input type="password"><p>
    <p>生日:<input type="date"><p>
    <p>
    性别:<input type="radio" name="性别" checked>男
        <input type="radio" name="性别">女
    <p>
    <p>
    <checkbox>
        爱好:
        <input type="checkbox" checked> 学习
        <input type="checkbox">玩
    </checkbox>
    </p>
    <p>
        邮箱:<input type="email">

    </p>

    <p>
        <select name="" id="" >
            <option value="">A</option>
            <option value="">B</option>
            <option value="">C</option>
        </select>
    </p>
    <p>
        建议:<textarea name="" id="" cols="30" rows="10"></textarea>
    </p>
    <p>
        <input type="file" multiple>
    </p>
     <p>
         <input type="submit" value="提交">
         <input type="button" value="按钮">
         <input type="reset" value="重置页面">


    </p>
</form>


</body>

 

 

　

 

posted @ 2022-01-19 21:06  椰子皮0oo0  阅读(167)  评论(0)    收藏  举报
1