<!-- 声明版本号，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. FluentData官方文档翻译

    开始 要求 .NET 4.0. 支持的数据库 MS SQL Server using the native .NET driver. MS SQL Azure using the native .NE ...

  2. uva 11324 The Largest Clique(强连通分量缩点+DAG动态规划)

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=25&page=sh ...

  3. 使用adns库解析域名

    1. adns.adns-python库简介 adns库是一个可进行异步非阻塞解析域名的库,主要使用C语言编写,在linux平台下运行.使用adns库进行域名解析效率非常,著名的开源网络爬虫larbi ...

  4. C# 反射类型转换

    /// <summary> /// 泛型类型转换 /// </summary> /// <typeparam name="T">要转换的基础类型 ...

  5. 从jQuery的缓存到事件监听

    不知道大家有没有发现,用jQuery选择器"选择"之后的DOM上会添加jQuery*********属性. <DIV id=d1 jQuery1294122065250=&q ...

  6. CSS3+Js制作的一款响应式导航条

    今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大 ...

  7. Codeforces Round #307 (Div. 2) B. ZgukistringZ 暴力

    B. ZgukistringZ Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/551/probl ...

  8. Android学习之路

    Android基础 整理下个人认为新手们必须要掌握的知识点,顺便也会附带相应觉得不错的讲解博客地址. 两分钟彻底让你明白Android Activity生命周期(图文)! Activity实际开发中使 ...

  9. 微信公共服务平台开发（.Net 的实现）10-------地理位置

    微信公共平台中涉及到地理位置的有两种情况:       第一.我发送一个自选的地理位置给微信,然后微信可以自动反馈响应的信息.       第二.让微信获取我们GPS定位地址位置,反馈响应的信息. 首 ...

  10. socket 怎么设置心跳判断连接

    server的代码public abstract class Server { static readonly ILog logger = LogManager.GetLogger(typeof(Se ...