前端基础知识-html
前端的三把利器：HTML、CSS、JS
HTML:
1、head 中的信息不会在页面中呈现
1.1、head中的title是浏览器tab的标签名
2、标签
2.1、自闭和标签：单个出现
2.2、主动闭合标签：成对出现
2.3、标签中的属性：有标签自带属性 和 自定义属性
head部分：
1 <head> 2 <!--字符集编码--> 3 <meta charset="UTF-8"> 4 <!--每隔多少秒刷新请求--> 5 <meta http-equiv="refresh" content="2"> 6 <!--打开页面2秒钟之后，跳转到百度--> 7 <meta http-equiv="refresh" content="2;http://www.baidu.com"> 8 <title>Title</title> 9 <!--title的图标--> 10 <link rel="shortcut icon" href="tubiao.ico"> 11 <!--引入css--> 12 <link rel="stylesheet" href="tmp.css"> 13 <!--css样式--> 14 <style></style> 15 <!--引入js和编写js--> 16 <script src="tmp.js"></script> 17 </head>
body部分：
<p>：段落标签
<br>：换行标签
<h1~9>：标题标签，数字1的字体最大
<div>：块级标签，不论自己有多大，都占满一整行
<span>：行内标签 或叫 内联标签，行内标签自己有多大，就占多大
白板标签：没有附着任何css样式
伪白板标签：附着其他的css样式
<input>：文本框，默认是text 文本框
1 <!--文本框--> 2 <input type="text" placeholder="提示文案"> 3 <input type="text" name="username" value="默认值"> 4 <!--密文文本框--> 5 <input type="password" name="passwd" placeholder="请输入密码"> 6 <!--radio 单选，当name的值相同时，每个元素直接互斥--> 7 <span>男</span><input type="radio" name="sex"> 8 <span>女</span><input type="radio" name="sex"> 9 <!--checkbox 多选框，checked="checked"默认勾选--> 10 <span>华为</span><input type="checkbox" checked="checked"> 11 <span>iphone</span><input type="checkbox"> 12 <!--上传文件--> 13 <input type="file"> 14 <!--按钮--> 15 <input type="button" value="登录"> 16 <!--submit按钮如果和form表单连用，则会直接触发请求--> 17 <input type="submit" value="注册"> 18 <!--reset 和 form 表单连用时，会触发表单重置--> 19 <input type="reset">
<form>：表单
<label>：扩展input的可点击范围，for属性的值为input所对应的id
1 <!--扩展input的可点击范围，for属性的值为input所对应的id--> 2 <label for="i1">用户名：</label><input id="i1" type="text" placeholder="请输入用户名">
<textarea>:复文本标签
<textarea>复文本标签</textarea>
<select>：下拉框标签
1 <!--下拉框标签--> 2 <select name="s1"> 3 <option selected="selected" value="0">请选择</option> 4 <option value="1">中秋</option> 5 <option value="2">国庆</option> 6 <option value="3">都不上</option> 7 </select>
<select><optgroup>：分组下拉框
1 <select name="s2"> 2 <optgroup label="黑龙江"> 3 <option>哈尔滨</option> 4 <option>松花江</option> 5 </optgroup> 6 <optgroup label="河北"> 7 <option>石家庄</option> 8 <option>秦皇岛</option> 9 </optgroup> 10 </select>
<a>：超链接标签
1 <a href="http://www.baidu.com">跳转到百度</a>
<img>：图片标签
1 <img src="图片地址" alt="图片加载失败提示" title="鼠标悬浮提示">
<ul>：点的列表
<ol>：数字的列表
1 <!--列表 点的列表--> 2 <ul> 3 <li>列表1</li> 4 <li>列表2</li> 5 </ul> 6 <!--列表 数字的列表--> 7 <ol> 8 <li>列表3</li> 9 <li>列表4</li> 10 </ol>
表格操作：
1 <table border="1"> 2 <thead> 3 <tr> 4 <td>序号</td> 5 <td>方法</td> 6 <td>内容</td> 7 <!--colspan 合并列--> 8 <td colspan="2">操作</td> 9 </tr> 10 </thead> 11 <tbody> 12 <tr> 13 <td>1</td> 14 <!--rowspan 合并行--> 15 <td rowspan="3">post</td> 16 <td>{}</td> 17 <td>修改</td> 18 <td>执行</td> 19 </tr> 20 <tr> 21 <td>2</td> 22 <td>{}</td> 23 <td>修改</td> 24 <td>执行</td> 25 </tr> 26 <tr> 27 <td>3</td> 28 <td>{}</td> 29 <td>修改</td> 30 <td>执行</td> 31 </tr> 32 </tbody> 33 </table>
特殊符号：
空格： 
<：<
>：>
