html基础入门
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
1.基本标签
<!DOCTYPE html><!-- doctype : 声明文件类型 --> <html lang="en"> <!-- en: 英文 zh_CN:中文 html中包含两部分 : head & body --> <!-- head 包含 : title标签 , css样式 , js代码 --> <head> <meta charset="UTF-8"> <title>Title</title> </head> <!-- body: 是页面的显示内容 body中的标签 都拥有自己的两种属性: 1.基本属性 : color , name , type 等... 2.事件属性 : onclick,等... --> <body> hello world <!--常用标签--> <br/><!--换行--> <hr/><!--水平线--> <h1></h1><!--标题标签 align:属性 , 设置标题位置,left,right,center--> <font>字体</font><!--字体标签--> <a href=""></a><!--超链接 target:属性,_self:在原页面打开 , _blank:在新的页面打开--> <ul><!--无序列表 unorder list --> <li></li><!--列表单项 list item--> </ul> <ol></ol><!--有序列表 order list--> <!-- javaSE 和 web文件路径的区别 javaSE : 相对->从工程名开始/包/类 绝对->D:/文件名 web : 相对 . 表示当前文件所在的目录 ..表示当前文件的上一级目录 文件名 表示当前文件所在目录的文件 相当于 ./文件名 绝对路径 http://ip:port/工程名/资源路径 border : 属性 , 设置图片边框 alt : 属性 , 当文件不存在 , 用来代替显示的文本 --> <img src="../img/图片1.jpg" border="1" alt="图片不存在"> </body> </html>
2. html 字符实体
3.表格(一)
<table align="center" border="1" width="300" height="300" cellspacing="0"><!--表格 cellspacing="0":取消单元格的间隔 --> <tr><!--行--> <td>1.1</td><!--单元格--> <td>1.2</td> <td>1.3</td> </tr> <tr> <th>2.1</th><!-- 表头 :自动加粗且居中 --> <td>2.2</td> <td>2.3</td> </tr> <tr> <td><b>3.1</b></td><!-- b :加粗--> <td>3.2</td> <td>3.3</td> </tr> </table>
4.表格(二)
<!-- 单元格合并 colspan : 合并列 rowspan : 合并行 --> <table border="1" width="300" height="300" align="center" cellspacing="0"> <tr> <td colspan="2">1.1</td> <!--跨列--> <td>1.3</td> <td>1.4</td> <td>1.5</td> </tr> <tr> <td rowspan="2">2.1</td> <!--跨行--> <td>2.2</td> <td>2.3</td> <td>2.4</td> <td>2.5</td> </tr> <tr> <td>3.2</td> <td>3.3</td> <td>3.4</td> <td>3.5</td> </tr> <tr> <td>4.1</td> <td>4.2</td> <td>4.3</td> <td colspan="2" rowspan="2">4.4</td><!--跨行跨列--> </tr> <tr> <td>5.1</td> <td>5.2</td> <td>5.3</td> </tr> </table>
4.iframe 内嵌页面
<!-- iframe : 可以在一个页面中创建单独的区域显示一个页面
需要和<a> 配合使用
1.在iframe中创建name属性
2.在<a>中设置target为iframe的name属性
-->
<iframe width="500" height="500" name="abc"></iframe>
<ul>
<li><a href="table.html" target="abc">table</a></li>
<li><a href="table2.html" target="abc">table2</a></li>
</ul>
5. 表单
<!-- form :表单 input type="text" : 文本输入 input type="password" : 密码 input type="radio" : 单选 , name属性可以对其分组 , checked 默认选中 input type="checkbox" : 多选框 input type="reset" : 重置 input type="submit" : 提交 input type="file" :文件上传 input type="hidden" :隐藏域 , 隐藏某些信息不被用户看到,提交时仍可传到后台 select : 下拉框 option : 下拉框选项 selected 默认选中 textarea : 多行文本输入框 rows : 几行高度 cols : 几列长度 --> <form> 用户名 : <input type="text" value="username"/><br/> 密码 : <input type="password" value="password"/><br/> 性别 : <input type="radio" name="sex" checked="checked">男 <input type="radio" name="sex">女<br/> 爱好 : <input type="checkbox"/>java<input type="checkbox"/>javaScript<input type="checkbox"/>C++<br/> 国籍 : <select> <option>--请选择国籍--</option> <option>中国</option> <option>美国</option> <option>小日本</option> </select> <br/> 自我简介:<textarea rows="10" cols="20">默认值</textarea><br/> <input type="reset"><br/> <input type="submit"><br/> <input type="file"><br/> <input type="hidden"> </form>
