前端基础学习（1） HTML基本概念 HTML标签
一、今日内容
- 前端基本介绍
- HTML基本结构
- HTML标签
二、前端基本介绍
前端的学习路径主要包含HTML、CSS、JavaScript、jQuery、bootstrap、django、crm等；
我们日常使用的浏览器，本质上就是一个客户端，能够与服务器的socket服务端连接交换数据；URL（Uniform Resource Locator），即统一资源定位器，就是我们日常在浏览器地址栏输入的内容，经过DNS解析可以变成特定的服务端IP，从而完成浏览器的访问功能；我们将浏览器的动作定义为：
- 请求：浏览器中socket客户端给服务端发消息；
- 响应：服务端socket给客户端回复消息；
我们可以创建一个socket服务端，来亲自感受一下浏览器客户端与socket客户端的连接：
import socket
sk = socket.socket()
sk.bind(('127.0.0.1', 9000))
sk.listen()
while True:
conn, addr = sk.accept()
msg = conn.recv(1024).decode('utf-8')
print(msg)
# 响应格式：b'HTTP/1.1 200 ok
'后面再加上内容
conn.send(b'HTTP/1.1 200 ok
')
conn.send(b'hello')
conn.close()
sk.close()
运行server.py后，我们打开浏览器，在地址栏输入：http://127.0.0.1:9000/，显示如下：
并且我们的服务端也接收到了浏览器客户端发来的请求：
而在现实中，我们一般不会只在网页放置简单的text文本，所以平时需要将网页的html代码（Hyper Text Markup Language，超文本标记语言）放置在.html文件中，socket服务端读取.html文件并将文件发送至浏览器客户端，浏览器完成解析后显示在浏览器页面中。所以这时我们的socket服务端需要这么写：
import socket
sk = socket.socket()
sk.bind(('127.0.0.1', 9000))
sk.listen()
while True:
conn, addr = sk.accept()
msg = conn.recv(1024).decode('utf-8')
print(msg)
conn.send(b'HTTP/1.1 200 ok
')
with open('1.html', mode='rb') as file_handler:
r = file_handler.read()
conn.send(r)
conn.close()
sk.close()
三、HTML基本结构
.html文件的基本格式如下：
<!--基本格式-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
</head>
<body>
<!--主要内容-->
</body>
</html>
其中：
<!DOCTYPE html>声明本文件为一个.html文件；<html lang="en">声明语言为英语；<head></head>定义HTML的开头部分，它包含的内容不会再浏览器页面中直接显示，主要包含文档的元数据、配置信息等；<meta>即元数据，定义了网页的元数据，<meta charset="UTF-8">即声明网页的编码方式为UTF-8，如不声明网页编码方式，可能会出现乱码，尤其是中文网页；<body></body>是文本可见的网页主体内容；<!--content-->为注释内容，注释的内容不会在网页上显示出来；
四、HTML标签
HTML标签是由尖括号包围的关键字，如<html>，<div>等；HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。也有一部分标签单是单独呈现的，标签里面可以带有若干属性，也可以不带属性；
有几个很重要的属性：
- id：定义标签的唯一ID，在HTML文档树中唯一；
- class：为HTML元素定义一个或多个类名（CSS样式类名）；
- style：规定元素的行内样式（CSS样式）；
下面介绍部分重要的标签：
-
meta标签
meta标签可提供有古纳页面的元信息，针对搜索引擎和更新频度的描述和关键词；其位于文档的头部；主要包含两个属性，分别为
http-equiv和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能；-
http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为conrent，代表各个参数的变量值；<!--表示2s后引导进入该URL--> <meta http-equiv="refresh" content="2; URL=https://www.baidu.com"> <!--表示2s刷新一次--> <meta http-equiv="refresh" content="2"> <!--指定文档的编码类型--> <meta http-equiv="content-Type" charset=”UTF8"> <!--告诉IE以最高级模式来渲染文档--> <meta http-equiv="x-ua-compatible" content="IE=edge"> -
name属性：主要用于描述网页，对应属性为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的；<!--关键字，也就是别人是可以通过这些关键字搜索到我这个文章的--> <meta name="keywords" content="meta总结, html meta, meta属性, meta跳转"> <!--文档描述，如百度页面的显示内容--> <meta name="description" content="meta总结, html meta, meta属性, meta跳转">
-
-
body中的基本标签body中标签根据其显示类型，可以主要分为：- 内敛标签（行内标签）：不独占一行，biusuttonaimg等标签属于这种类型；
- 块级标签（行外标签）：自己独占一行，h1-h6rhrpdiv等标签属于这种类型；
注意：内敛标签只能嵌套内敛标签，块级标签可以嵌套内敛和某些块级标签，p标签不可以嵌套任何标签。
表示方法 含义 标签类型 <b></b> 加粗 bolt 内敛标签 <i></i> 斜体 italic 内敛标签 <u></u> 下划线 underline 内敛标签 <s></s> 删除线 strickthrough 内敛标签 <button></button> 按钮 button 内敛标签 <span></span> 无特殊效果 内敛标签 <hr> 水平分割线 horizontal tag 块级标签 <br> 换行 break 块级标签 <h1></h1> 一级标题 heading 块级标签 <h2></h2> 二级标题 heading 块级标签 <h3></h3> 三级标题 heading 块级标签 <h4></h4> 四级标题 heading 块级标签 <h5></h5> 五级标题 heading 块级标签 <h6></h6> 六级标题 heading 块级标签 <p></p> 段落（行间距与普通换行越有不同） paragraph 块级标签 <div></div> 层（无特殊效果） division 块级标签 下面再详细介绍几个标签：
-
img标签
即图片标签，为内敛标签；主要使用格式为：
<img src="" alt="" title="" width="" height="">，其中：- src属性可以是网络位置也可以是相对路径，但不可以是绝对路径；
- alt(alternative)属性是加载过程中的文字解释，可以为空；
- title是鼠标悬停时对图片的介绍；
- width和height分别表示图片的宽度和高度；
-
a(anchor)标签
即链接标签，为内敛标签；主要使用格式为：
<a href="" target="_blank"></a>，其中：- herf（hypertext reference）属性时链接指向的地址；
- 将target设置为
"_blank"可以新开窗口； - 将target设置为
"_self"即默认状况为在当前窗口打开；
-
无序列表标签
为块级标签，主要使用格式为：
<ul> <li>第一项</li> <li>第二项</li> </ul>其中ul(unorder list)的type属性可以设置为：
- disc：实心远点；
- circle：空心圆圈；
- square：实心方块；
- none：无样式；
-
有序列表标签
为块级标签，主要使用格式为：
<ol> <li>第一项</li> <li>第二项</li> </ol>其中ol(order list)的type属性可以设置
"a"、"1"、"Ⅰ"等，表示列表的序列表示方法；与之对应的start属性可以设置为"b"等，表示列表从b开始； -
标题列表标签
为块级标签，主要使用格式为：
<dl> <dt>第一项</dt> <dd>第二项</dd> </dl>其中dt(defined title)子标签为自定义列表标题，dd(defined detail)子标签为自定义详情；
-
表格标签
为块级标签，主要使用格式为：
<table border="1" cellpadding="10" cellspacing="10"> <thead> <tr> <th>真</th> <th>讷</th> <th>到</th> </tr> </thead> <tbody> <tr> <th>真</th> <th>讷</th> <th>到</th> </tr> <tr> <th>大壮</th> <th>抽烟</th> <th>喝酒</th> </tr> </tbody> </table>其中table的属性主要包含：
- border：表示边框的粗细；
- cellpadding：表示表格内元素与表格边框的距离；
- cellspacing：表示表格最外层边框的厚度；
thead子标签表示表头；tbody子标签表示表身；tr(table row)子标签表示每一行；th(table header cell)子标签表示每一个表格内元素；
-
form标签
又称为表单标签，是一种较为复杂的标签，其中夹杂着许多其他标签的应用，其基本使用格式为：
<form action="http://127.0.0.1:9000"> <textarea name="" cols="30" rows="10"></textarea> <hr> <label for="username">用户名</label> <input id="username" type="text" name="username" value="耳机"> <label> 密码：<input type="password" name="password" value="耳耳耳耳机" disabled> </label> 男<input type="radio" name="sex" value="1" readonly> 女<input type="radio" name="sex" value="2"> 抽烟<input type="checkbox" name="hobby" value="a"> 喝酒<input type="checkbox" name="hobby" value="b" checked="checked"> 烫头<input type="checkbox" name="hobby" value="c" checked> <button>提交耳机</button> <input type="submit"> <hr> <input type="date"> <input type="button" value="叶斯摩拉"> <input type="reset"> <input type="hidden"> <input type="file"> <input type="submit"> <select name="name" id="" multiple> <option value="1" selected>耳机</option> <option value="2">叶斯摩拉</option> <option value="3">猕猴桃</option> </select> 按住CTRL多选 </form>其action属性代表表单提交路径；并且其中包含多个标签，主要为：
-
input标签
主要代表表单的输入，是浏览器客户端和服务端交流的工具，主要包含以下几种：
<!--1.text纯文本--> 用户名：<input id="username" type="text" name="username" value="耳机"> <!--2.password密码--> 密码：<input type="password" name="password" value="耳耳耳耳机" disabled> <!--3.radio单选--> 男<input type="radio" name="sex" value="1" readonly> 女<input type="radio" name="sex" value="2"> <!--4.checkbox多选--> 抽烟<input type="checkbox" name="hobby" value="a"> 喝酒<input type="checkbox" name="hobby" value="b" checked="checked"> 烫头<input type="checkbox" name="hobby" value="c" checked> <!--5.submit提交--> <input type="submit"> <!--6.date日期--> <input type="date"> <!--7.button提交2--> <input type="button" value="叶斯摩拉"> <!--8.reset重置--> <input type="reset"> <!--9.hidden隐藏--> <input type="hidden"> <!--10.file文件--> <input type="file">在浏览器页面中分别显示为：
其中属性主要包含：
- name为名称标记，即表单提交的键；
- value为表单提交时对应项的值，如button为按钮显示的内容，text为输入框的初始值，而checkbox和radio为提交表单所选值的标记；
- id为input元素的唯一标识，方便label标签标记；
- checked为默认的选中项；
- readonly为只读（对radio和checkbox不生效）；
- disabled为废除；
-
typearea多行文本标签
主要使用方式为：
<textarea name="" cols="30" rows="10"></textarea>，其在浏览器页面中显示如下：
其中cols表示列，row表示行；
-
select标签
主要使用方式为：
<select name="city" id="city"> <option value="1">北京</option> <option selected="selected" value="2">上海</option> <option value="3">广州</option> <option value="4">深圳</option> </select>其在浏览器页面中显示如下：
也可以将在select标签中添加multiple标签，完成多选下拉菜单，在多选时按住CRTL键多选即可；
-
-
一些常用特殊字符
特殊字符 表示方法 space < < > > & & ￥ ¥ © © ® ®