1.html基础知识

1.1标题标签

<hn></hn>

• n取值 :1~6
• h1最大 h6最小
• 自动换行 且留白 默认加粗
• 常用属性:

1. align:对齐方式2. left:左  right:右 center:居中3. 格式:<h2 align="center"></h2>

案例代码

<h1 align="center">哈哈</h1>

1.2字体标签(规定文本的字体、字体尺寸、字体颜色)

常用属性:

• face:字体
• size:尺寸,有取值范围1~7
• color:颜色

案例代码

<font size="7" color="blue">哈哈</font><font size="7" color="#0000ff">哈哈</font><font face="微软雅黑">hehe</font>

1.3 其他标签

- 加粗：<b></b> ，<strong></strong> - 斜体：<i></i> - 段落标签:(<p></p>)- 水平线:<hr/> - 换行：<br/>

1.4 图片标签：

常用属性:
1. alt:替代文字(如果图片路径有问题不能正常显示时，替代图片的文字)
2. title:移到图片显示的文字
3. width:宽(像素:123px,百分比:20%)
4. height:高(像素:123px,百分比:20%)
5. src:图片的路径

• 相对路径
• ./ 或者 什么都不写 当前目录
• ../ 上一级目录
• 绝对路径

案例代码

<img src="../img/logo2.png" title="哈哈" width="20%" height="120px"><img src="../img/logo21.png" alt="黑马log" >

1.5 列表标签

有序：<ol></ol> 无序：<ul></ul> 列表项：<li></li>type属性，设置列表前的形状

案例代码

<ul type="circle">    <li>haha</li>    <li>hehe</li>    <li>xixi</li></ul><ol type="A">    <a href="http://baidu.com"><li>haha</li></a>    <a href="http://baidu.com" target="_blank"><li>hehe</li></a>    <a href="#"><li>xixi</li></a></ol>

1.6 超链接：

常用属性

• href:跳转路径
  
  • #：当前页面
  • Javascript:void(0):不跳转
• target:在那里打开
  
  • 默认值:_self(当前页面打开)
  • _blank(在空白页面打开))

1.7 表格标签：

常用的子标签：<tr></tr> - <tr></tr>:行    1. 常用子标签:        - <td>:列            - td 的常用属性:            - align:内容对齐            - colspan:跨列合并 值:合并的列数            - rowspan:跨行合并        - <th>:表头单元格 默认居中加粗    2. tr 的常用属性:        - align:内容对齐- table 的常用属性:    - border:边框  像素值    - width:    - lign:表格对齐方式

案例代码

<table border="1" width="40%" height="200px" align="center" bgcolor="antiquewhite">    <tr>        <th>hehe</th>        <th>hehe</th>        <td>hehe</td>    </tr>    <tr align="center">        <td rowspan="2">11&&21</td>        <td>12</td>        <td>13</td>    </tr>    <tr align="right">        <td>22</td>                                         <td>23</td>    </tr>    <tr>        <td colspan="2">31&&32</td>        <td align="center">33</td>                                      </tr>    <tr>        <td>41</td>        <td>42</td>                                         <td>43</td>    </tr></table>

1.8 表单页面

表单标签：<form></form>
1. 常用属性:

• method:表单提交的方式：get(默认)和post
• action:信息提交的路径 默认是当前页面

1. get和post的区别:- get请求会把所有的参数追加在地址栏上,post请求不会- get请求参数大小有限制,post请求参数大小没有限制- post相对于get安全些

1. 常见的子标签
   
   • input

常用的属性:type:    text:文本框 默认    password:密码框    radio:单选框    checkbox:多选框    file:文件框    submit:提交    reset:重置    button:普通按钮    hidden:隐藏域 在页面上隐藏 提交的时候可以提交过去    image:图片提交 替代submit     date:部分浏览器支持name:    可以将几个单选框(复选框)设置为一组    要想将信息保存到服务器上必须有name属性readonly:    readonly="readonly" 只读disabled:    disabled="disabled" 禁用

• select:下拉选

格式:    <select name="pro">        <option>黑龙江</option>    </select>

• textarea:文本域

常用的属性:    cols:列    rows:行

注意：

• 对于文本框 密码框 文本域 手写的内容传递过去了
• 对于单选框和多选框来说,却没有把值传递过去
• 要想把值传递过去 必须设置value属性
• 若下拉选要想把选中内容的值传递过去,请加上value属性

设置默认值：

• 文本框 密码框:只需要添加value属性
• 单选框 多选框:添加 checked=”checked”
• 下拉选:添加selected=”selected”
• 文本域:标签体

案例代码

<form action="" method="get">    姓名：<input type="text" name="usename" value="dml" readonly="readonly"/><br/>    密码：<input type="password" name="password" value="123" disabled="disabled"/><br/>    性别：<input type="radio" name="sex" value="1"/>男        <input type="radio" name="sex" value="0" checked="checked"/>女    <br/>    爱好：<input type="checkbox" name="habit" value="look" checked="checked"/>看书    <input type="checkbox" name="habit" value="sleep"/>睡觉    <input type="checkbox" name="habit" value="movie"/>看电影    <input type="checkbox" name="habit"value="play" checked="checked"/>玩    <br/>    头像：<input type="file" name="photo"/><br/>    籍贯：<select name="pro">            <option value="000" selected="selected">请选择</option>            <option value="001">贺州</option>            <option value="002">柳州</option>            <option value="003">玉林</option>            <option value="004">梧州</option>        </select>        <select name="city">            <option value="00" selected="selected">请选择</option>            <option value="01">钟山</option>            <option value="02">柳江</option>            <option value="03" >北流</option>            <option value="04">苍梧</option>        </select>    <br/>    自我介绍：<br />    <textarea name="intr" cols="40" rows="4" hidden="hidden">哈哈</textarea>    <br/>    <input type="submit" /> &nbsp;&nbsp;&nbsp;<input type="reset" />&nbsp;&nbsp;&nbsp;<input type="button" value="普通按钮"/></form>

1.9框架页面：frameset

1. 常用属性:
   
   • cols:垂直切割
   • 例如: cols=”40%,60%”
   • 例如: cols=”40%,*,10%”
   • rows:水平切割
2. 常见的子标签:
   
   • frame
   • 常用属性：
     
     • src:展示的页面的url
     • name:
   • 注意:最好和body不要共存

案例代码

<!--将页面水平切割为三个部分--><frameset rows="18%,*,10%">    <frame src="head.html"/>    <frameset cols="20%,*" >    <!--将中间的页面垂直切割成两部分-->        <frame src="left.html" />        <!--left.html页面的超链接点击后跳转的页面显示在name="main"的页面        <frame src="main.html" name="main"/>    </frameset>    <frame src="foot.html"/></frameset>

left.html代码

<body><h2><a href="people.html" target="main">人员管理</a></h2><h2><a href="shop.html" target="main">商品管理</a></h2><h2><a href="system.html" target="main">系统管理</a></h2></body>

1.10 转义字符

>   &gt;  //great then<   &lt;&   &amp;空格 &nbsp;

1.11元信息：meta

<meta charset="UTF-8"><!--指定浏览器用什么编码打开此页面-->