2018.12.4

前端

一、什么是前端

​ 前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展,HTML5,CSS3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,完美的动效设计,给用户带来极高的用户体验。

​ 前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括基本的HTML和CSS以及JavaScript

  • 广义前端:所有用户可以直接看见并交互的界面

  • 侠义前端:浏览器上运行的用户交互界面

二、前端开发技术栈

HTML

  • 超文本标记语言 Hyper Text Markup Language

  • 负责完成页面的结构

  • 文件后缀:.html .htm

v_hint:“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素

CSS

  • 级联样式表 Cascading Style Sheet

  • 负责页面的风格设计,样式、美观

  • 文件后缀:.css

JavaScript

  • 浏览器脚本语言,可以编写运行在浏览器上的程序

  • 负责编写页面特效、调用浏览器的API(BOM)、操作改变页面内容(DOM),从后端获取数据(Ajax),渲染页面等

  • 文件后缀:.js

 

 

第一个页面

一、基础模板

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>第一个页面</title>
   </head>
   <body>
       
   </body>
</html>

# html三个组成部分
# 标签: <字母开头 + 合法字符(数字|-)> => (标签具有作用域,有头有尾)
# 指令: <!开头> => <!doctype> <!-- -->
# `: &; 包裹 => 特殊的字母 | #十六进制数

二、模板解读

  • DOCTYPE:指定文档类型,规定html标签语法

  • html:文档根标签,标注着文档(页面)的开始与结束

  • head:文档头标签,可以引用脚步文件、指定样式表、书写代码逻辑块、提供元信息

  • body:文档主体标签,包含文档所有文本与超文本内容

  • title:文档tag标题标签,设置文档tag的标题内容

v_hint:html标签的lang属性值 en | zh(zh-cn)

三、其他核心模板标签

1、meta(元标签)


字符编码
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
SEO
<meta name="keywords" content="8-12个以英文逗号隔开的单词或词语">
<meta name="description" content="80字以内的一段话,与网站内容相关">
移动适配
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

2、link(链接标签)


外联样式表
<link rel="stylesheet" type="text/css"  href="style.css" />
文档tag图标
<link rel="shortcut icon" type="image/x-icon" href="http://www.baidu.com/favicon.ico" />

3、style(样式标签)


内联样式表
<style></style>

4、script(脚本标签)


<script type="text/javascript"></script>

html常用标签

1、无语义标签


<div></div>
<span></span>

2、常用语义标签


<hn></hn> 标题
<p></p> 段落
<pre></pre> 原文本
<br /> 换行
<hr /> 分割线

3、文本标签


<i></i> 斜体字
<em></em> 斜体字,表示强调
<b></b> 粗体字
<strong></strong> 粗体字,表示强调(语气更强)
<del></del> 删除的文本
<ins></ins> 插入的文本
<sub></sub> 下标字
<sup></sup> 上标字
<ruby>
拼音<rt>pinyin</rt>
</ruby> 中文注音,h5新增

4、其他标签


<section></section> 块
<small></small> 小号字体
四.基本标签
// 最基本
div => 搭页面架构
span => 搭文本架构

// 换行显示
h1~h6 => 标题, h1有且只有一个,作为页面总标题
p => 段落

// 同行显示
文本类标签
i,em => 斜体
b,strong => 加粗
del | ins | sup | sub

// 组合
table>tr>th+td
form>input

// 功能
img 图片 | a 超链接 | hr 分割线 | br 换行

标签分类

1、单|双标签

  • 单标签:单标签在自身标签标识结束,主要应用场景为功能性标签

  • <hr/>,<br/>

  • 双标签:双标签有成对的结束标识,主要应用场景为内容性标签

  • <div></div><span></span>

2、行|块标签

  • 行标签:又名内联标签,内联标签自身不具备宽高,通常同行显示

  • <i></i> 斜体字<em></em> 斜体字,表示强调<b></b> 粗体字<strong></strong> 粗体字,表示强调(语气更强) <del></del> 删除的文本<ins></ins> 插入的文本<sub></sub> 下标字<sup></sup> 上标字

  • 块标签:又名块级标签,块标签拥有自身宽高,通常独自占据一行

  • <p></p> 段落

3、单一|组合标签

  • 单一标签:单独出现,表示具体的功能或展示具体的内容

  • 组合标签:配合使用,才能产生相应的内容与效果

  • table>tr>th+tdform>input

v_test:熟悉标签的分类

今日基础标签汇总


&nbsp   代表一个空格

&lt 代表<

&gt 代表>

<div ></div><!-- div: 最常用的标签,没有之一 (搭建页面架构) -->

<span></span> <!-- span: 文本最常用标签 (构建文本架构:可以直接包裹文本,

与可以包裹其他文本类(内联类型的)标签) -->

<!-- 标题标签: h1~h6 -->

<h1>一级标题</h1><!-- 一般一个页面会出现一次,作为该页面的总标题出现 -->

<h2>二级标题</h2>~<h6>六级标签</h6>

<p>xxxxx</p> 段落标签,段落和段落之间会自动有一行间隔

<pre></pre>里面写一些字符和空格会正常显示,有其他标签不会显示

<hr/>会产生分割线

<br />换行#可能会产生不可控的状况 一般会用样式来实现

<i>aa</i> 斜体字

<em>aa</em> 斜体字,表示强调

<b>aa</b> 粗体字

<strong>aa</strong> 粗体字,表示强调(语气更强)

<del>aa</del> 删除的文本

<ins>aa</ins> 插入的文本

<sub>aa</sub> 下标字

<sup>aa</sup> 上标字

<ruby>
拼音<rt>pinyin</rt>
</ruby> 中文注音,h5新增

<section></section> 块

<small></small> 小号字体

<!-- 链接标签 -->
<!-- href: 标签的全局属性, 超链接, 规定协议 -->
<!-- 不规定:做路径的拼接 -->
<!--target="_blank">_blank表示开一个新的连接开启网站,_self不开新连接直接开启网站
<a href="https://www.baidu.com" target="_blank">前往百度</a>


<!-- 图片标签 -->
<!-- src:数据源, 可以加载网络 | 本地 | 动态 图片 -->
<!-- alt:资源加载失败的文本提示 -->
<!-- title:鼠标悬浮产生的文本提示(任意标签都具有该全局属性) -->
<img src= "http://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20180712/5b9bdbe624bf412ba6e044f0caefb1cb.gif" alt="二哈" title="小二哈">

<!-- 表格 -->
<!-- table>(tr>th{标题}*2)+(tr>td{单元格}*2) -->
<table>
<tr>
<th>标题</th>
<th>标题</th>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>

<!-- 表单 -->
input就是用户输入然后获取值
被form包裹的input内容可以提交给后台,单独使用的input内容只能在前台(js)使用 -->

<input type="text" value="abc" placeholder="请输入">
<form>
<input type="text">
<input type="password">
</form>

 

posted @ 2018-12-04 21:07  涛仔··  阅读(195)  评论(0编辑  收藏  举报