1.HTML的超链接标签:
文字链接:
<a href="https://www.baidu.com">点击进入百度</a>
图片链接:
<a href="https://www.baidu.com"><img src="相对地址" ></a>
锚点链接:
<a href="#c4">点击到达章节4</a>
<h1> 章节1</h1>
<p> 段落的内容</p>
<h1> 章节2</h1>
<p> 段落的内容</p>
<h1> 章节3</h1>
<p> 段落的内容</p>
<h1 id="c4"> 章节11</h1>
<p> 段落的内容</p>
2.按钮:
<input type="button">
3.格式化标签:
-
<strong>
加重语气的的文本 -
<b>
加粗,bold的意思 -
<em>
斜体效果,强调作用 -
<i>
斜体效果
4.列表:
1.无序列表:
<ul>
<li>5</li>
<li>5</li>
<li>5</li>
<li>5</li>
</ul>
2.有序列表:
<ol>
<li>5</li>
<li>5</li>
<li>5</li>
<li>5</li>
</ol>
3.自定义列表
<dl>
<dt>长春</dt>
<dd>-- 吉林省的省会城市</dd>
<dt>哈尔滨</dt>
<dd>-- 黑龙江省的省会城市</dd>
</dl>
5.表格:
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>19</td>
<td>女</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>统计</td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
6.表单
-
<form>
元素用于创建表单,action
属性定义了表单数据提交的目标 URL,method
属性定义了提交数据的 HTTP 方法(这里使用的是 "post")。 -
<label>
元素用于为表单元素添加标签,提高可访问性。 -
<input>
元素是最常用的表单元素之一,它可以创建文本输入框、密码框、单选按钮、复选框等。type
属性定义了输入框的类型,id
属性用于关联<label>
元素,name
属性用于标识表单字段。 -
<select>
元素用于创建下拉列表,而<option>
元素用于定义下拉列表中的选项。 -
例子:
<form action="abd.do" method="">
<fieldset>
<legend>表单演示</legend>
<label for="username">姓名</label>
<input type="text" id="username" name="myname">
<br>
<label for="mypassword">密码</label>
<input type="password" id="mypassword" name="mypassword">
<hr>
<label for="">性别</label>
<input type="radio" id="man" name="gender" value="m"><label for="man">男</label>
<input type="radio" id="woman" name="gender" value="n"><label for="woman">女</label>
<hr>
<label for="">爱好</label>
<input type="checkbox" id="book" name="hobby" value="book"><label for="book">读书</label>
<input type="checkbox" id="run" name="hobby" value="run"><label for="run">跑步</label>
<input type="checkbox" id="ball" name="hobby" value="ball"><label for="ball">羽毛球</label>
<hr>
<label for="">地址</label>
<select name="address" id="">
<option value="cc">长春</option>
<option value="jl">吉林</option>
<option value="yj">延吉</option>
<option value="sy">松原</option>
<option value="ys">榆树</option>
</select>
<hr>
<label for="">文件上传</label>
<input type="file" name="myfile">
<hr>
<label for="">自我介绍</label>
<textarea name="myself" id="id1"></textarea>
<hr>
<label for="">隐藏信息</label>
<input type="hidden">
<hr>
<input type="submit" value="提交">
</fieldset>
</form>
7.HTML区块
7.1<div>元素
<div>
元素是块级元素,可以认为他是其他 HTML 元素的容器。
7.2<span>
元素
<body>
<!-- div:该元素是块级元素,通常用于页面的整体布局
该元素可以作为其他任何元素的容器 -->
<div id="main">
<div id="top">top</div>
<div id="center">center</div>
<div id="down">down</div>
</div>
</body>
8.音频标签和视频标签
8.1音频标签:
<audio>
标签定义声音,比如音乐或其他音频流。
目前,<audio>
元素支持的3种文件格式:MP3、Wav、Ogg。
<body>
<source>
<audio src="./../resource/audio.mp3" controls autoplay></audio>
</body>
8.2视频标签:
<video>
标签定义视频,比如电影片段或其他视频流。目前,<video>
元素支持三种视频格式:MP4、WebM、Ogg。
<body>
<video src="./../resource/flower.webm" controls width="800" height="600"></video>
<!-- 考虑浏览器不兼容问题,有些格式不支持那就可以使用source子元素,
让浏览器自上而下寻找可用视频文件。 -->
<source src="./../resource/flower.webm">
</body>