windows系统下学习html开发的工具:记事本、WebStorm
若使用记事本开发,编码格式要改为UTF-8,后缀为.html。
学习html的网站:
html参考手册:中文
html reference: English and/or Chinese
https://developer.mozilla.org/zh-CN/docs/Web
http://docs.webplatform.org/wiki/Main_Pagezzzz
html标题
<head>看起来指代的是标题,其实并不是,它定义的是网页的一些属性。
那么html的标题指的是什么呢?我接触到的是这样几个:
<h1><h2><h3><h4><h5><h6>
一级~六级标题
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html学习笔记1</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
*注明*
<!DOCTYPE html>声明为 HTML5 文档
<html>元素是 HTML 页面的根元素
<head>元素包含了文档的元(meta)数据
<title>元素描述了文档的标题
<body>元素包含了可见的页面内容
html段落
<p>这是一个段落</p>
html空格
html是空白不敏感的语言,任意多个空格会被认作一个,任意多个换行也会被认作一个空格。
东亚双宽的字符若是写的时候不同行,在显示的时候会被放在同行,中间加上一个空格。
要使得文字换行显示,就要用到<br>
如:<h1>一级<br>标题</h1>
要使文字中间有多个空格,使用转义符 (nbsp: non-breakable space)
如:<h1>一级 标题</h1>
html转义符
既然讲到html转义符了就再举一些常见的转义符的例子:
在html中,被尖括号< >括起来的内容一般都是有一定属性涵义的,并且html有一定的容错率,如果我们在尖括号里加上一段不知所云的英文,html虽然识别不了,但是它会尽可能地理解你,用它博大的胸怀包容你,显示出它认为你可能想要的内容。
比如
因此这个时候,转义符就上场了。
< : < (less than)
>: > (greater than)
&: &
html字体
<u>下划线</u>
<i>斜体</i>
<b>加粗</b>
html高亮
<mark>Hello World</mark>
<mark>中的默认属性是字体背景变为亮黄色,但是这个属性是可以改的。
<mark style="color:red>content</mark> 字体颜色变为红色,背景色仍为黄色
<mark style="ground-color:red">content</mark> 字体颜色不变,背景色变为红色
<strong> & <em>
通常,我们使用<strong>代替<b>,用<em>代替<i>。
因为<b>和<i>只是将某段内容进行格式上的改动,却没有赋予内容一定的语义内涵(semantic)。
html链接<a>
<a href="网址/地址">标签文字</a> href: hyper-reference
目标打开方式:
<a href="target.html" target="...">
target:
_blank: 在新窗口中打开被链接文档
_self: default。在相同框架下打开被链接文档
_parent: 和父框架集的打开形式一样
_top: 在整个窗口中打开
framename: 在指定框架中打开
html图片img
引用与html文件在同一文件夹下的图片文件:
<img src="文件名.jpg" alt="alt是图片无法正常加载时显示的内容" width="30%"(or width=100px,在不指定height的情况下图片等比例缩放)>
引用与html文件不在同一文件下的图片文件:
<img src="相对路径/文件名"/>
相对路径:相对于引用此文件的html的路径的路径
<img src="img/01/Koala.jpg"/>
将一张图片作为打开超链接的媒介:
<a href="target.html" target="_blank">
<img src="Koala.jpg" alt="图片无法正常加载">
</a>
html列表
<ol> ordered list
<ul> un-ordered list
<li> listitem
html定义列表
<dl> define list
<dt> define term
<dd> define description
html引用
.. 父级别
. 同级别
两个比较特别的标签
<div></div> 块状内容block
<span></span>行内内容in-line
用它们在逻辑上来组织网页内容
<div id="heading">
通知
</div>
<div id="content">
<p>第一段</p>
<p>第二段</p>
</div>
<div id="footer">
<span>署名</span>
</div>
<style>
$Title$
#heading{
color:palevioletred;
}
#content{
font-size:200%;
}
</style>