前端基础（day1）HTML

weixin_52545652

已于 2022-05-22 17:05:17 修改

阅读量192

点赞数 1

分类专栏：前端文章标签：前端

于 2022-05-20 21:48:42 首次发布

本文链接：https://blog.csdn.net/weixin_52545652/article/details/124812804

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTTP协议：超文本传输协议，用来规定服务端和浏览器之间的数据交互的格式。

该协议你可以不遵循，但是你写的服务端就不能被浏览器正常访问，你就自己跟自己玩，自己写客户端，用户想要使用，就下载你专门的app即可。

四大特性

（1）基于请求响应

（2）基于TCP/IP作用于应用层之上的协议

（3）无状态（不保存用户的信息）

由于HTTP协议是无状态的，所以后续出现了一些用来记录用户状态的技术，cookie、session、token...

(4)无/短链接：请求一次响应一次，之后没有任何链接与关系。

长链接：双方建立连接之后默认不断开，websocket。

请求数据格式：

请求首行（标识HTTP协议，当前请求方式）

请求头（一大堆k、v键值对）

(重要)

请求体（并不是所有的请求方式都有，get没有、post有，存放的是post请求提交的敏感数据）

响应数据格式

响应首行（标识HTTP协议，响应状态码）

响应头（一大堆k、v键值对）

(重要)

响应体（返回给浏览器展示给用户的数据）

响应状态码：用一串简单的数字来表示一些复杂的状态或者描述信息。

1xx：服务端已经成功接受到你的数据正在处理，你可以继续提交额外的数据。

2xx：服务端成功响应了你想要得数据（200 ok请求成功）。

3xx：重定向（当你在访问一个需要登录之后才能看的页面，你会发现会自动跳转到登录页面）。

4xx：请求错误。404：请求资源不存在。403：当前的请求不合法或者不符合访问资源的条件。

5xx：服务端内部错误（500）。

请求方式：

（1）get请求：朝服务端要数据

（2）post请求：朝服务端提交数据

url统一资源定位符，网址。

HTML简介：超文本标记语言。想要浏览器渲染出你的页面，就要遵循HTML语言。

浏览器看到的页面，内部其实就是HTML代码（所有的网站内部都是HTML代码）。

# 注释
<!--单行注释-->

<!--
多行注释1
多行注释2
多行注释3
-->

# 由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找
<!--导航条开始-->
导航条所有的html代码
<!--导航条结束-->

<!--左侧菜单栏开始-->
左侧菜单栏的HTML代码
<!--左侧菜单栏结束-->

HTML文档结构

<html>
    <head></head>:head内的标签不是给用户看的，而是定义一些配置，主要是给浏览器看的
    <body></body>：body内的标签，写什么浏览器就渲染什么，用户就能看到什么
</html>

标签的分类：双标签、单标签（自闭和标签）

head内常用标签（书写HTML代码时，只需要写标签名，然后tab自动补全）

<title>Title</title> 网页标题
<style>
    h1{
           color: greenyellow;
      }
</style> 内部来书写css代码

<script>
        alert(123)
</script> 内部来书写js代码
<script src="myjs.js"></script> 还可以引入外部js文件

<link rel="stylesheet" href="mycss.css"> 引入外部css文件

body常用标签

<h1>我是h1</h1> 标题标签，1-6级标题

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>

<p>段落</p>
<br> 换行
<hr> 水平分割线

标签的分类

（1）块儿级标签：独占一行。（h1-h6、p、div）

1、块儿级标签可以修改长度，行内标签不可以，修改了也不会有变化。

2、块儿级标签内部可以嵌套任意的块儿级标签和行内标签，p标签是块儿标签，但是它只能嵌套行内标签，不能嵌套块儿级标签。如果你嵌套了，问题也不大，因为浏览器会自动帮你解开（浏览器是直接面向用户的，不会轻易的报错，哪怕报错用户也基本感觉不出来）。

总结：只要是快儿级标签都可以嵌套任意的块儿级标签和行内标签。但是p标签只能嵌套行内标签。

（2）行内标签：自身文本多大就占多大。（b、i、u、s、span）

总结：行内标签不能嵌套块儿级标签，但是可以嵌套行内标签。

特殊标签

 ：空格

> >

&lt；<

&&

¥￥

©©

®®

常用标签

div：块儿级标签

span：行内标签

上述的两个标签是在构造页面最常用的，页面一般用div和span占位之后再去调整样式，尤其是div使用比较频繁。

div可以把他看做一块区域，也就意味着用div来提前规定所有的区域，之后在该区域中填写内容即可。

普通文本先用span标签。

# img标签：图片标签
 <img src="" alt="" title="" height="" width="">


src：存放图片的地址，可以本地或者网站的图片地址，。
alt：当图片没有加载出来的时候，出现的描述信息。
title：当鼠标悬停在图片上之后，出现的描述信息。
height:调整图片的高度
width:调整图片的宽度
当height和width只修改了一个时，另一个也会等比例修改。当你修改了两个参数，而且没有考虑比例的话，就会出现失真。

# a标签 链接标签
<a href="" target=""></a>
当a标签指定的网址被点击后，会出现颜色的变化。（浏览器给你记忆了）

href：
（1）放的是url，用户点击就会跳转到url页端。
（2）放其他a标签的id值。点击就可以跳转到对应的标签位置。

target:
（1）默认a标签是当前页面完成跳转，target参数默认为_self,将它修改成_blank就可以在另一页面打开。

a标签的锚点功能：eg：点击一个文本标题，页面就会自动跳转到标题对应的内容区域。

标签具有的两个重要书写

（1）id值：类似于标签的身份证号，在同一个html页面上id值不能重复。

（2）class值：该值由有点类似于面对对象里面的继承，一个标签可以继承多个class值。

列表标签

无序标签（较多）

<ul>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
    </ul>


虽然ul标签很丑，但是在页面布局的时候，只要是排版一致的几行数据基本上用的都是ul标签。

有序列表（了解）

<ol>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ol>

标题列表（了解）

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

表格标签

<table>
    <thead>    表头
    <tr>
        <td></td>    加粗
        <th></th>    正常
    </tr>
    </thead>
    <tbody></tbody> 数据
</table>


<table boder="1"> 加外边宽
<td colspan="2">aa</td> 水平方向占多行
<td rowspan="2">bb</td> 垂直方向占多行

表单标签

# 能够获取前端用户的数(用户输入的、用户选择、用户上传...),基于网络发送到后端服务器



<form action=""></form> 在该from标签内部书写的获取用户的数据都会被from标签提交给后端



action：控制数据提交给后端路径（给哪个服务器提交数据）
1.什么都不写，就默认给当前的页面所在的url提交数据。
2.写全路径。
3.只写路径后缀action="/index/",自动识别出当前服务端ip和port拼接到前面
host:port/index/


<form>
        <label for="d1"> 第一种，直接将input写在label内
            username: <input type="text" id="d1">
        </label>
        <label for="d2">password</label>  第二种，直接通过id链接即可，无需嵌套。
           <input type="text" id="d2">

</form>

input不跟label关联也没有关系。
label和input都是行内标签。


input标签，通过type属性进行修改。
text：普通文本。
password：密文。
date：日期。
submit:用来触发form表单提交数据的动作。
button：普通的按钮，本身没有功能，学完js可以使用自定义功能。
radio：单选。默认选中使用checked="checked"。但标签的属性名和属性值一样的时候可以简写。
            <input type="radio" name="gender" checked>男
            <input type="radio" name="gender" checked="checked">男
checkbox：多选。默认选中也是checked。
file：获取文件。也可以一次性获取多个。<input type="file" multiple>

hidden：隐藏当前input框。
textarea标签：获取大量文本。
            <textarea name="" id="" cols="30" rows="10"></textarea>



<input type="submit" value="提交">
<input type="button" value="按钮">
<input type="reset" value="重置">


# 能够触发form表单提交数据的按钮有：
<input type="submit" value="提交">
<button>点我</button>

# 所有获取用户输入的标签，都应该有name属性。
name就是类似于字典的key
用户的数据就是类似于字典的value

p>gender:
         <input type="radio" name="gender">男
         <input type="radio" name="gender">女
         <input type="radio" name="gender">其他
</p>

select标签，默认是单选，可以加multiple参数变成多选，默认选中selected
p>province:
            <select name="" id="">
                <option value="">广州</option>
                <option value="" selected>东莞</option>
                <option value="">深圳</option>
            </select>
</p>

（1）form表单提交数据默认是发送get请求。数据是拼接到url后面的。

（2）可以指定发送请求的方式