好久没写html 等前端 复习下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题title标签</title>
<style>
.head{
font-size: 25px;
font-weight: bold;
}
.head1{
font-size: 15px;
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p class="head">基础</p>
<hr/>
<!--============<div></div>标签===================-->
<xmp class="head1"><div></div></xmp>
<hr/>
<div>我是div标签1</div>
<div>我是div标签2 我独占一行</div>
<!--===========<span></span>标签====================-->
<xmp class="head1"><span></span></xmp>
<hr/>
<span>我是span标签1</span>
<span>我是span标签2 我是根据内容自适应,不独占一行</span>
<!--============<br/>换行标签===================-->
<xmp class="head1"><br/>换行标签</xmp>
<hr/>
我是换行符<br/>我现在换一行
<!--============<a></a>超链接标签===================-->
<xmp class="head1"><a href="网址、链接地址" target="目标" title="说明">被链接内容</a> 超链接标签</xmp>
<hr/>
<span>我是a标签点击我可以跳转到百度,网址一定加上http://+域名</span>
<a href="http://www.baidu.com"> 跳转</a><br/>
<a title="我是说明">我是title属性，鼠标停留可以看到说明</a><br/>
<span>我是target属性(_blank) 点击我可以在新的页面中跳转百度</span>
<a href="http://www.baidu.com" target="_blank"> 跳转</a><br/>
<span>我是target属性(-parent) 针对html框架iframe网页中，整个网页将重新载入打开目标网址地址</span>
<a href="http://www.baidu.com" target="_parent"> 跳转</a><br/>
<span>我是target属性(_self) 点击我在当前窗体打开链接,为默认值</span>
<a href="http://www.baidu.com" target="_self"> 跳转</a><br/>
<span>我是target属性(_top) 在当前窗体打开链接，并替换当前的整个窗体(框架页)</span>
<a href="http://www.baidu.com" target="_top"> 跳转</a><br/>
<span>a可以对图片进行锚文本超链接</span>
<a href="http://www.baidu.com/" target="_blank" title="转到baidu主页"><img src="http://www.divcss5.com/css-images/css-logo.gif" /></a><br/>
<span>a可以对文字进行锚文本超链接</span>
<a href="http://www.baidu.com/" target="_blank" title="转到baidu主页"> 跳转</a>
<span>同页面锚文本-同页面内上下转到指定位置 点击可以跳转到最下方</span>
<a href="#bottom">BOTTOM</a>
<!--==============<p></p>段落标签=================-->
<!--1、段落标签p与换行br标签，使用上一点区别，<p>是一对标签"<p></p>"，而br是单独的标签-->
<!--2、段落标签，每个段落之间有一定距离，类似于一个p换段标签等于使用两个br标签换行-->
<!--3、常常使用段落标签，让文章条理段落上下分割清晰，同时也对搜索引擎优化（SEO），让搜索引擎感到你的网页内容段落清晰更加友好清晰。-->
<xmp class="head1"><p></p>段落标签</xmp>
<hr/>
<p>段落1</p>
<p>段落2</p>
<p>段落3<br/>我被换行了</p>
<!--==============h1,h2,h3,h4 <h1></h1>标题标签=================-->
<!--H1在一个网页中最好只使用一次，如对一个网页唯一标题使用。-->
<!--H2、H3、H4标签则可以在一个网页中多次出现，但必要随意添加或添加过度。-->
<xmp class="head1"><h1></h1>标题标签</xmp>
<hr/>
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<!--==============<b></b>加粗标签标签|<strong></strong>加粗=================-->
<!--<b></b>加粗标签与<strong></strong>加粗标签区别在于前者只有1个字符，后者6个字符字母标签。-->
<xmp class="head1"><b></b>|<strong></strong></xmp>
<hr/>
<b>b标签加粗效果</b>
<strong>strong标签加粗</strong>
<!--==============<em></em>强调标签=================-->
<!--<em> 标签修饰的内容都是用斜体字来显示，但这些内容也具有更广泛的含义,如果你只想使用斜体字来显示文本的话，请使用 <i> 标签。-->
<xmp class="head1"><em></em>强调标签</xmp>
<hr/>
<em>强调效果 斜体效果 但是还有更广泛的用途</em>
<!--==============<i></i>斜体标签=================-->
<xmp class="head1"><i></i>斜体标签</xmp>
<hr/>
<i>斜体标签效果</i>
<!--==============<u></u>下划线标签=================-->
<xmp class="head1"><u></u>下划线标签</xmp>
<hr/>
<u>下划线效果</u>
<!--==============<s></s>删除线标签=================-->
<xmp class="head1"><s></s>删除线标签</xmp>
<hr/>
<s>删除线效果</s>
<!--==============<img src=""/>图片标签=================-->
<xmp class="head1"><img src=""/>图片标签</xmp>
<hr/>
<img src="http://www.divcss5.com/css-images/css-logo.gif" width="100" height="100" alt="这是一张图片"/>
<!--==============Html上标：<sup>上浮内容</sup> Html下标：<sub>下浮内容</sub>=================-->
<xmp class="head1">Html上标：<sup>上浮内容</sup> Html下标：<sub>下浮内容</sub></xmp>
<hr/>
log<sup>2</sup><br/>
log<sub>2</sub>
<p class="head">表单</p>
<hr/>
<!--==============<label></label>标签=================-->
<xmp class="head1"><label>标签</label>一般要实现点击单选按钮框文字或多选按钮框文字对应选择按钮被选择，使用label标签即可，注意for与id值相同即可实现/</xmp>
<hr/>
<label for="man">男</label><input type="radio" value="" name="sex" id="man"/>
<label for="woman">女</label><input type="radio" value="" name="sex" id="woman"/>
<!--==============input标签=================-->
<xmp class="head1">input是表单标签，通常此标签内放输入框、单选、多选、多行文本框、下拉选项菜单等表单内容</xmp>
<hr/>
<form>
<label>type="text" 文本输入</label><input type="text" size="10" placeholder="输入文本"/><br/>
<label>type="checkbox" 复选框</label><input type="checkbox" name="box"/><br/>
<label>type="radio" 单选框</label><input type="radio" name="box1"/><br/>
<label>type="submit" 提交</label><input type="submit" value="submit提交"/><br/>
<label>type="button" 按钮</label><input type="button" value="button按钮"/><br/>
<label>type="datetime-local" 日期带时间</label><input type="datetime-local"/><br/>
<label>type="date" 日期</label><input type="date"/><br/>
<label>type="color" 颜色</label><input type="color"/><br/>
<label>type="file" 文件</label><input type="file"/><br/>
</form>
<!--==============<textarea cols="" rows=""></textarea>文本域标签=================-->
<xmp class="head1"><textarea cols="" rows=""></textarea>文本域标签</xmp>
<hr/>
<textarea cols="30" rows="3" ></textarea>
<!--==============<select></select>Select下拉菜单列表表单标签=================-->
<xmp class="head1"><select></select>Select下拉菜单列表表单标签</xmp>
<hr/>
<select name="select1">
<option>select1</option>
<option>select2</option>
</select>
<hr>
<span id="bottom">BOTTOM</span>
</body>
</html>具体效果
