04. html小案例

html初学

1.小案例

show code 
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>2.综合案例</title>
</head>

<body>
<h1>动漫图片</h1>
1.发射点发到付 <br />
2.<a href="#tiaozhuan1">皆否发士大夫</a> <br />
3.<a href="#tiaozhuan2">的加法和史蒂芬</a> <br />

<h2>发射点发到付</h2>
<p>zfgdfgsdfg<a href="2.内部跳转链接.html" target="_blank">点击内部链接</a>sdfgsdfgsdfgzfgdfgsdfgsdfgsdfgsdfgzfgdfgsdfgsdfgsdfgsdfg zfgdfgsdfgsdfgsdfgsdfgzfgdfgsdfgsdfgsdfgsdfgzfgdfgsdfgsdfgsdfgsdfg
</p>
<p>zfgdfgsdfgsdfgsdfgsdfgzfgdfgsdfgsdfgsdfgsdfgzfgdfgsdfgsdfgsdfgsdfg zfgdfgsdfgsdfgsdfgsdfgzfgdfgsdfgsdfgsdfgsdfgzfgdfgsdfgsdfgsdfgsdfg
</p>
<p>zfgdfgsdfgsdfgsdfgsdfgzfgdfgsdfgsdfgsdfgsdfgzfgdfgsdfgsdfgsdfgsdfg zfgdfgsdfgsdfgsdfgsdfgzfgdfgsdfgsdfgsdfgsdfgzfgdfgsdfgsdfgsdfgsdfg
</p>
<img src="img/4.gif" />

<h2 id="tiaozhuan1">皆否发士大夫</h2>
<p>zfgdfgsdfgsdfgsdfgsdfgzfgdfgsdfgsdfgsdfgsdfgzfgdfgsdfgsdfgsdfgsdfg zfgdfgsdfgsdfgsdfgsdfgzfgdfgsdfgsdfgsdfgsdfgzfgdfgsdfgsdfgsdfgsdfg
</p>
<img src="img/2.jpg" />

<h2 id="tiaozhuan2">的加法和史蒂芬</h2>
<p>zfgdfgsdfgsdfgsdfgsdfgzfgdfgsdfgsdfgsdfgsdfgzfgdfgsdfgsdfgsdfgsdfg zfgdfgsdfgsdfgsdfgsdfgzfgdfgsdfgsdfgsdfgsdfgzfgdfgsdfgsdfgsdfgsdfg
</p>
<img src="img/3.jpg" />

<p>更多内容 <a href="https://www.baidu.com" target="_blank">百度一下</a></p>

</body>

</html>

1.1 小案例解释

  • 锚链接 （如下设置，点击(a)链接 就可以知道跳转到本页面指定的位置（h2））
    image
    image
  • 插入图片
    image
  • 外部跳转链接（跳转到百度等其他页面）
    image
  • 内部跳转链接（在文章中的某个字设置链接，跳到自己写的web页面）
    image
  • target="_blank" 跳转链接时设置了这个标签 跳转时用新的页面去打开而不是自己取代本页面

2.小案例

show code 
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>综合案例</title>
</head>

<body>
<center><h1 >征婚</h1></center>
<table border="3" width="100%">
<!--第一行-->
<tr>
<td>性别:</td>
<!--要有相同属性  这里是name-->
<td>
<input type="radio" name="sex" id="nan">
<label for='nan'><img src="img/1.png" />男</label>
<input type="radio" name="sex" id="nv">
<label for='nv'><img src="img/1.png" />女</label>
</td>
</tr>
<!--第二行-->
<tr>
<td>生日：</td>
<td>
<select>
<option>--请选择年份</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
<select>
<option>--请选择月份</option>
<option>1</option>
<option>3</option>
<option>4</option>
</select>
<select>
<option>--请选择日</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</td>
</tr>
<!--第三行-->
<tr>
<td>所在地区：</td>
<td><input type="text" value="桂林"></td>
</tr>
<!--第四行-->
<tr>
<td>婚姻状况：</td>
<td>
<input type="radio" name="sex" id="yihun">
<label for='yihun'>已婚</label>
<input type="radio" name="sex" checked="checked" id="weihun">
<label for='weihun'>未婚</label>
</td>
</tr>
<!--第五行-->
<tr>
<td>喜欢类型：</td>
<td>
<input type="checkbox" checked="checked"> 可爱
<input type="checkbox"> 美丽
<input type="checkbox"> 帅气
</td>
</tr>
<!--第六行-->
<tr>
<td>自我介绍</td>
<td>
<textarea>自我介绍</textarea>
</td>
</tr>
<!--第七行-->
<tr>
<td></td>
<td>
<input type="submit" value="免费注册">
</td>
</tr>
<!--第八行-->
<tr>
<td></td>
<td>
<input type="checkbox" checked="checked"> 我同意注册
</td>
</tr>
<!--第九行-->
<tr>
<td></td>
<td>
<a href="#"></a>
</td>
</tr>
<!--第十行-->
<tr>
<td></td>
<td>
<h3>我承诺</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</td>
</tr>
</table>
</body>

</html>

2.1 小案例解释

  • table表格标签、tr标签 表示一行、 td标签 表示一个单元格

  • 第一行

    • 单选框 input type=radio （单选男、女） 要有相同属性（name=“sex”）
    • input中有一个id属性值 和 label中有一个 for属性值对应 可以实现点男/女/图片时都可以选上单选框
      image

  • 第二行

    • 下拉框 select option 第一个option是默认值
      image

  • 第三行

    • 文本框 input type=text value是默认值
      image

  • 第四行

    • checked = "checked" 这个属性值是默认值是未婚
      image

  • 第五行

    • 复选框 input type=checkbox
      image

  • 第六行

    • 文本域 textarea
      image

  • 第七行

    • 按钮 type=“submit” value默认值
      image

  • 效果图
    image

posted @ 2021-07-26 22:00  超暖  阅读(106)  评论(0)    收藏  举报