这是我参与「第四届青训营」笔记创作活动的的第1天

要想学好一个领域就要首先了解这个领域的作用，具体是做什么的，用在哪里，才能根据问题进一步进行学习思考。那么什么是前端呢？前端工作主要做什么呢？（本文如有错，欢迎指正）

前端

1、对于web前端来说，通常是指网站的前台部分，包括网站的表现层和结构层：Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。

2、前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现。

3、Web前端开发：HTML+CSS+JavaScript （俗称三件套）

Android终端开发：Java（开发工具：Androidstudio）

iOS终端开发：Objective-C（开发工具：Xcode）

个人理解就是前端主要从事网页页面的制作,下面主要说说今天学习前端的主要工具之一html

html（HyperText Markup Language）

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。（注意 html 不是一种编程语言，确切的来说是一种超文本标记语言）

html文档的后缀名

.html
.htm

html 语法

例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>青训营第一天</title>
</head>
<body>
    <p>今天是我参加青训营的第一天</p>
</body>
</html>

结果如下

html 区块

HTML 区块元素

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

实例: <h1>, <p>, <ul>, <table>

HTML 内联元素

内联元素在显示时通常不会以新行开始。

实例: <b>, <td>,<a>, <img>

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

使用div 网页的布局

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>青训营</title> 
</head>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>

<div id="menu" style="background-color:#FDD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEAEEE;height:200px;width:400px;float:left;">
内容在这里</div>

例

html 标签简写及全称

下表列出了 HTML 标签简写及全称：

标签	英文全称	中文说明
a	Anchor	锚
abbr	Abbreviation	缩写词
acronym	Acronym	取首字母的缩写词
address	Address	地址
alt	alter	替用(一般是图片显示不出的提示)
b	Bold	粗体（文本）
bdo	Direction of Text Display	文本显示方向
big	Big	变大（文本）
blockquote	Block Quotation	区块引用语
br	Break	换行
cell	cell	巢
cellpadding	cellpadding	巢补白
cellspacing	cellspacing	巢空间
center	Centered	居中（文本）
cite	Citation	引用
code	Code	源代码（文本）
dd	Definition Description	定义描述
del	Deleted	删除（的文本）
dfn	Defines a Definition Term	定义定义条目
div	Division	分隔
dl	Definition List	定义列表
dt	Definition Term	定义术语
em	Emphasized	加重（文本）
font	Font	字体
h1~h6	Header 1 to Header 6	标题1到标题6
hr	Horizontal Rule	水平尺
href	hypertext reference	超文本引用
i	Italic	斜体（文本）
iframe	Inline frame	定义内联框架
ins	Inserted	插入（的文本）
kbd	Keyboard	键盘（文本）
li	List Item	列表项目
nl	navigation lists	导航列表
ol	Ordered List	排序列表
optgroup	Option group	定义选项组
p	Paragraph	段落
pre	Preformatted	预定义格式（文本）
q	Quotation	引用语
rel	Reload	加载
s/ strike	Strikethrough	删除线
samp	Sample	示例（文本
small	Small	变小（文本）
span	Span	范围
src	Source	源文件链接
strong	Strong	加重（文本）
sub	Subscripted	下标（文本）
sup	Superscripted	上标（文本）
td	table data cell	表格中的一个单元格
th	table header cell	表格中的表头
tr	table row	表格中的一行
tt	Teletype	打印机（文本）
u	Underlined	下划线（文本）
ul	Unordered List	不排序列表
var	Variable	变量（文本）

总结

html的学习相比于学习一些编程的语言还是简单了一些，学习前端就是要不断地进行代码的输出在其中寻找问题，期待明天的学习加油！

前端与html | 青训营笔记

前端