1、BS和CS简单认识
BS:browser-server 浏览器-服务器模式
CS:client-server 客户端-服务器模式
开发:cs向bs靠拢,开发成本,维护成本都比较低。
浏览器是html的翻译官
2、网站工作原理
服务器发给我们的是html、css、js文件。浏览器作为翻译官,将这些文件翻译成图文并茂的
形式供我们观看。
3、动态网页和静态网页
只要涉及到和后台交互的网页都是动态网页,静态网页一成不变,永远是死的。
比如登录网上银行。
4、代码编辑器
sublime
notepad++
5、HTML
全称:HyperText Markup Language 超文本标记语言
历史
后缀:.html或者.htm,但是推荐使用前者
【注】组织-》文件夹和搜索选项-》查看-》隐藏扩展名前面的小勾去掉
前端页面组成:html、css、js
marquee(direction,scrollamount,width,height,loop),认识标签,属性和值
乱码问题:
编辑的html文件,在notepad中,格式转为UTF8-无BOM格式
浏览器中在右上角选择-更多工具-》编码 选择Unicode-UTF8
了解:
0-9 a-f
标签写法:
<标签名 属性=属性值>以这种标签方式来显示的内容
【注1】属性值可以加单引号、双引号或者都不加,但是推荐加双引号
【注2】多个属性中间以空格隔开
字符编码(回头了解)
ASCII ANSI(随操作系统安装,GB2312 GBK) Unicode UTF8
标签格式
注意事项
1、 在<>之间的是标签、标记
2、 标签名不能私自添加
3、 所有的字符都是英文字符
4、 多个属性中间以空格隔开
5、 html中单位可以不写,但是css中单位必须写 px
6、 属性值一般要加引号
6、全局架构标签 html\head\title\body
title就是该网页的标题,body中要写以后我们常用的标签
要养成良好的编码习惯,写html的时候注意缩进
7、html注释
注释:为了方便程序员看代码而人为书写的一些通俗易懂的汉语
8、body常用属性
bgcolor:背景色
background:背景图片
text:文本颜色
leftmargin: 左外边距
topmargin: 上外边距
link:正常状态下超链接颜色
alink:激活状态(鼠标点中不松开)下
vlink:访问过后的颜色(了解)
这个标签写到head中,目的是告诉浏览器要以utf8格式显示
标签分两种:双边标签(有开始有闭合)和单边标签(只有开始,无闭合)
class id style:这三个先了解,配合css使用
9、颜色
单词:手册有所有单词
#121212:以#开头,前两位代表红色,中间两位代表绿色,最后两位代表蓝色
取值范围:00-ff(0-255) 0-9 a-f
10、字体修饰标记(如下都是双边标记)
font(size,face,color)
size:取值范围1~7(控制文字大小)
face:字体
刷新快捷键:control+r
color:字体颜色
b(strong):这是两个标签,都是加粗标签
i(em,cite):这是斜体标签
u:这是下划线标签
s: 这是删除线标签
sub:下标标签
sup:上标标签
11、排版标记
br(单边标记):换行标签
nobr:不换行标签,当要显示的内容超过屏幕的宽度时,不会自动换行。
p:段落标签,
块级标签,内容要单独的另起一行
与之对应的是行内标签,行内标签都不会另起一行
hr(align width size color)(单边标记) :水平线标签
align:对齐方式,left:左对齐 center:居中对齐 right:右对齐
width:宽度,值可以写数字,也可以写百分值,写数字可以省略单位px,写百分值代表的是宽度相对于父级标签的宽度。
size:水平线的高度
color:水平线颜色
h1-h6(align) :标题标签(是块级标签)
pre:(不常用,在php中打印数组的时候偶尔用到)告诉浏览器以原有样式给我显示,有几个空格给我显示几个空格,有多少换行给我显示多少换行
空格问题: 在html文件中,所有的空格或者换行都被浏览器解释为一个空格,如果想要得到换行效果,那么请使用br标签
12、实体符号
不断行的空白
< 小于
> 大于
& &(可用于显示其他字符)
© 版权
&trade 商标
® 已注册
× *
÷ /
13、无序列表
ul li
type:
disc:默认属性,实体圆点
circle:空心圆圈
square:实心方块
14、有序列表
ol li
type:1 a A i I ,各种顺序类型
start:【注】这个后面只能写数字
15、自定义列表
dl dt dd
16、超链接标签
url:统一资源定位符
href title target name(锚点)
打开另一个文件的锚点