HTML5(H5)疯狂讲义

什么是H5?

万维网的核心语言,超级文本标记语言的第五次重大修订

H5有什么用?

HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点,如video、audio和canvas 标记。HTML5还引进了新的功能,可以真正改变用户与文档的交互方式

为什么要学习H5?

跨平台,自适应网页设计,实时更新

H5用哪些工具开发?

Dreamweaver,WebStorm, MyEclipse等等

H5框架

有很多,此处不一一列举了

H5疯狂讲义之疯狂的标签

<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前,所有浏览器均支持。
<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
在 HTML 4.01 中有三种 <!DOCTYPE> 声明。在 HTML5 中只有一种:

<!DOCTYPE html>

HTML有N多标签,根据显示的类型,主要可以分为3大类

块级标签

独占一行的标签
能随时设置宽度和高度(比如div、p、h1、h2、ul、li)

行内标签(内联标签)

多个行内标签能同时显示在一行
宽度和高度取决于内容的尺寸(比如span、a、label)

行内-块级标签(内联-块级标签)

多个行内-块级标签可以显示在同一行
能随时设置宽度和高度(比如input、button)

HTML <div> 标签

<div style="color:#00FF00">
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>
运行结果

HTML < p> 标签

<p>这是段落。</p>
<p>这是段落。</p>
<p>这是段落。</p>
<p>段落元素由 p 标签定义。</p> 

运行结果

HTML < h1> 到 < h6> 标签

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
运行结果

HTML< ul>< ol> < li> 标签

<p>有序列表:</p>
<ol>
  <li>打开冰箱门</li>
  <li>把大象放进去</li>
  <li>关上冰箱门</li>
  <li>打开冰箱门</li>
  <li>把大象拿出来</li>
</ol>

<p>无序列表:</p>
<ul>
  <li>雪碧</li>
  <li>可乐</li>
  <li>凉茶</li>
</ul>

运行结果

HTML < span> 标签

提示:请使用 <span> 来组合行内元素,以便通过样式来格式化它们。
注释:span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。
<span>some text.</span>

HTML < a> 标签

<a href="http://www.baidu.com">Baidu</a>

运行结果如下:带有超链接的百度a标签
baidu

HTML <label> 标签

<body>

<p>请点击文本标记之一,就可以触发相关控件:</p>

<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
</body>
运行结果

HTML <input> 标签

<body>

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 
<p>If you click "Submit", the form-data will be sent to a page called "action_page.php".</p>
</body>
运行结果

HTML <button> 标签

<button type="button">Click Me!</button>
运行结果

可以使用display切换块级标签,行内标签,行内块级标签

p.inline
  {
  display:inline;
  }

none 此元素不会被显示。此处注意区分与visibility的区别,下面介绍visibility
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为行内元素,元素前后没有换行符。
inline-block 行内块级元素。

visibility和display两个属性都有隐藏元素的功能。visibility属性设置为none时,相应的标签虽然不显示,但是存在占位符。而display属性设置为none,这个标签就变成了一个不显示的标签。记得还有input的outline的属性设置。
H5疯狂讲义,写的偏基础,欢迎大家拍砖,不足之处还望大家留言斧正。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,228评论 0 8
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,599评论 32 459
  • 一、HTML5 1.1 认识HTML5 HTML5并不仅仅只是作为HTML标记语言的一个最新版本,更重要的是它制定...
    福尔摩鸡阅读 16,090评论 14 51
  • 前端面试集锦(转载) 转载地址:前端开发面试题 以下皆为转载 前端开发知识点: 作为一名前端工程师,无论工作年头长...
    cuikangjie阅读 465评论 0 2