基础
网页:本质是前端程序员写的代码,由网页元素组成的,这些元素是利用html标签描述出来,然后通过浏览器来显示给用户
五大浏览器:ie,谷歌,Safari,火狐
Web标准中分为三个构成
结构-----HTML----页面元素和内容
表现-----CSS------网页元素的外观和位置等页面样式
行为-----javaScript-----网页模型的定义与页面交互
一.什么是前端
做页面,pc网站,小程序,移动app
什么是后端
后台的主要工作是和服务器和数据库
服务器的作用:存储数据和处理数据
什么是HTML
HTML指的是超文本标记语言,用来描述网页的一种语言
超文本:可以加入图片,声音,动画,多媒体
还可以从一个文件跳转到另外一个文件,与世界各地主机的文件连接
二.基本结构标签
HTML标签通常是成对出现的
<html></html>------ HTML标签------页面中最大的标签
<head></head>-----文档的头部------注意在head标签中我们必须要设置的标签是title
<titile></title>------文档的标题------让页面拥有一个属于自己的网页标题
<body><body>----文档的主体------元素包含文档的所有内容,页面内容基本都是放到body里面的
标签关系
包含:
![](https://img-blog.csdnimg.cn/img_convert/1de8ea0a87dc400d7720ec903a836f2f.png)
并列关系
![](https://img-blog.csdnimg.cn/img_convert/50784a05aa0277fd3fe1a76d2e254191.png)
结构:
![](https://img-blog.csdnimg.cn/img_convert/9b0d7ab8ead2f755004b58be40e7aca0.png)
语法
![](https://img-blog.csdnimg.cn/img_convert/455063d906c029a8736f78f20515b88f.png)
![](https://img-blog.csdnimg.cn/img_convert/22a7251747329209c3f6cdf26ad9af81.png)
标签语义
1.<h1>-<h6>标题标签
作为标题使用,并且依据重要性递减
![](https://img-blog.csdnimg.cn/img_convert/d53dd344f684b4b21abc5f281e027a19.png)
2.段落标签
<p></p>
语义:可以把HTML文档分割为若干段落
![](https://img-blog.csdnimg.cn/img_convert/e3730ee5698ce0c79ae1345025de6b16.png)
3.换行标签
<br />
语义:强制换行
特点:<br />标签只是简单地开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距
文本格式化标签
需要为文字设置粗体,斜体或下划线效果,就需要HTML中的文本格式化标签
![](https://img-blog.csdnimg.cn/img_convert/32f461e06ca94da3ee8d24d2f12b9481.png)
<div><span>标签
没有语义,它们就是一个盒子,用来装内容。
![](https://img-blog.csdnimg.cn/img_convert/91a809c5eaf412096bb403afd1f651ad.png)
![](https://img-blog.csdnimg.cn/img_convert/a8666ec63f219a53835e658e74f054c7.png)
图像标签
![](https://img-blog.csdnimg.cn/img_convert/81d70c3b47f0674ec23ed66273231001.png)
![](https://img-blog.csdnimg.cn/img_convert/5cf720b34061df50da2b1efebfc9f3c0.png)
![](https://img-blog.csdnimg.cn/img_convert/e2869f999e72384b2142cff5ae28b4aa.png)
![](https://img-blog.csdnimg.cn/img_convert/56c72782dca8d7b2c80db893762cdeed.png)
![](https://img-blog.csdnimg.cn/img_convert/67b71184fa5132207355a0ea8a7c8ddd.png)
路径
![](https://img-blog.csdnimg.cn/img_convert/521700a828a97861910a0e5f92629653.png)
![](https://img-blog.csdnimg.cn/img_convert/b940fbc8736728a0ccba78421802aaab.png)
相对路径:以引用文件所在位置为参考基础,而建立出的目录路径。
图片相对于HTML页面的位置
![](https://img-blog.csdnimg.cn/img_convert/c29ed60a9024df7898a56bbb8a2339f4.png)
绝对路径:
是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径
![](https://img-blog.csdnimg.cn/img_convert/229d9fd6714ef3713b3eec4d83802844.png)
超链接标签
![](https://img-blog.csdnimg.cn/img_convert/a1cc30a0f28c6796a5ee2131aee2033b.png)
![](https://img-blog.csdnimg.cn/img_convert/d6e8c011089b9fa3ce8ff11ffa476ff8.png)
连接分类
外部链接:
![](https://img-blog.csdnimg.cn/img_convert/90183ad5a8ad025f1f85ae895a076fb2.png)
![](https://img-blog.csdnimg.cn/img_convert/24fac1255569cde1f2352a66f0c015a4.png)
内部链接:
![](https://img-blog.csdnimg.cn/img_convert/c732cebabbcfc3a8f514c56806e1e745.png)
![](https://img-blog.csdnimg.cn/img_convert/d5b25d2ddb4b412a5ee80897ed842c8a.png)
空链接:
<a href = '#'>kong</a>
下载链接:
![](https://img-blog.csdnimg.cn/img_convert/0eeb66b8091fcf75048b4cb6d0bf1840.png)
网页元素链接:
![](https://img-blog.csdnimg.cn/img_convert/897dacb7dd3820f996feee636ef15d9c.png)
锚点链接
![](https://img-blog.csdnimg.cn/img_convert/9126dc8c3912dfa9e746f67fa01cd0be.png)
注释
![](https://img-blog.csdnimg.cn/img_convert/fae4dbc0e61290e11cdc1a9f0751f3e4.png)
![](https://img-blog.csdnimg.cn/img_convert/d4814b6325c0f8d1796a46dee2ebe643.png)
表格标签
表格主要用于显示,展示数据,可以让数据显示的非常的规整,可读性好,特别是展示后台数据
![](https://img-blog.csdnimg.cn/img_convert/6e705230e21a60ba56b64cb1286e8f29.png)
<th>:表头单元格,常用于表格第一行,突出重要性,
![](https://img-blog.csdnimg.cn/img_convert/4928db8d73858be0d9c1eff7c925fcc8.png)
表格结构标签
![](https://img-blog.csdnimg.cn/img_convert/dfb0179d12387da103de8f7861a64961.png)
![](https://img-blog.csdnimg.cn/img_convert/f565f502fd502e9ed8735ed5b589df45.png)
表头
![](https://img-blog.csdnimg.cn/img_convert/8b3f43ce457a27e71c98b734b9bc4404.png)
合并单元格
![](https://img-blog.csdnimg.cn/img_convert/830bcea70f6898f138c62189b5163464.png)
![](https://img-blog.csdnimg.cn/img_convert/a5dc64a9745984aed6ffeefa03234be1.png)
合并单元格三步曲:
1.先确定是跨行还是跨列合并。
2.找到目标单元格,写上合并方式 = 合并的单元格数量。比如:<tdcolspan="2"></td>。
3.删除多余的单元格。