<!-- 声明版本号，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. js中有关滑动问题的一些理解

    在做导航栏的时候,肯定会用到点击滑动的,但不知道大家有没有遇到过这种问题: $(window).animate({ scrollTop: "1000px" }) $(documen ...

  2. linxu php连接sqlserver

    今天linux的yum也不能用,用的是第三方的yum源,yum安装好后更新header又花了很长时间. 记得安装指定安装目录要用 --with-php-config=PATH命令. CentOS 6安 ...

  3. linux的webserver配置与管理——创建用户个人主页

    本实验用的是RedHat linux9.0,在虚拟机上进行操作,它已具有相当完好的可视化界面,这样用户会更加easy接受和理解. 首先呢就是虚拟机的相关配置,这个就不说了,当我们安装完系统后,打开终端 ...

  4. linux下oracle11g R2的启动与关闭监听、数据库

    su - oracle           切换到oracle账户 lsnrctl start          启动监听 sqlplus /nolog     登陆sqlplus conn /as  ...

  5. Codeforces Round #335 (Div. 1) C. Freelancer's Dreams 计算几何

    C. Freelancer's Dreams Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.codeforces.com/contes ...

  6. cdoj 24 8球胜负(eight) 水题

    8球胜负(eight) Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/show/24 ...

  7. Cocos2d-x 3.0 动作

    http://blog.csdn.net/lnb333666/article/details/16858635 //运行一个action动作对象 runAction("action对象&qu ...

  8. ORA-01489: result of string concatenation is too long

    ORA-01489: result of string concatenation is too long Cause: String concatenation result is more tha ...

  9. 一道模板元编程题源码解答(replace_type)

    今天有一同学在群上聊到一个比较好玩的题目(本人看书不多,后面才知是<C++模板元编程>第二章里面的一道习题), 我也抱着试一试的态度去完成它, 这道题也体现了c++模板元编程的基础和精髓: ...

  10. oc-24-点语法

    /** 点语法的本质是方法的调用,而不是访问成员变量,当使用点语法时, 编译器会自动展开成相应的方法.切记点语法的本质是转换成相应的set和get方法, 如果没有set和get方法,则不能使用点语法. ...