前端学习一
1、WEB前端的三大的核心技术:
Web开发者助手 FeHelper:https://www.baidufe.com/fehelper
2、HTML基础内容
! + tab键 : 快速的创建html的初始代码
标签的属性:来修饰标签的,设置当前标签的一些功能。<标签 属性=“值” 属性2=“值2”>
初始代码模板:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>我是一个网页的标题</title>
</head>
<body>
hello world
</body>
</html>
(1)HTML注释:
(2)文本修饰标签:
< strong>: 表示强调,会对文本进行加粗
< em>: 表示强调,会对文本进行斜体
< sub>、< sup>: 下标文本、上标文本
< del>、< ins>: 删除文本、插入文本
(3)图片标签与图片属性=> < img>: 图片 src alt title width 、height
(4)引入文件的地址路径:相对路径 . 在路径中表示当前路径 … 在路径中表示上一级路径 || 绝对路径 E:/ke/qf_dl201901/20190108/img/animal/dog.jpg
(5)跳转链接:< a>标签 href target < base>标签
(6)跳转锚点:实现一、#号 id属性 实现二、#号 name属性
(7)特殊符号:这些无法输入和空格字符都是特殊字符,在HTML中,为这些特殊字符准备了专门的代码。
(8)无序列表:< ul>、< li> :列表的最外层容器、列表项.注:ul和li必须是组合出现的,他们之间是不能有其他标签的。type属性 : 改变前面标记的样式( 一般都是用CSS去控制 )(http://www.w3school.com.cn/tags/att_ul_type.asp)
(9)有序列表:< ol>、< li> :列表的最外层容器、列表项。注:有序列表用的非常少,经常用的是无序列表,无序列表可以去代替有序列表。type属性 : 改变前面标记的样式( 一般都是用CSS去控制 )(http://www.w3school.com.cn/tags/att_ol_type.asp)
(10)定义列表:< dl>:定义列表 || < dt>:定义专业术语或名词 || < dd>:对名词进行解释和描述
(11)嵌套列表:列表之间可以互相嵌套形成多层级列表。
(12)表格标签:< table>:表格的最外层容器 || < tr> : 定义表格行 || < th>: 定义表头||< td>: 定义表格单元 || < caption>:定义表格标题
(13)表格属性:border : 表格边框、cellpadding : 单元格内的空间、cellspacing : 单元格之间的空间、rowspan : 合并行、colspan : 合并列、align : 左右对齐方式、valign :上下对齐方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>
<strong>这是一段需要强调的文本</strong>
<em>这是一段需要强调的文本</em>
</p>
<p>
a <sup>2</sup> + b<sup>2</sup> = c<sup>2</sup> H<sub>2</sub>0
</p>
<p>
促销 : 原价<del>300</del>,现价<ins>100</ins>。
</p>
<p>
北京著名的高档百货店——<em>赛特购物中心</em>即将闭店。昨天,赛特购物中心总台服务人员表示<strong>“如果手里有购物卡请尽快到店消费”</strong>。据这位服务人员介绍,目前赛特购物中心正在进行清仓大甩卖。<del>特价电视原价3600元</del>,<ins>现清仓价只需1300元</ins>。
</p>
</body>
</html>
(14)表单标签:< form> : 表单的最外层容器 || < input>: 标签用于搜集用户信息,根据不同的type属性值,展示不同的控件,如输入框、密码框、复选框等。
#### text 普通的文本输入框||password 密码输入框||checkbox 复选框||radio 单选框||file 上传文件||submit 提交按钮||reset 重置按钮
(15)表单标签:< textarea> : 多行文本框 || < select>、< option>:下拉菜单 || < label>:辅助表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="http://www.baidu.com">
<!-- <h2>输入框:</h2>
<input type="text" placeholder="请输入用户名">
<h2>密码框:</h2>
<input type="password" placeholder="请输入密码">
<h2>复选框</h2>
<input type="checkbox" checked>苹果
<input type="checkbox" checked>香蕉
<input type="checkbox" disabled>葡萄
<h2>单选框</h2>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<h2>上传文件</h2>
<input type="file">
<h2>提交按钮和重置按钮</h2>
<input type="submit">
<input type="reset"> -->
<h2>多行文本框</h2>
<textarea cols="30" rows="10"></textarea>
<h2>下拉菜单</h2>
<select>
<option selected disabled>请选择</option>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
<select size="3">
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
<select multiple>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
<input type="file" multiple>
<input type="radio" name="gender" id="man"><label for="man">男</label>
<input type="radio" name="gender" id="woman"><label for="woman">女</label>
</form>
</body>
</html>
(16)< div>与< span>
div (块):div全称为division,“分割、分区”的意思,< div>标签用来划分一个区域,相当于一块区域容器,可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在< div>标签中,< div>中还可以嵌套多层< div>,用来将网页分割成独立的、不同的部分,来实现网页的规划和布局。
span(内联) : 用来修饰文字的,div与span都是没有任何默认样式的,需要配合CSS才行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="">
<table border="1" cellpadding="30">
<tBody>
<tr align="center">
<td rowspan="4">总体信息</td>
<td colspan="2">用户注册</td>
</tr>
<tr align="right">
<td>用户名:</td>
<td><input type="text" placeholder="请输入用户名"></td>
</tr>
<tr align="right">
<td>密码:</td>
<td><input type="password" placeholder="请输入密码"></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit">
<input type="reset">
</td>
</tr>
</tBody>
</table>
</form>
</body>
</html>
3、CSS基础语法
格式:
选择器{ 属性1 : 值1 ; 属性2 : 值2 }
单位:
px -> 像素( pixel ) 、% -> 百分比
基本样式:
width、height、background-color
CSS注释:
/* CSS注释的内容 */