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

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

&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.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,725评论 1 92
  • 序言 整理谷歌的小弟的笔记,版权归原作者所有,本文仅作整理,原文链接:http://blog.csdn.net/l...
    在代码下成长阅读 1,135评论 1 5
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 3,192评论 0 5
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,224评论 1 41
  • HTML基础 本文包括 HTML基本知识与结构 HTML常见标签 标签写法与嵌套的讨论 HTML、CSS、java...
    廖少少阅读 2,077评论 2 21