HTML的入门及一些常用标签与其属性
Posted pzbangbangdai
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML的入门及一些常用标签与其属性相关的知识，希望对你有一定的参考价值。
*这是一个html文档
<html><!--html文档的根标签-->
<head><!-- 头标签-->
<title>peizeng</title><!--标题标签-->
</head>
<body><!-- 体标签-->
<font color='red'>Hello world</font><br/> <!-- br/换行标签-->
<font color='green'>Hello world</font><br/>
<h1>防火工作</h1> <!-- h1到h6依次为标题的大小 -->
<p>
一、高度重视冬季防火工作。目前已进入冬季，风干物燥，用火、用电、用油、用气增加，元旦、春节即将来临，人流、物流集中，
各种庆祝集会和传统民俗文化活动频繁，火灾事故隐患增多，防控难度加大，消防安全形势将更加严峻。
各县市区、各部门、各单位负责人要针对本地区、本部门、本单位消防工作存在的薄弱环节，组织制定各项防范措施，坚决防止重特大火灾事故的发生。
</p>
<p>
二、严格落实消防安全责任制。各县市区人民政府全面负责本地区消防工作，政府主要负责同志为第一责任人，分管负责同志为主要责任人。
要层层落实责任，把任务分解到部门、单位和个人。各单位负责人对本单位消防安全工作负总责，进一步落实消防安全责任制和岗位责任制。
要加大火灾事故责任追究力度，实行责任倒查和逐级追查，做到事故原因不查清不放过、事故责任者得不到处理不放过、整改措施不落实不放过、教训不吸取不放过。
发生重大火灾事故的，除追究单位主要负责人和实际控制人责任外，还要追究地方负责人和上级单位主要负责人的责任；
触犯法律的，依法追究单位主要负责人、单位实际控制人和上级单位负责人的法律责任。
</p>
<p>
三、认真组织开展消防安全大检查活动。
</p>
<!--段落标签 p-->
<!--hr标签 显示一条水平线-->
<hr color='red'>
<h2>文本标签</h2>
<!--b标签 加粗-->
白日依山尽<br/>
<b>白日依山尽</b><br/>
<!--i标签 斜体-->
黄河入海流<br/>
<i>黄河入海流</i><br/>
<!--font标签 字体标签-->
欲穷千里目<br/>
<font color='red' size='3'>欲穷千里目</font><br/>
<!--center居中标签-->
更上一层楼<br/>
<center>
更上一层楼<br/>
</center>
<!--
其中font与hr标签各有一定的属性
hr有color，width，size，align（对齐方式center居中，left居左，right居右）
font有color，size，face（字体）
属性的取值：
color：
1.直接接颜色单词
2.rgb（值1，值2，值3），值的范围0~225
3.#值1值2值3：值的范围00~FF之间。
width：
1.数值：width=‘20’。单位为像素
2.数值%：相当于屏幕的一个比例。例：50%。
-->
<!--
加载图片使用img标签。
<img src=”相对路径.jpg“>
-->
<hr color='red'>
<h2>列表标签</h2>
<!--
*有序列表
*<ol>
*<li>
*无序列表
*<ul>
*<li>
-->
<ol>
<li>白日依山尽</li>
<li>黄河入海流</li>
<li>欲穷千里目</li>
<li>更上一层楼</li>
</ol>
<ul>
<li>白日依山尽</li>
<li>黄河入海流</li>
<li>欲穷千里目</li>
<li>更上一层楼</li>
</ul>
<hr color='red'>
<h2>链接标签</h2>
<!--
a:定义一个超链接
属性：
href:指定访问资源的URL（统一资源定位符）
target:指定打开资源的方式
_self:默认值，在当前页面打开
_blank:在空白页面打开
-->
<a href='https://www.cnblogs.com/pzbangbangdai/'>这是一个超链接</a><br>
<a href='https://www.cnblogs.com/pzbangbangdai/' target='_blank'>这还是一个超链接</a>
<hr color='red'>
<h2>表格标签</h2>
<!--
*table:定义表格
*tr:定义行
*td:定义单元格
*colspan:合并列
*rowspan:合并行
*th:定义表头单元格
*caption:表格标题
-->
<table border='1' width='50%' cellpadding='0' cellspacing='0'>
<caption>学生信息表</caption>
<tr>
<th>学号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr>
<td>01</td>
<td>张三</td>
<td>70</td>
</tr>
<tr>
<td>02</td>
<td>李四</td>
<td>80</td>
</tr>
</table>
<hr color='red'>
<h2>表单标签</h2>
概念：用于采集用户输入的数据
<!--
form :用于定义表单。可以定义一个范围，范围代表采集用户数据的范围
属性：
action:指定提交数据的URL
methon:指定提交方式。常用的两类：
get：请求参数会在地址栏中显示
post：请求参数不会在地址栏中显示
要想数据被提交，必须指定name属性
-->
<form action='#' method='get'>
用户名：<input name='username'><br>
密码：<input name='password'><br>
<input type='submit' value='登录'>
</form>
<hr color='red'>
<h2>表单项标签</h2>
<!--
*input:可以通过type属性值，改变元素展示的样式
*type属性：
*text:文本输入框
*placeholder:输入提示信息
*password:密码输入框
*radio：单选框
*注意如果有多个单选框则name属性值必须一样
*每一个单选框的value属性一般指定被选择中提交的值
*通过添加checked属性指定其为默认选项
*checkbox：多选框
*每一个单选框的value属性一般指定被选择中提交的值
*通过添加checked属性指定其为默认选项
*file:文件选择框
*submit：按钮
*hidden：隐藏域，用于提交一下信息
*label：指定输入框的文字描述信息（即点击一个框的文字信息光标就会跳转至其框中）
*注意label的for属性值要与input的id属性值对应
*select:下拉标签
*子元素：option,指定列表项
*textarea:文本域
*cols:指定列数
*rows:指定行数
-->
<form action='#' method='post'>
<table border='1' width='500' align='center'>
<tr>
<td><label for='username'> 姓名</label></td>
<td><input name='username' type='text' id= 'username'></td>
</tr>
<tr>
<td><label for='password'> 密码</label></td>
<td><input name='password' type='password' id= 'password'></td>
</tr>
<tr>
<td><label for='email'> 邮箱</label></td>
<td><input name='email' type='email' id= 'email'></td>
</tr>
<tr>
<td><label > 性别</label></td>
<td><input name='gender' type='radio' value='male'>男
<input name='gender' type='radio' value='female'>女
</td>
</tr>
<tr>
<td><label for='birthday'> 生日</label></td>
<td><input name='birthday' type='date' id= 'birthday'></td>
</tr>
<tr>
<td colspan='2' align='center'><input type='submit' value='注册'> </label>
</td>
</tr>
<table>
</form>
</body>
</html>以上是关于HTML的入门及一些常用标签与其属性的主要内容，如果未能解决你的问题，请参考以下文章