HTML初学
一、HTML规范
1、一个html文件开始标签和结束标签 <html> </html>
2、html包含两部分内容
(1). <head>设置相关信息</head>
(2). <body>显示在页面上的内容都写在body里面</body>
3、html的标签又开始标签,也要有结束标签
- <head></head>
4、html代码不区分大小写
5、有些标签,没有结束标签,在标签内结束
- <br/>(换行) <hr/>(直线)
二、HTML的操作思想
网页中有很多数据,不同的数据需要不同的显示效果,这时需要使用标签把要操作的数据封装起来,通过修改标签的属性值实现标签内数据的变化。
一个标签相当于一个容器,需要修改容器内数据段样式,只需要修改容器内数据样式的变化。
三、文字标签和注释标签
-文字标签:修改文字的样式、
-<font></font>
-属性:
* size: 文字的大小 取值范围1-7,超出了7,默认还是7
*color: 文字颜色
-两种表达方式
** 英文单词:red blue green black white yellow gray
**使用十六进制表示:#ffffff :RGB
-通过工具实现不同的颜色 #66cc66
-注释标签:html注释:<!--html的注释 --> **** ! 必须是英文的符号
四、标题标签和水平标签和特殊字符
-标题标签: <h1>标题1</h1> <h2>标题2</h2>......<h6>标题6</h6>
- 从h1到h6,大小依次变小,同时会自动换行
-水平标签: <hr/>
-属性
** size
** color
- <hr size="6" color="red" />
-特殊字符:
-想要在网页上显示这样的内容 <html>:是网页的开始
-需要对特殊字符进行转义
- < <
-> >
- 空格
五、列表标签
- <dl> </dl>; 表示列表的范围
** 在dl里面 <dt></dt> 上层内容
** 在dl里面 <dd></dd> 下层内容
代码:
<dl>
<dt>某某大学</dt>
<dd>教务处</dd>
<dd>财务处</dd>
<dd>后勤部</dd>
</dl>
显示效果: 某某大学
教务处
财务处
后勤部
- <ol></ol>;表示有序列表的范围
** 在<ol>标签里面 <li>具体内容</li>
**属性:type 设置排序方式:1(默认) a i
代码:
<ol type="1">
<li>教务处</li>
<li>财务处</li>
<li>后勤部</li>
</ol>
显示效果: 某某大学
教务处
财务处
后勤部
-显示效果:
特殊符号 教务处
特殊符号 财务处
特殊符号 后勤部
** <ul></ul>;无序列表的范围
** 属性 type: 空心圆:circle, 实心圆(默认) :disc ,实心方块:squrate;
** 在ul里面<li></li>;
代码: <ul trpe="disc">
<li>教务处</li>
<li>财务处</li>
<li>后勤部</li>
</ul>
六、超链接标签(******)
- 连接资源
** <a href="连接到资源的路径"> 显示在页面上的内容 </a>
- 属性:href: 链接资源的地址
target:设置打开的方式, 默认是当前页打开。
_blank:在一个新窗口打开
_self:在当前页打开
- 当超链接不需要跳转到任何页面时候,设置href="#"
- 定位资源
* 如果想要定位一个资源:首先定义一个位置 <a name="top"> 顶部 </a>
* 回到这个位置 <a href="#top">回到顶端</a>
* 引入一个标签 pre:原样输出 <pre> </pre>
七、表格标签 **
* 可以对数据进行格式化,使数据显示更加清晰
*<table></table> 表示表格的范围
- border:表格线
-bordercolor:表格线的颜色
- cellspacing:单元格之间的距离
- width:表格的宽度
- height:表格的高度
* 在table里面 <tr></tr>表示表格的行
-设置对齐方式:align: left center right
* 在tr里面 <td></td> 表示行里面的单元格
-设置对齐方式: align: left center right
*<th></th>:可以实现单元格 实现居中加粗
* 表格的标题 : <caption></caption>
*操作技巧:先数有多少行,在数每行有多少个单元格
代码: <table border="1" bordercolor="red" cellspacing="0" width="100" height="150">
<caption>人员信息</caption>
<tr align="center">
<td >姓名</td>
<td>年龄</td>
</tr>
<tr>
<tdalign="left" >张三</td>
<td>22</td>
</tr>
</table>
*合并单元格:
- rowspan:跨行<td rowspan="3">20</td>
- colspan: 跨列 <td colspan="3">人员信息</td>
八、图片标签
<img src="" width="" height="'/>
九、表单标签
* 提交数据到服务器,可以使用表单标签来实现。
*<form></form>: 定义一个表单的范围
属性:action: 提交到的地址 默认提交到当前页面
**输入项:可以输入内容或者选择内容 <input type="输入项内容"/> 必须有name属性
普通输入项: 手机号码:<input type="text" name="phonenumber"/>
密码:<input type="password"/>
性别:<input type="radio" name="sex1 value="nv"/>女 <input type="radio" name="sex1"value="nan"/ />男 name是属性值必须相同 必须由value值
复选输入项:<input type="checkbox" name="love"/>足球 <input type="checkbox" name="love"/>羽毛球 必须由value值
文件输入项:<input type="file"/> 文件上传
下拉输入项:<select name="birth">
<option value="0">请选择</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select>
文本域:<textarea cols="10" rows="5"></textarea>
隐藏项: <input type="hidden"/>
提交按钮: <input type="submit"value="注册"/>
优质内容筛选与推荐>>