前端:
广义:用户能看见并且交互的展示界面
狭义:运行在浏览器上的页面
学习的语言:
html5 =>h5架构+css3布局+JavaScript逻辑
html:超文本标记语言
可以支持文本以外的视频,图片,故叫超文本
学习html的目的:完成页面结构的搭建
html三大组成
标签:<>被尖括号包裹,由字母开头包含合法字符的,可以被浏览器解析的标记
指令:<>被尖括号包裹,由!开头的标记,两个指令<!doctype html > <!-- -- >一个文档声明,一个注释
转义字符:特殊符号无法显示,需要转义字符代替 空格 <
标签:
有语义,用来做记号,不用来控制样式
页面:
一个html页面有且只有一个页面模板
常用标签:
使用标签的语义,完成页面架构的搭建
1.div 三无,无语义,无功能,无样式,完成页面架构的搭建
2.h1 页面总标题,代表页面整体含义,一般一个页面只有一个H1标签
3.列表 ul>li*5
4.p:段落标签,带空格功能
5.img 图片标签 src 数据源 alt 资源加载失败的文本提示 title鼠标悬浮提示
6. a 超链接标签,href 超链接地址 本地地址时写相对地址, target (跳转方式_self(自身页跳转) |_blank(新开网页跳转))
7.浏览器会将所有空白字符都解析为一个空格
8.设置字符编码集=>meta charset属性
锚点:
返回top
通过a的name或普通标签的id设置锚点
再通过另一个a的href属性,值为#加锚点名,
转跳到设置的锚点位
表格:
border:外框
cellspacing 格子间的间距
rules:all(所有线) groups(组线)rows(行线)cols(列线)
cellpadding:表格内压缩
css样式层级表
目的:完成页面布局
三大组成部分:
选择器:由标签,类,id单独或组合出现
作用域:一组大括号包含的区域
样式块:满足css连接语法的众多样式
选择器:
用来将css与html建立关联的桥梁,称之为css选择器
将原来出现在标签内部的样式分离开,可以用一个个选择器加以管理,达到页面与样式的解耦合,提高代码的复用性与开发效率
css三种引入方式
1.行间式
2.内联式
3.外联式