前端学习笔记之1 基础语法及标签

引言 : 博主目前是一名iOS开发者, 所会的语言有Objective-C 和 Swift, 目前正在学习前端, 增强一下技术能力, 等学会点皮毛之后打算接触一下React Native; 这篇文章只是作为我的笔记发在这里, 供自己业余时间看看; 全是简单代码; 很基础的东西, 看到的小伙伴酌情略过吧^_^

编辑器选择 : 我用的Mac系统, 用的破解版的WebStorm, 奉上破解教程; 亲测可用

1. 基础标签 + 基础语法

<!--最外层-->
<html>
<!--头部-->
<head><!--编码--><meta charset="UTF-8"><!--标题--><title>常用标签</title>
</head>
<body>hello world! 你好, 世界!<!--标题标签--><h1>我是h1标题</h1><h2>我是h2标题</h2><h3>我是h3标题</h3><h4>我是h4标题</h4><h5>我是h5标题</h5><h6>我是h6标题</h6><!--换行标签--><br><!--表单标签 标签--><input><br><input placeholder="提示文字"><br><input value="默认值"><br><input type="color"><br><input type="date"><br><input type="file"><br><input type="checkbox"><br><input type="radio"><br><input type="button"><br><!--段落标签--><p>这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落</p><p>这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落</p><p>这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落</p><p>这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落</p><!--图像标签相对路径(项目中的):../../..绝对路径(资源不在项目中):http://网络  https://网络  file://本地电脑 ftp://服务器--><!--src:引用, 引用到的资源是必须的href:引入...非必须双标签:里面需要放东西, 他是一个容器单标签:他不是容器--><!--图像标签--><!--宽高等比例缩放--><img src="http://pic6.huitu.com/res/20130116/84481_20130116142820494200_1.jpg" alt="提示文字" width="100"><img src="data:image/img_1.jpg" alt="工程中" width="100"><br><!--超链接标签 #跳转到开头--><a href="#">我是超链接 调到头部</a><br><a href="http://baidu.com">我是超链接, 当前窗口跳转到其他</a><br><a href="http://baidu.com" target="_blank">我是超链接, 开新页面跳转</a><br><!--列表标签--><ul><li>我是无序列表</li><li>我是无序列表</li><li>我是无序列表</li><li>我是无序列表</li></ul><!--换行标签 那条线--><hr><!--div标签 相当于UIView 他是一个容器,div里面可以嵌套div--><div>我是div<h1>哈哈哈哈哈哈哈</h1></div><div>我是div</div><div>我是div</div>
</body>
</html>

2. HTML5 新增标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><progress max="100" value="30"></progress><!--meter : 特定范围内的数值, 如工资, 百分比time  : 时间progress : 进度条 max, min, stepvideo :audio :--><!--播放音乐--><audio src="Music/薛之谦%20-%20你还要我怎样.mp3" controls="controls"></audio><!--播放视频--><video src="" controls="controls"></video></body>
</html>

3. HTML5新增属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>国务院港澳事务办公室发言人就香港特别行政区第五任行政长官选举结果发表谈话</title><style>body{text-align: center;}</style>
</head>
<body><!--HTML5 新增了27个标签, 废弃了16个标签, 主要包括机构性标签, 级块性标签, 行内语义性标签, 交互性标签1. 结构性标签<1> article : 文章主题<2> header : 标记头部区域内容<3> footer : 标记脚部区域内容<4> section : 区域章节表述<5> nav : 菜单导航, 链接导航--><!--新闻--><article><!--头部--><header><h1>国务院港澳事务办公室发言人就香港特别行政区第五任行政长官选举结果发表谈话</h1><p>2017-03-26 15:18:12   来源： 新华社</p><img src="data:image/img_1.jpg" width="400"></header><!--中间章节--><section><h3>中央政府驻港联络办负责人就林郑月娥在第五任行政长官选举中当选发表谈话</h3><p>中央政府驻港联络办负责人26日就林郑月娥在香港特别行政区第五任行政长官选举中当选发表谈话。</p><p>该负责人表示，我们高兴地看到，这次行政长官选举严格按照香港基本法、全国人大常委会有关决定和香港特别行政区有关法律进行，体现了公开、公平、公正的原则，选举过程也比较顺利。</p></section><section><h3>梁振英就香港特区第五任行政长官选举结果发表声明</h3><p>根据香港特区行政长官选举条例，在有三名候选人竞争的情况下，如果有任何候选人在第一轮投票中取得超过600张有效选票即当选。否则，取得最高票数和第二高票数的候选人将进入单一轮投票，其他候选人被淘汰；如在第一轮投票中出现同票情况，则需进入下一轮投票，直至有一名候选人取得超过600张有效选票，或投出两名候选人进入单一轮投票。</p><p>选举的落幕，正意味着新征途的开始。如何在未来五年广泛凝聚共识，全面准确贯彻“一国两制”方针和基本法，在保证香港繁荣稳定的基础上实现更好的发展，是香港社会的期盼所在，更是林郑月娥和香港特区新一届政府最为重要的历史责任。</p></section><!--尾部--><footer><img src="data:image/img_footer.png"></footer></article></body>
</html>

前端学习笔记之1 基础语法及标签相关推荐

前端学习笔记之CSS3基础语法与盒模型（二）
前端学习笔记之 CSS3基础语法与盒模型 CSS3简介 CSS(cascading style sheet,层叠式样式表)是用来给HTML标签添加样式的语言 CSS3是CSS的最新版本,增加了大量的样 ...
前端学习笔记（js基础知识）
前端学习笔记(js基础知识) JavaScript 输出 JavaScript 数据类型常见的HTML事件 DOM 冒泡与捕获流程控制语句 for..in 计时器 let,var,const的区别 ...
大数据HiveSQL学习笔记三-查询基础语法以及常用函数
大数据HiveSQL学习笔记三-查询基础语法以及常用函数一.基础语法 1.SELECT -列名- FROM -表名- WHERE -筛选条件- 如:需要根据城市,性别找出匹配的10个用户 user_ ...
前端学习第一周-计算机基础，html标签的介绍，其中包括列表，表格以及表单的使用
前端学习第一周-HTML基础文章目录前端学习第一周-HTML基础前言 DAY 1 计算机组成计算机网络 DAY 2 vscode快捷方式 HTML骨架 DAY 3 HTML属性 HTML标签 ...
python基础论文_北大博士Python学习笔记，Python基础语法总结，一篇文章带你入门...
image.png 网上现在Python学习资料有很多,但是很杂.很多初学Python的朋友就不知道该怎么去抉择,那些是自己当下所需要的. 刚好朋友是北大的博士,在IT行业也工作八年了.就把他学习Py ...
第一次网页前端培训笔记（Html基础语法和常用标签）
一.什么是HTML HTML 是用来描述网页的一种语言.HTML 是一种在 Web 上使用的通用标记语言.HTML 允许你格式化文本,添加图片,创建链接.输入表单.框架和表格等等,并可将之存为文本文件 ...
【学习笔记】JS基础语法一小时通
内容整理自<从0到1Javascript快速上手>上半部分-基础语法篇
学习笔记之 JQuery 基础语法
jQuery 库 - 特性 jQuery 是一个 JavaScript 函数库. jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaSc ...
Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)
前端发展和架构先聊一下前端开发模式的发展. 静态页面最初的网页以HTML为主,是纯静态的网页.网页是只读的,信息流只能从服务端到客户端单向流通.开发人员也只关心页面的样式和内容即可. 异步刷新,操 ...

前端学习笔记之1 基础语法及标签

1. 基础标签 + 基础语法

2. HTML5 新增标签

3. HTML5新增属性

前端学习笔记之1 基础语法及标签相关推荐

最新文章

热门文章