浅谈前端的HTML
浅谈前端的HTML
HTML&css&js，jq 三者关系
HTML是前端的本质，如果将前端比作 一个人的话，那么HTML就相当于这个人的骨架，也就是基本。但是一个人是不可能只有一个骨架的，所以css相当于赋予了这个人血肉。但是一个人如果一动不动的站在那里也不能算是一个完整的人，因此js和jq相当于赋予了这个人语言和动作。
html
我们之前讲过socket，socket属于c/s，即client（客户端）/server
那么b/s呢？这里的b就是浏览器，浏览器本质上也是一种客户端。我们可以直接用代码进行校验
import socket
sk = socket.socket()
sk.bind(("127.0.0.1", 8080))
sk.listen(5)
while True:
conn, addr = sk.accept()
data = conn.recv(8096)
conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
conn.send(b"<h1>Hello world!</h1>")
conn.close()
随后再浏览器中输入ip即端口号：http://127.0.0.1:8080/，会发现浏览器中打印出了hello。可见，浏览器是可以作为客户端接收信息的
什么是html
html又被称为超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言
本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
一般来说，网页文件的扩展名为 .html或.htm，其中htm是很早以前的版本，因为操作系统的关系，那个时候的后缀名只能有三个字符
但值得注意的是，HTML是一种标记语言（markup language），它不是一种编程语言，它使用标签来描述网页。
HTML文档结构
<!DOCTYPE html>
<!--告诉浏览器你应该用什么版的html去解析 -->
<!-- <html></html>中间所有的内容才是我们真正html lang="zh-CN"表示哪个国家的语言 -->
<html lang="zh-CN">
<head>
<!--<meta charset="UTF-8"> 我们html的编码格式-->
<!--<title>Title</title> 网站的标题-->
<meta charset="UTF-8">
<title>css样式优先级</title>
</head>
<body>
<!-- body之间一般是网站的主题内容 -->
</body>
</html>
<!--其中<!--表示的是注释-->
标签
标签分为俩种，一种是单标签，另一种是双标签
双标签：<html >内容</html>
单标签:<br/>
标签的属性
<div id="属性值" class="属性值" 属性名="属性值">
head内常用标签
| 标签 | 意义 |
|---|---|
| 定义网页标题 | |
| 定义内部样式表 | |
| 定义JS代码或引入外部JS文件 | |
| 引入外部样式表文件或网站图标 | |
| 定义网页原信息 |
body内常用标签
基本标签（块级标签和内联标签）
`<``b``>加粗</``b``>``<``i``>斜体</``i``>``<``u``>下划线</``u``>``<``s``>删除</``s``>` `<``p``>段落标签</``p``>` `<``h1``>标题1</``h1``>``<``h2``>标题2</``h2``>``<``h3``>标题3</``h3``>``<``h4``>标题4</``h4``>``<``h5``>标题5</``h5``>``<``h6``>标题6</``h6``>` `<!--换行-->``<``br``>` `<!--水平线-->``<``hr``>`
当然body里还可以插入超链接或者图片，我们可以用代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--行内标签-->
<!--块级标签-->
<!--标题标签-->
<h1 id="h1">我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
<h7>我是标题7</h7>
我是标题7
<!--段落标签-->
<p>我是p</p>
<p>我是p</p>
<!--a标签，链接标签 ,href="链接的地址"
target属性默认是_self,如果是self就会覆盖当前的html,
如果target属性默认是_blank，就会重新打开窗口
-->
<a href="02.html" target="_blank">首页</a>
<a href="02.html" target="_self">首页</a>
<!--锚点-->
<a href="#h1">首页</a>
<!--id属性，
id="属性值"，如果是id属性，属性值必须全页面唯一
class属性
class属性可以全局不唯一
<a class="a b c k"></a>
-->
<!--
img 图片标签
src="图片的地址"
alt="当图片不能加载的时候，就会显示，还有给搜索引擎提示我们图片的内容"
title="当我们的鼠标悬浮在图片上的时候，就会显示"
-->
<img src="http://s9.rr.itc.cn/r/wapChange/20174_1_21/a7o3k08442035758542.jpg" title="这是你们的老婆">
</body>
</html>
列表
无序列表
<ul type="disc">
<li>第一项</li>
<li>第二项</li>
</ul>
type属性：
- disc（实心圆点，默认值）
- circle（空心圆圈）
- square（实心方块）
- none（无样式）
有序列表
<ol type="1" start="2">
<li>第一项</li>
<li>第二项</li>
</ol>
type属性：
- 1 数字列表，默认值
- A 大写字母
- a 小写字母
- Ⅰ大写罗马
- ⅰ小写罗马
3.标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--无序列表标签
disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）
-->
<ul class="a" type="circle">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<!--有序列表标签
type属性：
1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
-->
<ol type="A" start="2">
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<!--标题列表-->
<!--标题1-->
<!--nie-->
<!--nei-->
<!--挑剔-->
<!--nier-->
<!--strs="23456789abcdefghik"-->
<!--5-->
<!--标题列表-->
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
<!--表格标签
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
-->
<table border="1" cellpadding="20" cellspacing="20" >
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>sex</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">egon</td>
<td>39</td>
<td>男</td>
</tr>
<tr>
<td colspan="2">egon</td>
<td>39</td>
<td>男</td>
</tr>
<tr>
<td>egon</td>
<td>39</td>
<td>男</td>
</tr>
</tbody>
</table>
</body>
</html>
特殊字符
| 内容 | 对应代码 |
|---|---|
| 空格 | |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
| 版权 | © |
| 注册 | ® |
div标签和span标签
div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
块级元素与行内元素的区别：
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
普通文本
<br>
<b>加粗</b>
<br>
<i>斜体</i>
<br>
<u>下划线</u>
<br>
<s>删除</s>
<!--换行-->
<a href="">a</a>
<br>
<a href="">a</a>
<br>
<a href="">a</a>
<!--水平线-->
<hr>
<div>我是块级</div>
<span>我是行内</span>
<span>我是行内</span>
<!--html中特殊符号-->
<span>我是 行内</span>
<!--空格 -->
<!--> >-->
<!--< <-->
<!--& &-->
<!--¥ ¥-->
<!--版权 ©-->
<!--注册 ®-->
<!--<script>-->
<!--alert("123")-->
<!--</script>-->
<hr>
<hr>
<hr>
<hr>
<hr>
1<span>
¥
版权 ©
注册 ®
</body>
</html>
form
功能
表单用于向服务器传输数据，从而实现用户与Web服务器的交互
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。
input
<input> 元素会根据不同的 type 属性，变化为多种形态。
| type属性值 | 表现形式 | 对应代码 |
|---|---|---|
| text | 单行输入文本 | <input type=text" /> |
| password | 密码输入框 | <input type="password" /> |
| date | 日期输入框 | <input type="date" /> |
| checkbox | 复选框 | <input type="checkbox" checked="checked" /> |
| radio | 单选框 | <input type="radio" /> |
| submit | 提交按钮 | <input type="submit" value="提交" /> |
| reset | 重置按钮 | <input type="reset" value="重置" /> |
| button | 普通按钮 | <input type="button" value="普通按钮" /> |
| hidden | 隐藏输入框 | <input type="hidden" /> |
| file | 文本选择框 | <input type="file" /> |
我们可以利用代码来看一下实现效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--from 的属性设置 action 是提交地址，method是提交方式，也叫请求方式
如果是传图片：enctype="multipart/form-data-->
<form action="" method="" >
<div>
用户名 <input type="text" name="user" value="123" hidden/>
</div>
<div>
密码：<input type="password" name="pwd">
</div>
<div>
性别:<input type="radio" name="sex" value="1" >男
<input type="radio" name="sex" value="0" checked >女
</div>
<div>
爱好：<input type="checkbox" name="hobbies" value="bsk" checked/>篮球
<input type="checkbox" name="hobbies" value="sing" checked />唱
<input type="checkbox" name="hobbies" value="jump"/>跳
<input type="checkbox" name="hobbies" value="rap"/>rap
</div>
<div>
头像：<input type="file" name="arator">
</div>
<input type="submit" value="登入">
<input type="reset" value="重置">
<input type="button" value="我是按钮">
</form>
</body>
</html>
select标签
select标签其实是一个下拉框，那么它在HTML中是怎么实现的呢？
<div>
<select name="city" id="city" multiple>
<option value="1" selected="selected">北京</option>
<option value="2" selected="selected">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
</div>
得到的结果就是下拉框里有option中的几个选项
textarea标签
textarea是一个多行文本。可以在指定的格子内输入任意字符，并且也可以进行下拉
<div>
<textarea name="memo" cols="300" rows="10"> jjlkjdaflsdflsadklfsdfklsdlkfsdklkl </textarea>
</div>
