html基础知识
<!DOCTYPE html> //指明是html5 <html> <head> //不显示的内容，多是设置属性 <meta charset="UTF-8"> //用中文的比较好 <title>MyGod</title> //网址标题 </head> <body> //主要内容 <h1>Welcome</h1> //标题 <hr> //分隔线 <p>hello world</p> //段落 <u> ttttt </u> //下划线 <ins>yyyyy </ins> //起强调作用，下划线 <small> rrrrr </small> //小一号字体 <p>how are you I'm <wbr> fine</p> // <wbr>是安全换行 CH<sub>4</sub> <br> //下标 m<sup>2</sup><br> //上标 <dfn> WTO </dfn> <br> //倾斜
<pre>
1
2
3 //保持原始格式
</pre> <q> DDDD </q> //加双引号 <bdo dir="rtl"> lj </bdo> <br> //文字方向 <span> roorgfoasjgoas </span> //普通文本 <a href="http://www.baidu.com">百度</a> <br> //超链接 <a href="http://www.baidu.com"><img src="东京食尸鬼.jpg"></a> <br> <a href="http://www.baidu.com" target="_blank">百度</a> <br> //target有两个值: _self(在当前窗口)，_blank(新窗口) </body> </html>
文本内连接
<a href="#1">锚点1</a> //#加id值 <a href="#2">锚点2</a> <a href="#3">锚点3</a> <br><br><br> <a id="1">锚点1 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <a id="2">锚点2 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <a id="3">锚点3 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
插入图片
<img src="东京食尸鬼.jpg" alt="金木" width="100" height="150" title="金木"> //像素,title移动到该图片时有提示 <img src="东京食尸鬼.jpg" alt="金木" width="10%" height="150"> //宽度可以百分比,高度用百分比没有意义
无序列表
<ul type="disc"> //定义无序列表 <li>3333</li> //列表项 <li>4444</li> <li>5555</li> </ul> <ul type="circle"> //小圆点 <li>3333</li> <li>4444</li> <li>5555</li> </ul> <ul type="square"> //小方块 <li>3333</li> <li>4444</li> <li>5555</li> </ul>
有序列表
<ol start="10"> //定义开始编号 <li>3333</li> <li value="5">4444</li> //设置编号值 <li>5555</li> </ol> <ol type="A"> //以字母A,B,,,开始的 <li>3333</li> <li>4444</li> <li>5555</li> </ol> <ol type="I"> //以I,II,III,,,开始 <li>3333</li> <li>4444</li> <li>5555</li> </ol>
自定义列表
<dl> <dt>num1</dt> <dd>1</dd> <dd>2</dd> <dt>num2</dt> <dd>3</dd> <dd>4</dd> </dl>
表格操作
<table border="1"> <tr><th colspan="3">标题</th></tr> //横向单元格合并 <tr><td>单元格</td><td>单元格</td><td>单元格</td></tr> <tr><td>单元格</td><td>单元格</td><td>单元格</td></tr> <tr><td>单元格</td><td>单元格</td><td>单元格</td></tr> </table>
表格合并
<table border="1"> //边框宽度 <thead> //表头 <tr><th>标题</th><th>标题</th><th>标题</th></tr> </thead> <tbody> //表格主体 <tr><td rowspan="3">单元格</td><td>单元格</td><td>单元格</td></tr> //列合并 <tr><td>单元格</td><td>单元格</td></tr> <tr><td>单元格</td><td>单元格</td></tr> </tbody> <tfoot> //表格页脚 <tr><td>备注</td><td colspan="3"></td></tr> </tfoot> </table>
表格设置
<table border="1"> <colgroup span="2" style="width: 100px"> //给组合列设置属性 <col style="background: red"> //可以更精确的控制，通常与colgroup配合使用 <col style="background: blue"> </colgroup> <tr><th>标题</th><th>标题</th><th>标题</th></tr> <tr><td rowspan="3">单元格</td><td>单元格</td><td>单元格</td></tr> <tr><td>单元格</td><td>单元格</td></tr> <tr><td>单元格</td><td>单元格</td></tr> </table>
设置样式
<head> //在head中设置 <meta charset="UTF-8"> <title>MyGod</title> <style type="text/css"> p{color: red} //段落的格式 </style> </head>
表格内容与边框距离
<table border="1" cellpadding="30" cellspacing="1"> <tr><td>1</td><td>1</td></tr> <tr><td>1</td><td>1</td></tr> </table>
窗口
<a href="http://www" target="myframe">我要自学网</a> <br> //链接到下面这个窗口 <iframe src="http://www.baidu.com" frameborder="1" width="300" height="300" name="myframe"></iframe>
div(块)
<div style="height: 708px;width: 100%;"> <div style="background: green;width: 100%;height: 10%">block1 </div> <div style="background: red;width: 20%;height: 80%;float: left;"> block2 </div> <div style="background: blue;width: 80%;height: 80%;float: left;"> block3 </div> </div>
input元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>MyGod</title> </head> <body> <form action="http://baidu.com" method="get"> 用户名: <input type="text" name="user"> <br> 密码: <input type="password" name="ps"> <br> <input type="text" readonly="readonly" value="中国"><br> <input type="text" disabled="disabled" value="eeeee"> <br> <input type="image" src="东京食尸鬼.jpg"> <br> <input type="hidden" value="1234"> <input type="email" ><br> <input type="submit" > </form> </body> </html>
input更多属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>MyGod</title> </head> <body> <form action="http://baidu.com" method="get"> <input type="text" name="req" required> <br> <input type="url" name="u" ><br> //网址 <input type="tel" name="tel"><br> //电话 <input type="number" min="5" max="50" step="5"><br> //数字 <input type="range" min="0" max="100" value="10"> <br> 时间: <input type="time"> <br> 日期: <input type="date"> <br> 周: <input type="week"> <br> 月: <input type="month"><br> 本地时间: <input type="datetime-local"><br> <input type="color"><br> <input type="search" placeholder="搜索"><br> <!-- placeholder是获得焦点时清空文本 --> <input type="file" accept="image/png" multiple=""> <br> <input type="checkbox" value="A" checked="checked">平面设计 <br> //复选按钮 <input type="radio" name="sex"> 男 <input type="radio" name="sex"> 女 <br> <input type="submit" name="上传"><br> </form> </body> </html>
