HTML
Sublime 代码编辑器(高效率的程序书写工具)
1.修改显示的文字大小,按住ctrl 加 滚轮 就可以放大和缩小文字
2.ctrl + shift + d 复制当前行
3.ctrl + shift +k 删除当前行
4.ctrl +shift+↑ 上移当前行
5.ctrl+ shift+↓ 下移当前行
HTML(语义标签):
<!DOCTYPE ...>
<html>
<head>
网页的配置
</head>
<body>
给用户看的
</body>
</html>
DTD:文档的类型申明 Doc Type Declaration 。一共有七种DTD,3中HTML 4.0, 3种XHTML 1.0的,一种HTML5.
三小种:strict (严格 不能用 u,b,i标签),transitional(不怎么严格),framset。
字符集 Charset ,这条meta 不用背(UTF-8 ,gb3212)
UTF-8:字符全,每个一个汉字三个字节,所以文件尺寸大。
gb2312(gbk):字符少,每一个汉字都是两个字节,所以文件尺寸小
meta:是一种说明关键字的申明,提供有关页面的元信息,帮助解析。
title :标签就是页面标题
HTML:就是负责语义的,所以就是用标签对儿的形式给文本增加.义。
h1~h6 标题
p :段落(注意p标签里面只能放文本,图片,表单元素 这三个东西都是流元素 (属于css的类型))
img 图片: 完整的语法,两个属性src和alt,要知道是什么意思!
src : source资源,alt:alternate 替换物
<img src='images/jiehunzhao' alt='结婚照'>
如果这个文件夹比这个文件更浅:<img src='../../jiehunzhao' alt=''>
里面的路径是相对路径,就是从这个文件出发来找图片
a:anchor(锚):<a href='网址' title=‘悬停文本’ target='_blank’>链接字</a>
ul(unordered list):无序列表,用来表示一个列表的语义,ul里面只能有li,一般用在导航条。
ol(ordered list):有序列表,用来表示一个有序的语义,ol里面也只能有li标签
定义列表:定义列表也是一组标签,不过比较复杂,出现了三个标签:
dl:表示definition list 定义列表
dt 表示definition title 定义标题
dd表示definition description 定义描述词
表达的语义有两层,下面 文字给上面的文字做说明
定义列表用法是非常灵活,一个dt可以配合很多个dd,还可以拆开,让一个dl 里面只有一个dt。决定页面的标签的时候还是语义来决定
div 和 span :
这两个是非常重要的标签标签,div的语义是division就是“分割”;span的语义就是“span”范围,css课程你将制定,这两个东西都是最重要的盒子,dashed是加点的border。
div:在浏览器中,默认是不会增加任何的效果改变的,但是语义却改变了,div中的所有元素是一个小区域,div标签是一个容器级别的标签,什么都可以放,自己也可以放
span:也是表达“小区域” "小跨度"的标签,但是是一个“文本级”的标签。就是说,span里面只能放置文字图片和表单元素,span里面不能放p,h,ul,ol,li。
也就是说span里面放小元素,div里面放大元素。
所以,我们亲切的把这种样式叫做div+css ,div负责布局,css负责样式
表单
表单就是收集用户信息
所有的表单元素都要写在form标签内部。form就是英语表单的意思,form表单有method 和 action属性,action属性表示,表单提交到哪里,method属性表示用什么http方法提交有get和post方法两种
input:表示的是一个输入,指的是一个输入小部件 type 表示“类型”,text表示文本,指的是类型是一个文本框的输入小部件,value表示文本中默认有的值。
这是一个自封比的标签,自此,我们学习的内容的自封闭标签:<meta name="Keywords" ,content="">,<img src="",alt=""> <input type="text">
input的type: text(文本),passwd(密码),radio(单选按钮 将name属性设置成一样就只能选一个,术语叫做互斥 设置checked="checked"就是默认被选择的状态) ,checkbox (复选框,虽然不需要互斥但是也需要同意的name属性)
HTML5中input属性会很多,比如说 type=“color”,type=“date”
下拉框:
select +option:select 表示选择,option等于选项
多行文本框(文本域名)
textarea: <textarea cols="30" rows="10"></textarea>中间不加内容,如果加了就是默认文字
cols=columns表示列 ,row表示行。
三种按钮
普通按钮:input value=button
提交按钮:input value=submit(不需要写value也有提交的字)这个按钮点击,真能提交
充值按钮:input value=reset ,就是复位的意思
前段开发工程师只关心页面的美,样式,版式,交互,至于数据的保存,读取,都是后台工程师的事情。(Node.js)就是后端语言,到时候我们就知道怎么把表单提交到存到数据库了.
input的类型其实很多,html5会变得更多.
label:把字体包裹,input有一个id属性,然后label标签 有一个for属性,和id相同就绑定了,这个label和这个input就有了绑定关系了.任何表单元素都有label.
HTML杂项:
注释:<!-- -->
字符实体:我们想在页面上输出<h1>这些标签,但是默认浏览器把他编译成了h1
标签就得用其他的标签来代替。也就是说所有的符号都有特殊的表示方法:
< = < 是英语less than 小于,> 就是大于 greater than , 空格 英语 non-breaking spacing(看前后语境),© 版权符号,
HTML废弃标签介绍:
现在html只负责语义,而不负责样式
1.font 2.b 3.u 4.i 5.del em strong 都作为css钩子使用,不是原意
这些样式都有样式的作用,干涉了css,所有就不用了
6.hr 不用了,用盒子的边框来做
br表示换行,不另起一个段落,进行换行 break 。
99%需要换行的时候,都表示另起一段,就应该用 p标签。
标准的div + css 页面,用的标签种类很少
代表就是 div p h span a img ul ol dl input.