前端
HTML
<!-- 内容 -->
<!DOCTYPE html><!--DOCTYPE:告诉浏览器的规范-->
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!--meta用来描述网站的一些信息,用来做SEO-->
<meta charset="UTF-8">
<meta name = "keywords" content="小康,小陈,纪念册">
<meta name="description" content="小康与小陈的日常生活">
<!--网站的标题-->
<title>Title</title>
</head><!---->
<!--网页的主体-->
<body>
1 基本标签
<!--标题标签-->
<h1>
奔赴
</h1>
<!--字体样式标签-->
<strong>粗体 </strong><br><!--换行标签放里面或者外面都行-->
<em>斜体</em>
<!--水平线标签-->
<hr/>
<!--段落标签-->
<p><!--写一个p,然后摁TAB键就自动生成-->
转眼已走过了两年时光,<br/>
<!--换行标签:单标签,换行标签字距比较小-->
小陈丢掉了曾经的彷徨,<br/>
时间滤不尽你我的过往,<br/>
你也同我一起走向远方。<br/>
<br/>
记忆的车轮辗到我脸上,<br/>
时光又来到了卫光街旁,<br/>
初次见你时的心中惶惶,<br/>
化为异地时的念念不忘,<br/>
</p>
<!--特殊符号-->
<!--空格,其他符号可以&然后下拉选择-->
2 图像标签
<!--图像标签
src:图片地址,分为绝对地址和相对地址(推荐使用)
../代表上一级目录
alt:代表图片加载不出来时显示的信息-->
<img src="../resource/image/pt2019_12_19_13_50_07.jpg" alt="小陈和小康" title="C&K" width="300" height="300">
3 超链接标签
<!--超链接标签-->
<!--a标签
href:必填,表示要跳转到哪个页面
target:表示窗口在哪打开 _blank 在另一个页面中打开 _self 在自己的网页中打开(默认)-->
<a href="https://www.baidu.com">点击我跳转到那个页面</a>
<!--可以文字链接,也可以设置成图片超链接-->
<!--锚链接:实现页面间的跳转
1、需要一个锚标记-->
<a name="top">顶部标记</a>
<!--2、跳转到标记-->
<a href="#top">回到顶部</a>
<!--功能性链接
邮件链接:mailto
qq链接:在QQ推广里可以自动生成然后添加上-->
4 行内元素和块元素
块元素:h、p标签等
行内元素:a、strong、em
5 列表标签
分类:
- 有序列表:ol-li
- 无序列表:ul-li
- 自定义列表:dl-dt(列表名称)/dd(列表内容)——应用在网页底部
6 表格标签
创建表格:table border
行:tr
列:td
跨列:td colspan
跨行:td rowspan
7 媒体元素
视频元素:video(摁住tab键自动生成)
src:资源路径(通常用相对路径)
controls:控制视频播放
autoplay:自动播放
音频元素:audio(摁住tab键自动生成)
同视频元素
8 页面结构分析
header 头部
footer 脚部
section web页面中独立的区域
artcle 独立的文章内容
aside 相关应用或者内容(侧边栏)
nav 导航类辅助内容
9 iframe内联框架
有点像图片和媒体元素,可以调节宽度和高度
10 表单post和get提交(登录注册)
-
form标签
-
method:规定如何发送表单数据,常用值post和get,post方式提交安全,还可以传输大文件
-
action:表示向何处发送表单数据,表单提交的位置可以是网站,也可以是请求处理地址
-
texterea:文本域
- cols显示多少列
- rows显示多少行
-
select:
- 列表名称name
- 下拉选择option
- 默认选中的selected
-
input:type,所有属性都要加name
-
文本输入框text
-
密码框password
-
提交submit
-
重置reset
-
初始值value,可以给标签赋值
-
最大输入长度maxlength
-
文本框的长度size
-
单选框radio
-
多选框checkbox
-
按钮button
-
图片按钮image
-
默认选中checked
-
文件域file
-
邮件email
-
数字验证number,max最大值,min最小值,step每次加减的值
-
滑块range,max最大值,min最小值,提交时可以获取值
-
搜索框search
-
只读readonly
-
禁用disabled
-
隐藏hidden
-
11 增强鼠标可用性
点击文字可以锁定id,mark为锁定id的名字
<label for="mark">你点我试试</label>
<input type="text" id="mark">
表单初级验证
减轻后端压力和提高安全性
placeholder提示信息
required非空判断,不能为空
pattern正则表达式,要用的时候可以直接查找
CSS
Cascading Style Sheet、CSS选择器是重点。css文件放在head标签里头
<!--外部样式:通过link标签,实现内容和表现分离-->
<link rel="stylesheet" href="css/firstcss.css">
<body>
<h1>小陈与小康</h1>
</body>
h1{
color: burlywood;
}
1 CSS的三种导入方式
优先级:就近原则,看谁离代码更近
<!--行内样式:在标签元素中,编写一个style属性,编写样式即可-->
<h1 style="color: bisque">小陈与小康</h1>
<!--内部样式:在head标签中写style的css代码-->
<style>
h1{
color: bisque;
}
</style>
2 CSS的三种选择器
选择页面上的某一个或某一类元素。不遵循就近原则,id选择器>类选择器>标签选择器
2.1 基本选择器
标签选择器
<!--会选择页面上所有这个标签的元素-->
<style>
h1{
color: bisque;
}
</style>
类选择器
<!--类选择器的格式, .class的名称{}
优点:可以多个标签归类,可以复用-->
<style>
.k{
color: aliceblue;
}
.p