<!-- 声明版本号，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. VS2010开发环境最佳字体及配色[转]

    从地址:http://www.dev-club.net/xiangxixinxi/42010072906150537/201103010518006.html 获取的,整理如下: 环境:VS2010字 ...

  2. JavaScript要点（十七） Math 对象

    来源:JavaScript 参考手册 Math 对象 Math 对象用于执行数学任务. Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(). 语法 var ...

  3. 毕业设计--天气预报App

    9月中旬,开始动手做我的毕业设计了,之前一直在纠结做啥,后来想想,既然是做毕业设计,那就大胆地做点自己没接触过的东西吧.然后网上查找资料得知做天气预报需要用到开放的API,而且要用那种现在还在维护的, ...

  4. Django官方文档学习1——第一个helloworld页面

    Django 1.10官方文档:https://docs.djangoproject.com/en/1.10/intro/tutorial01/ 1.查看django版本 python -m djan ...

  5. Uva10474 - Where is the Marble?

      两种解法: 1.计数排序 //计数排序 #include<cstdio> #include<iostream> #include<vector> #includ ...

  6. 广州项目实施步骤I_练习安装 CentOS x64 6.4

    安装Centos x64 6.4 在家里使用 Vmware10.0.1进行模拟安装. 永久KEY注册密钥:5F29M-48312-8ZDF9-A8A5K-2AM0Z  下载地址:http://pan. ...

  7. embed 隐藏播放器显示

    昨天在页面做音频播放的时候,客户要求仅仅有声音.不显示播放器. 百度搜到解决方法: <embed id="embed_sound_id" src="test.mp3 ...

  8. map的实现

    1.map的实现是使用平衡树,AVL树或者红黑树. 2.在无序的情况下,查找为常数时间.有序的时候,查找为对数时间.二叉排序树(BST)就是为了解决这个问题. 3.但是,极端情况下,BST的查找效率退 ...

  9. Codeforce Gym 100015I Identity Checker 暴力

    Identity Checker 题目连接: http://codeforces.com/gym/100015/attachments Description You likely have seen ...

  10. openldap 安装 配置 使用

    1.安装 #安装 yum install -y openldap-servers openldap-clients openldap-devel 2.复制配置文件 #复制配置文件 cp /usr/sh ...