你的位置:首页 > 网页设计

[网页设计]H5入门


<!-- 声明版本号,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 >网页布局</div> -->
<div >网页布局</div>
<div >你好</div>
</body>
</html>