HTML

211 阅读5分钟

1.html

1.html标签中一般分为两个部分,分别是head和body

<head></head>表示头部信息,一般包含三部分信息,title标签、css样式、js代码

<body></body>表示整个html里的内容

<html>
    <head>
        <title></title>
    </head>
    <body>
        页面主要内容
    </body>
</html>

2.标签

(1)标签的格式 <标签名>封装的内容</标签名>

(2)标签的属性

   (1)基本属性 `bgcolor="red"`可以修改简单的样式结果
   (2)事件属性 `onclick="alert('你好');" `可以直接设置响应后的代码
   

(3)分类

   单标签和双标签
   

(4)语法

   (1)标签不能交叉嵌套
   (2)标签必须正常关闭
   (3)属性必须要有值,属性值必须加引号
   (4)注释也不能嵌套
   

3.常用的标签

font字体标签,可以用来修改文本的字体

(1)color 用来修改字体的颜色
(2)face 用来修改字体
(3)size 用来修改字体的大小
<font color="红色" face="宋体" size="4"></font>

4.特殊字符

<br>换行标签

> --- &gt;
< --- &lt;
空格--&nbsp;

标题标签h1-h6 align 属性是对齐

    Left   左对齐(默认)
    center 居中
    right  右对齐
<h1 align="left">标题1</h1>

5.超链接

网页中所有点击后可以跳转的内容都是超链接

<a>是超链接

herf属性是设置连接的地址

target属性是设置哪一个目标进行跳转
    _self 表示当前页面
    _blank 表示打开新的页面来进行跳转
<a herf="http://baidu.com">百度</a>
<a herf="http://baidu.com" target="_self">百度</a>
<a herf="http://baidu.com"target="_blank">百度</a>

6.列表标签

无序列表

 <ul type="none">
     <li></li>
 </ul>

type属性可以改变列表前的符号 有序列表

  <ol>
      <li></li>
  </ol>

7.img标签

img标签是图片标签,用来显示图片;src属性可以设置图片的路径;width可以设置图片的宽度;height可以设置图片的高度

1.在JavaSE中,分为相对路径和绝对路径

相对路径:从工程名开始算

绝对路径:盘符:/目录/文件名

2.在web中路径分为相对路径和绝对路径

相对路径

 .     表示当前文件所在目录

..     表示当前文件所在目录的上一级目录

文件名  表示当前文件所在目录的文件,相当于./文件名(./可以省略)

绝对路径:

格式是:http://ip:port/工程名/资源路径

<img src="../imgs/1.jpg " width="100" height="100" border="1"/ alt="图片找不到">

7.表格标签

table 是表格标签

1.普通表格

border:设置表格标签 
width:设置表格宽度
height:设置表格高度
align 设置表格相对于页面的对齐方式
cellspacing:设置单元格间距

tr 是行标签

th 是表头标签

td 是单元格标签

b 是加粗标签

align 设置单元格文本对齐方式
<table border="1" width="300" height="300">
    <tr>
        <td></td>
        <td></td>    
    </tr>
    <tr>
        <td></td>
        <td></td>    
    </tr>

</table>

2.跨行跨列表格

colspan 属性设置跨列

rowspan 属性设置跨行

<table border="1" width="300" height="300">
    <tr>
        <td colspan="2">1</td>
        <td>3</td>    
    </tr>
    <tr>
        <td rowspan="5">4</td>
        <td>5</td>    
    </tr>

</table>

8.iframe框架标签(内嵌窗口)

iframe标签可以在html页面上打开一个小窗口,去加载一个单独的页面

iframea标签组合使用步骤:    
    1.在iframe标签中使用name属性定义一个名称
    2.在a标签的target属性上设置iframename属性值
<iframe src="xxx.html" width="400" height="300" name="abc"></frame>
<ul>
    <li> <a herf="xxx.html" target="abc">将表单1展示在iframe那个窗口中 </a></li>
</ul>

9.表单标签

表单就是html页面中,用来收集用户信息的所有元素集合,然后把这些信息发送给服务器。

基本用法:

<form></form>标签就是表单
    input type=text      是文本输入框 value设置默认值显示内容
    input type=password  是密码输入框(输入的时候默认隐藏) value设置默认值显示内容
    input type=radio     是单选框  name属性可以对其分组 一个组的只能选一个 checked="checked"表示默认选中
    input type=checkbox  是复选框
    input type=reset     是重置按钮 value属性修改按钮上的文本
    input type=submit    是提交按钮 value属性修改按钮上的文本
    input type=button    是按钮  value属性修改按钮上的文本
    input type=file      是文件上传域
    
    <select></select>是下拉列表框
    <option></option>标签是下拉列表中的选项 selected="selected"设置默认选中
    
    <textarea></textarea>是多行文本输入框(起始标签和结束标签里的内容是默认值)
        rows 属性值设置可以显示几行的高度
        cols 属性设置每行可以显示几个字符宽度            

把表单放在表格里面就可以实现表单格式整齐

form 是表单标签
    action属性设置提交的服务器地址
    method属性设置提交的方式GET(默认值)或POST
    
表单提交的时候,数据没有发给服务器的三种情况:
    1.表单项没有name属性值
    2.单选、复选(下拉列表中的option标签)都需要添加value属性,以便于发送给服务器
    3.表单项不在提交的form标签中

GET请求的特点是:
    1.浏览器地址栏中的地址是:action属性+?+请求参数
        请求参数的格式:name=value&name=value
    2.不安全
    3.它有数据长度的限制

POST请求的特点:
    1.浏览器中只有action的属性值
    2.相对于GET请求更安全
    3.理论上没有数据长度的限制
<form action="http://www.baidu.com" method="">
    <h1 align="center">用户注册</h1>
    用户名称:<input type="text" value="默认值"/><br/>
    用户密码:<input type="password" value="abc"/><br/>
    确认密码:<input type="password" value="abc"/><br/>
    性别:<input type="radio" name="sex" checked="checked"/><input type="radio" name="sex"/><br/>
    兴趣爱好:<input type="checkbox" checked="checked"/><br/>java<input type="checkbox"/>javascript<input type="checkbox"/>c++</br
    国籍:<select>
            <option>---请选择国籍---</option>
            <option selected="selected">中国</option>
            <option>美国</option>
        </select></br>
    自我评价:<textarea rows="10" cols="20">在这设置默认值</textarea></br>
    重置:<input type="reset" value="重置"/></br>
    提交:<input type="submit" value="提交"/></br>
    按钮:<input type="button" value="按钮"/>
</form>

10.其他标签

<div></div>标签,默认独占一行
<span></span>它的长度是封装数据的长度
<p></p>段落标签 默认会在段落的上方或者下方各空出一行来(如果已有就不再空)