HTML基础

2019-03-15

学习前端需要学习三大块

1
2
3

- HTML：（学习一套规则）在前端展示
- CSS：样式，给前端页面化妆
- JS：前后台交互、增加动作

HTML基础

html头部信息

1
2
3

<!DOCTYPE html>

指定标准的HTML代码

标签

- 自闭和标签
<meta charset="utf-8">
- 主动闭合标签
<title>Title</title>

head

概述

1	head标签中的大部分标签都是不可见的

title：页面名
1
<title>Title</title>

mata标签

- charset：配置HTML字符集
<meta charset="utf-8">

- http-equiv：自刷新页面，每隔1s刷新
<meta http-equiv="refresh" content="1"/>

- http-equiv：自刷新页面，1秒后跳转到百度页面
<meta http-equiv="refresh" content="1;http://www.baidu.com"/>

- name="keywords"：关键字检索
<meta name="keywords" content="大树">

- name="description"：网站的描述
<meta name="description" content="大树的博客">

link标签

- rel="shortcut icon"：头像标签，左上角的小图标
<link rel="shortcut icon" href="https://raw.githubusercontent.com/gengzongyuan/imagePackage/master/imagePackage/2572206-f3e701ae84a2dfd1.png"/>

- rel="stylesheet"：指定要链接的功能，后续介绍
<link rel="stylesheet" href=""/>

body

a：超链接标签

- href:指定跳转到的网址
	<a href="http://www.baidu.com">跳转百度</a>
- target：是否新建一个页面
	<a href="http://www.baidu.com" target="_blank">跳转百度-新建页面</a>

img：图片标签

- src：指定连接
	<img src="https://raw.githubusercontent.com/gengzongyuan/imagePackage/master/imagePackage/2572206-f3e701ae84a2dfd1.png"/>
- alt:当图片加载失败后显示的文字
	<img alt="图片加载失败···" src="https://upload-iages.jianshu.io/upload_images/2572206-f3e701ae84a2dfd1.png"/>
- title:鼠标悬浮时显示的文字
	<img title="鼠标悬浮时显示的文字" src="https://raw.githubusercontent.com/gengzongyuan/imagePackage/master/imagePackage/2572206-f3e701ae84a2dfd1.png"/>

p标签：文案标签，上下文本会有换行

<p>文案标签的内容</p>

- <br>:在p标签中，我们可以使用<br>标签进行换行
<p>文案标<br>签的内容</p>

span标签：白版标签（没有任何的css样式）
1
<span>span白版标签</span>

div标签：块标签，最常用到的标签

行内标签（内联标签）：自己有多大就占多大
块级标签：无论自己有多大，都占一行
<div>div伪白版标签</div>

自带了display: block;属性

hx:标题标签,一共有6个级别
1
<h1>我是标题h1</h1>

textarea：多行文本

1	<textarea>这是一个textarea标签</textarea>

特殊符号

1 2	&ltp>==><p>  ==>空格：由于浏览器只会识别一个空格

input：单行文本框

<input />

- name:代表传递给后端json的key
	<input name="username" />
	- 一些场景我们会自己拿html的内部数据，此时是没有name标签的

- value:默认值
	<input value="默认参数"/>
	
- placeholder：提示文案
	<input placeholder="提示文案"/>
	
- type:当前input的类型，如果不写，默认是text
	- password：默认输入的东西变成了*
	<input type="password" />
	
- Checkbox：勾选框
	
	<label>Checkbox</label>
	<input name="Checkbox" type="checkbox" />
	- checked:是否默认勾选
	<input name="Checkbox" type="checkbox" checked="checked"/>
	
- radio：单选框
	- 如果两个radio的name是一样的，那么两个互斥
	<input type="radio" name="sex" value="1" />
	<input type="radio" name="sex" value="2" />
	<input type="radio" name="sex3" value="3" />
	
- file：上传文件
	<input type="file" name="file" />
	- 对于UI自动化来说，如果是input上传文件的操作，可以直接send进行输入
	
- button：按钮,只是一个单纯的按钮，需要和js联动才能进行操作
	- 通过value传入文案
	<input type="button" value="登录" />


- submit：提交
	- 使用submit的时候会向后端发送请求
	<input type="submit" value="登录" />

- reset ：重置
	- 重置input标签中所有已填写的参数,和form表单联用
	<input type="reset" />
	
- label：拓展input的可选择范围
	- 使用for标签指向需要拓展的input标签
	<label for="i1">拓展input的可选择范围</label>
	<input id="i1"/>

form：表单标签

- 可以把表单标签理解为一个白纸，一般用于和后端的表单提交操作
	<form >
		<input type="text" name="username" placeholder="请输入用户名"/>
		<input type="text" name="password" placeholder="请输入密码"/>
		<input type="submit" value="submit"/>
		<input type="button" value="button" />
		<input type="reset" value="reset" />
	</form>
	- 这里我们可以看到点击submit的时候向后端发送了请求

- action：提交请求的地址
	<form action="http://www.baidu.com">
		<input type="submit" />
	</form>
	
- method：提交时采用的方式
	<form action="http://www.baidu.com" method="post">
		<input type="submit" />
	</form>

异步请求和同步请求的区别

- form：同步请求
	提交时，整个页面进行刷新提交，会导致填写的东西消失
- ajax：异步请求
	提交时，页面不进行刷新，向后端发送请求

select：下拉框

- select>option
	<select>
		<option value ="选择1">选择1</option>
		<option value ="选择2">选择2</option>
		<option value ="选择3">选择3</option>
		<option value ="选择4">选择4</option>
	</select>

- select>opygroup
	<select>
		<optgroup label="江苏">
			<option >徐州</option>
			<option >苏州</option>
			<option >南京</option>
		</optgroup>
		<optgroup label="北京">
			<option >海淀</option>
			<option >朝阳</option>
			<option >房山</option>
		</optgroup>
	</select>

- selected="selected":默认选择哪个option

table：表格

<table border="1">
	- 表头
	<thead>
		<tr>
			<th>id</th>
			<th>name</th>
			<th>method</th>
			<th>操作</th>
			- 使用colspan合并单元格
			<th colspan="2">合并列</th>
		</tr>
	</thead>
	- 表体
	<tbody>
		<tr>
			- 这里要注意一下，是td
			<td>1</td>
			<td>大树</td>
			<td>POST</td>
			<td>执行</td>
			<td>列1</td>
			<td>列2</td>
		</tr>
	</tbody>
</table>