首页 / HTML / Web前端——html 基本标签
Web前端——html 基本标签
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Web前端——html 基本标签，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4876字，纯文字阅读大概需要7分钟。
内容图文
基本标签
文件标签
构成html最基本的标签
html：html文档的根标签
head：头标签，用于指定文档的一些属性，引入外部资源
title：标题标签
body：体标签
!DOCTYPE html ：html5中定义该文档是html文档
文本标签
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>文本标签</title>
</head>
<br>
<!-- 标题标签 -->
<h4>定风波</h4>
<h4>苏轼</h4>
<!--换行-->
<i>三月七日，沙湖道中遇。雨具先去，同行皆狼，余独不觉，已而遂，故作此。</i></br><!-- i->斜体-->
莫听穿林打叶声，何妨吟啸且徐行。竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。</br>
料峭春风吹酒醒，微冷，山头斜照却相迎。回首向来萧瑟处，归去，<b>也无风雨也无晴</b>。<!-- b->黑体-->
<!--显示一条水平线-->
<hr color="red" size="10" align="left" >
<!--段落标签-->
<p>看过这样一个故事：一对小夫妻开了个小店卖馒头，就一张红纸写了店名贴在门口。一个电蒸锅，一天也蒸不出几屉馒头。邻居都替他们发愁，这日子可咋过呢？</p>
<p>谁知过了几个月，来买馒头的人越来越多，红纸上便添了几个字，开始卖花卷、糖三角和发糕。又过了几个月，又添了煮黏苞米、
自制大酱、咸鸭蛋和咸菜……</p>
<p>作者写到，这家人“就像雨后抖动的一株草”。是的，这株草虽然柔弱，但却有一种令人感动的生命力。一对普通的小夫妻，通过一天天踏实的努力，生活越来越好。然而，也有一些人， 感觉自己没有握住一手好牌，便早早放弃了。</p>
<hr color="green" size="5" align="center" width="50%">
<!--字体标签-->
<center> <!--居中标签-->
<font color="black" size="20" face="宋体"> 加油！</font>
</center>
</body>
</html>
属性定义： color：1.英文单词：red、green等；
2.rgb（值1，值2，值3）：值的范围：0~225（rgb为三原色的缩写）
3.#值1值2值3：值的范围：00~FF之间（取色器）
width：1.数值：例如：width=“20”，默认单位是像素；
2.数值%：占比相对于父元素的比例
图片标签
<!--展示一张图片-->
<img src="图片路径.jpg" alt="图片没有正确展示" width="50" height="50"/>
<!--
相对路径
*以.开头的目录
./代表当前目录
../代表上一级目录
-->
列表标签
<!-- 有序列表 -->
<ol type="A" start="3">
<li>睡觉</li>
<li>吃饭</li>
<li>学习</li>
</ol>
<!-- 无序列表 -->
<ul type="circle/square/disk" >
<li>睡觉</li>
<li>吃饭</li>
<li>学习</li>
</ul>
链接标签
<!--超链接 a-->
<a href="http://www.baidu.com">百度</a><br>
<a href="http://www.baidu.com" target="_blank">百度2</a>
</br><a href="./Demo2.html">图片标签</a></br>
<a href="http://www.baidu.com"><img src="为图片设置超链接.img"></a></br>
属性：href:指定访问资源的URL（统一资源定位符）
target：-self（默认）：在当前界面打开；
-blank：在空白页面打开
表格标签
table：定义表格 caption:：定义表格名
tr：定义行 thead：定义表格的头部分
tb：定义单元格 tbody：定义表格的体部分
th：定义表头单元格 tfoot：定义表格的脚部分
<table border="1" width="30%">
<caption>学生信息表</caption>
<!--
border:边框；width：宽度 cellspacing：定义单元格之间的距离
cellpadding：定义内容和单元格之间的距离 bgcolor：定义背景色-->
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>小明</td>
</tr>
<tr>
<td>02</td>
<td>小红</td>
</tr>
</tbody>
<tfoot>
<tr>
<td >colspan="2"备注</td>
<!-- 属性：该单元格占两列（rowspan=“2”，单元格占两列）-->
</tr>
<td >colspan="2"备注</td>
<!-- 属性：该单元格占两列（rowspan=“2”，单元格占两列）-->
</tr>
</tfoot>
</table>
表单标签
表单：用于采集用户输入数据的，用语和服务器进行交互。
标签：form
<!--
from:用于定义表单，可以定义一个范围，范围代表采集数据的范围
属性：action：指定提交数据的URL
method：指定提交方式
分类：共有七种，常用两种
get：1.请求参数在地址栏中显示
2.请求参数有大小限制
3.不太安全
post：1.请求参数在不会地址栏中显示，会封装在请求体中
2.请求参数没有大小限制
3.比较安全
表单项中的数据要想被提交，必须指定其name属性
-->
表单项标签
input：可以通过type属性值改变元素的展示样式
select：下拉列表 textarea：文本域
<form action="#" method="post">
<lable for="usernaem"> 用户名：</lable><input type="text" name="username" placeholder="请输入用户名" id="usernaem"><br>
//label标签for后的内容与输入内容的id相同，可以定位光标
密码：<input tupe="password" name="password" placeholder="请输入密码"><br>
//type为密码类型可以隐藏输入
性别：<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女<br>
//type为radio单选框，应保证name后面的内容相同
爱好：<input type="checkbox" name="hobby" value="game">游戏
<input type="checkbox" name="hobby" value="ball">篮球
<input type="checkbox" name="hobby" value="chess" checked>象棋<br>
//type为checkbox复选框，应保证name后面的内容相同
上传图片：<input type="file" name="file"><br>
隐藏域：<input type="hidden" name="cc" value="aa"><br>
取色器：<input type="color" name="color"><br>
日期：<input type="date" name="data1"><br>
<input type="datetime-local" name="data2"><br>
邮箱：<input type="email" name="email"><br>
定义数字：<input type="number" name="number"><br>
按钮：
提交按钮：<input type="submit" value="登录">
按钮效果：<input type="button" value="这是一个按钮">
图片提交：<input type="img" src="图片路径">
下拉框：<select name="select">
<option value=""> 请选择</option>
<option value="1"> 1</option>
<option value="2"> 2</option>
</select><br>
文本域：<textarea cols="10" rows="20" name="text"></textarea>
内容总结
以上是互联网集市为您收集整理的Web前端——html 基本标签全部内容，希望文章能够帮你解决Web前端——html 基本标签所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。