HTML第一天
2016-10-24 本文已影响15人
CowboyBebop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--标题标签-->
<h1>我是h1标签</h1>
<h2>我是h2标签</h2>
<h3>我是h3标签</h3>
<h4>我是h4标签</h4>
<h5>我是h5标签</h5>
<h6>我是h6标签</h6>
<!--线-->
<hr>
<!--输入框标签-->
<input placeholder="我是占位文字">
<input value="我是默认文字">
<!--输入日期-->
<input type="date">
<!--上传文件-->
<input type="file">
<!--选中颜色-->
<input type="color">
<!--单选-->
<input type="radio">
<!--复选框-->
<input type="checkbox">
<!--段落标签-->
<!--
相对路径和绝对路径:
相对路径:资源在当前项目中 ./ ../ ././
绝对路径:资源不在当前项目中 网络上 本地 http:// https:// file:///
-->
<p>我是段落</p>
<!--图片标签-->
<!--alt 图片加载不出来,的替换文本-->
<!--src 图片路径-->
<img src="image/7.png" alt="这是一张图片" width="150" height="150"></body></html>
<body>
<!--换行标签-->
<br>
<!--列表标签-->
<!--无序列表-->
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<!--有序列表-->
<!--type 123来排序,还是ABC来排序-->
<ol type="A">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<!--a标签-->
<a>我是超链接</a><br>
<!--target="_blank" 打开新窗口,href 跳转链接-->
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<!--div标签-->
<div>容器标签</div>
<!--
src: 引入,必须的
href: 引用,不是必须的
-->
</body>
标签分类
块级元素特点：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
行内元素特点：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
1、和其他元素都在一行上；
2、元素的高度、宽度、行高及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
inline-block元素特点：
<img>、<input>
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置
