HTML常用标签使用
目录
第一部分(p标签、h1~h2标签、ul和ol列表标签、img图片标签、a超链接属性标签)
第二部分(几种强调标签,斜体、加粗、下划线、删除线)
第三部分(input标签和textarea标签)
HTML常用标签
第一部分(p标签、h1~h2标签、ul和ol列表标签、img图片标签、a超链接属性标签)
<p>标签
提前在head中加入这部分,可以在<p>中引用
<style>
.hi{
color: red;
}
</style>
body中使用<p>标签
<p class="hi">hello world!</p>
效果:
<h1>~<h6>标签
<hr><h1>**h1-h6标签的使用**</h1><hr>
<h1>我是1级标签</h1>
<h2>我是2级标签</h2>
<h3>我是3级标签</h3>
<h4>我是4级标签</h4>
<h5>我是5级标签</h5>
<h6>我是6级标签</h6>
效果
<ul><ol>列表标签
<hr><h1>**列表标签的使用**</h1><hr>
<ul>标签<br>
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul><br>
<ol>标签<br>
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<ul>和<ol>中的各项需要有<li>包围
效果:
<img>标签
<hr><h1>图片标签<img>的使用</h1><hr>
<img
width="250"
height="200"
src="images/cat.jpg" alt="好耶!是猫猫"><br>
<p><img width="250" height="200" src="images/cat.jpg" alt="好耶!是猫猫"></p>
<br>图片资源无法成功加载<br>
<img src="/images/catcat.jpg" alt="猫猫不见啦">
<p><p><img width="250" height="200" src="images/catccat.jpg" alt="好耶!是猫猫"></p></p>
效果:
<a>超链接属性标签
<hr><h1>**超链接属性标签**</h1><hr>
<a href="https://developer.mozilla.org./zh-CN/docs/Learn/Getting_started_with_the_web">一个学习web前端开发的网页</a><br>
<p><a href="https://developer.mozilla.org./zh-CN/docs/Learn/Getting_started_with_the_web">一个学习web前端开发的网页</a><br></p>
效果:
第二部分(几种强调标签,斜体、加粗、下划线、删除线)
代码:
<hr><h1>**几种强调标签**</h1><hr>
其包含的内容被认为需要着重阅读,一般会使用斜体
<p>
这是一段普通的文本。<br>
<em>这是<em>强调(斜体)的内容。</em><br>
<i>这是<i>强调(斜体)的内容。</i><br>
</p>
表示文本十分重要,一般用粗体显示
<p>
这是一段普通的文本。<br>
<strong>这是<strong>强调(加粗)的内容。</strong><br>
<b>这是<b>强调(加粗)的内容</b>
</p>
<p>
这是一段普通的文本。<br>
<u>这是<u>强调(下划线)的内容。</u><br>
<ins>这是<ins>强调(下划线)的内容</ins>
</p>
<p>
这是一段普通的文本。<br>
<del>这是<del>删除线(中划线)的内容。</del><br>
<s>这是<s>删除线(中划线)的内容</s>
</p>
效果:
第三部分(input标签和textarea标签)
type属性 | 说明 |
text | 文本框,用于输入单行文本 |
password | 密码框,用于输入密码 |
checkbox | 多选框,用于多选多 |
radio | 单选框,用于多选一 |
file | 文件选择,用于之后上传文件 |
range | 范围条,用于控制范围 |
submit | 提交按钮,用于提交 |
reset | 重置按钮,用于重置 |
button | 普通按钮,默认无功能 |
文本框(type="text")
<h2>文本区域</h2>
<p>输入中的换行会被自动去除</p>
<p><input type="text" /></p>
<input type="text"/>
<p><input type="text" placeholder="请填写文本信息" /></p>
<input type="text" placeholder="请填写文本信息"/>
<br>
效果:
密码框(password)
<h2>密码框password</h2>
<input type="password">
<p><input type="password"></p>
<input type="password" placeholder="请填写密码">
<p><input type="password" placeholder="请填写密码"></p>
效果:
复选框 /单选框(type="checkbox")
复选框:
<h2>复选框</h2>
可设置为选中或未选中<br>
<input type="checkbox"/>first checkbox
<input type="checkbox"/>second checkbox
<p>
<input type="checkbox" />first checkbox <br>
<input type="checkbox" />second checkbox <br>
</p>
优化写法<br>
<img width="400" height="300" src="images/code1.png" alt="出错哩"><br>
<label for="">
<input type="checkbox"
id="cbox1-pro"
value="first_checkbox">选择1
</label>
<label>
<input type="checkbox"
id="cbox2-pro"
value="second_checkbox">选择2
</label>
<br>
效果:
单选框 (两种)
<h2>单选框</h2>
<label>
<input type="radio">first radio
<input type="radio">second radio
</label>
<p>
两个选项不关联,只能选中其中一个再次点击不能取消<br>
<label>
<input type="radio">first radio
</label>
</p><hr>
<label>
<input type="radio" name="radio" id="radio1">first radio
<input type="radio" name="radio" id="radio2">second radio
</label>
<p>
两个选项关联,选择其中一个就不能选中其他的,再次点击依然不能取消,但点击另一个则取消先前选中的
<label>
<input type="radio" name="radio" id="radio2">second radio
</label>
</p><hr>
效果:
选择文件
<h2>让用户选择文件的控件</h2>
<input type="file">
<p><input type="file"></p>
效果:
控制范围
<h2>控制范围</h2>
<input type="range">
<p><input type="range"></p>
效果:
提交
<h2>提交</h2>
<input type="submit">
<p><input type="submit"></p>
效果:
重置
多行纯文本编辑控件
<hr><h1>**多行纯文本编辑控件<textarea>标签**</h1><hr>
<textarea name="story" cols="30" rows="10">这是一个textarea</textarea>
<p><textarea name="story" cols="30" rows="10">这是一个textarea</textarea></p>
<p>cols表示文本域的可视宽度,row表示元素的输入文本行数(显示的高度)</p>
效果:
CSDN-Ada助手: 不知道 算法 技能树是否可以帮到你:https://edu.csdn.net/skill/algorithm?utm_source=AI_act_algorithm
CSDN-Ada助手: 算法 技能树或许可以帮到你:https://edu.csdn.net/skill/algorithm?utm_source=AI_act_algorithm
CSDN-Ada助手: 恭喜你在2024牛客寒假营第一天就发表了这篇精彩的博客!你对ABCDFGIHLM的探讨让我受益匪浅。希望你能继续保持创作的热情和积极性,坚持不懈地分享你的见解和经验。下一步建议你可以尝试加入更多实例和案例分析,这样可以使你的观点更具说服力。期待你的更多精彩内容!
CSDN-Ada助手: 恭喜您在2024牛客寒假营中坚持不懈,已经写了第19篇博客!标题“ABEF”让人期待不已,希望能够阅读到您对这个主题的深入探讨。接下来,建议您可以尝试在文章中加入更多的个人见解和观点,以及更多的实例和案例,这样可以让读者更加深入地了解您的思考和独特见解。期待您的下一篇作品!加油!
CSDN-Ada助手: 恭喜你持续创作,第20篇博客标题看起来很有趣呢!希望你能继续保持这样的创作热情,不断进步。或许下一步可以尝试探索一些新的主题或者深入挖掘某个话题,让读者有更多的收获和启发。加油!