崭新的开始html学习心得

  

 

   大一的我像只无头苍蝇,很想好好努力,学了flash as3.0,学了C,学了很多很多,却找不到正确的方向。大二的我熟悉了学校,熟悉的所有,浑浑噩噩的过了1年。现在的我,大三了,找到了自己的一个短暂方向。奋斗

     前几天入手认真学了一下html,熟悉了html。首先,html+css+javascript=一个完整的网页,我知道了,html负责语义,css负责样式(提高用户体验),Js负责与用户的交流。自己的理解嘛就是Html把大体的框架弄好,css弄一些炫酷的,容易让人增加好感度的效果,js么就是所有网站都必须要有的了,与客户交流。

    自从2004年,CSS牛逼起来之后,w3c规范里面就把html里面有关样式的很多标签都废弃了。比如说:<i></i>;<em></em>;<u></u>;<b></b>;<strong></strong>。html需要掌握的标签就少了一些了。

 

 

 

第一部分:安装软件   

 最开始学习,用的是sublime软件,因为这款软件比较轻便。在我们前期学习非常适合。说到sublime这个软件,真的让我头疼大哭,下载了之后安装插件,百度可以搜索html插件,这是其中一个安装插件的办法的网站https://www.cnsecer.com/460.html,然后就会自动有教程如何安装。但是我碰到了一个很棘手的问题,好像是墙把我这个拦住了。

    


至今我还是不知道如何弄好这个问题,百度上也有教程,这个网址上面讲的很清楚,但是我个人原因,弄不来。http://blog.csdn.net/zhyh1986/article/details/40678263。准备过2天碰到老师的时候问一下。

 

 

 

第二部分:前期准备

    安装好了网站,当我第一次输入html:xt,加上tab,出现那一堆东西的时候,给我兴奋的(毕竟弄了好久才弄好的)。

    html的英文,hypertext markup language(超文本标记语言)。

    纯文本和超文本,超文本首先就是纯文本。纯文本很单纯,你怎么给它变,下次出现还是一个样子。我目前知道的超文本有,.html/.css/.js/.java等。

 

  一、在打代码之前,还了解了一下快捷键,

    1.shift+ctrl+d是复制当前行

    2.ctrl + x删除当前行

    3.ctrl + '+'把字放大

    4.ctrl +'/'注销当前行代码

    5.shift+ctrl+上下键可以移动单前行

    6.ctrl+鼠标左键可以多选好多行

 

二、关于输入html:xt加tab后出来文档的解读。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>Document</title>

</head>

<body>

</body>

</html>

1.第一行是网页文档声明头,Document Type Declaration(DTD)

2.第二行是本文档最大范围的标签对

3.head标签 包含对文档配置的标签

4.body标签,就是内容的载体,是用户直接看得见的部分

Html4.01

Strict

严格的,体现在一些标签不能使用<font> <u> <br>

Xhtml1.0

Strict

严格的,体现在一些标签不能使用<font><u><i>

标签是可以大写的

Transitional

普通的

标签严格的小写

Transitional

普通的

 

Frameset

带有框架的页面

 

Frameset

带有框架的页面

三、还有2种字符集:gb2312(gbk),tuf-8。

第一种gb2312 包含了中文汉字以及常用符号

第二种 utf-8 包含了地球上各个国家各个民族的文字以及符号

 

第三部分:开始学习

总结:html经常需要用到的标签不是很多,主要有:h...p...a...ul...li...form...input...div...span...

一、一个网页,必须要有页面描述和关键字

<meta type = "Keywords" content = "............................">

<meta type = "Description" content = ".................">

<title>...............</title>

这些都是写在head里面的。

 

二、基本语法特性

1.html对换行不敏感,tab(连续空格)不敏感

不换行可以减小文件的大小,如果你的网页追求极致速度,可以采取不换行

2.空白折叠现象:

html中所有的文字之间,如果有空格,tab,有换行,都将被折叠为一个空格显示

3.标签要严格封闭

 

 

三、h标签和p标签

标签在html规则里,可以分为两类:

1.容器级标签: 可以包容任意标签,典型代表h系列标签

2.文本标签: 只可以包容文本,图片,表单元素 典型代表p标签

 

h: headline 中文就是标题的意思

h系列标题总共有6级  h1~h6

h标签就是给文字添加标题的语义

 

p: paragraph 中文就是段落的意思

p标签就是给文字添加段落的语义

四、图片标签

图片标签是个单标签,可以加入的图片类型为:jpg(jpeg)...png...bmp...gif

<img src = " ../../../image/zhuzhu.jpg"  alt = " 猪猪的照片 ">

src:source   alt:altnative

 

五、a标签

<a href = http://www.baidu.com  target = "_blank">百度</a>

名词解释:

a: anchor 中文就是锚点

href: hyper() reference(链接)

target: 目标

_blank: 空白窗口

title: 悬停文字

页面内锚点

<a href = "#" >top</a>

<h2><a href = www.baidu.com name = "baidu">baidu</a></h2>

2.1跳到其他页面指定的位置,代码示例如下:

 <a href = "猪猪.html#123">zhuzhu123</a>

ul li ...ol li .... dl dt dd....

div...span...很重要

 

六、表单元素

form里面:

文本框<input type = "text"  value = "zhuzhu">

密码框<input type = "password">

单选框

<input type = "radio" name = "猪猪美不美" checked = "checked">美

<input type = "radio" name = "猪猪美不美">不美

复选框

<input type = "checkbox" name = "猪猪蠢不蠢">很蠢

<input type = "checkbox" name = "猪猪蠢不蠢">非常蠢

<input type = "checkbox" name = "猪猪蠢不蠢">非常非常蠢

<input type = "checkbox" name = "猪猪蠢不蠢">非常非常非常蠢

自选框

<select>

                   <option>1</option>

                   <option>2</option>

                   <option>3</option>

                   <option>4</option>

</select>

普通按钮

<input type = "button" value = "zhuzhu">

提交按钮

<input type = "submit">

重置按钮

<input type = "reset">

选择文件

<input type = "file">

label标签将选项和前面的那个选项圈绑定

<input type = "radio" name = "猪猪蠢不蠢" checked = "checked" id = "wudidachunzhu"><label for = "wudidachunzhu">蠢</label>

 

 

 

 


   

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值