Day01 HTML基础及元素、HTML5、HTTP协议-CSDN博客

本文链接：https://blog.csdn.net/weixin_56036485/article/details/131177342

HTML是超文本标记语言，用于描述网页结构。前端开发的三剑客包括HTML、CSS和JavaScript。HTML元素分为块级、行内和行内块元素，可通过display属性转换。HTML5引入了Canvas绘图、语义化标签、新的表单元素等特性，增强了表单验证和用户体验。HTTP协议规定了客户端和服务器之间的数据交换格式。

摘要由CSDN通过智能技术生成

1.html文件可以以htm或html为后缀

以前操作系统支持文件字符长度不超过3位,如果后缀为html网站服务器是解析不出来的,

2.HTML(HyperText Markup Language)超文本标记语言

HTML 是用来描述网页的一种语言
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

3.前端三要素(三剑客)

html 网页布局 标签 
css  层叠样式表 主要修饰html文档 给木偶化妆 穿衣服 
js	用于和网页动态交互 事件 请求数据

4.html语法:

1.注释 <!-- --> 便于代码阅读和维护 解释说明 
2.HTML标签的公有属性  id class style title 
3.空白语法 无数个空格会被浏览器解析为一个 
4.字符实体

在这里插入图片描述

5.元素分类

1.块级元素
常见的块元素：div h1~h6 p section header footer nav article body html hr 列表标签（ol ul li dl dt dd）firgure details figcaption table
特点：
     1.独占一行
     2.宽度默认100%
     3.可以通过css属性设置宽高
     4.高度由内部内容决定 -->
     
2.行内元素 
常见的行内元素：span、input、img、a、lable、input（行内替换元素）、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button（默认display：inline-block）
注意：button、input、 textarea、select、 img属于行内替换元素
特点：
     1.与其他行内元素共享一行
     2.高度由内部内容决定
     3.无法通过css属性设置宽高
     4.无法自动换行
   	 5.不建议行内元素嵌套块级元素
   	 6.默认宽度是本身内容宽度
	 7.行内元素的paddding可以设置
     8.margin只能够设置水平方向的边距，即：margin-left和margin-right，设置margin-top和margin-bottom无效
     
3.行内块元素
常见行内块元素:img、input 、td
特点:
     综合块级元素与行内元素的特性，可设宽高（默认是内容宽高），也可以设置内外边距

4.标签之间的转换
display：inline（转为行内元素）/inline-block（转为行内块元素）/block（转为块元素）/none（隐藏不显示）

注意：当元素浮动（float）时会转化成行内块元素特点。

6.HTML5新增特性，HTML5新增表单以及新增表单属性

html5新增特性

1、Canvas绘图
2、表单元素
3、语义化标签
4、媒体元素
5、地理定位
6、拖放API
7、Web Worker
8、Web Storage
9、Web Socket
10、SVG绘图

h5新增表单元素

progress 进度条 value max
input type	
	  range 滑块 max min value step 
	  email 邮箱 提交时候会对邮箱验证 11@11 
	  tel  电话 使用pattern 做正则校验
	  url  url做校验 https://11
	  color 取色器 
	  date 日期选择器 
	  datatime-local 时间日期选择器 
	  number 数字表单元素 只允许输入一组数字

如何给输入框绑定待选列表

	<input list =" ">与<datalist id=" ">中list和id的值相同

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>给输入框绑定待选项</title>
    <base target="_self"/>
</head>
<body>
<form>
    输入你所要查询的车型：<input type="text" list="carsname">
    <!--datalist格式-->
    <datalist id="carsname">
        <option>宝马</option>
        <option>奔驰</option>
        <option>奥迪</option>
        <option>法拉利</option>
        <option>保时捷</option>
    </datalist>
</form>
</body>
</html>

h5新增表单属性

min
max
step 
list属性 给输入框绑定待选项属性 
autofocus 自动聚焦 
pattern 正则属性
required 必填项 
formaction 提交表单得服务器地址
formenctype 提交表单得数据格式
formmethod 提交表单得方式
formnovalidate 不对表单进行校验

7.HTML5文档

<!-- html注释: ctrl + /  生成h5文档: !/ 输入html:5,按tab或enter -->
<!-- 网页声明 标准得h5文档 -->
<!DOCTYPE html>
<!-- 根标签 一个网页只有一个根标签 网页得部分都写在html标签 -->
<html lang="en">
<head>
    <!-- 元数据 meta -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 选项卡标题 -->
    <title>Document</title>
<!-- <head> 标签用于定义文档的头部，是所有头部元素的容器。
     <head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。 -->
</head>
<!-- 网页主体部分  -->
<body>
    
</body>
</html>

8.HTTP协议:

超文本传输协议(HyperText Transfer Protocol)是
客户端(一般指的是浏览器)和服务器请求应答的通信协议，
客户端发送的数据会被封装成请求报文给服务器端 
请求报文:
		请求行: 请求方式、 url、协议版本( http1.1 )
		请求头: content-type 请求头格式 application/json 
		空  行: 回车 换行 分割内容 
		请求体: get请求发送的数据会携带在地址栏 post发送的数据携带请求体中
服务器端响应给客户端的数据也会被封装成响应报文
响应报文：
		响应行: HTTP协议的版本（http1.1）、响应的状态码和描述（200 OK / 500 Internal Serve Error）
		响应头: content-type:application/json
		响应体: {status:200,message:"新增成功",data:[{}],timestatmp:时间戳}