前端学习-HTML基础

在学习前端的时候，一定要养成多练，多总结的习惯，才能更好掌握前端的知识。

前端学习无非分为三类：

• html：组成页面的基本框架
• css：对页面进行美化
• JavaScript：驱动页面进行交互
• TypeScript：给 JavaScript 添加特性，让 JavaScript 更加强壮

一.文档结构:

1. 定义文档的基本类型
2. HTML根元素(html包含的内容)
3. HTML头部信息区域(head包含的内容)
4. HTML主题内容区域(body包含的内容)

二.基本语法:

<div>
    <div class="title">数据筛选</div>
</div> 
<(开始标签)元素  属性>内容<结束标签>

属性必须在开始标签内

三.HTML元素

1.写法分类:

<inpyt type="text" />
不需要内容和结束标签的HTML元素:自闭合元素(input,br,img,link)
(自闭合元素必须自闭合)
input:输入框标签
br:换行标签
img:导入图片标签 (src导入图片地址)
link:外部链接

2.展示分类:

HTML运行流程是从上往下)(HTML布局是从上往下,从左往右的排列)
行内元素(不会换行,从左到右):span，a，img，input，i，select，button，textarea
块级元素(独占一行,从上到下):div，p，table，h1---h6

3.功能分类:

内容元素:通常用来构建网页的内容
a(超链接),img,input,select(下拉框),button,textarea

结构元素:通常用来构建网页内容的结构(无实际展示效果,配合css)
div，span，thead，tbody，tr，td
让html更直观，更有结构，方便后续
<table>表格标记
<tr>行标记
<td> 单元格标记
<caption> 表头标记
<th> 表格的表头标记
<colground> 列分组标记
<col> 列操控标记

四.HTML标签属性

通用属性：是某个元素可以应用的属性
特定属性：是某些特定元素才能应用的属性

通用属性：

属性名称	描述
id	标识元素的id，全局唯一，只能一个
class	标识元素的类名，可以多个常用来给元素设置统一的形式
style	给元素设置行内样式

特定元素：

属性名	描述	标签
src	通常使用来表示资源的链接	img、script（引入外部 js）
href	连接地址或资源地址	a、link（引入外部 css）
type	表示同类元素的不同类型	input

本文章整理自上课ppt，仅供学习使用