HTML的简单使用-CSDN博客

本文链接：https://blog.csdn.net/weixin_46356321/article/details/117604180

本文详细介绍了HTML的基本元素，包括段落、标题、内联元素、块级元素、链接、图片、内联框架、无序列表、用户输入、选择与表单。通过实例展示了如何使用这些元素构建网页内容，对于初学者理解HTML结构和功能十分有帮助。

摘要由CSDN通过智能技术生成

html

@[TOC](html)

<p> ......内容......  </p>
意思：段落

<p>床前明月光，疑是地上霜。 </p>
<p>举头望明月，低头思故乡。</p>

====================================================================================

<p> ......内容......  </p>
意思：<h1> - <h6>定义标题。<h1>最大。<h6>最小

<h2>静夜思</h2>
<p>床前明月光，疑是地上霜。 </p>
<p>举头望明月，低头思故乡。</p>

====================================================================================

<span> ......内容......  </span>
意思：内联元素，可用作文本的容器

<h2>静夜思</h2> <span>李白</span>
<p>床前明月光，疑是地上霜。 </p>
<p>举头望明月，低头思故乡。</p>

====================================================================================

<div> ......内容......  </div>
意思：块级元素，是可用于组合其他 HTML 元素的容器

<div>
	<h2>静夜思</h2> <span>李白</span>
	<p>床前明月光，疑是地上霜。 </p>
	<p>举头望明月，低头思故乡。</p>
</div>

====================================================================================

<a href="url"> ......文本......  </a>
意思：链接。Herf 表示跳转的地址。

<a hrml="http://baidu.com">古诗</a>

====================================================================================

<img src="图片的路径、地址"></img>
意思：图片、图像。src 属性表示图片的来源。

<a hrml="http://baidu.com">
 <img src="图片的路径、地址"></img>
</a>

====================================================================================

<iframe src="http://www.baidu.com"></iframe>
意思：定义一个内联的 iframe

<div>
	 <iframe src="http://www.baidu.com" width="800" height="600"></iframe>
</div>

====================================================================================

<ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
    </ul>

<p>列表：</p>
    <ul>
        <li>西瓜</li>
        <li>芒果</li>
        <li>葡萄</li>
        <li>樱桃</li>
    </ul>

====================================================================================

<input type="text">
意思：用户输入

<input name="username" type="text">
<input name="password" type="password">
这是单选：
<div>
	你喜欢的名称：
	<input type="radio" name="favor_singer">十七号
	<input type="radio" name="favor_singer">十八号
</div>

这是多选：
<div>
	你喜欢的名称：
	<input type="checkbox" name="favor_singer">十七号
	<input type="checkbox" name="favor_singer">十八号
</div>

====================================================================================

选择你的爱号：
<select>
	<option>钓鱼</option>
	<option>打游戏</option>
	<option>吃</option>
	<option>赚钱</option>
</select>

====================================================================================

<from>

</from>
意思：表单

<from action="http://httpbin.org/post" method="post">
<input name="username" type="text">
<input name="password" type="password">
这是单选：
<div>
	你喜欢的名称：
	<input type="radio" name="favor_singer">十七号
	<input type="radio" name="favor_singer">十八号
</div>

<select>
	<option>钓鱼</option>
	<option>打游戏</option>
	<option>吃</option>
	<option>赚钱</option>
</select>

<input type="submit">
</from>