<!doctype html>
<!--@@@ 2021/1/23 @@@-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html 第一天</title>
</head>
<body>
<!-- 1. html 文件包括头部分和身体部分，头部分的内容不会显示在网页中，身体部分的内容会显示在网页中 -->
<!-- 2. 标签语法：尖括号包围关键字形成；分类：单标签和双标签-->
<p>双标签</p>
<!-- 类似 <开始标签></结束标签> 的是双标签 -->
<hr/>
<!-- 单标签(自闭合标签)-->
<!-- 3. 基本标签-->
<!-- 标题标签(1,2,3,4级)-->
<h1>我是1级标题</h1>
<h2>我是2级标题</h2>
<h3>我是3级标题</h3>
<h4>我是4级标题</h4>
<!-- 一般标签(其 align 属性可以决定其对齐方式)-->
<p align="right">我是向右对齐的一般标签</p>
<p align="left">我是向左对齐的一般标签</p>
<!-- 特别注意...-->
<!-- 标签pre中保留空格和换行 -->
<!-- 一个标签p表示一个段落，在此标签里加上换行br，仍表示一个段落；空格需要用 代替 -->
<p> 我是猪猪侠.<br/> 我是驹驹波.</p>
<!-- 标签pre中保留空格和换行 -->
<pre align="left"> 我是猪
我也是猪</pre>
<!-- 4. 特殊标签-->
<!-- 加粗(b)/斜体(i)/下标(sub)/上标(sup)/下划线(ins)/删除线(del)/水平线(hr) -->
<p>i <b>love</b> you!</p>
<p>i <i>love</i> you!</p>
<p>i <sub>love</sub> you!</p>
<p>i <sup>love</sup> you!</p>
<p>i <ins>love</ins> you!</p>
<p>i <del>love</del> you!</p>
<hr/>
<!-- 5. 特殊符号 -->
<!-- 已注册(®)/版权(©)/空格( )/小于号(<)/大于号(>) -->
<p>i love you!®</p>
<p>i love you!©</p>
<p>i love you! </p>
<p>i love you!<p></p>
<p>i love you!></p>
<!-- 6.列表标签 -->
<!-- 6.1. 无序列表标签 -->
<!-- ul/li；ul 代表无序列表，li 代表列表中的项目-->
<!-- 引领项目的元素默认为小黑点(disc)，可以通过 type 参数修改为正方形(square)和空心圆(circle) -->
<ul type="circle">
<li>lv na is a girl!</li>
<li>lv pei tong is a girl, too!</li>
</ul>
<!-- 6.2. 有序列表标签 -->
<!-- ol/li；ol 代表有序列表，li 代表列表中的项目 -->
<!-- 引领列表的序号默认为数字(1)，可以通过 type 参数修改为小写字母(a)、大写字母(A)、小写罗马字母(i)和大写罗马字母(I) -->
<ol type="I">
<li>苹果是圆的.</li>
<li>香蕉是弯的.</li>
</ol>
<!-- 6.3. 自定义列表标签 -->
<!-- dl/dt/dd；dl 代表列表，dt 代表列表中的项目；dd 代表项目描述项-->
<dl>
<dt>苹果</dt>
<dd>苹果是红的.</dd>
<dd>苹果可以吃.</dd>
<dt>鸟</dt>
<dd>鸟很漂亮.</dd>
<dd>鸟会飞.</dd>
</dl>
<!-- 7. 图片标签 -->
<!-- 参数 src 代表图像的路径；参数 width 和 height 分别代表图像的宽和高(数值和百分比表示)；
当图片路径错误或者图片误删，参数 alt 可以添加描述文字 -->
<img src="images/first.png" alt="图片没有找到." width="100px" height="100px">
<!-- 8. 超链接标签 -->
<!-- 参数 href 表示链接地址，参数 title 表示链接提示文字，参数 target 表示跳转的窗口(默认是_self原窗口跳转，_blank新建窗口跳转) -->
<a href="http://www.4399.com/" target="_blank" title="这个超链接是游戏的.">4399</a>
<!-- 9. div与span标签 -->
<!-- div 代表块元素，表示一块内容；唯一的格式就是换行(借助br标签)；常结合css用于页面布局 -->
<!-- span 代表行内元素，内容有多宽就占多宽的空间距离；常用于修饰段落中的布局样式 -->
<div>我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.我喜欢你.</div>
<!-- 利用 span 标签，通过其 style 方法修饰段落标签p的内容 -->
<p>鲜红色的<span style="color:red">草莓.</span></p>
<!-- 10. 表格标签 -->
<!-- table/tr/td；table 表示表格，tr 代表行，td 代表列 -->
<!-- 参数 border 代表表格的边框(单位为像素)-->
<!-- 表格一般都有一个明显的表头；如果我们想让第一行元素标黑显示，我们需要把第一行全部的列标签 td 换成 th 标签 -->
<!-- 表格参数：width，height；表格列参数：align(内容居中：center；内容居左(默认)：left；内容居右：right) -->
<!-- 表格列参数：valign(内容居顶：top；内容居中(默认)：middle；内容居底：bottom) -->
<table border="1px" width="300px" height="200px">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td align="center" valign="top">4</td>
<td align="center" valign="bottom">5</td>
<td align="center" valign="middle">6</td>
</tr>
</table>
<br/>
<br/>
<br/>
<br/>
<br/>
<!-- rowspan/colspan 分别代表垂直合并和水平合并 -->
<table border="1px solid black" width="300px" height="300px">
<tr>
<th rowspan="2">姓名</th>
<th colspan="2">爱好</th>
</tr>
<tr>
<td align="center">萝卜</td>
<td align="center">青菜</td>
</tr>
<tr>
<td align="center">Susu</td>
<td align="center">是</td>
<td></td>
</tr>
<tr>
<td align="center">Nana</td>
<td></td>
<td align="center">是</td>
</tr>
</table>
<br>
<br>
<br>
<!-- 11. 表单标签 -->
<!-- form 代表表单标签，label 代表表单文字标注标签 input -->
<!-- 表单单标签的 type 属性：text(明文输入框)， password(暗文输入框)，radio(单选框)，checkbox(多选框) -->
<!-- textarea(多行文本输入框) -->
<!-- select(下拉框) option(选项) -->
<!-- 表单的提交：input 标签的 submit 属性可以用来提交；其 value 值可以修改提交按钮的标注 -->
<form action="">
<lable>用户名：</lable><input type="text">
<br>
<!-- 三个空格代表一个汉字的长度 -->
<label>密 码：</label><input type="password">
<br>
<!-- 单选框必须选择 -->
<!-- 单选框的属性 name 表示几个选择框为同一组单选框，只能选择其一 -->
<!-- label 的 for 属性与单选框的 id 属性关联可以实现点击文字勾上单选框 -->
<label>喜 欢：</label>
<input type="radio" name="love" id="apple">
<label for="apple">苹果</label>
<input type="radio" name="love" id="orange">
<label for="orange">橘子</label>
<br>
<!-- 多选框的属性 name 表示几个选择框为同一组多选框 -->
<!-- label 的 for 属性与多选框的 id 属性关联可以实现点击文字勾上多选框 -->
<label>喜 欢：</label>
<input type="checkbox" name="love" id="watermelon">
<label for="watermelon">西瓜</label>
<input type="checkbox" name="love" id="pie">
<label for="pie">派</label>
<br>
<!-- rows 代表初始高；cols 代表初始宽 -->
<textarea cols="80px" rows="20px"></textarea>
<br>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
<br>
<input type="submit" value="娜娜催你快提交.">
</form>
<!-- 需要提交表单时，要用到 name 属性-->
<!-- 表单的 action 定义表单数据提交地址，默认为当前页面 -->
<!-- 表单的 method 定义表单数据提交方式(get/post)，post 更加安全，采用 http 协议加密运输 -->
<!-- get 提交会把数据返回到指定页面的 url 上 -->
<!-- post 提交不会把数据返回到指定页面的 url 上 -->
<form action="" method="get">
<lable>用户名：</lable><input type="text" name="username">
<br><br>
<label>密 码：</label><input type="password" name="password">
<input type="submit" value="憨憨.快提交.">
</form>
</body>
<!-- 多行文本输入框 -->
</html>
0
点赞
收藏
分享
前端 HTML —— 2022/3/4
相关推荐
0 条评论
