HTML学习笔记(一)

windows系统下学习html开发的工具:记事本、WebStorm

若使用记事本开发,编码格式要改为UTF-8,后缀为.html。

学习html的网站:

html参考手册:中文

http://www.w3school.com.cn/

http://www.runoob.com/

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; (nbsp: non-breakable space)

如:<h1>一级&nbsp;&nbsp;&nbsp;标题</h1>



html转义符

既然讲到html转义符了就再举一些常见的转义符的例子:

在html中,被尖括号< >括起来的内容一般都是有一定属性涵义的,并且html有一定的容错率,如果我们在尖括号里加上一段不知所云的英文,html虽然识别不了,但是它会尽可能地理解你,用它博大的胸怀包容你,显示出它认为你可能想要的内容。

比如


充满人文关怀
那么如果我们就是想要显示尖括号内的那一坨内容要怎么办呢,岂不是会被人道毁灭?

因此这个时候,转义符就上场了。

< : &lt;  (less than)

>:  &gt;  (greater than)

<br>&lt;Hello World&gt;

&: &amp;


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>


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

推荐阅读更多精彩内容