2018.12.4

Posted jutao

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

 

























































































































































以上是关于2018.12.4的主要内容，如果未能解决你的问题，请参考以下文章

2018-12-4-今日总结

2号团队-团队任务4:每日立会（2018-12-4）

2018.12.4 今日所学

2018/12/4 L1-004 java实现

1号团队-团队任务3:每日立会（2018-12-4）

2018.12.4 王二的经济学故事 DYNASTIES