前端与HTML
前端概要
什么是前端？
解决GUI人机交互问题、跨终端（例如：PC端/移动浏览器、客户端/小程序等）
前端应该关注那些问题？
- 美观 给用户好的视觉体验
- 安全 尽可能保障数据内容的安全性
- 功能 功能完整
- 无障碍 力求所有人在使用上尽量无障碍
- 性能 追求优良的渲染效率、时空复杂度等待
- 兼容 能让在不同设备上也能呈现良好效果
HTML概要
1.HTML(HyperText Markup Language)：超文本标记语言
- 超文本：超越文本的限制，引入了图片、标题、链接、表格、视频、动画等等
- 它不是一种编程语言，而是一种标记语言，有双标签，单标签
2.HTML语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合
- 属性值推荐双引号包裹
- 某些属性值可以省略
3.常用标签
- h1-h6 标题标签
- p 段落标签
- a 链接 在href属性中指定链接的地址
- cite 定义着重文字
- strong 定义加重语气
- blockquote 块标签
- code 定义计算机代码
<img src="photo.jpg"/>
img 图片标签,src是属性名（图片的路径），photo.jpg是属性值
4.HTML语义化
HTML中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义来编写HTML
有序列表用ol;无序列表用ul
lang属性表示内容所使用的语言
CSS是什么
- HTML(内容)
- CSS(样式)
- JavaScript(行为)
用来定义页面元素的样式
设置字体和颜色 设置位置和大小 添加动画效果
在页面中使用CSS
1.外链
<link rel="stylesheet" href="/assets/style.css">
2.嵌入
<style>
li { margin:0;list-style:none;}
p { margin:lem 0;}
</style>
3.内联
<p style="margin:lem 0">Example Content</p>
CSS是如何工作的
选择器 Selector
-
找出页面中的元素，以便给他们设置样式
-
使用多种方式选择元素
-
按照标签名、类名或id
-
按照属性
-
按照DOM树中的位置
字体font-family
- text-align 文字对齐
- letter-spacing 字符间距
- word-spacing 单词间距
- text-indent 文字缩进
- text-decoration 文字修饰（none、underline、line-through、overline）
