前端之HTML
前端
什么是前端？
任何直接能够跟用户打交道的交互界面都可以称为前端
软件开发架构
c/s架构
b/s架构
本质上b/s也是c/s架构
浏览器输入网址发生 了几件事
1.输入网址
2.朝服务端发送请求
3.服务器接收请求并查询浏览器想要的数据返回给浏览器
4.浏览器拿到数据展示页面
HTTP协议
超文本传输协议
客户端服务端在数据交互的时候都必须都遵循这套协议
HTML
文档结构
<!DOCTYPE html>
<html>
<head>
head存放的内容用户是看不到的，主要是给浏览器和搜索引擎看的
</head>
<body>
用户能够看见的内容都在body里面
</body>
</html>
HTML注释
<!--这是单行注释-->
<!--
这是多行注释
-->
html文件打开方式
方式一：找到该文件选择浏览器打开
方式二：pycham内自动打开
head内常用标签
<title>页面标题</title>
<style>写css代码</style>
<scripy>js代码</scripy> <!--也可以通过src属性引入外部js代码-->
<link res="" href=""> <!--通过href引入外部文件-->
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>
特殊符号
<!--空格-->
> <!--大于号-->
< <!--小于号-->
& <!--&-->
¥ <!--￥-->
© <!--版权-->
® <!--注册-->
常用标签
1.div标签：用来定义一个块级元素，并无实际的意义，主要通过css样式为其赋予不同的表现
2.span标签：用来定义行内元素，并无实际的意义，主要通过css样式为其赋予不同的表现
块级元素与行内元素的区别：
块元素是以另起一行开始渲染的元素，行内元素则不需要另起一行（块级元素可以包含行内元素或某些块级元素，但行内元素不能包含块级元素）
3.p标签：不能包含块级标签，也不能包含p标签
4.a标签：<a href='http://www.baidu.com' target='_blank'>,超链接标签，所谓的超链接是指从一个网页指向另一个目标的连接关系，这个目标可以是另一个网页，也可以相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序；还有锚点功能（回到顶部，href=#top，bottom），ps：targt属性用来控制是否在当前页面跳转，默认是self当前页，引入可以指定成blank新建页面跳转
5.img标签：<img src='图片路径' alt='图片未加载成功的提示' title='鼠标悬浮时的提示信息' width='宽' height='高' > <!--高宽只用一个就会自动缩放-->
列表标签
<!--无序列表-->
<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小写字母
I大写罗马
i小写罗马
-->
<!--标题列表-->
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
标签分类
双标签：h1~h6 p a
自闭和标签：img br hr
块儿级标签：div h1~h6 p hr br
特点：独占一行，块儿级标签能够嵌套块儿级标签和行内标签，p标签虽然是块儿级标签但是不能嵌套任何块儿级标签，块儿级标签能够设置长宽
行内标签：span a img i s b u
特点：自身内容有多大就占多大，行内标签不能设置长宽
URL:统一资源定位符
什么是URL
UPL是统一资源定位符（Uniform Resource Locator）的缩写，也被称之为网页地址，是因特网上标准的资源的地址
UPL地址由4部分组成
第一部分：协议，http://、ftp://
第二部分：站点地址，可以是域名或ip地址
第三部分：页面在站点中的目录，stu
第四部分：页面名称，例如index.html
各部分之间用'/'符号隔开
表单标签
<!--固定就以下面的格式书写-->
<table>
<thead></thead>
<tbody></tbody>
</table>
<!--
tr 一个tr表示一行
border 调整列表的边框
cellspacing 调单元格与外边框之间的距离
cellpadding 调文本与单元格之间的距离
rowsqan 垂直方向合并
colspan 水平方向合并
-->
示例
<table border="10" cellspacing="20" cellpadding="20" bgcolor="purple">
<thead >
<tr >
<th>name</th>
<th>age</th>
<th>hobby</th>
</tr>
</thead>
<tbody>
<tr>
<td>ymg</td>
<td>18</td>
<td rowspan="1">sleep</td>
</tr>
<tr>
<td>mjj</td>
<td>28</td>
<td colspan="1">piaochang</td>
</tr>
</tbody>
</table>
所有的html标签都应该有一个id属性，用来唯一标识当前标签，为后续的DOM操作提供基础，也就意味着同一份html中标签的id不能重复，不写id属性也是可以的
form表单
功能：获取用户输入（手动输入/选择默认值），并将获取到的用户信息发送给后端
form表单中只有input的type类型为submit才会触发提交信息的动作
如果不想通过input标签来触发提交动作，那么可以直接写一个button按钮
input
通过控制type的类型从而实现不同的获取用户输入的标签样式
text：普通文本
password：密文
date：日历
radio：单选框
checkbox：多选框
file：获取文件
submit：触发提交数据的行为
button：普通的按钮
reset：重置form表单内容
select
选择框：默认是单选的，可以通过multiple参数将单选变为多选
一个option就是一个选项
textarea
获取用户大段文本
form表单中几个重要的属性
1.action：用来控制数据到底提交给谁，写url来指定提交给谁
2.form表单默认是get请求，可以通过method属性修改提交方法(get请求：获取想要的数据，post请求：提交数据)
3.form表单中需要给每一个获取用户输入的标签加上name属性用来标识当前数据的类型（你可以将name属性当作字典的key，用户输入的当作字典的value，并且可以手动设置values）
4.form表单发送文件，需要修改enctype属性的值
默认是urlencoded不支持传输文件，需要将其修改为multipart/form-data
示例
<form>
<p>username: <input type="text"></p>
<p>password: <input type="password"></p>
<p>birth: <input type="date"></p>
<p>gender:
男<input type="radio" name="gender"> <!--单选-->
女<input type="radio" name="gender">
保密<input type="radio" name="gender">
</p>
<p>hobby:
睡觉<input type="checkbox" checked name="hobby"> <!--默认勾选-->
吃饭<input type="checkbox" name="hobby">
</p>
<!--<p>单选：-->
<!--<select name="provice" id="">-->
<!--<option value="beijing">北京</option>-->
<!--<option value="shanghai">上海</option>-->
<!--<option value="shenzhen">深圳</option>-->
<!--</select>-->
<!--</p>-->
<!--<p>多选:-->
<!--<select name="" id="" multiple>-->
<!--<option value="">北京</option>-->
<!--<option value="">上海</option>-->
<!--<option value="">深圳</option>-->
<!--</select>-->
<!--</p>-->
<p>连选：
<select name="" id="">
<optgroup label="北京">
<option value="">昭阳区</option>
<option value="">海淀区</option>
<option value="">昌平区</option>
</optgroup>
<optgroup label="上海">
<option value="">浦东新区</option>
<option value="">静安区</option>
<option value="">徐汇区</option>
</optgroup>
<optgroup label="深圳">
<option value="">南山区</option>
<option value="">宝安区</option>
<option value="">福田区</option>
</optgroup>
</select>
</p>
<p>info:
<input type="file" >
</p>
<input type="submit">
<input type="button">
<input type="reset">
<button>button按钮</button>
