前端三剑客:HTML、CSS、JavaScript。现在就开始学习HTML啦。

学习资源:http://www.freecodecamp.cn/

学习笔记:

h1,head1,一级标题

<h1>Hello World</h1>

p,paragraph,段落

<p>Hello Paragraph</p>

<br /> ,换行

<hr /> ,水平线

<!-- This is a comment -->

颜色的三种设置方式:

<h2 style = "color:red">我家的猫咪</h2>
<style>
h2 {color:blue;}
</style>
<style>
.red-text {
color: red;
}
</style>
<h2 class= "red-text">我家的猫咪</h2>

设置图片:

<img src="https://www.your-image-source.com/your-image.jpg">
// 如果图片无法显示,显示"default text"
<img src="https://www.your-image-source.com/your-image.jpg" alt="default text">

文字链接:

<p>Here's a <a href="http://freecodecamp.cn"> link to FreeCodeCamp中文社区 </a> for you to follow.</p>

图片链接:

<a href="#"><img src="/images/relaxing-cat.jpg"></a>

创建文本输入框:

<input type="text">

创建按钮:

<button type="submit">Submit</button>
// radio button(单选按钮)
<label>
<input type="radio" name="indoor-outdoor"> indoor
</label>
<label>
<input type="radio" name="indoor-outdoor"> outdoor
</label> // checkboxes(复选按钮)
<label>
<input type="checkbox" name="personality" checked> Loving
</label>
<label>
<input type="checkbox" name="personality"> Lazy
</label>
<label>
<input type="checkbox" name="personality"> Energetic
</label>

有三个影响HTML元素布局的重要属性:padding(内边距)、margin(外边距)、border(边框)。

学习HTML的更多相关文章

  1. 从直播编程到直播教育:LiveEdu.tv开启多元化的在线学习直播时代

    2015年9月,一个叫Livecoding.tv的网站在互联网上引起了编程界的注意.缘于Pingwest品玩的一位编辑在上网时无意中发现了这个网站,并写了一篇文章<一个比直播睡觉更奇怪的网站:直 ...

  2. Angular2学习笔记(1)

    Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...

  3. ABP入门系列(1)——学习Abp框架之实操演练

    作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...

  4. 消息队列——RabbitMQ学习笔记

    消息队列--RabbitMQ学习笔记 1. 写在前面 昨天简单学习了一个消息队列项目--RabbitMQ,今天趁热打铁,将学到的东西记录下来. 学习的资料主要是官网给出的6个基本的消息发送/接收模型, ...

  5. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  6. Unity3d学习 制作地形

    这周学习了如何在unity中制作地形,就是在一个Terrain的对象上盖几座小山,在山底种几棵树,那就讲一下如何完成上述内容. 1.在新键得项目的游戏的Hierarchy目录中新键一个Terrain对 ...

  7. 《Django By Example》第四章 中文 翻译 (个人学习,渣翻)

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:祝大家新年快乐,这次带来<D ...

  8. 菜鸟Python学习笔记第一天:关于一些函数库的使用

    2017年1月3日 星期二 大一学习一门新的计算机语言真的很难,有时候连函数拼写出错查错都能查半天,没办法,谁让我英语太渣. 关于计算机语言的学习我想还是从C语言学习开始为好,Python有很多语言的 ...

  9. 多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁,Atomic原子类)

    前言:刚学习了一段机器学习,最近需要重构一个java项目,又赶过来看java.大多是线程代码,没办法,那时候总觉得多线程是个很难的部分很少用到,所以一直没下决定去啃,那些年留下的坑,总是得自己跳进去填 ...

  10. node.js学习(三)简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理

    一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...

随机推荐

  1. mysql yum源安装

    部署服务器环境的时候经常要安装mysql,以下是常见的安装方式 源码安装 rpm包安装 yum源安装 这篇主要介绍yum源安装. yum源下载 进入 https://dev.mysql.com/dow ...

  2. "斜体显示"组件:<i> —— 快应用组件库H-UI

     <import name="i" src="../Common/ui/h-ui/text/c_tag_i"></import> &l ...

  3. go中的error小结

    go中的error error和panic error接口 go中err的困局 推荐方法 总结 参考 go中的error go中的错误处理,是通过返回值的形式来出来,要么你忽略,要么你处理(处理也可以 ...

  4. AJ学IOS(46)之网易彩票幸运大转盘

    AJ分享,必须精品 效果 实现过程: 基础UI搭建 这里主要是用了xib搭建,首先我们分析,有中间的开始按钮,背景图片,还有星座按钮,这里能用xib做的事开始按钮和背景图片. 如图: 星座按钮的搭建: ...

  5. for循环,for…in循环,forEach循环的区别

    for循环,for…in循环,forEach循环的区别for循环通关for循环,生成所有的索引下标for(var i = 0 ; i <= arr.length-1 ; i++){ 程序内容 } ...

  6. L4文本预处理

    文本预处理 timemachine.txt数据下载地址 链接:https://pan.baidu.com/s/1RO2OLyTRQZ90HJUW7V7BCQ 提取码:bjox NLTK数据集下载 链接 ...

  7. work of 1/4/2016

    part 组员                今日工作              工作耗时/h 明日计划 工作耗时/h    UI 冯晓云 修改UI增强显示鲁棒     6 完成UI页面切换部分    ...

  8. G - Can you find it? 二分

    Give you three sequences of numbers A, B, C, then we give you a number X. Now you need to calculate ...

  9. AI vs PS 矢量 VS 位图

    矢量图 AI最大可以放大64000%.不会失真,依然很清晰.原理是不同的点以及点与点之间的路径构成的,不论放大的多大,点在路径在,就可以精确的计算出它的区域.AI中无法直接编辑位图. 位图 代表PS, ...

  10. 5. class--extends

    ES5: function article(x,y){ this.x = x; this.y = y; } article.prototype.say = function() { return (t ...