开始学习HTML啦, 谁让现在iOS的招聘要求上都写着熟练掌握HTML优先呢.目前在看的<<Head First HTML 与CSS>>, 感觉还挺不错的. (原谅我的所有标点符号都是英文的,只因为设置好了不想改). 好吧,不多说废话, 开始写笔记啦~(对了,HTML5呢就是最新版本的HTML,不过因为以后都以这个HTML5作为规范,虽然会在这个基础上增加新的功能特性,但是不会有HTML6之类的东西出现了,所有也可以直接叫HTML)
基础概念
1. HTML: HyperText Markup Language,超级文本标记语言
它的作用就构建网页的结构和内容.告诉浏览器这个界面的是由哪些模块以怎么样的形式构成的.都有些什么内容.例如这个页面有几个段落.第几个段落中间会有一张图片.哪里会有换行,哪里会有一个超链接.
2.CSS:Casading Style Sheets,层叠样式表
它的作用是告诉浏览器,页面里的元素该如何显示.比如背景应该显示成什么颜色啊,文字用什么字体啊,大小如何之类的.这个具体后面的笔记再详细介绍吧 ,毕竟....我还没学到那儿呢
3.标记.
HTML里面所有用<>括起来的,都是标记. 例如,<a> 和</a>,<head>和</head>,<h1>和</h1>等. 不带"/"符号的,是开始标记,带"/"符号的是结束标记.一般情况下,一个开始标记(如<a>)会对应着一个结束标记(如</a>),它们是成对出现的.(不一般的情况,那就看下面元素里的解释吧~)
4.元素:HTML就是由一个个元素组成的.
a) 元素按照构成方式来说,可以分为普通元素和空元素.
普通元素 = 开始标记 + 要显示的内容 + 结束标记 ,
例如 <h1>你喜欢学习吗?</h1> , 这就是一个h1元素(h1是表示字体最大的标题,依照字体大小,有h1~h6这6个级别的标记). <h1>是开始标记,"你喜欢学习吗"是会显示在网页上的内容,</h1>是结束标记, 三者就构成了一个普通元素.
空元素 = 开始标记
例如<br>,这是一个换行的标记,在输入<br>的地方就表示这里要有一个换行.它不需要跟结束标记成对出现,也不需要有内容.因为它就是表示换行而已. 不写<br>,直接写一个</br>也会换行,不过HTML里一般不这么写,都是写<br>. 另外,出现<img>标记的地方就表示这里会有一张图片.这个也不需要显示文本内容.也是一个空元素.
b).按在页面里显示时前后是否会有自动换行,也可以分为块元素和内联元素.
例如 <p>要显示的内容</p> 这个是表示段落的元素,<p>是段落标记. 页面在显示的时候,段落的前后自动都会有换行,跟上下空出距离.这种元素就叫块元素.还有显示标题的<h1>也是块元素. 相反的像<a>是表示一个链接,在它在页面显示的时候,前后不会有自动换行,这种就叫内联元素. 区别就是看前后会不会有自动换行啦
块元素通常用作web页面中的主要构建模块(如一个一个段落),而内联元素往往用来标记小段内容(如段落里的一个链接).在设计界面的时候一般先从大的块开始(块元素),然后在完善页面的时候加入内联元素.
属性:
属性是用来修饰元素的.属性都写在开始标记的括号里,用等于号赋值.如<img src="haha.jpg">. 这里src就是img的属性,而"haha.jpg"就是这个属性的值,记得值要写在" "双引号里,这是比较严谨且标准的写法. 上面说过<img>元素是表示这里要显示一张图片.而这里的scr属性的值就是这张图片的地址了.
标记的介绍
只要新建一个text文件,把后缀改成 .html, 就可以在里面写代码啦.写完以后打开方式选择用浏览器打开,就能看到你写的界面了. 浏览器会自动加载你写的这个本地的html文件.
首先,一个HTML页面最基本的结构如下,下图里显示的元素,都是构成一个界面最基本,且必须有的元素. html是整个页面的最外层元素,所有元素都要包含在它里面. 页面可以划分为2个部分,即head部分(定义一些页面显示效果,CSS代码等)和body部分(整个页面要显示的内容都在这个元素里写).具体见下图代码和注释
<!--- 注释内容-->, 这是html里的注释的写法.
最常用的一些元素的介绍()
1.title元素: 页面的名字,必须嵌套在head元素里.显示效果如下图
2.h1~h6: 标题元素.HTML里提供了6种字号的标题,从<h1>字体最大,<h6>最小.它们都是块元素,也就是这个 元素的前后都会自动换行. ( <h1> 标题内容</h1>,其他几个也是以此类推就好.
3.<p>: 段落元素. 通常在<p>和</p>的前后都会自动换行,因为它是块元素.段落元素是构成页面的一个主要的大块.你也可以在里面嵌套超文本链接啊,图片之类的.
4.<em>:表示强调的.放在这元素里的内容字体会跟前后不一样.这是一个内联元素.所以前后不会自动换行.
5.<img>:图片元素.这是个空元素,所以不是<img>图片</img>这种格式.
这个元素是告诉浏览器这里需要插入一张图片.要显示图片的话,必须给这个属性的src属性赋值. 把图片的地址赋值给这个属性,就能显示该图片了. 可以用网上的图片的URL给src赋值,那下载图片的时候就会根据这个URL去下载图片.也用相对路径来赋值.一般构建网站的时候,都是自己建一个文件夹,里面有不同页面的文件夹,还会有一个专门保存图片的文件夹,网站里要用到的图片都在这个文件里.所以用这个相对路径来赋值的时候,就会去加载这个文件夹里的图片.当你在网上去浏览一个网页的时候,其实就是浏览器根据这个网页的URL去找到这个网页文件所存放的服务器,再找到这个文件夹,加载它里面的html文件和图片等数据,显示到页面上.
另外还有一个alt属性,这也是img元素必须要有的属性.这个属性的值是对图片的描述文字.当图片出于某种原因无法显示的时候,大部分的浏览器就会显示一个下载失败的小图以及alt里的文字.告诉浏览者这是一张什么图.另外,对于有视力障碍的人,他们是用屏幕阅读器来阅读网页,屏幕阅读器就会读出alt里的图片文字说明,让读者知道这是什么图片. 虽然即使不给这个属性赋值,在正常情况下不会图片显示造成影响.但是不规范.有的编译器会报警告.
写法就是<img src="hahah.jpg" alt="这是一个人在大笑的图片"> (我的例子里写的相对路径,我的描述能力有限,所以alt的值,看看就好)
