HTML基础
HTML基础
一、html简介
1.web前端技术
Web前端技术是由w3c组织制定的一系列技术的集合，主要包括：
HTML – 结构标准： 负责网页内容（布局）
CSS – 表现标准、样式标准：美化
JavaScript，简称js，行为标准：负责行为动作、表单验证、数据交互
2.html发展历史
html1.0 – 1993年起草了一个草案，纯文本格式
html4.0 – 意识：
语法松散：Aa – xhtml1.0（x表示严格型的，相对严格：能兼容低版本）
-- xhtml2.0（想法：绝对严格）
-- 浏览器厂商反对：咱们自己研发html自己用 – html5.0
二、常用标签
1.布局标签
标题： h1-h6
段落 p
布局区块： div
特殊效果文字小图片： span
2.超链接和图片标签
图片标签: <img src="图片路径" alt="替换文本" title="提示文本">
超链接: <a href="文件路径" target="_blank">跳转本地文件</a> _blank用于跳转新窗口
3.列表,表单,表格
列表: ul中嵌套li
表单:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> textarea{ /* 禁用拖拽功能 */ resize: none; width: 100px; height: 50px; /* 取消焦点框 */ outline: none; } </style> </head> <body> <!-- 将来发送数据 收集好之后在发送 from去收集 --> <!-- get 加密, post不加密 --> <form action="提交地址" method="POST"> <!-- from里面: 表单控件 --> <!-- placeholder="用户名" 是5.0 新增的 --> <!-- 获取用户的内容就是获取value的值 --> 文本框 : <input type="text" placeholder="用户名"> <br><br> 密码框 : <input type="password"> <br><br> 单选框 : <input type="radio" name='sex' value='man' id='fale'><label for="fale">男 </label> <label><input type="radio" name="sex" checked>女</label> <!-- 单选: 必须交name 让两者name值相同, key是name的属性值, 值是value的属性值 1.sex=man 2.sex=woman 后面的键值对,覆盖前面的 想要设置点文字可以选中, 加入label, 绑定id相同 checked 默认选中 --> <br><br> 复选框: <input type="checkbox" checked>读书 <input type="checkbox">学习 <input type="checkbox">打人 <br><br> 上传文件: <input type="file"> <br><br> 文本域: <textarea></textarea> <br><br> 下拉框: <select> <!-- selected 默认选中 --> <option>1</option> <option selected>2</option> <option>3</option> </select> <br><br> <!-- 提交 普通 重置 --> <input type="submit" value="同意并注册"> <input type="button" value="普通按钮"> <input type="reset"> <button>按钮</button> </form> </body> </html>
表格:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!-- 结构: table嵌套tr, tr嵌套td, table:表格, tr:行, td:单元格 th:表头--> <!-- cellspacing 间隙 --> <table border="1" cellspacing="0"> <!--表格头--> <thead> <tr> <th></th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> </thead> <!--表格主体--> <tbody> <!--表格主体的每一行--> <tr> <td rowspan="3">上午</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>生物</td> <td>化学</td> </tr> <tr> <td>语文</td> <td>数学</td> <td>英语</td> <td>生物</td> <td>化学</td> </tr> <tr> <td>语文</td> <td>数学</td> <td>英语</td> <td>生物</td> <td>化学</td> </tr> <tr> <td rowspan="2">下午</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>生物</td> <td>化学</td> </tr> <tr> <td>语文</td> <td>数学</td> <td>英语</td> <td>生物</td> <td>化学</td> </tr> </tbody> <tfoot> <tr> <td colspan="6" >课程表</td> </tr> </tfoot> </table> </body> </html>
三、特殊效果标签
<b>加粗</b>
<i>倾斜</i>
<u>下划线</u>
<s>删除线</s>
