前端：即是你在使用软件时，看到的这些美丽的UI界面，那这些界面怎么生成的那？

他是由 HTML + CSS + JS (JavaScript) 这三大块技术来完成

  1. HTML 定义了网页的内容（毛坯房）
  2. CSS描述了网页的布局（精装修）
  3. JavaScript 控制了网页的行为（智能家居赋能）

HTML （网页主体内容）

简介


超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。现在发展到第五代了，我们又称为h5页面

  • 他不是编程语言，而是一种标记语言，由各种标签组成 （HTML tag）
  • 可以描述 文字，图形、动画、声音、表格、链接等
  • HTML 运行在浏览器上，由浏览器来解析

标准骨架


html文件 都有一个标准的骨架 即在创建一个html文件 会自动生成的标签

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  9. </body>
  10. </html>

骨架标签解析

<!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标签之中

常见标签

概念

我们分析 上面代码 可知：

  • HTML 标签是由尖括号包围的关键词，比如
  • 而且成对出现的 ,如 : 内容…..

  • 第一个标签，我们称为开始标签(开放标签) 如： ,第二标签 我们称为 结束标签（闭合标签） 如

    标题标签

    你在浏览一个html界面时 ，如果是文字 一般你都会看到有标题
    html 标题 分为六级 依次减小效果，每个标题都是独占一行空间

    <h1> 标题 </h1>
<h2> 标题 </h2>
<h3> 标题 </h3>
<h4> 标题 </h4>
<h5> 标题 </h5>
<h6> 标题 </h6>

    段落标签

    有标题 即有段落

    <p>
  段落内容.....
</p>

    合适内容使用合理的标签，就叫满足标签语义化；这样可以在搜索引擎排名中更靠前！点击率更高，带来更多的收益！

    注释

    html 虽然不是编程语言 但人家也是标记语言，也是有注释

    <!-- 在此处写注释 -->

    浏览器不会显示注释，但是能够帮助记录您的 HTML 文档。
    您可以利用注释在 HTML 中放置通知和提醒信息

    空格（&nbsp）、换行（
    ）

    在html 中空格要用：

    &nbsp;   等于 一个空格

    换行：

    <br />  也就是一个回车

    图像前端认识 - 图2

    当在html 插入一张图片时 ，要先把图片准备好 ，我们交给网页的 是这个图片所在的路径（位置）

    <img src="C:\Users\huangwei\Desktop\test\test_img.jpg" width="104" height="142" title="鼠标悬停提示文字" alt=”图片未加载时候提示文字“ />

  • image 就是图像，没有结束标签

  • src 等于资源，后面指向 图片所在的位置
  • width ：代表宽度（横向距离）、height ：代表高度（纵向距离）；如果宽和高都不设置，图片会按照原本的大小去显示
  • title ： 鼠标悬停时候的提示文字

  • alt ：当图片未正常加载的时候，显示文字

    超链接

    在网页中 你会经常遇到超链接 , 用a标签表示

    <a href="http://www.baidu.com"> 百度一下 点击这里 </a>

  • href属性 指向就是 要跳转的 地址（也可以是本地的地址）

  • a标签包裹的内容 就是显示在网页上的 链接标题

    div 块

    可定义文档中的分区或节（division/section）。

    标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。 如果用 id 或 class 来标记
    ，那么该标签的作用会变得更加有效。

    <h1>新闻网站</h1>
<p>一些 内容 一些内容</p>
...

<div class="news">
<h2>新闻标题1</h2>
<p>新闻内容  新闻内容 新闻内容</p>
...
</div>
<!-- 加颜色 设置了高和宽-->
<div style="background-color:red; height:100px;width:300px">
<h2>新闻标题2</h2>
<p>新闻内容 新闻内容 新闻内容</p>
...
</div>

    属性

    HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
    属性总是以 名称/值 对的形式出现，比如：name=”value”。
    属性总是在 HTML 元素的开始标签中规定。
    如：name 属性用于指定标签元素的名称。 标签内必须提供 href 或 name 属性

    <a href="http://www.baidu.com">百度一下</a>
<a name="value">

    id属性

id 属性规定 HTML 元素的唯一的 id。
id 在 HTML 文档中必须是唯一的。
id 或 name 属性的值可以是引号引起来的任何字符串。字符串必须是唯一的标记，不能在同一文档中的其他 name 或 id 属性中重复使用，但是可以在不同的文档中再次使用。

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

form 表单

form表单标签里面包括所有用户填写的表单数据，
比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等

文本框 input

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

input标签的type类型：
type=”radio” 单选框
type=”checkbox” 多选框、复选框
checked=”checked” 默认选中
type=”button” 普通按钮，需要js配合才能实现其它效果
type=”reset” 点击后可以让表单数据恢复默认值
type=”submit” 点击后可以让表单提交给指定后台处理
placeholder=”请输入用户名” 文字提醒属性
type=”text” 普通的输入框
type=”password” 密码框

单选下拉列表

select标签嵌套若干option标签，每组option就是一个下拉菜单中的选项

<form action="">
<select name="cars">
<option value="Apple">苹果</option>
<option value="banana">香蕉</option>
<option value="Pear">梨</option>
<option value="Durian">榴莲</option>
</select>
</form>

selected=”selected” 下拉菜单的默认选中

复选下拉框

 <!-- 复选下拉框 -->
    <select multiple="multiple" size="3">
        <option value="apple">苹果</option>
        <option selected = selected>香蕉</option>
        <option>西瓜</option>
    </select >

注：添加 selected 属性 可以预定选择

单选按钮

<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

文本域 textarea

<form action="">
<textarea>  是一个文本域</textarea>
</form>

CSS（网页样式美化）

当我们浏览网页时，会发现一个页面不仅有简单的内容，还要各种美轮美奂的样式，那这些样式是怎么来的？

CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和显示的方式。
HTML中使用css有三种方法，分别为内部样式、行内样式、外部样式,

语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

如：将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。

h1 {color:red; font-size:14px;}

内部样式

写在