HTML初步认识

HTTP: Hypertext Transfer Protocol. 超文本传输协议

每一个网址,都对应着确定的服务器上的文件

网页是真实物理的文件。一个网页是很多物理文件组成的:html文件、图片文件、js文件、css文件。这些文件要通过特殊软件才能上传到服务器上供用户看。用户通过浏览器访问网址,服务器上面的文件就会通过http请求悄悄传输到用户电脑中的临时文件夹,在用户的电脑中执行、渲染、呈递。

纯文本文件只有文本,没有样式;用记事本等纯文本编辑器可读,不是乱码。
html、css、js都是纯文本。html负责描述页面的语义;css负责页面样式;js描述页面动态效果。html只能通过标签对给文本增加语义;css可以让文字居中,更改文字字号、字体、颜色。

HTML: Hyper Text Markup Language. 超文本标记语言。所谓超文本,即可以加入图片/声音/动画/多媒体等内容,还可以从一个文件跳转到另一个。它不是编程语言,而是标记语言。其作用是用标记标签来描述网页,把网页内容在浏览器中展示出来。
.html:网页的格式

HTML演示:

<h1>Mayday简介</h1>
<h2>基本信息</h2>
<p>
五月天,台湾摇滚乐团,由乐队团长兼吉他手怪兽(温尚翊)、主唱阿信(陈信宏)、吉他手石头(石锦航)、贝斯玛莎(蔡升晏)和鼓手冠佑(刘谚明)组成,前身为“So Band”乐团,在1997年3月29日更名为“五月天”。至2016年,四次拿下"台湾金曲奖"和“最佳乐团奖”。
1999年,发行首张专辑《第一张创作专辑》。2000年7月7日,发行了第二张创作专辑《爱情万岁》。2001年7月6日,推出暂别歌坛之作第三张创作专辑《人生海海》。……2011年12月16日,发行第八张专辑《第二人生》。2016年7月21日,发行第九张专辑《自传》。
</p>

<h2>早年经历</h2>
<p>
1992年至1994年,阿信、怪兽、玛莎、石头先后结识于台湾师范大学附属中学,加入师大附中的吉他社,开启了音乐旅程。
1997年,为了报名参加野台开唱,五人使用玛莎在网络BBS的代号“MAYDAY”作为团名,正式更名为“五月天”。3月29日五月天野台开唱,正式组成乐队。
1999年,第四任鼓手冠佑加入乐团,主唱阿信把成军时间改为冠佑加入后。
</p>

<h2>演艺经历</h2>
<p>
1998年6月,五月天加入滚石集团,正式成为滚石集团的一员。
1999年7月7日,发行加入滚石之后的第一张专辑《第一张创作专辑》。
2000年7月7日,发行了第二张创作专辑《爱情万岁》。
……
2011年12月16日,发行第八张专辑《第二人生》。
2016年7月21日,发行第九张专辑《自传》 ,尽管这张专辑不少歌曲回忆的都是五月天亲历的青春,但却另有声音论这是五月天最无朝气之感的一张专辑。11月22日,为电影《你的名字》创作并演唱主题曲《好好(想把你写成一首歌)》。
2017年5月2日,为电影《春娇救志明》演唱主题曲《春娇救志明》,这也是歌曲《志明与春娇》的国语版。
</p>

html有很多标签对,可以给文本增加不同的语义,
如< h1 >< /h1 >主标题、< h2>< /h2>二级标题、< p>< /p>段落。

任何出文本编辑器都能够编辑html,如记事本,editplus,notepad++
sublime:高效率的程序书写工具
webstorm:更高级的项目级别编程工具

sublime中常用的快捷键:
ctrl+滚轮:放大缩小文字
ctrl+shift+d:复制当前行
ctrl+shift+k:删除当前行
ctrl+shift+↑:上移当前行
ctrl+shift+↓:下移当前行

在敲入标签的时候,仅需输入标签的名字,按tab就可以自动生成标签对——输入p然后按tab,软件自动生成< p>< /p>

在页面中输入html: 5或者!然后按下tab键即可生成HTML骨架,也可以用sublime快速生成——输入html:xt,按ctrl+E即可。xt表示版本,表示标准html格式。

<html>
	<head>
	
	</head>
	<body>

	</body>
</html>

完整骨架如下:

<!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>
		<h1>document</h1>
		<p>paragraph</p>
	</body>
</html>

第1行是网页的声明头,叫DocType Defintion,文档类型定义,简称DTD。这行语句里面暗含了一个网址。W3C是出web规范的组织机构。html、css、js的规范都是W3C定义发布的。world wide web coalition , 国际万维网联盟。网页声明头可以告诉浏览器,这是一个什么标准的页面。
第2行是最大的html标签,所有的网页内容,都要包裹在这个标签对儿里面。
在html标签中,有两个属性:
xmlns=“http://www.w3.org/1999/xhtml” 命名空间,就是一个规范;
xml:lang=“en” 语言是英语
< meta http-equiv=“Content-Type” content=“text/html;charset=UTF-8”> 字符集的配置
title标签就是网页的标题,显示在浏览器的标签栏中。
body标签就是网页的内容。

HTML注释
任何程序、代码都有注释,注释是给程序员看的,不影响程序。适当的注释能够让程序更加可读。
语法:< !–注释的内容–>
sublime中按ctrl+/就是注释。

<!--这里准备如何做-->
<div>头部</div>
<!--这里还没想好怎么做-->
<div>主要内容</div>
<!--这里不知道要不要做-->
<div>页尾</div>

字符实体
在页面上输出"< h1>"这些字符,但是html认为这是一个未封闭标签。所以&lt就是<的字符实体,即用常用字符表示这些符号的方式。
lt是英文less than
gt是greater than,即>的字符实体。
&copy就是©版权符号的实体。
&nbsp:non-breaking spacing,不打断空格的意思,就是空格键的字符实体。

html废弃标签简介
html现在只负责语义,不负责样式,但是html一开始是有样式的。
< font size=“9” color=“red”>哈哈哈< /font>
< b>加粗bold< /b>
< u>下划线underline< /u>
< i>倾斜italic< /i>
< del>删除线delete< /del>
< strong>强调< /strong>
< hr/>水平线
< br/>换行(网页中99.99%需要换行,是因为另起了段落,所以要用p,不需用< br/>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值