前端学习
前端三大技术核心 html 、CSS、js
一、HTML 网页主体内容
1.1、概念
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
现在发展到第五代了，我们又称为h5页面
-
他不是编程语言，而是一种标记语言，由各种标签组成 （HTML tag）
-
可以描述 文字，图形、动画、声音、表格、链接等
-
HTML 运行在浏览器上，由浏览器来解析
1.2、标准骨架
html文件 都有一个标准的骨架 即在创建一个html文件 会自动生成的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
1.2.1 标签概念
我们分析 上面代码 可知：
- HTML 标签是由尖括号包围的关键词，比如
- 而且成对出现的 ,如 :<head> 内容.....</head>
- 第一个标签，我们称为开始标签(开放标签) 如：<head> ,第二标签 我们称为 结束标签（闭合标签） 如
1.2.2、骨架标签解析
<!DOCTYPE html>
第一行代码 是用来声明 这个是一个 html 文件
<html lang="en"> 内容 </html>
第二行代码 到最后一行
这是所有html 的内容 为最最外层的一个大标签
lang="en"：向搜索引擎表示该页面是html语言，并且语言为英文网站 en 为 english ， 也可以改为 即为中文网站
注：不代表里面都是中文 ，也可以不写 lang="en"
<head> 内容 </head>
头部标签：
它是所有头部元素的容器。在head标签中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息，包括文档的标题
文档头部包含的数据都不会真正作为内容显示
<meta charset="UTF-8">
<title >Title</title>
meta： 标签可以设置网页的字符集（utf-8 国际编码）
title ：标签设置网页的标题
<body>
</body>
body : 身体主体，和head标签是同一级 ，所有网页显示的内容 都在 body标签之中
1.3、标题标签
你在浏览一个html界面时 ，如果是文字 一般你都会看到有标题
html 标题 分为六级 依次减小效果，每个标题都是独占一行空间
<h1> 标题 </h1>
<h2> 标题 </h2>
<h3> 标题 </h3>
<h4> 标题 </h4>
<h5> 标题 </h5>
<h6> 标题 </h6>
展示如下：
1.4、段落标签
有标题 即有段落
<p>
段落内容.....
</p>
合适内容使用合理的标签，就叫满足标签语义化；这样可以在搜索引擎排名中更靠前！点击率更高，带来更多的收益！
1.5、 注释
html 虽然不是编程语言 但人家也是标记语言，也是有注释
<!-- 在此处写注释 -->
浏览器不会显示注释，但是能够帮助记录您的 HTML 文档。
您可以利用注释在 HTML 中放置通知和提醒信息
1.6、空格与换行
在html 中
空格要用：
等于 一个空格
换行：
<br /> 也就是一个回车
路径
**相对路径**：从当前位置 或 任意相对位置开始 到目标 文件的路径
**绝对路径**：从根目录开始 到目标文件的路径
1.7、属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以 名称/值 对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。
如：name 属性用于指定标签元素的名称。 <a> 标签内必须提供 href 或 name 属性
<a href="http://www.baidu.com">百度一下</a>
<a name="value">
1.7.1、id 属性
id 属性规定 HTML 元素的唯一的 id。
id 在 HTML 文档中必须是唯一的。
id 或 name 属性的值可以是引号引起来的任何字符串。字符串必须是唯一的标记，不能在同一文档中的其他 name 或 id 属性中重复使用，但是可以在不同的文档中再次使用。
1.7.2、style 属性
样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。
背景颜色：background-color 属性为元素定义了背景颜色
<html>
<body style="background-color:yellow">
<h2 style="background-color:red">这是一个标题</h2>
<p style="background-color:green">这是一段内容，这是一段内容</p>
</body>
</html>
字体、颜色和尺寸
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸
<html>
<body>
<h1 style="font-family:verdana">一个标题</h1>
<p style="font-family:隶书;color:red;font-size:20px;">一段内容</p>
</body>
</html>
文本对齐
<html>
<body>
<h1 style="text-align:center">这是一个标题</h1>
<p>内容lll手动释放速度士大夫士大夫地方</p>
</body>
</html>
更多属性：http://www.w3school.com.cn/tags/html_ref_standardattributes.asp
1.8、图像
当在html 插入一张图片时 ，要先把图片准备好 ，我们交给网页的 是这个图片所在的路径（位置）
<img src="C:UsershuangweiDesktop est est_img.jpg" width="104" height="142" title="鼠标悬停提示文字" alt=”图片未加载时候提示文字“ />
- image 就是图像，没有结束标签
- src 等于资源，后面指向 图片所在的位置
- width ：代表宽度（横向距离）、height ：代表高度（纵向距离）；如果宽和高都不设置，图片会按照原本的大小去显示
- title ： 鼠标悬停时候的提示文字
- alt ：当图片未正常加载的时候，显示文字
1.9、超链接
在网页中 你会经常遇到超链接 , 用a标签表示
<a href="http://www.baidu.com"> 百度一下 点击这里 </a>
-
href属性 指向就是 要跳转的 地址（也可以是本地的地址）
-
a标签包裹的内容 就是显示在网页上的 链接标题
1.10、div 块
可定义文档中的分区或节（division/section）。
<h1>新闻网站</h1>
<p>一些 内容 一些内容</p>
...
<div class="news">
<h2>新闻标题1</h2>
<p>新闻内容 新闻内容 新闻内容</p>
...
</div>
<!-- 加颜色 设置了高和宽-->
<div style="background-color:red; height:100px;300px">
<h2>新闻标题2</h2>
<p>新闻内容 新闻内容 新闻内容</p>
...
</div>
1.11、form表单
form表单标签里面包括所有用户填写的表单数据，
比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等
input标签的type类型：
type="text" 普通的输入框
type=”password” 密码框
type="radio" 单选框
checked="checked" 此属性可以表达默认选中状态
测试细节：
1、点击查看是否为单选效果
2、刷新的时候是否有默认选中的状态
3、点击文字是否可以进行切换
type="checkbox" 多选框、复选框
checked="checked" 默认选中
测试细节：
1、刷新的时候是否有默认选中的状态
2、点击文字是否可以进行切换
注意：一切测试要追溯到用户的需求
select标签嵌套若干option标签，每组option就是一个下拉菜单中的选项
selected="selected" 下拉菜单的默认选中
测试细节：
1、内容的顺序
2、默认选中的状态
3、内容的条数
textarea 文本域
测试细节：
1、测试三大主流浏览器外观大小是否一致
2、提醒程序员禁用拖拽大小的功能
type="button" 普通按钮，需要js配合才能实现其它效果
value属性设置按钮身上的文字
type="reset" 点击后可以让表单数据恢复默认值
value属性设置按钮身上的文字
type="submit" 点击后可以让表单提交给指定后台处理
value属性设置按钮身上的文字
点击后无论是否报错，都与我们无关，最终测试的时候，只要关注数据库中的内容是否正常添加即可
placeholder="请输入用户名" 文字提醒属性