一.什么是前端

前端即网站前台部分，运行在PC端、移动端等浏览器上展现给用户浏览的网页。前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript。

广义前端：用户可以直接看见并交互的界面

狭义前端：浏览器上运行的用户交互界面

二.前端三剑客

HTML：超文本标记语言 Hyper Text Markup Language，负责完成页面的结构（架构）。

CSS：级联样式表（标记语言）Cascading Style Sheet，负责页面的风格设计（布局）。

JavaScript：浏览器脚本语言，负责编写页面特效，从后端获取数据，调用浏览器的API，渲染页面等（逻辑）。

1.HTML：超文本标记语言

什么是html？

html指的是超文本标记语言，非编程语言，不具备编程语言所具备的程序逻辑

为什么学html？

为了完成页面结构的搭建（什么时候用什么标签）

'''

标签：被尖括号（<>）包裹，由字母开头包含合法字符（- | 数字）的，可以被浏览器解析的标记。如：系统标签，自定义标签

标签的功能：换行 | 设置页面字符编码集 | 控制文本字体颜色与大小 | 加载图片与视频

注：标签都有头有尾，用/来标识标签的结束

<meta charset="utf-8">

指令：被尖括号（<>）包裹，由字！开头的标记。如：<!doctype html>, <!-- -->(注释)

转义字符：被&与；包裹的特殊字母组合或#开头的十进制数。如：< > &nbsp;

'''

页面

<!-- html的注释：一个html页面有且只有一个页面模板 -->

<!--设置文档类型：html => 该页面采用h5语法标准进行书写>

<!doctype html> # 文档类型必须出现在最上方，html语法不区分大小写

<!--页面内容都被页面根标签（html）包裹-->

<!--页面开始-->

<html>

<!--头：有内容 => 有开始有结束 head -->

<head>

    <meta charset='utf-8'> # 字符编码

    <title>页面</title> # 页面标签的标题
    <!--内部或外部的css样式|js脚本|页面其他设置-->

</head>

<!--身体：有内容 => 有开始有结束 body -->

<body>

    <!--存放展示给用户的内容：文本|图片|视频|超链接|表格|表单。。。-->

    呵呵

</body>

<!--页面结束>

</html>

常用标签

学习的目的：使用标签的语义与功能 | 完成页面架构的搭建（div）

# 1.标题标签：h1 ~ h6(会自动换行)

<h1 title='标题'>一级标题</h1>

<h3 title='标题'>三级标题</h3>

# 字体加粗且字体大小都是样式，均可以自定义

#h1标签：页面基本上都会出现，有且只有一个，用来标识整个页面的标题

# 2.段落标签（会自动换行）

<p>文本内容</p> 

# 3.文本相关标签(不会自动换行)

<span>文本标签</span>

<i>斜体</i><em>斜体方式强调</em>

<b>加粗</b><strong>加粗方式强调</strong>

<sup>上角标</sup><sub>下角标</sub>

# 4.<div></div> # 没有语义，也没有特殊功能，也没有特殊样式，随意使用，搭建架构

# 5.超链接标签

<a href='' target='' title=''>

# href:链接的地址

# target: _self(当前页面跳转，打开地址)，_blank(跳转到另外一个空白页面，打开地址)

# title:鼠标悬浮提示，可以给任意标签添加

# 锚点：快速定位到页面指定位置

<a name='top' id='top'></a>

<div style='height: 2000px'></div>

<a href='#top'>返回top</a>

# 通过a的name或普通标签的id设置锚点，再通过另一个a的href属性，值为#加锚点名，跳转到设置的锚点位

# 6.图片标签

<img src='' alt='' title='' width=''>

#src:数据源

#alt:资源加载失败的文字提示

#width/height：设置一个另一个会等比缩放（同时设置会导致图片失真）

# 7.表格标签

<table border='' width='' height='' cellsapcing='' rules='all' cellpadding=''>

    <caption>表格标题</caption>

        <thead>

            <tr>

               <th>标题</th>

               <th>标题</th>

            </tr>

        </thead>

        <tbody>

            <!--(tr>td{单元格}*3)*2-->

            <tr>

                <td>单元格</td>

                <td>单元格</td>

                <td>单元格</td>

            </tr>

            <tr>

                <td>单元格</td>

                <td>单元格</td>

                <td>单元格</td>

            </tr>

        </tbody>

        <tfoot>

            <!--tr>td{单元格}*3-->

            <tr>

                <td>单元格</td>

                <td>单元格</td>

                <td>单元格</td>

            </tr>

        </tfoot>

    </table>

#table>(

#    caption{标题}+

#    (thead>tr>th{标题}*3)+

#    (tbody>(tr>td{单元格}*3)*2)+

#    (tfoot>tr>td{单元格}*3)

#    )

# booder:表格边框宽度

# cellsapcing:单元格之间的距离

# rules：all(全部) | groups(组线) | rows(行线) | cols(列线)

# cellpadding:内容距上距左的距离

# 8.分割线

<hr>

# 9.原文本

<pre>呵   呵</pre>

# 10.换行

<br>

# 11.列表（常用）

# 无序列表

<ul>

        <li>列表项</li>

        <li>列表项</li>

        <li>列表项</li>

        <li>列表项</li>

        <li>列表项</li>

</ul>

# 有序列表

<ol start="" type="I">

        <li>列表项</li>

        <li>列表项</li>

        <li>列表项</li>

        <li>列表项</li>

        <li>列表项</li>

</ol>

<!DOCTYPE HTML>

<html>

<head>

    <title>架构分析</title>

    <meta charset="UTF-8">

</head>

<body>

<!--做一个页面, 前提准备-->

<!--分析页面结构 => div完成架构搭建 => 将页面解耦合 => 按区域完成整个页面 -->

<!--w3c网页-->

<div class="wrapper">

    <!--头-->

    <div class="header"></div>

    <!--导航-->

    <div class="nav"></div>

    <!--主体-->

    <div class="main">

        <div class="main-left"></div>

        <div class="main-center"></div>

        <div class="main-right"></div>

    </div>

    <!--底部-->

    <div class="footer">

        <div class="footer-top"></div>

        <div class="footer-bottom"></div>

    </div>

</div>

<!--总结: 考虑两个问题点, 1.层级结构嵌套关系(层次) 2.结构的命名-->

<!--整体页面规划完毕, 每一个区域的细节内容-->

<!--考虑问题: 使用了哪些具体的语义标签(嵌套关系与命名)-->

<!--part1-->

<div>

    <h2>领先的 Web 技术教程 - 全部免费</h2>

    <p>在 w3school，你可以找到你所需要的所有的网站建设教程。</p>

    <p>从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP 和 ASP.NET。</p>

    <h3>从左侧的菜单选择你需要的教程！</h3>

</div>

<!--part2-->

<div class="main-left">

    <h3>标题 标题 标题</h3>

    <ul>

        <li>test test test</li>

        <li>test test test</li>

        <li>test test test</li>

        <li>test test test</li>

        <li>test test test</li>

    </ul>

    <h3>标题 标题 标题</h3>

    <ul>

        <li>test test test</li>

        <li>test test test</li>

        <li>test test test</li>

        <li>test test test</li>

        <li>test test test</li>

        <li>test test test</li>

        <li>test test test</li>

        <li>test test test</li>

    </ul>

</div>

<div class="main-right">

    <div>

        <h3>标题 标题 标题</h3>

        <ul>

            <li>test test test</li>

            <li>test test test</li>

            <li>test test test</li>

            <li>test test test</li>

            <li>test test test</li>

        </ul>

    </div>

    <div>

        <h3>标题 标题 标题</h3>

        <ul>

            <li>test test test</li>

            <li>test test test</li>

            <li>test test test</li>

            <li>test test test</li>

            <li>test test test</li>

        </ul>

    </div>

</div>

</body>

</html>

架构分析

2.CSS：样式层级表

学习CSS的目的：完成页面布局（还原设计稿）

三大组成部分：
1.选择器：由标签、类、id单独或组合出现

2.作用域：一组大括号包含的区域

3.样式块：满足css连接语法的众多样式

选择器

什么是选择器？

用来将css与html建立关联的桥梁，称之为css选择器。本质就是页面标签的某种名字。

为什么用选择器？

将原来出现在标签内部的样式分离开来，可以用一个个选择器加以管理，达到页面与样式的解耦合目的，从而提高代码的复用性与开发效率。

CSS三种引入方式

1.行间式

'''

1.写在标签的style属性

2.属性与属性值之间用：赋值

3.属性与属性之间用；隔开

'''

2.内联式

'''

1.写在style标签中（style标签一般出现在head标签中）

2.用选择器与html建立连接

3.样式块书写在作用域内

'''

3.外联式

'''

1.css样式完全与html文件脱离，形成单独的.css文件，样式书写在.css文件中

2.用选择器与html建立连接

3.样式块书写在作用域内

4.要将.css文件与.html文件建立关联

<link rel='stylesheet' href='css文件的相对路径'>

'''

总结：

开发：最常用的是外联式，内联式与行间辅助样式布局

测试：内联式，可读性最强，且解耦有复用性

行间的应用场景：最简单粗暴，js操作的样式都是行间式

前端之html、css的更多相关文章

前端开发：css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局前言楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
前端之DIV+CSS布局
刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识 ...
前端Html和Css面试题
前端Html和Css面试题Html篇:1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Ope ...
2.前端笔记之css
title: 1.前端笔记之CSS date: 2016-04-05 23:05:51 tags: 前端 categories: w3c --- 作者:刘耀 **出处:http://www.liuya ...
前端零基础 --css转换--skew斜切变形 transfor 3d
前端零基础 --css转换--skew斜切变形 transfor 3d==============重要不紧急! 重要紧急重要不紧急不重要紧急不重要不紧急
前端html、CSS快速编写代码插件-Emmet使用方法技巧详解
前端html.CSS快速编写代码插件-Emmet使用方法技巧详解 Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来 ...
李洪强和你一起学习前端之(6)css行高,盒模型,外边距
李洪强和你一起学习前端之(6)css行高,盒模型,外边距复习昨天的知识 1.1css书写位置: 内嵌式写法外联式写法 <link href = "1.css" rel = ...
前端基础：CSS样式选择器
前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...
web前端篇：CSS使用，样式表特征，选择器
目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1 ...
Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性
目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

随机推荐

centos7安装laravel
一. 安装前准备1. 安装screenyum install screen 2. 安装wgetyum install wget 3. 更新yumyum update 4. 安装额外资源库yum ins ...
selenium 无法启动IE
解决办法是IE选项设置的安全页中,4个区域的启用保护模式的勾选都去掉(或都勾上)
跨域 jQuery库ajax请求
XMLHttpRequest是原生ajax,缺点是使用起来比较繁琐. jQuery库提供了一组简洁的ajax请求方法. ajax() get() post() 具体使用参考官方API: http:// ...
shell 处理文件脚本
[root@centos-6 ~]# cat info_file.txt lys:28:shanxi zhy:28:shanxi [root@centos-6 ~]# cat info_file2.t ...
SQLServer 表连接种类
SQLServer 有3种物理连接:Nested Loop(嵌套循环).Merge Join(合并联接).Hash Join(哈希联接). T-SQL中的inner/left/right/full j ...
关于The specified Android SDK Build Tools version (26.0.2) is ignored, as it is below the minimum...
今天将项目迁移到另一台笔记本,进行build出现以下问题,导致build失败 The specified Android SDK Build Tools version (26.0.2) is ign ...
Eclipse中如何打开Map/Reduce Locations窗口
Window->Show View->Other->MapReduce Tools,双击打开
C#学习-字段
字段的定义由3部分组成,访问修饰符.字段的类型和字段的名称.以下是 public class Person { //姓名,类型为字符串类型 private string name; //年龄,类型为i ...
pandas处理finance.yahoo股票数据 WTI CL USO OIL
1.参考用Python做科学计算-基础篇 »matplotlib-绘制精美的图表 »快速绘图使用pyplot模块绘图 2.数据来源 CL USO OIL 3.代码 #encoding='utf-8 ...
C# 之 GUID格式化
Guid的带参数的ToString()方法来实现格式化,如下: //// 摘要: // 根据所提供的格式说明符,返回此 System.Guid 实例值的字符串表示形式. //// 参数: // ...

前端之html、css