Web前端Part01：前端基础介绍、html标签

一、前端技术

1.1、什么是前端？

• 前端即网站的前台部分，运行在PC端，移动端等浏览器或者APP上，展现给用户浏览的网页。前端与后台是相对的

• 前端是展示给用户并且和用户进行交互的客户端，有app或者浏览器。

• 后台又称为服务器端，进行数据处理，存储，业务逻辑等。

1.2、前端的开发流程

前端的开发流程.png

1.3、页面的组织结构

• 结构

HTML用于描述页面的结构

结构即骨架

• 表现

CSS用于控制页面中元素的样式

image5.png

• 行为

JavaScript用于响应用户操作

行为

二、HTML标签（结构）

2.1 HTML简介

• HyperText Markup Language
• 超文本标记语言
• Html通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）

2.2 网页的基本结构

    


    




: 版本的声明,当前是html5版本
html标签: 网页的根标签,所有其它的标签都被html包含
head头部标签: 网页的配置信息
:字符集(编码的设置)


为搜索引擎提供的关键字列表：各关键词间用英文逗号","隔开

Description用来告诉搜索引擎你的网站主要内容 

2.3 body标签

主体标签: 所有的显示效果的标签和内容都被body包含

第4节 HTML标签基本结构

开始标签，结束标签

< br/> 自闭和标签

第5节 标签的语法

• 标签由英文尖括号<和>括起来，如就是一个标签
• html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开
  始标签多了一个/
• 标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：

内部嵌套

,那么

必须放在

的前面

• HTML标签不区分大小写

和

是一样的，但是建议小写，因为大部分程序员都以小写为准

2.4 语义化，让你的网页更好的被搜索引擎理解

标签的用途： 我们学习网页制作时，常常会听到“语义化”。明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用 em 标签表示强调等等。

2.5、常用标签

• 分级标题

标题一
标题二
标题三
标题四
标题五
标题六

• 段落

这是一个段落

• 强调/加强语气

em:强调->默认是斜体  strong：更强烈的强调 ->粗体
强调
强烈的强调

• 换行

• 分割行

• 联系地址

南京市,建邺区,所街

• 添加一行代码 code

一行代码

• 添加多行代码

多行代码

• 给文本增加样式的标签 span

 文本 

• 短引用文本 q

短引用文本

• 长引用 blockquote

 常引用 

• 无序列表 ul + li

    
无序列表1
    
无序列表2
    
无序列表3
    
无序列表4

• 布局标签 div
• 表格标签 table

    

        
ID
        
名字
        
年龄
    
    

        
1001
        
李雷
        
18
    

• 连接

发送

• 图片 img
• 表单标签 form 输入框 input
• 文本域 textarea
• 下拉列表 select + option
• 提交/重置按钮/lable标签

    性别:
    男
    
    女
    

    兴趣:
    篮球 
    足球 
    台球 
    

    邮箱
    

    描述
    

    地址
    
        北京
        上海
        天津
        南京
    
    

    
    

2.6、转义字符

转义字符