HTML

2017-04-11  本文已影响0人  我最爱吃大西瓜了

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

标签就得用其他的标签来代替。也就是说所有的符号都有特殊的表示方法:

&lt = < 是英语less than 小于,&gt 就是大于 greater than ,&nbsp空格 英语 non-breaking spacing(看前后语境),&copy 版权符号,

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.

上一篇 下一篇

猜你喜欢

热点阅读