Web前端——html 基本标签
基本标签
构成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>
