前端基础之html常用标签

前言

explore what is the root of web.web的本质是什么？

当互联网发展的不是很火热的时候，大家普遍使用的是C/S架构.例如我们下载的QQ、网易云乐音。

优势：可定制空间大，用户体验较好

劣势：需要额外下载客户端到你的设备（安全性）、客户端开发成功高、一旦添加新的新功能就需要客户端升级。（使用EF就是这种体验不断的更新客户端APP）

当浏览器发展比较成熟、普遍后出现了B/S架构。B指定是browser

优势：不需要开发客户端、用户设备只需要1个浏览器就ok

劣势：无法扩展更多的新功能

html是什么？

在B/S架构，server服务端和browser之间使用超文本传输（HTTP）协议进行交互。

HTTP协议规定了：

Browser应该怎么请求Server

Server应该使用什么数据格式到Browser

Browser应该怎么渲染.html文件

传输过程

经过TCP三次握手建立1个TCP连接，开始http

browser向server发起 post/get/put...请求

服务端响应浏览器的请求，发送html格式的网页代码给浏览器；

客户端的浏览器接受到html网页代码后，渲染出效果给用户看。

browser端和server端通过socket，循环这个请求和响应的过程，以此建立服务端于用户之间的交互；

browser和server之间的http传输结束，经过四次挥手结束下面TCP连接。

超文本标记语言（Hypertext Markup Language，HTML）通过标签语言来标记要显示的网页中的各个部分。一套规则，浏览器认识的规则。

ps:所以HTML不是编程语言，只是按照规定的格式描述你想要描述的内容，只有数据，没有算法逻辑。

当browser接收服务端发送来的html之后，

会按照从左到右从上到下的顺序渲染网页文件，然后根据标记符解释和显示内容。但需要注意的是，对于不同的浏览器，对同一标签可能会有不完全相同的解释（这就是browser兼容性问题），网页文件以.html 或 .htm结尾。

所以我们学习的前端内容：都是围绕着使用 html/CSS/js写一个漂亮的网页，当用户的浏览器请求时我们时，响应这个漂亮的页面给用户的浏览器，再由浏览器渲染出效果呈现给用户；

package main

import (
	"fmt"
	"io/ioutil"
	"net/http"
)

func homepage(response http.ResponseWriter, request *http.Request)  {
	data,err:=ioutil.ReadFile("./templates/homepage.html")
	if err != nil {
		fmt.Printf("Do not find such file:%s","./templates/homepage.html")
		return
	}
	number,err:=response.Write(data)
	if err != nil {
		fmt.Println(err)
	}
	fmt.Println("发送数据",number)

	
}

func main() {
	http.HandleFunc("/",homepage)
	//启动服务
	err:=http.ListenAndServe("127.0.0.1:8888",nil)
	if err != nil {
		fmt.Printf("请检查address是否合法？：",err)
		return
	}

}

html结构

<!DOCTYPE html>
<html lang="en">
<head>
    <!--字符编码  -->
    <meta charset="UTF-8">
    <!-- 标题-->
    <title>Title</title>
</head>
<body>

</body>
</html>

<!DOCTYPE html> 声明该html页面，使用的编写规范；
<html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部<head>和主体<body>。
<head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。
<title></title>定义网页标题，在浏览器标题栏显示。
<body></body>之间的文本是可见的网页主体内容

html标签的格式

标签的语法：

<标签名属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>

<标签名属性1=“属性值1” 属性2=“属性值2”…… />

html的基本标签

HTML标签根据其在浏览器中显示的特征分为：

块级标签：独占一行

内联标签：根据内容大小而定

div标签：没有任何标记效果，是一张白纸。

<!DOCTYPE>标签

<!DOCTYPE> 此标签可告知浏览器该HTML文档使用哪种 HTML 或 XHTML 规范。

作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。

document.compatMode：

BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat

<head>标签

用于描述和网页相关的源数据信息

<meta>标签

META标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。

<head>
    <!--字符编码-->
    <meta charset="UTF-8">
    <!--浏览器标签页显示的标题-->
    <title>IT运维平台</title>
    <!--刷新当前网页， 2秒钟之后跳转到https://www.cnblogs.com/sss4/p/6863361.html -->
   <!--<meta http-equiv="refresh" content="2;URL=https://www.cnblogs.com/sss4/p/6863361.html"> -->
    <!--兼容IE浏览器-->
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <!--在移动端打开以屏幕大小打开 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1">
    <!--搜素引擎SEO关键词优化 -->
    <meta name="keywords" content="python,golang,html,css,javescript,上门,服务">
    <!--在搜素引擎排名之后的描述信息 -->
    <meta name="description" content="我来自........我擅长。。。。。。。">


</head>

meta标签

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

手机端网页

<body>标签

描述网页真正要渲染的内容

基本标签（块级标签和内联标签）

'''
<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.

<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.

<b> <strong>: 加粗标签.

<strike>: 为文字加上一条中线.

<em>: 文字变成斜体.

<sup>和<sub>: 上角标 和 下角表.

<br>:换行.

<hr>:水平线

特殊字符：
      &lt; &gt；&quot；&copy;&reg;

'''

<div>和<span>

<div></div> ： <div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现.
<span></span>： <span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.

块级元素与行内元素的区别
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。

图形标签: <img>

'''
src: 要显示图片的路径.

alt: 图片没有加载成功时的提示.

title: 鼠标悬浮时的提示信息.

 图片的宽

height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

'''

超链接标签(锚标签): <a> </a> 该标签可以发生 get请求到服务端，很重要

什么是超级链接？
所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上
的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序

URL

'''

<a href="" target="_blank" >click</a>

href属性指定目标网页地址。该地址可以有几种类型：

    绝对 URL - 指向另一个站点（比如 href="http://www.jd.com）
    相对 URL - 指当前站点中确切的路径（href="index.htm"）
    锚 URL - 指向页面中的锚（href="#top"）

'''

列表标签

'''
<ul>: 无序列表 [type属性：disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]

<ol>: 有序列表
         <li>:列表中的每一项.

<dl>  定义列表

         <dt> 列表标题
         <dd> 列表项

'''

表格标签: <table>

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

<table>
         <tr>
                <td>标题</td>
                <td>标题</td>
         </tr>
         
         <tr>
                <td>内容</td>
                <td>内容</td>
         </tr>
</table>

属性：

'''

<tr>: table row

<th>: table head cell

<td>: table data cell


属性:

    border: 表格边框.

    cellpadding: 内边距

    cellspacing: 外边距.

     像素 百分比.（最好通过css来设置长宽）

    rowspan:  单元格竖跨多少行

    colspan:  单元格横跨多少列（即合并单元格）

'''

练习：

--------------------------------------------------------------------------------------------------------------------------------------------------------------

表单标签 <form>

用于在前端引导用户输入数据，把收集的数据组织成字典形式，传输到服务端。

表单标签内可以嵌套的标签：input系列标签，。

from标签属性：

<input type(属性)=‘text’ > (input 是自闭合标签 ) （<form>（开始标签）+</form>（结束标签）=闭合标签）

</form>

1、from之input 输入框标签：

name属性是键；输入内容是与之对应的值；

nane属性必须定义，注意checkbox类型;必须手动设置value属性；radio类型：必须共用1个name键；

发往服务端的数据类型：name:key， checkbox类型的input：name:[key1,key2,key3]

input标签系列的类型：

test类型:文本输入框

passwd类型：密码输入框

checkbox类型：多选框

radio类型：互斥框（只能选择1个value）

--------提交表单-------------------------

button类型：一般配合js使用

submit类型：注意表单提交类型的input标签里面的value属性设置的是提交按钮显示的字,而其他类型设置的是键中的值

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>张根</title>
</head>
<body>

<form>
    <p>请输入用户名：<input type="text" name="username" ></p>
    <p>请输入密码：<input type="password" name="passwd" ></p>
    <p>文学：<input type="checkbox" name="爱好" value="somking"> 历史<input type="checkbox" value="fuck"></in></p>

    <p>性别 男 <input type="radio" name="sex"> 女 <input type="radio" name="sex"> 其他 <input type="radio" name="sex"> </p>
    <p><input type="submit" value="sub"> </p>
     <p><input type="button" value="button"> </p>
</form>
</body>
</html>

View Code

2、from之select 下拉框标签

select特性：

select下拉框标签由 select标签+option标签+optgroup组成，select里面设置name键，option里面设置value值；

select标签的属性：

name:设置键值对的键

size：默认选择个数

multiple:multiple 设置同时多选

option标签属性：

value属性：设置键值对的值

selected属性：设置这个下拉框默认选中的选项

optgroup标签属性：

把多个option组织到1组，label="组名”

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>张根</title>
 6 </head>
 7 <body>
 8 <from>
 9     <select name="china" >
10         <optgroup label="唐县.齐家佐乡"></optgroup>
11         <option value="hb">管家佐村</option>
12         <option value="hn">齐家佐村</option>
13         <option value="zj">马家峪村</option>
14 
15 
16     </select>

View Code

3、from之textarea标签：多行文本输入框

name属性：键

rows:控制文本输入框占的行数

cols:控制文本输入框占的列数

<from>
    <select name="china" >
        <optgroup label="唐县.齐家佐乡"></optgroup>
        <option value="hb">管家佐村</option>
        <option value="hn">齐家佐村</option>
        <option value="zj">马家峪村</option>
    </select>

    <textarea name="jianjie" rows="4" cols="30">
     伟
     人
     故
     乡
 </textarea>
</from>

View Code

4、from之label>标签

用来和input标绑定，绑定后，点击输入框的范围里其他区域也可以输入内容了，让用户体验更好点。

说明：
1、 label 元素不会向用户呈现任何特殊效果。
2、<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

5、from之fieldset标签

用来和input标绑定，绑定后，把输入框围起来。

'''

<fieldset>
    <legend>登录吧</legend>
    <input type="text">
</fieldset>

'''

View Code

6、susubmi和botton的区别

submit 默认有提交表单的功能

botton：(按钮)需要绑定事件