前端学习一篇就够（基础篇）

简易性：超⽂本标记语⾔版本升级采⽤超集⽅式，从⽽更加灵活⽅便。
可扩展性：超⽂本标记语⾔的⼴泛应⽤带来了加强功能，增加标识符等要求，超⽂本标记语⾔采取⼦类元素的⽅式，为系统扩展带来保证。
平台⽆关性：虽然个⼈计算机⼤⾏其道，但使⽤MAC等其他机器的⼤有⼈在，超⽂本标记语⾔可以使⽤在⼴泛的平台上，这也是万维⽹（WWW）盛⾏的另⼀个原因。
通⽤性：另外，HTML是⽹络的通⽤语⾔，⼀种简单、通⽤的全置标记语⾔。它允许⽹⻚制作⼈建⽴⽂本与图⽚相结合的复杂⻚⾯，这些⻚⾯可以被⽹上任何其他⼈浏览到，⽆论使⽤的是什么类型的电脑或浏览器。

CSS (Cascading Style Sheets) 层叠样式表，是⼀个⽤于修饰⽂档（可以是标记语⾔HTML，也可以是XML或者SVN）的语⾔，可以将⽂档以更优雅的形式呈现给⽤户。

2.2 结构，表现，⾏为？

结构：HTML⽤于描述⻚⾯的结构
表现：CSS⽤于控制⻚⾯中元素的样式
⾏为：JavaScript⽤于响应⽤户操作

2.3HTML文档结构

<!-- H5⽂档类型（ HTML document）说明该⽂档为Html5⽂档 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- ⽤来声明当前⽂档的编码⽅式为utf-8 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2.4字符实体

6.26 学习总结——基础标签的使用

-h标签

<h1>这是⼀个h1标签</h1>

-p标签：表示⼀个段落

-br标签：换行

-hr标签：分割线

- img标签：图片显示

<img src=" " alt=" ">

<img src="图⽚的url或本地路径地址" alt="图片不显示时的文字" width="100px"height="100px" title="">

-a标签：页面跳转

<a href="指定需要跳转的⽬标界⾯">需要展现给⽤户查看的内容</a>

<a href="https://www.baidu.com" target="_blank" title="百度">百度⼀下</a>

<a href="mailto:name@email.com">Email</a>

-base标签：来统⼀指定当前⻚⾯中所有的a标签需要如何打开，写在head中

<head>

<meta charset="UTF-8">

<base target="_blank">

</head>

-假链接:点击之后不需要跳转的链接我们称之为假链接.

<a href="#">回到顶部</a>

<a href="javascript:">不会⾃动回到⻚⾯的顶部</a>

锚点

<a href="#center">跳转</a>

<br>

<p id="center">我是中部</p>

<br>

<br>

6.27 学习总结——列表和表格

1.功能元素

1.1 列表标签

1.1.1无序列表

快捷写法：ul>li*3

无序列表样式:

disc 默认值实⼼圆
circle 空⼼圆
square 实⼼⽅块

<!-- 无序列表 -->
    <ul>
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
    </ul>

1.1.2有序列表

有序列表样式：

<ol type="A"></ol>

1 默认值。数字有序列表。（1、2、3、4）

a 按字⺟顺序排列的有序列表，⼩写。（a、b、c、d）

A 按字⺟顺序排列的有序列表，⼤写。（A、B、C、D）

i 罗⻢字⺟，⼩写。（i, ii, iii, iv）

I 罗⻢字⺟，⼤写。（I, II, III, IV）

    <ol>
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
    </ol>

1.1.3定义列表

作用：

做⽹站尾部的相关信息
做图⽂混排

<dl>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
</dl>

1.2 表格标签

表格属性：

宽度和⾼度的属性

可以给table标签和td标签使⽤

水平和垂直属性

其中⽔平对⻬可以给table标签和tr标签和td标签使⽤，垂直对⻬只能给tr标签和td标签使⽤.
水平对齐 align: left center right
垂直对齐 valign: top mid bottom

外边距和内边距的属性

只能给table标签使⽤

cellspacing外边距就是单元格和单元格之间的距离, 我们称之为外边距默认情况下单元格和单元格之间的外边距的距离是2px
cellpadding内边距就是单元格的边框和⽂字之间的间隙, 我们称之为内边距

细线表格的制作⽅式

给table标签设置bgcolor="black"，cellspacing = "1px"
给tr标签设置bgcolor="whitecaption作⽤: 指定表格的标题

完整表格

caption作⽤: 指定表格的标题
thead作⽤: 指定表格的表头信息
tbody作⽤: 指定表格的主体信息
tfoot作⽤: 指定表格的附加信息

单元格合并

水平方向：<td colspan="2"></td>

垂直方向：<td rowspan="2"></td>

<table>
        <tr>
            <td>name</td>
            <td>age</td>
            <td>sex</td>
        </tr>
</table>

1.3 form表单

<form action="提交的服务器接⼝地址">
      <表单元素>
</form>

 <form action="">
        <fieldset>
        <legend>请登录</legend>
         账号:<input type="text"><br>
         真实姓名 <input type="text" name="name" placeholder="name">
         密码:<input type="password">
        <input type="submit">
        </fieldset>
 </form>

    <!-- 明⽂输⼊框 -->
    <input type="text" name="account" placeholder="请输⼊⽤户名">
    <!-- 暗⽂输⼊框 -->
    <input type="password" name="password" placeholder="请输⼊密码">
    <!-- 复选框 -->
    <input type="checkbox" name="agree" value="agree">
    <!-- 单选框 -->
    <input type="radio" name="sex" value="male">男
    <input type="radio" name="sex" value="female">女
    <!-- 按钮 -->
    <input type="button" value="登录">
    <!-- 按钮 -->
    <input type="reset" value="重置">
    <!-- 按钮 -->
    <input type="submit" value="提交">
    <!-- 按钮 -->
    <input type="reset" value="重置">

文字与标签绑定

 <label for="girl">
         <input id="girl" type="radio" name="sex" value="girl">女
 </label>

6.28 学习总结——列表与HTTP

1.下拉列表


 <optgroup>
            <option value="1">苹果</option>
            <option value="2">橘子</option>
            <option value="3">香蕉</option>
</optgroup>

2.特殊表单

<!-- 可以⾃动校验输⼊的内容是否符合邮箱的格式 -->
-域名 <input type="url">
 <!-- 可以⾃动校验输⼊的内容是否是URL地址 -->
-数字 <input type="number">
 <!-- 输⼊框中只能输⼊数字 -->
-时间 <input type="date">
 <!-- 可以通过⽇历来选择时间 -->
-颜⾊ <input type="color">

3.Http协议

HTTP是⼀种能够获取如 HTML 这样的⽹络资源的 protocol(通讯协议)。它是在 Web 上进⾏数据交换的基础，是⼀种 client-server 协议，也就是说，请求通常是由像浏览器这样的接受⽅发起的。

HTTP被设计于20世纪90年代初期，是⼀种可扩展的协议。它是应⽤层的协议，通过TCP，或者是TLS－加密的TCP连接来发送，理论上任何可靠的传输协议都可以使⽤。因为其良好的扩展性，时⾄今⽇，它不仅被⽤来传输超⽂本⽂档，还⽤来传输图⽚、视频或者向服务器发送如HTML表单这样的信息。HTTP还可以根据⽹⻚需求，仅获取部分Web⽂档内容更新⽹⻚。

HTTP报⽂的分类有两种：请求报⽂和响应报⽂。顾名思义，请求报⽂就是客户端向服务端发送请求的信号，响应报⽂就是服务端响应处理后回传给客户端的信号。

3.1请求报文

HTTP 请求报⽂由四部分组成，分别是请求⾏、请求头、空⾏和请求体，其中空⾏也是组成部分之⼀，作⽤是进⾏分隔，必不可少。

3.2请求行

第⼀⾏为请求⾏，由请求⽅法、URI和HTTP协议版本3个字段组成，它们之间⽤空格分隔，最后以回⻋和换⾏符结尾进⾏内容分割，表示接下来的内容（下⼀⾏开始的）不是请求⾏的内容。举例，GET /index.phpHTTP/1.1，GET是请求⽅法，/index.php是URL，HTTP/1.1表示使⽤的HTTP版本为1.1。

略略略ls

关注

16
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
前端学习一篇就够（基础篇）

前端环境搭建、插件安装初识HTMLHTML文档结构HTML是HyperText Markup Language(超⽂本标记语⾔)简易性：超⽂本标记语⾔版本升级采⽤超集⽅式，从⽽更加灵活⽅便。可扩展性：超⽂本标记语⾔的⼴泛应⽤带来了加强功能，增加标识符等要求，超⽂本标记语⾔采取⼦类元素的⽅式，为系统扩展带来保证。平台⽆关性：虽然个⼈计算机⼤⾏其道，但使⽤MAC等其他机器的⼤有⼈在，超⽂本标记语⾔可以使⽤在⼴泛的平台上，这也是万维⽹（WWW）盛⾏的另⼀个原因。
复制链接

扫一扫