姬小光前端小讲堂【第002期】

在上一期“然并卵的 Hello World !”(聊天界面回复 001)发出之后,同学们的反应跟我的预期出奇的一致,那就是然!并!卵!

那么从这一期起,让我们接触一些真正的代码吧!

HTML语言与常用标签

与其说HTML(How To Make Love)是一门语言,不如说是一组标记,只要按照特定的格式书写,就可以被你的浏览器识别,并显示出来。

HTML标签的写法也很简单,比如一级标题就是:

<h1>此非然并卵</h1>

其中 h 就是 heading 的意思,相当于 Microsoft Office Word 中的大纲标题。二级标题就是 h2,以此类推。

而段落(paragraph)就是:

<p>小红,你就跟你妈说,今晚在同学家住。</p>

还有神奇的超链接(anchor):

<a href=“http://diao.it” target=“_blank” title=“Why are you so diao?”>DIAO.IT</a>

其中,写在开始标签中,以空格分隔的部分,称为HTML的属性,它可以定义HTML的一些行为。比如超链接的 href 属性,就代表了这个链接指向的地址,当在网页中点击该链接时,就会跳转到对应的网址。

而 target 属性则代表了指向这个地址的打开方式,_blank 就代表新开一个空白页,即新窗口打开。

下面我们看看,如何把它们组合起来并应用到实际中。

右键点击上一课新建的 index.html,选择“打开方式”,选择“记事本”打开。也可以用记事本新建一个文件。

把刚才的几个标签都贴进去:

然后保存,注意如果是新建文件,要选择另存为,然后键入 index.html。

保存完成后,再次双击 index.html,你可以看到一个设计风格极其简洁的网页诞生了:

你会发现,我们刚才写的标签在浏览器里已经有了一些不一样的样式。比如,h1 的字体会变大变粗,a 的颜色会变成蓝色,并且有下划线,这是因为,你的浏览器会有一些内置的样式,方便你浏览网页。

So,下一节,我们来说说所谓“样式”。

原文发布于微信公众号 - 姬小光(hi-laser)

原文发表时间:2015-06-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Material Design组件

Human Interface Guidelines —— Text Views & Web Views

10430
来自专栏web编程技术分享

【手把手】制作一个简单的HTML网页

1.2K90
来自专栏前端新视界

如何在已有的 Web 应用中使用 ReactJS

当我们学习一项新技术,可能是一个 JavaScript 框架,也可能是一个 CSS 方法,我们将面对这样的挑战 如何在旧网站上运用这项新技术?。很多教程讲述了如...

9500
来自专栏MixLab科技+设计实验室

DIY一个Sketch插件,生成猫猫狗狗的全家福

最近朋友圈都在玩的全家福: ? 看了下是使用 cocos2D 引擎制作的, http://www.cocos.com/creator 主要是图片合成,利用前端...

35170
来自专栏菩提树下的杨过

额的神啊:AS3中Button被disable了,也会触发Click事件!

btnTest.addEventListener(MouseEvent.CLICK,btnTestClick); function btnTestClick(...

32870
来自专栏Jerry的SAP技术分享

微信小程序开发系列二:微信小程序的视图设计

大家如果跟着我第一篇文章 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 一起动手,那么微信小程序的开发环境一定搭好了。效果就是能把该小程序的体验版以二...

15520
来自专栏GIS讲堂

Arcgis for Js之鼠标经过显示对象名的实现

在浏览地图时,移动鼠标经过某个对象或者POI的时候,能够提示该对象的名称对用户来说是很实用的,本文讲述在Arcgis for Js中,用两种不同的方式来实现该效...

21920
来自专栏iKcamp

翻译 | 关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案

原文地址: Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS 原文作者:...

29780
来自专栏Nian糕的私人厨房

Vue2.0 scroll 组件的抽象和应用

本次的系列博文的知识点讲解和代码,主要是来自于 黄轶 在慕课网的 Vue 2.0 高级实战-开发移动端音乐WebApp 课程,由个人总结并编写,其代码及知识点...

9040
来自专栏HTML5学堂

网络字体@font-face 如何处理网页中的特殊字体

HTML5学堂:随着网页的发展,网页中出现了越来越多的字体种类,网页自带的微软雅黑、宋体、黑体已经越来越难以满足设计的需要,那么,如何在网站中使用比较特殊的字体...

56950

扫码关注云+社区

领取腾讯云代金券