<!-- 声明版本号，DOCTYPE html是html5版本 -->
<!DOCTYPE html>
<!-- 声明网页语言 en-英文 zh-中文 zh-cn中文 -->
<html lang="en">
<!-- head 网页头部信息 -->
<head>
<!-- 声明网页的编码格式 -->
<meta charset="UTF-8">
<!-- title 声明网页标题 -->
<title>html第一节</title>
<style>
/*为div标签设置CSS样式*/
/*div{
background-color: yellow;
width: 300px;
height:100px;
}*/
/*.name 获取class名为name的标签*/
.div1{
width: 500px;
height: 100px;
background-color: yellow;
}
.div2{
width: 300px;
height: 50px;
background-color: red;
}
</style>
</head>
<!-- body是网页的主体部分，该网页显示的内容部分，都写在该标签下 -->
<body>
<!-- html基础标签：
1.单标签
2.双标签
区分：看是否有内容部分，如果有，则是双标签，反之，是单标签
例如：<meta />和<title></title> -->
<!-- 1.a标签，超链接标签；作用：用来跳转网页界面 -->
<!-- href 作用：跳转的网页界面地址 -->
<a href="http://news.baidu.com/">跳转到百度首页</a>
<!-- h1 - h6 六级标题标签 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<br>
<h6>六级标题</h6>
<!-- h1 到 h4 比较常用 -->
<!-- emmet 插件 -->
<!-- h1*4 -->
<!-- <h1>屌丝</h1>
<h1>屌丝</h1>
<h1>屌丝</h1>
<h1>屌丝</h1> -->
<!-- h$*6 -->
  <!-- <h1>龙</h1>
<h2>龙</h2>
<h3>龙</h3>
<h4>龙</h4>
<h5>龙</h5>
<h6>龙</h6> -->
<!-- h${晓龙}*6 -->
<!-- <h1>晓龙</h1>
<h2>晓龙</h2>
<h3>晓龙</h3>
<h4>晓龙</h4>
<h5>晓龙</h5>
<h6>晓龙</h6> -->
<!-- h${刘晓龙$}*6 -->
<!-- <h1>刘晓龙1</h1>
<h2>刘晓龙2</h2>
<h3>刘晓龙3</h3>
<h4>刘晓龙4</h4>
<h5>刘晓龙5</h5>
<h6>刘晓龙6</h6> -->
<!-- 3.p 标签，段落标签
显示内容部分 -->
<p>李白（701年－762年），字太白，号青莲居士，又号“谪仙人”，是唐代伟大的浪漫主义诗人，被后人誉为“诗仙”。与杜甫并称为“李杜”，为了与另两位诗人李商隐与杜牧即“小李杜””。与杜甫并称为“李杜”，为了与另两位诗人李商隐与杜牧即“小李杜”区别，杜甫与李白又合称“大李杜”。其人爽朗大方，爱饮酒作诗，喜交友。</p>
<!-- 4.strong 标签，加粗标签 -->
<strong>加粗</strong>
<br>
<hr>
<!-- 5.em标签 斜体字 -->
<em>斜体字</em>
<!-- 6.br 换行标签 -->
<!-- 7.br 水平分割线换行符 -->
<!-- 8.ul 无序列表，li列表项 -->
<ul>
<li>NBA</li>
<li>娱乐</li>
<li>新闻</li>
<li>图片</li>
<li>电影</li>
<li>音乐</li>
</ul>
<!-- 9.ol 有序列表 -->
<ol>
<li>NBA</li>
<li>娱乐</li>
<li>新闻</li>
<li>图片</li>
<li>电影</li>
<li>音乐</li>
</ol>
<!-- ul ol 一般与li配套使用 -->
<!-- emmet 当中 > 代表下一级标签 -->
<!-- ul>li -->
<!-- <ul>
<li></li>
</ul> -->
<!-- ul>li{刘晓龙}*4 -->
<!-- <ul>
<li>刘晓龙</li>
<li>刘晓龙</li>
<li>刘晓龙</li>
<li>刘晓龙</li>
</ul> -->
<!-- ul*3>li*4 -->
<!-- ul>li*3>a -->
<!-- <ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul> -->
<!-- ### 代表空链接 -->
<a href="###">淘宝</a>
<!-- 10.img 标签 显示图片 -->
<!-- src 图片地址 -->
<!-- 1.加载网络中图片 -->
<!-- <img src="http://b.hiphotos.baidu.com/image/h%3D300/sign=7d8cd6cb8ab1cb1321693a13ed5456da/1ad5ad6eddc451dac8efb1cfb1fd5266d01632fc.jpg" alt=""> -->
<img src="1.jpg" alt="">
<img src="imgs/2.jpg" alt="">
<img src="../3.jpg" alt="">
<img src="../images/4.jpg" alt="">
<!-- 如何获取路径：
1.如果使用的图片和当前html文件在同一级别目录下，则直接给src图片名即可；
2.如果使用的图片在当前html文件的下一级别目录中，则使用 / 获取下一级目录；
3.如果使用的图片在当前html文件的上一级别目录下，则使用 ../ 获取上一级目录； -->
<!-- 属性 alt 如果图片加载失败，则添加的提示语部分 -->
<!-- 属性 title 当将鼠标移入该图片上时，提示的文字介绍部分 -->
<img src="1.jpg" alt="美女图片加载失败" title="美女">
<!-- div 无语义标签，作用：使用来做网页布局的；分模块布局； -->
<!-- <div style="background-color:red;">网页布局</div> -->
<div class="div1">网页布局</div>
<div class="div2">你好</div>
</body>
</html>

H5入门-xhtml+css2-第01节的更多相关文章

  1. 【Lucene3.6.2入门系列】第04节_中文分词器

    package com.jadyer.lucene; import java.io.IOException; import java.io.StringReader; import org.apach ...

  2. 【Lucene3.6.2入门系列】第05节_自定义停用词分词器和同义词分词器

    首先是用于显示分词信息的HelloCustomAnalyzer.java package com.jadyer.lucene; import java.io.IOException; import j ...

  3. 【Lucene3.6.2入门系列】第03节_简述Lucene中常见的搜索功能

    package com.jadyer.lucene; import java.io.File; import java.io.IOException; import java.text.SimpleD ...

  4. 【Lucene3.6.2入门系列】第14节_SolrJ操作索引和搜索文档以及整合中文分词

    package com.jadyer.solrj; import java.util.ArrayList; import java.util.List; import org.apache.solr. ...

  5. 【Lucene3.6.2入门系列】第15节_SolrJ高亮

    package com.jadyer.solrj; import java.util.ArrayList; import java.util.List; import java.util.Map; i ...

  6. 【Lucene3.6.2入门系列】第10节_Tika

    首先贴出来的是演示了借助Tika创建索引的HelloTikaIndex.java PS:关于Tika的介绍及用法,详见下方的HelloTika.java package com.jadyer.luce ...

  7. php从入门到放弃系列-01.php环境的搭建

    php从入门到放弃系列-01.php环境的搭建 一.为什么要学习php 1.php语言适用于中小型网站的快速开发: 2.并且有非常成熟的开源框架,例如yii,thinkphp等: 3.几乎全部的CMS ...

  8. Java高级架构师（一）第01节：整体课程概览

    本课程专注于构建:高可扩展性.高性能.大数据量.高并发.分布式的系统架构. 从零开始.全面系统.成体系的软件架构课程,循序渐进的讲述构建上述系统架构所需要的各种技术知识和技能. 适应人群: 1:有一定 ...

  9. 086 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 03 面向对象基础总结 01 面向对象基础（类和对象）总结

    086 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 03 面向对象基础总结 01 面向对象基础(类和对象)总结 本文知识点:面向对象基础(类和对象)总结 说明 ...

随机推荐

  1. CloudStack服务引擎配置(cloud-engine-service模块)

    "?> <!--CloudStack服务引擎配置--> <beans xmlns="http://www.springframework.org/schem ...

  2. js 判断pc与手机

    var u = navigator.userAgent; if ((u.indexOf('Mac') > -1 || u.indexOf('Windows') > -1) &&am ...

  3. .NET常用类库--苏飞合集

    在线网站:http://tool.sufeinet.com/CodePreview/CodeView.aspx?action=view&file=Zip/SharpZip.cs C#基类库大全 ...

  4. Windows Server 2003下ASP.NET无法识别IE11的解决方法

    由于IE11对User-Agent字符串进行了比较大的改动,所以导致很多通过User-Agent来识别浏览器的程序,都相应的出现了无法识别IE11的情况.(普通用户端则可以通过这个方法来进行设置.) ...

  5. java 正则表达式学习

    一. Java正则表达式 在程序开发中,难免会遇到需要匹配.查找.替换.判断字符串的情况发生,而这些情况有时又比较复杂. 因此,学习及使用正则表达式,便成了解决这一矛盾的主要手段. 正则表达式是一种可 ...

  6. C#的WinForm中制作饼状图和柱状图

    using System; using System.IO;//用于文件存取 using System.Data;//用于数据访问 using System.Drawing;//提供画GDI+图形的基 ...

  7. linux C 执行多个文件

  8. replace into

    讨人喜欢的 MySQL replace into 用法(insert into 的增强版) 在向表中插入数据的时候,经常遇到这样的情况:1. 首先判断数据是否存在: 2. 如果不存在,则插入:3.如果 ...

  9. CPU 100%

    http://www.cnblogs.com/xuehong1985/articles/757060.html

  10. LINUX HOOK

    http://blog.csdn.net/yyttiao/article/details/7346287